|
|
@@ -1,5 +1,6 @@
|
|
|
-import { HTMLAttributes } from "react"
|
|
|
+import { HTMLAttributes, useState, useEffect } from "react"
|
|
|
import { useAppTranslation } from "@/i18n/TranslationContext"
|
|
|
+import { vscode } from "@/utils/vscode"
|
|
|
import { SquareTerminal } from "lucide-react"
|
|
|
import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
|
|
|
|
|
|
@@ -50,10 +51,31 @@ export const TerminalSettings = ({
|
|
|
className,
|
|
|
...props
|
|
|
}: TerminalSettingsProps) => {
|
|
|
+ const [inheritEnv, setInheritEnv] = useState<boolean>(true)
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ // Get initial value from VSCode configuration
|
|
|
+ vscode.postMessage({ type: "getVSCodeSetting", setting: "terminal.integrated.inheritEnv" })
|
|
|
+ }, [])
|
|
|
+ useEffect(() => {
|
|
|
+ const handler = (event: MessageEvent<{ type: string; setting?: string; value?: boolean; error?: string }>) => {
|
|
|
+ const message = event.data
|
|
|
+ if (message.type === "vsCodeSetting" && message.setting === "terminal.integrated.inheritEnv") {
|
|
|
+ if (message.error) {
|
|
|
+ console.error("Failed to get terminal setting:", message.error)
|
|
|
+ } else {
|
|
|
+ setInheritEnv(message.value ?? true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.addEventListener("message", handler)
|
|
|
+ return () => window.removeEventListener("message", handler)
|
|
|
+ }, [])
|
|
|
+
|
|
|
const { t } = useAppTranslation()
|
|
|
|
|
|
return (
|
|
|
- <div className={cn("flex flex-col gap-2", className)} {...props}>
|
|
|
+ <div className={cn("flex flex-col gap-0", className)} {...props}>
|
|
|
<SectionHeader>
|
|
|
<div className="flex items-center gap-2">
|
|
|
<SquareTerminal className="w-4" />
|
|
|
@@ -62,149 +84,212 @@ export const TerminalSettings = ({
|
|
|
</SectionHeader>
|
|
|
|
|
|
<Section>
|
|
|
- <div>
|
|
|
- <label className="block font-medium mb-1">{t("settings:terminal.outputLineLimit.label")}</label>
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- <Slider
|
|
|
- min={100}
|
|
|
- max={5000}
|
|
|
- step={100}
|
|
|
- value={[terminalOutputLineLimit ?? 500]}
|
|
|
- onValueChange={([value]) => setCachedStateField("terminalOutputLineLimit", value)}
|
|
|
- data-testid="terminal-output-limit-slider"
|
|
|
- />
|
|
|
- <span className="w-10">{terminalOutputLineLimit ?? 500}</span>
|
|
|
- </div>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.outputLineLimit.description")}
|
|
|
+ {/* Basic Settings */}
|
|
|
+ <div className="flex flex-col gap-3">
|
|
|
+ <div className="flex items-center gap-4 font-bold">
|
|
|
+ <span className="codicon codicon-settings-gear" />
|
|
|
+ <div>{t("settings:terminal.basic.label")}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalCompressProgressBar ?? true}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalCompressProgressBar", e.target.checked)}
|
|
|
- data-testid="terminal-compress-progress-bar-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.compressProgressBar.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.compressProgressBar.description")}
|
|
|
+ <div className="pl-3 border-vscode-button-background">
|
|
|
+ <div>
|
|
|
+ <label className="block font-medium mb-1">
|
|
|
+ {t("settings:terminal.outputLineLimit.label")}
|
|
|
+ </label>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Slider
|
|
|
+ min={100}
|
|
|
+ max={5000}
|
|
|
+ step={100}
|
|
|
+ value={[terminalOutputLineLimit ?? 500]}
|
|
|
+ onValueChange={([value]) => setCachedStateField("terminalOutputLineLimit", value)}
|
|
|
+ data-testid="terminal-output-limit-slider"
|
|
|
+ />
|
|
|
+ <span className="w-10">{terminalOutputLineLimit ?? 500}</span>
|
|
|
+ </div>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.outputLineLimit.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalCompressProgressBar ?? true}
|
|
|
+ onChange={(e: any) =>
|
|
|
+ setCachedStateField("terminalCompressProgressBar", e.target.checked)
|
|
|
+ }
|
|
|
+ data-testid="terminal-compress-progress-bar-checkbox">
|
|
|
+ <span className="font-medium">{t("settings:terminal.compressProgressBar.label")}</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.compressProgressBar.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div>
|
|
|
- <label className="block font-medium mb-1">
|
|
|
- {t("settings:terminal.shellIntegrationTimeout.label")}
|
|
|
- </label>
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- <Slider
|
|
|
- min={5_000}
|
|
|
- max={60_000}
|
|
|
- step={1_000}
|
|
|
- value={[terminalShellIntegrationTimeout ?? 5_000]}
|
|
|
- onValueChange={([value]) =>
|
|
|
- setCachedStateField(
|
|
|
- "terminalShellIntegrationTimeout",
|
|
|
- Math.min(60_000, Math.max(5_000, value)),
|
|
|
- )
|
|
|
- }
|
|
|
- />
|
|
|
- <span className="w-10">{(terminalShellIntegrationTimeout ?? 5000) / 1000}s</span>
|
|
|
+ {/* Advanced Settings */}
|
|
|
+ <div className="flex flex-col gap-3 mt-6">
|
|
|
+ <div className="flex items-center gap-4 font-bold">
|
|
|
+ <span className="codicon codicon-tools" />
|
|
|
+ <div>{t("settings:terminal.advanced.label")}</div>
|
|
|
</div>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.shellIntegrationTimeout.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <p className="text-vscode-descriptionForeground text-sm mt-0">
|
|
|
+ {t("settings:terminal.advanced.description")}
|
|
|
+ </p>
|
|
|
+ <div className="pl-3 border-vscode-button-background">
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={inheritEnv}
|
|
|
+ onChange={(e: any) => {
|
|
|
+ setInheritEnv(e.target.checked)
|
|
|
+ vscode.postMessage({
|
|
|
+ type: "updateVSCodeSetting",
|
|
|
+ setting: "terminal.integrated.inheritEnv",
|
|
|
+ value: e.target.checked,
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ data-testid="terminal-inherit-env-checkbox">
|
|
|
+ <span className="font-medium">{t("settings:terminal.inheritEnv.label")}</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.inheritEnv.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalShellIntegrationDisabled ?? false}
|
|
|
- onChange={(e: any) =>
|
|
|
- setCachedStateField("terminalShellIntegrationDisabled", e.target.checked)
|
|
|
- }>
|
|
|
- <span className="font-medium">{t("settings:terminal.shellIntegrationDisabled.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.shellIntegrationDisabled.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalShellIntegrationDisabled ?? false}
|
|
|
+ onChange={(e: any) =>
|
|
|
+ setCachedStateField("terminalShellIntegrationDisabled", e.target.checked)
|
|
|
+ }>
|
|
|
+ <span className="font-medium">
|
|
|
+ {t("settings:terminal.shellIntegrationDisabled.label")}
|
|
|
+ </span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.shellIntegrationDisabled.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {!terminalShellIntegrationDisabled && (
|
|
|
+ <>
|
|
|
+ <div>
|
|
|
+ <label className="block font-medium mb-1">
|
|
|
+ {t("settings:terminal.shellIntegrationTimeout.label")}
|
|
|
+ </label>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Slider
|
|
|
+ min={1000}
|
|
|
+ max={60000}
|
|
|
+ step={1000}
|
|
|
+ value={[terminalShellIntegrationTimeout ?? 5000]}
|
|
|
+ onValueChange={([value]) =>
|
|
|
+ setCachedStateField(
|
|
|
+ "terminalShellIntegrationTimeout",
|
|
|
+ Math.min(60000, Math.max(1000, value)),
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <span className="w-10">
|
|
|
+ {(terminalShellIntegrationTimeout ?? 5000) / 1000}s
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.shellIntegrationTimeout.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <label className="block font-medium mb-1">{t("settings:terminal.commandDelay.label")}</label>
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- <Slider
|
|
|
- min={0}
|
|
|
- max={1000}
|
|
|
- step={10}
|
|
|
- value={[terminalCommandDelay ?? 0]}
|
|
|
- onValueChange={([value]) =>
|
|
|
- setCachedStateField("terminalCommandDelay", Math.min(1000, Math.max(0, value)))
|
|
|
- }
|
|
|
- />
|
|
|
- <span className="w-10">{terminalCommandDelay ?? 50}ms</span>
|
|
|
- </div>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.commandDelay.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <label className="block font-medium mb-1">
|
|
|
+ {t("settings:terminal.commandDelay.label")}
|
|
|
+ </label>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Slider
|
|
|
+ min={0}
|
|
|
+ max={1000}
|
|
|
+ step={10}
|
|
|
+ value={[terminalCommandDelay ?? 0]}
|
|
|
+ onValueChange={([value]) =>
|
|
|
+ setCachedStateField(
|
|
|
+ "terminalCommandDelay",
|
|
|
+ Math.min(1000, Math.max(0, value)),
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <span className="w-10">{terminalCommandDelay ?? 50}ms</span>
|
|
|
+ </div>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.commandDelay.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalPowershellCounter ?? false}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalPowershellCounter", e.target.checked)}
|
|
|
- data-testid="terminal-powershell-counter-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.powershellCounter.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.powershellCounter.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalPowershellCounter ?? false}
|
|
|
+ onChange={(e: any) =>
|
|
|
+ setCachedStateField("terminalPowershellCounter", e.target.checked)
|
|
|
+ }
|
|
|
+ data-testid="terminal-powershell-counter-checkbox">
|
|
|
+ <span className="font-medium">
|
|
|
+ {t("settings:terminal.powershellCounter.label")}
|
|
|
+ </span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.powershellCounter.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalZshClearEolMark ?? true}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalZshClearEolMark", e.target.checked)}
|
|
|
- data-testid="terminal-zsh-clear-eol-mark-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.zshClearEolMark.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.zshClearEolMark.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalZshClearEolMark ?? true}
|
|
|
+ onChange={(e: any) =>
|
|
|
+ setCachedStateField("terminalZshClearEolMark", e.target.checked)
|
|
|
+ }
|
|
|
+ data-testid="terminal-zsh-clear-eol-mark-checkbox">
|
|
|
+ <span className="font-medium">
|
|
|
+ {t("settings:terminal.zshClearEolMark.label")}
|
|
|
+ </span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.zshClearEolMark.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalZshOhMy ?? false}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalZshOhMy", e.target.checked)}
|
|
|
- data-testid="terminal-zsh-oh-my-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.zshOhMy.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.zshOhMy.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalZshOhMy ?? false}
|
|
|
+ onChange={(e: any) => setCachedStateField("terminalZshOhMy", e.target.checked)}
|
|
|
+ data-testid="terminal-zsh-oh-my-checkbox">
|
|
|
+ <span className="font-medium">{t("settings:terminal.zshOhMy.label")}</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.zshOhMy.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalZshP10k ?? false}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalZshP10k", e.target.checked)}
|
|
|
- data-testid="terminal-zsh-p10k-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.zshP10k.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.zshP10k.description")}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalZshP10k ?? false}
|
|
|
+ onChange={(e: any) => setCachedStateField("terminalZshP10k", e.target.checked)}
|
|
|
+ data-testid="terminal-zsh-p10k-checkbox">
|
|
|
+ <span className="font-medium">{t("settings:terminal.zshP10k.label")}</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.zshP10k.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={terminalZdotdir ?? false}
|
|
|
- onChange={(e: any) => setCachedStateField("terminalZdotdir", e.target.checked)}
|
|
|
- data-testid="terminal-zdotdir-checkbox">
|
|
|
- <span className="font-medium">{t("settings:terminal.zdotdir.label")}</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
- {t("settings:terminal.zdotdir.description")}
|
|
|
+ <div>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={terminalZdotdir ?? false}
|
|
|
+ onChange={(e: any) => setCachedStateField("terminalZdotdir", e.target.checked)}
|
|
|
+ data-testid="terminal-zdotdir-checkbox">
|
|
|
+ <span className="font-medium">{t("settings:terminal.zdotdir.label")}</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <div className="text-vscode-descriptionForeground text-sm mt-1">
|
|
|
+ {t("settings:terminal.zdotdir.description")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Section>
|