1505 lines
59 KiB
TypeScript
1505 lines
59 KiB
TypeScript
|
import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
||
|
|
import { AlertCircle, Import, Minus, Palette, Pencil, Plus, Trash2 } from "lucide-react";
|
||
|
|
import type {
|
||
|
|
AutocompleteHistoryScope,
|
||
|
|
CursorShape,
|
||
|
|
HostInfoBarTitleMode,
|
||
|
|
PasswordPromptAssistMode,
|
||
|
|
TerminalEmulationType,
|
||
|
|
TerminalSettings,
|
||
|
|
} from "../../../domain/models";
|
||
|
|
import { useI18n } from "../../../application/i18n/I18nProvider";
|
||
|
|
import { MAX_FONT_SIZE, MIN_FONT_SIZE, resolveTerminalFontFamilyId, type TerminalFont } from "../../../infrastructure/config/fonts";
|
||
|
|
import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
|
||
|
|
import { customThemeStore, useCustomThemes } from "../../../application/state/customThemeStore";
|
||
|
|
import { parseItermcolors } from "../../../infrastructure/parsers/itermcolorsParser";
|
||
|
|
import { cn } from "../../../lib/utils";
|
||
|
|
import { useDiscoveredShells } from "../../../lib/useDiscoveredShells";
|
||
|
|
import { parseShellArgs, formatShellArgs } from "../../../domain/shellArgs";
|
||
|
|
import { Button } from "../../ui/button";
|
||
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
|
||
|
|
import { Input } from "../../ui/input";
|
||
|
|
import { Select as ShadcnSelect, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select";
|
||
|
|
import { SectionHeader, Select, SettingsAnchor, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
|
||
|
|
import { ThemeSelectModal } from "../ThemeSelectModal";
|
||
|
|
import { TerminalFontSelect } from "../TerminalFontSelect";
|
||
|
|
import { TerminalCjkFontSelect } from "../TerminalCjkFontSelect";
|
||
|
|
import { CustomThemeModal } from "../../terminal/CustomThemeModal";
|
||
|
|
import type { TerminalTheme } from "../../../domain/models";
|
||
|
|
import { resolveFollowedTerminalThemeId, resolveManualTerminalThemeId } from "../../../domain/terminalAppearance";
|
||
|
|
|
||
|
|
import { KeywordHighlightRulesEditor, ThemePreviewButton } from "./SettingsTerminalTabControls";
|
||
|
|
import { TerminalBehaviorSettings } from "./TerminalBehaviorSettings";
|
||
|
|
import {
|
||
|
|
TERMINAL_SIDE_PANEL_AUTO_OPEN_TABS,
|
||
|
|
type TerminalSidePanelAutoOpenTab,
|
||
|
|
} from "../../../domain/terminalSidePanelAutoOpen";
|
||
|
|
import {
|
||
|
|
TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MAX,
|
||
|
|
TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MIN,
|
||
|
|
TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MAX,
|
||
|
|
TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MIN,
|
||
|
|
TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MAX,
|
||
|
|
TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MIN,
|
||
|
|
} from "../../../domain/terminalInlineImages";
|
||
|
|
|
||
|
|
const FONT_WEIGHT_OPTIONS = [
|
||
|
|
{ value: "100", labelKey: "settings.terminal.font.weight.thin" },
|
||
|
|
{ value: "200", labelKey: "settings.terminal.font.weight.extraLight" },
|
||
|
|
{ value: "300", labelKey: "settings.terminal.font.weight.light" },
|
||
|
|
{ value: "400", labelKey: "settings.terminal.font.weight.normal" },
|
||
|
|
{ value: "500", labelKey: "settings.terminal.font.weight.medium" },
|
||
|
|
{ value: "600", labelKey: "settings.terminal.font.weight.semiBold" },
|
||
|
|
{ value: "700", labelKey: "settings.terminal.font.weight.bold" },
|
||
|
|
{ value: "800", labelKey: "settings.terminal.font.weight.extraBold" },
|
||
|
|
{ value: "900", labelKey: "settings.terminal.font.weight.black" },
|
||
|
|
];
|
||
|
|
|
||
|
|
function SettingsTerminalTab(props: {
|
||
|
|
terminalThemeId: string;
|
||
|
|
setTerminalThemeId: (id: string) => void;
|
||
|
|
resolvedTheme: "dark" | "light";
|
||
|
|
followAppTerminalTheme: boolean;
|
||
|
|
setFollowAppTerminalTheme: (value: boolean) => void;
|
||
|
|
terminalThemeDarkId: string;
|
||
|
|
setTerminalThemeDarkId: (id: string) => void;
|
||
|
|
terminalThemeLightId: string;
|
||
|
|
setTerminalThemeLightId: (id: string) => void;
|
||
|
|
lightUiThemeId: string;
|
||
|
|
darkUiThemeId: string;
|
||
|
|
terminalFontFamilyId: string;
|
||
|
|
setTerminalFontFamilyId: (id: string) => void;
|
||
|
|
terminalFontSize: number;
|
||
|
|
setTerminalFontSize: (size: number) => void;
|
||
|
|
terminalSettings: TerminalSettings;
|
||
|
|
updateTerminalSetting: <K extends keyof TerminalSettings>(
|
||
|
|
key: K,
|
||
|
|
value: TerminalSettings[K],
|
||
|
|
) => void;
|
||
|
|
terminalSidePanelAutoOpen: boolean;
|
||
|
|
setTerminalSidePanelAutoOpen: (enabled: boolean) => void;
|
||
|
|
terminalSidePanelAutoOpenTab: TerminalSidePanelAutoOpenTab;
|
||
|
|
setTerminalSidePanelAutoOpenTab: (tab: TerminalSidePanelAutoOpenTab) => void;
|
||
|
|
availableFonts: TerminalFont[];
|
||
|
|
workspaceFocusStyle: 'dim' | 'border';
|
||
|
|
setWorkspaceFocusStyle: (style: 'dim' | 'border') => void;
|
||
|
|
}) {
|
||
|
|
const {
|
||
|
|
terminalThemeId,
|
||
|
|
setTerminalThemeId,
|
||
|
|
resolvedTheme,
|
||
|
|
followAppTerminalTheme,
|
||
|
|
setFollowAppTerminalTheme,
|
||
|
|
terminalThemeDarkId,
|
||
|
|
setTerminalThemeDarkId,
|
||
|
|
terminalThemeLightId,
|
||
|
|
setTerminalThemeLightId,
|
||
|
|
lightUiThemeId,
|
||
|
|
darkUiThemeId,
|
||
|
|
terminalFontFamilyId,
|
||
|
|
setTerminalFontFamilyId,
|
||
|
|
terminalFontSize,
|
||
|
|
setTerminalFontSize,
|
||
|
|
terminalSettings,
|
||
|
|
updateTerminalSetting,
|
||
|
|
terminalSidePanelAutoOpen,
|
||
|
|
setTerminalSidePanelAutoOpen,
|
||
|
|
terminalSidePanelAutoOpenTab,
|
||
|
|
setTerminalSidePanelAutoOpenTab,
|
||
|
|
availableFonts,
|
||
|
|
workspaceFocusStyle,
|
||
|
|
setWorkspaceFocusStyle,
|
||
|
|
} = props;
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
// Local shell settings state
|
||
|
|
const [defaultShell, setDefaultShell] = useState<string>("");
|
||
|
|
const [shellValidation, setShellValidation] = useState<{ valid: boolean; message?: string } | null>(null);
|
||
|
|
const [dirValidation, setDirValidation] = useState<{ valid: boolean; message?: string } | null>(null);
|
||
|
|
|
||
|
|
const discoveredShells = useDiscoveredShells();
|
||
|
|
const [showCustomShellInput, setShowCustomShellInput] = useState(() => {
|
||
|
|
if (!terminalSettings.localShell) return false;
|
||
|
|
return !discoveredShells.some(s => s.id === terminalSettings.localShell);
|
||
|
|
});
|
||
|
|
const [customShellModalOpen, setCustomShellModalOpen] = useState(false);
|
||
|
|
const [customShellDraft, setCustomShellDraft] = useState("");
|
||
|
|
const [customArgsDraft, setCustomArgsDraft] = useState("");
|
||
|
|
|
||
|
|
// Update showCustomShellInput once discovered shells load
|
||
|
|
useEffect(() => {
|
||
|
|
if (!terminalSettings.localShell) return;
|
||
|
|
setShowCustomShellInput(!discoveredShells.some(s => s.id === terminalSettings.localShell));
|
||
|
|
}, [discoveredShells, terminalSettings.localShell]);
|
||
|
|
|
||
|
|
// Seed the drafts from current settings and open the custom-shell editor.
|
||
|
|
// Used both when picking "Custom…" and when re-editing an existing custom shell.
|
||
|
|
const openCustomShellModal = useCallback(() => {
|
||
|
|
setCustomShellDraft(terminalSettings.localShell || "");
|
||
|
|
setCustomArgsDraft(formatShellArgs(terminalSettings.localShellArgs ?? []));
|
||
|
|
setCustomShellModalOpen(true);
|
||
|
|
}, [terminalSettings.localShell, terminalSettings.localShellArgs]);
|
||
|
|
const [themeModalSlot, setThemeModalSlot] = useState<'dark' | 'light' | null>(null);
|
||
|
|
|
||
|
|
// Subscribe to custom theme changes so editing in-place triggers re-render
|
||
|
|
const customThemes = useCustomThemes();
|
||
|
|
|
||
|
|
const findTerminalTheme = useCallback((id: string) => (
|
||
|
|
TERMINAL_THEMES.find(t => t.id === id)
|
||
|
|
|| customThemes.find(t => t.id === id)
|
||
|
|
|| null
|
||
|
|
), [customThemes]);
|
||
|
|
|
||
|
|
const followedPreviewTheme = useMemo(() => {
|
||
|
|
const id = resolveFollowedTerminalThemeId({
|
||
|
|
resolvedTheme,
|
||
|
|
lightUiThemeId,
|
||
|
|
darkUiThemeId,
|
||
|
|
fallbackThemeId: terminalThemeId,
|
||
|
|
});
|
||
|
|
return findTerminalTheme(id) || findTerminalTheme(terminalThemeId) || TERMINAL_THEMES[0];
|
||
|
|
}, [darkUiThemeId, findTerminalTheme, lightUiThemeId, resolvedTheme, terminalThemeId]);
|
||
|
|
|
||
|
|
const darkPreviewTheme = useMemo(() => {
|
||
|
|
const id = resolveManualTerminalThemeId({
|
||
|
|
resolvedTheme: 'dark',
|
||
|
|
terminalThemeDarkId, terminalThemeLightId,
|
||
|
|
lightUiThemeId, darkUiThemeId, fallbackThemeId: terminalThemeId,
|
||
|
|
});
|
||
|
|
return findTerminalTheme(id) || findTerminalTheme(terminalThemeId) || TERMINAL_THEMES[0];
|
||
|
|
}, [darkUiThemeId, findTerminalTheme, lightUiThemeId, terminalThemeDarkId, terminalThemeId, terminalThemeLightId]);
|
||
|
|
|
||
|
|
const lightPreviewTheme = useMemo(() => {
|
||
|
|
const id = resolveManualTerminalThemeId({
|
||
|
|
resolvedTheme: 'light',
|
||
|
|
terminalThemeDarkId, terminalThemeLightId,
|
||
|
|
lightUiThemeId, darkUiThemeId, fallbackThemeId: terminalThemeId,
|
||
|
|
});
|
||
|
|
return findTerminalTheme(id) || findTerminalTheme(terminalThemeId) || TERMINAL_THEMES[0];
|
||
|
|
}, [darkUiThemeId, findTerminalTheme, lightUiThemeId, terminalThemeDarkId, terminalThemeId, terminalThemeLightId]);
|
||
|
|
|
||
|
|
const currentTheme = followAppTerminalTheme
|
||
|
|
? followedPreviewTheme
|
||
|
|
: resolvedTheme === 'dark'
|
||
|
|
? darkPreviewTheme
|
||
|
|
: lightPreviewTheme;
|
||
|
|
|
||
|
|
const setManualThemeForResolvedMode = useCallback((themeId: string) => {
|
||
|
|
if (resolvedTheme === 'dark') {
|
||
|
|
setTerminalThemeDarkId(themeId);
|
||
|
|
} else {
|
||
|
|
setTerminalThemeLightId(themeId);
|
||
|
|
}
|
||
|
|
setTerminalThemeId(themeId);
|
||
|
|
}, [resolvedTheme, setTerminalThemeDarkId, setTerminalThemeId, setTerminalThemeLightId]);
|
||
|
|
|
||
|
|
const fontWeightOptions = useMemo(() => (
|
||
|
|
FONT_WEIGHT_OPTIONS.map((option) => ({
|
||
|
|
value: option.value,
|
||
|
|
label: `${option.value} - ${t(option.labelKey)}`,
|
||
|
|
}))
|
||
|
|
), [t]);
|
||
|
|
|
||
|
|
const handleAutocompleteGhostTextChange = useCallback((enabled: boolean) => {
|
||
|
|
updateTerminalSetting("autocompleteGhostText", enabled);
|
||
|
|
if (enabled) {
|
||
|
|
updateTerminalSetting("autocompletePopupMenu", false);
|
||
|
|
}
|
||
|
|
}, [updateTerminalSetting]);
|
||
|
|
|
||
|
|
const handleAutocompletePopupMenuChange = useCallback((enabled: boolean) => {
|
||
|
|
updateTerminalSetting("autocompletePopupMenu", enabled);
|
||
|
|
if (enabled) {
|
||
|
|
updateTerminalSetting("autocompleteGhostText", false);
|
||
|
|
}
|
||
|
|
}, [updateTerminalSetting]);
|
||
|
|
|
||
|
|
// Import .itermcolors file
|
||
|
|
const importFileRef = useRef<HTMLInputElement>(null);
|
||
|
|
const handleImportItermcolors = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const file = e.target.files?.[0];
|
||
|
|
if (!file) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const name = file.name.replace(/\.(itermcolors|xml)$/i, '');
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = () => {
|
||
|
|
const xml = reader.result as string;
|
||
|
|
const parsed = parseItermcolors(xml, name);
|
||
|
|
if (parsed) {
|
||
|
|
customThemeStore.addTheme(parsed);
|
||
|
|
setManualThemeForResolvedMode(parsed.id);
|
||
|
|
} else {
|
||
|
|
console.error('[Settings] Failed to parse .itermcolors file:', file.name);
|
||
|
|
window.alert(t('terminal.customTheme.importError') || 'Failed to parse the selected file. Please ensure it is a valid .itermcolors XML file.');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
reader.onerror = () => {
|
||
|
|
console.error('[Settings] Failed to read file:', file.name, reader.error);
|
||
|
|
};
|
||
|
|
reader.readAsText(file);
|
||
|
|
e.target.value = '';
|
||
|
|
}, [setManualThemeForResolvedMode, t]);
|
||
|
|
|
||
|
|
// New custom theme modal
|
||
|
|
const [customThemeModalOpen, setCustomThemeModalOpen] = useState(false);
|
||
|
|
const [customThemeData, setCustomThemeData] = useState<TerminalTheme | null>(null);
|
||
|
|
const [isEditingTheme, setIsEditingTheme] = useState(false);
|
||
|
|
|
||
|
|
// Check if current theme is a custom theme
|
||
|
|
const isCustomTheme = useMemo(() => {
|
||
|
|
return currentTheme?.isCustom === true;
|
||
|
|
}, [currentTheme]);
|
||
|
|
|
||
|
|
const handleNewCustomTheme = useCallback(() => {
|
||
|
|
const base = currentTheme || TERMINAL_THEMES[0];
|
||
|
|
const newTheme: TerminalTheme = {
|
||
|
|
...base,
|
||
|
|
id: `custom-${Date.now()}`,
|
||
|
|
name: `${base.name} (Custom)`,
|
||
|
|
isCustom: true,
|
||
|
|
colors: { ...base.colors },
|
||
|
|
};
|
||
|
|
setCustomThemeData(newTheme);
|
||
|
|
setIsEditingTheme(false);
|
||
|
|
setCustomThemeModalOpen(true);
|
||
|
|
}, [currentTheme]);
|
||
|
|
|
||
|
|
const handleEditCustomTheme = useCallback(() => {
|
||
|
|
if (!currentTheme?.isCustom) return;
|
||
|
|
setCustomThemeData({ ...currentTheme, colors: { ...currentTheme.colors } });
|
||
|
|
setIsEditingTheme(true);
|
||
|
|
setCustomThemeModalOpen(true);
|
||
|
|
}, [currentTheme]);
|
||
|
|
|
||
|
|
const handleDeleteCustomTheme = useCallback(() => {
|
||
|
|
if (!currentTheme?.isCustom) return;
|
||
|
|
customThemeStore.deleteTheme(currentTheme.id);
|
||
|
|
setManualThemeForResolvedMode(followedPreviewTheme.id);
|
||
|
|
}, [currentTheme, followedPreviewTheme.id, setManualThemeForResolvedMode]);
|
||
|
|
|
||
|
|
// Fetch default shell on mount
|
||
|
|
useEffect(() => {
|
||
|
|
const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
|
||
|
|
if (bridge?.getDefaultShell) {
|
||
|
|
bridge.getDefaultShell().then((shell) => {
|
||
|
|
setDefaultShell(shell);
|
||
|
|
}).catch(() => {
|
||
|
|
// Ignore errors - might not be in Electron
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Validate shell path when it changes (only for custom paths, not discovered shell ids)
|
||
|
|
useEffect(() => {
|
||
|
|
const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
|
||
|
|
const shellPath = terminalSettings.localShell;
|
||
|
|
|
||
|
|
if (!shellPath) {
|
||
|
|
setShellValidation(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Skip validation for discovered shell ids — only validate custom paths
|
||
|
|
if (discoveredShells.some(s => s.id === shellPath)) {
|
||
|
|
setShellValidation(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!bridge?.validatePath) {
|
||
|
|
setShellValidation(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const timeoutId = setTimeout(() => {
|
||
|
|
bridge.validatePath(shellPath, 'file').then((result) => {
|
||
|
|
if (result.exists && result.isFile) {
|
||
|
|
setShellValidation({ valid: true });
|
||
|
|
} else if (result.exists && result.isDirectory) {
|
||
|
|
setShellValidation({ valid: false, message: t("settings.terminal.localShell.shell.isDirectory") });
|
||
|
|
} else {
|
||
|
|
setShellValidation({ valid: false, message: t("settings.terminal.localShell.shell.notFound") });
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
setShellValidation(null);
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
|
||
|
|
return () => clearTimeout(timeoutId);
|
||
|
|
}, [terminalSettings.localShell, discoveredShells, t]);
|
||
|
|
|
||
|
|
// Validate directory path when it changes
|
||
|
|
useEffect(() => {
|
||
|
|
const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
|
||
|
|
const dirPath = terminalSettings.localStartDir;
|
||
|
|
|
||
|
|
if (!dirPath) {
|
||
|
|
setDirValidation(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!bridge?.validatePath) {
|
||
|
|
setDirValidation(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const timeoutId = setTimeout(() => {
|
||
|
|
bridge.validatePath(dirPath, 'directory').then((result) => {
|
||
|
|
if (result.exists && result.isDirectory) {
|
||
|
|
setDirValidation({ valid: true });
|
||
|
|
} else if (result.exists && result.isFile) {
|
||
|
|
setDirValidation({ valid: false, message: t("settings.terminal.localShell.startDir.isFile") });
|
||
|
|
} else {
|
||
|
|
setDirValidation({ valid: false, message: t("settings.terminal.localShell.startDir.notFound") });
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
setDirValidation(null);
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
|
||
|
|
return () => clearTimeout(timeoutId);
|
||
|
|
}, [terminalSettings.localStartDir, t]);
|
||
|
|
|
||
|
|
const clampFontSize = useCallback((next: number) => {
|
||
|
|
const safe = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, next));
|
||
|
|
setTerminalFontSize(safe);
|
||
|
|
}, [setTerminalFontSize]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SettingsTabContent value="terminal">
|
||
|
|
<SectionHeader title={t("settings.terminal.section.theme")} />
|
||
|
|
<div className="rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-theme-follow-app"
|
||
|
|
label={t("settings.terminal.theme.followApp")}
|
||
|
|
description={t("settings.terminal.theme.followApp.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={followAppTerminalTheme}
|
||
|
|
onChange={setFollowAppTerminalTheme}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
{!followAppTerminalTheme && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div>
|
||
|
|
<div className="text-xs text-muted-foreground mb-1.5 px-1">
|
||
|
|
{t("settings.terminal.theme.darkTheme")}
|
||
|
|
</div>
|
||
|
|
<ThemePreviewButton
|
||
|
|
theme={darkPreviewTheme}
|
||
|
|
onClick={() => setThemeModalSlot('dark')}
|
||
|
|
buttonLabel={t("settings.terminal.theme.selectButton")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-xs text-muted-foreground mb-1.5 px-1">
|
||
|
|
{t("settings.terminal.theme.lightTheme")}
|
||
|
|
</div>
|
||
|
|
<ThemePreviewButton
|
||
|
|
theme={lightPreviewTheme}
|
||
|
|
onClick={() => setThemeModalSlot('light')}
|
||
|
|
buttonLabel={t("settings.terminal.theme.selectButton")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<ThemeSelectModal
|
||
|
|
open={themeModalSlot !== null}
|
||
|
|
onClose={() => setThemeModalSlot(null)}
|
||
|
|
selectedThemeId={themeModalSlot === 'dark' ? darkPreviewTheme.id : lightPreviewTheme.id}
|
||
|
|
onSelect={(id) => {
|
||
|
|
if (themeModalSlot === 'dark') {
|
||
|
|
setTerminalThemeDarkId(id);
|
||
|
|
} else if (themeModalSlot === 'light') {
|
||
|
|
setTerminalThemeLightId(id);
|
||
|
|
}
|
||
|
|
if (themeModalSlot === resolvedTheme) {
|
||
|
|
setTerminalThemeId(id);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
filterType={themeModalSlot === 'light' ? 'light' : 'dark'}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{!followAppTerminalTheme && (
|
||
|
|
<div className="flex items-center gap-2 -mt-1">
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="gap-1.5"
|
||
|
|
onClick={handleNewCustomTheme}
|
||
|
|
>
|
||
|
|
<Palette size={14} />
|
||
|
|
{t('terminal.customTheme.new')}
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="gap-1.5"
|
||
|
|
onClick={() => importFileRef.current?.click()}
|
||
|
|
>
|
||
|
|
<Import size={14} />
|
||
|
|
{t('terminal.customTheme.import')}
|
||
|
|
</Button>
|
||
|
|
{isCustomTheme && (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="gap-1.5"
|
||
|
|
onClick={handleEditCustomTheme}
|
||
|
|
>
|
||
|
|
<Pencil size={14} />
|
||
|
|
{t('common.edit')}
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="gap-1.5 text-destructive hover:text-destructive"
|
||
|
|
onClick={handleDeleteCustomTheme}
|
||
|
|
>
|
||
|
|
<Trash2 size={14} />
|
||
|
|
{t('common.delete')}
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<input
|
||
|
|
ref={importFileRef}
|
||
|
|
type="file"
|
||
|
|
accept=".itermcolors"
|
||
|
|
className="hidden"
|
||
|
|
onChange={handleImportItermcolors}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Custom Theme Modal */}
|
||
|
|
{customThemeData && (
|
||
|
|
<CustomThemeModal
|
||
|
|
open={customThemeModalOpen}
|
||
|
|
theme={customThemeData}
|
||
|
|
isNew={!isEditingTheme}
|
||
|
|
onSave={(theme) => {
|
||
|
|
if (isEditingTheme) {
|
||
|
|
customThemeStore.updateTheme(theme.id, theme);
|
||
|
|
} else {
|
||
|
|
customThemeStore.addTheme(theme);
|
||
|
|
}
|
||
|
|
setManualThemeForResolvedMode(theme.id);
|
||
|
|
setCustomThemeModalOpen(false);
|
||
|
|
setCustomThemeData(null);
|
||
|
|
}}
|
||
|
|
onDelete={isEditingTheme ? (themeId) => {
|
||
|
|
customThemeStore.deleteTheme(themeId);
|
||
|
|
setManualThemeForResolvedMode(followedPreviewTheme.id);
|
||
|
|
setCustomThemeModalOpen(false);
|
||
|
|
setCustomThemeData(null);
|
||
|
|
} : undefined}
|
||
|
|
onCancel={() => {
|
||
|
|
setCustomThemeModalOpen(false);
|
||
|
|
setCustomThemeData(null);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.font")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-family"
|
||
|
|
label={t("settings.terminal.font.family")}
|
||
|
|
description={t("settings.terminal.font.family.desc")}
|
||
|
|
>
|
||
|
|
<TerminalFontSelect
|
||
|
|
value={resolveTerminalFontFamilyId(
|
||
|
|
terminalFontFamilyId,
|
||
|
|
typeof navigator !== "undefined" ? navigator.platform : "",
|
||
|
|
)}
|
||
|
|
fonts={availableFonts}
|
||
|
|
onChange={(id) => setTerminalFontFamilyId(id)}
|
||
|
|
className="w-48"
|
||
|
|
ariaLabel={t("settings.terminal.font.family")}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingsAnchor anchorId="terminal-font-cjk">
|
||
|
|
<TerminalCjkFontSelect
|
||
|
|
label={t("settings.terminal.font.cjk")}
|
||
|
|
description={t("settings.terminal.font.cjk.desc")}
|
||
|
|
value={terminalSettings.fallbackFont ?? ""}
|
||
|
|
onChange={(next) => updateTerminalSetting("fallbackFont", next)}
|
||
|
|
/>
|
||
|
|
</SettingsAnchor>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-size"
|
||
|
|
label={t("settings.terminal.font.size")}
|
||
|
|
description={t("settings.terminal.font.size.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => clampFontSize(terminalFontSize - 1)}
|
||
|
|
disabled={terminalFontSize <= MIN_FONT_SIZE}
|
||
|
|
>
|
||
|
|
<Minus size={14} />
|
||
|
|
</Button>
|
||
|
|
<span className="text-sm font-mono w-10 text-center">{terminalFontSize}px</span>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => clampFontSize(terminalFontSize + 1)}
|
||
|
|
disabled={terminalFontSize >= MAX_FONT_SIZE}
|
||
|
|
>
|
||
|
|
<Plus size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-weight"
|
||
|
|
label={t("settings.terminal.font.weight")}
|
||
|
|
description={t("settings.terminal.font.weight.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={String(terminalSettings.fontWeight)}
|
||
|
|
options={fontWeightOptions}
|
||
|
|
onChange={(v) => updateTerminalSetting("fontWeight", parseInt(v))}
|
||
|
|
className="w-40"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-weight-bold"
|
||
|
|
label={t("settings.terminal.font.weightBold")}
|
||
|
|
description={t("settings.terminal.font.weightBold.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={String(terminalSettings.fontWeightBold)}
|
||
|
|
options={fontWeightOptions}
|
||
|
|
onChange={(v) => updateTerminalSetting("fontWeightBold", parseInt(v))}
|
||
|
|
className="w-40"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-smoothing"
|
||
|
|
label={t("settings.terminal.font.smoothing")}
|
||
|
|
description={t("settings.terminal.font.smoothing.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.fontSmoothing}
|
||
|
|
onChange={(v) => updateTerminalSetting("fontSmoothing", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-font-line-padding"
|
||
|
|
label={t("settings.terminal.font.linePadding")}
|
||
|
|
description={t("settings.terminal.font.linePadding.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min={0}
|
||
|
|
max={10}
|
||
|
|
step={1}
|
||
|
|
value={terminalSettings.linePadding}
|
||
|
|
onChange={(e) => updateTerminalSetting("linePadding", parseInt(e.target.value))}
|
||
|
|
className="w-24 accent-primary"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground w-6 text-center">{terminalSettings.linePadding}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow anchorId="terminal-emulation-type" label={t("settings.terminal.font.emulationType")}>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.terminalEmulationType}
|
||
|
|
options={[
|
||
|
|
{ value: "xterm-256color", label: "xterm-256color" },
|
||
|
|
{ value: "xterm-16color", label: "xterm-16color" },
|
||
|
|
{ value: "xterm", label: "xterm" },
|
||
|
|
]}
|
||
|
|
onChange={(v) =>
|
||
|
|
updateTerminalSetting("terminalEmulationType", v as TerminalEmulationType)
|
||
|
|
}
|
||
|
|
className="w-44"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.cursor")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow anchorId="terminal-cursor-style" label={t("settings.terminal.cursor.style")}>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.cursorShape}
|
||
|
|
options={[
|
||
|
|
{ value: "block", label: t("settings.terminal.cursor.style.block") },
|
||
|
|
{ value: "bar", label: t("settings.terminal.cursor.style.bar") },
|
||
|
|
{ value: "underline", label: t("settings.terminal.cursor.style.underline") },
|
||
|
|
]}
|
||
|
|
onChange={(v) => updateTerminalSetting("cursorShape", v as CursorShape)}
|
||
|
|
className="w-32"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow anchorId="terminal-cursor-blink" label={t("settings.terminal.cursor.blink")}>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.cursorBlink}
|
||
|
|
onChange={(v) => updateTerminalSetting("cursorBlink", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-cursor-highlight-line"
|
||
|
|
label={t("settings.terminal.cursor.highlightLine")}
|
||
|
|
description={t("settings.terminal.cursor.highlightLine.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.highlightCursorLine}
|
||
|
|
onChange={(v) => updateTerminalSetting("highlightCursorLine", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.keyboard")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-alt-as-meta"
|
||
|
|
label={t("settings.terminal.keyboard.altAsMeta")}
|
||
|
|
description={t("settings.terminal.keyboard.altAsMeta.desc")}
|
||
|
|
>
|
||
|
|
<Toggle checked={terminalSettings.altAsMeta} onChange={(v) => updateTerminalSetting("altAsMeta", v)} />
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-option-arrow-word-jump"
|
||
|
|
label={t("settings.terminal.keyboard.optionArrowWordJump")}
|
||
|
|
description={t("settings.terminal.keyboard.optionArrowWordJump.desc")}
|
||
|
|
>
|
||
|
|
<Toggle checked={terminalSettings.optionArrowWordJump} onChange={(v) => updateTerminalSetting("optionArrowWordJump", v)} />
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-kitty-protocol"
|
||
|
|
label={t("settings.terminal.keyboard.kittyProtocol")}
|
||
|
|
description={t("settings.terminal.keyboard.kittyProtocol.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.kittyKeyboardProtocolEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("kittyKeyboardProtocolEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.accessibility")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-min-contrast"
|
||
|
|
label={t("settings.terminal.accessibility.minimumContrastRatio")}
|
||
|
|
description={t("settings.terminal.accessibility.minimumContrastRatio.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min={1}
|
||
|
|
max={21}
|
||
|
|
step={1}
|
||
|
|
value={terminalSettings.minimumContrastRatio}
|
||
|
|
onChange={(e) =>
|
||
|
|
updateTerminalSetting("minimumContrastRatio", parseInt(e.target.value))
|
||
|
|
}
|
||
|
|
className="w-24 accent-primary"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground w-6 text-center">
|
||
|
|
{terminalSettings.minimumContrastRatio}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<TerminalBehaviorSettings
|
||
|
|
t={t}
|
||
|
|
terminalSettings={terminalSettings}
|
||
|
|
updateTerminalSetting={updateTerminalSetting}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.sidePanel")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-side-panel-auto-open"
|
||
|
|
label={t("settings.terminal.sidePanel.autoOpen")}
|
||
|
|
description={t("settings.terminal.sidePanel.autoOpen.desc")}
|
||
|
|
>
|
||
|
|
<Toggle checked={terminalSidePanelAutoOpen} onChange={setTerminalSidePanelAutoOpen} />
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.sidePanel.autoOpenPane")}
|
||
|
|
description={t("settings.terminal.sidePanel.autoOpenPane.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={terminalSidePanelAutoOpenTab}
|
||
|
|
options={TERMINAL_SIDE_PANEL_AUTO_OPEN_TABS.map((tab) => ({
|
||
|
|
value: tab,
|
||
|
|
label: t(`settings.terminal.sidePanel.pane.${tab}`),
|
||
|
|
}))}
|
||
|
|
onChange={(value) => setTerminalSidePanelAutoOpenTab(value as TerminalSidePanelAutoOpenTab)}
|
||
|
|
disabled={!terminalSidePanelAutoOpen}
|
||
|
|
className="w-36"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.keywordHighlight")} />
|
||
|
|
<SettingsAnchor anchorId="terminal-keyword-highlight" className="rounded-lg border bg-card p-4">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<span className="text-sm font-medium">
|
||
|
|
{t("settings.terminal.keywordHighlight.title")}
|
||
|
|
</span>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.keywordHighlightEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("keywordHighlightEnabled", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{terminalSettings.keywordHighlightEnabled && (
|
||
|
|
<KeywordHighlightRulesEditor
|
||
|
|
rules={terminalSettings.keywordHighlightRules}
|
||
|
|
onChange={(rules) => updateTerminalSetting("keywordHighlightRules", rules)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</SettingsAnchor>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.localShell")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-local-shell"
|
||
|
|
label={t("settings.terminal.localShell.shell")}
|
||
|
|
description={t("settings.terminal.localShell.shell.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-1 items-end">
|
||
|
|
<ShadcnSelect
|
||
|
|
value={
|
||
|
|
showCustomShellInput
|
||
|
|
? "__custom__"
|
||
|
|
: (terminalSettings.localShell || "__default__")
|
||
|
|
}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
if (value === "__custom__") {
|
||
|
|
openCustomShellModal();
|
||
|
|
} else if (value === "__default__") {
|
||
|
|
setShowCustomShellInput(false);
|
||
|
|
updateTerminalSetting("localShell", "");
|
||
|
|
// Custom args only apply to a custom path; clear them so a stale
|
||
|
|
// value can't leak into a discovered/default shell launch (#1221).
|
||
|
|
updateTerminalSetting("localShellArgs", []);
|
||
|
|
} else {
|
||
|
|
setShowCustomShellInput(false);
|
||
|
|
updateTerminalSetting("localShell", value);
|
||
|
|
updateTerminalSetting("localShellArgs", []);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-9 w-48 text-sm">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="__default__">
|
||
|
|
{t("settings.terminal.localShell.shell.default")}
|
||
|
|
{defaultShell ? ` (${defaultShell.split(/[/\\]/).pop()})` : ""}
|
||
|
|
</SelectItem>
|
||
|
|
{discoveredShells.map((shell) => (
|
||
|
|
<SelectItem key={shell.id} value={shell.id}>
|
||
|
|
{shell.name}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
<SelectItem value="__custom__">{t("settings.terminal.localShell.shell.custom")}</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</ShadcnSelect>
|
||
|
|
{showCustomShellInput && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={openCustomShellModal}
|
||
|
|
title={t("common.edit")}
|
||
|
|
className="flex items-center gap-1 text-xs text-muted-foreground max-w-48 hover:text-foreground"
|
||
|
|
>
|
||
|
|
<Pencil size={11} className="shrink-0" />
|
||
|
|
<span className="truncate">
|
||
|
|
{terminalSettings.localShell}
|
||
|
|
{terminalSettings.localShellArgs?.length ? ` ${formatShellArgs(terminalSettings.localShellArgs)}` : ""}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{!showCustomShellInput && defaultShell && !terminalSettings.localShell && (
|
||
|
|
<span className="text-xs text-muted-foreground">
|
||
|
|
{t("settings.terminal.localShell.shell.detected")}: {defaultShell}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.localShell.startDir")}
|
||
|
|
description={t("settings.terminal.localShell.startDir.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<Input
|
||
|
|
value={terminalSettings.localStartDir}
|
||
|
|
placeholder={t("settings.terminal.localShell.startDir.placeholder")}
|
||
|
|
onChange={(e) => updateTerminalSetting("localStartDir", e.target.value)}
|
||
|
|
className={cn(
|
||
|
|
"w-48",
|
||
|
|
dirValidation && !dirValidation.valid && "border-destructive focus-visible:ring-destructive"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
{dirValidation && !dirValidation.valid && dirValidation.message && (
|
||
|
|
<span className="text-xs text-destructive flex items-center gap-1">
|
||
|
|
<AlertCircle size={12} />
|
||
|
|
{dirValidation.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.connection")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-verify-host-keys"
|
||
|
|
label={t("settings.terminal.connection.verifyHostKeys")}
|
||
|
|
description={t("settings.terminal.connection.verifyHostKeys.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.verifyHostKeys}
|
||
|
|
onChange={(v) => updateTerminalSetting("verifyHostKeys", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-ssh-auto-reconnect"
|
||
|
|
label={t("settings.terminal.connection.sshAutoReconnectEnabled")}
|
||
|
|
description={t("settings.terminal.connection.sshAutoReconnectEnabled.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.sshAutoReconnectEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("sshAutoReconnectEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-keepalive-interval"
|
||
|
|
label={t("settings.terminal.connection.keepaliveInterval")}
|
||
|
|
description={t("settings.terminal.connection.keepaliveInterval.desc")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={0}
|
||
|
|
max={3600}
|
||
|
|
value={terminalSettings.keepaliveInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value) || 0;
|
||
|
|
if (val >= 0 && val <= 3600) {
|
||
|
|
updateTerminalSetting("keepaliveInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-24"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.connection.keepaliveCountMax")}
|
||
|
|
description={t("settings.terminal.connection.keepaliveCountMax.desc")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={1}
|
||
|
|
max={100}
|
||
|
|
value={terminalSettings.keepaliveCountMax}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value) || 1;
|
||
|
|
if (val >= 1 && val <= 100) {
|
||
|
|
updateTerminalSetting("keepaliveCountMax", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-24"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-x11-display"
|
||
|
|
label={t("settings.terminal.connection.x11Display")}
|
||
|
|
description={t("settings.terminal.connection.x11Display.desc")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
value={terminalSettings.x11Display}
|
||
|
|
onChange={(e) => updateTerminalSetting("x11Display", e.target.value)}
|
||
|
|
placeholder={t("settings.terminal.connection.x11Display.placeholder")}
|
||
|
|
className="w-48"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.serverStats")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.hostInfoBar.show")}
|
||
|
|
description={t("settings.terminal.hostInfoBar.show.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.showHostInfoBar}
|
||
|
|
onChange={(v) => updateTerminalSetting("showHostInfoBar", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
{terminalSettings.showHostInfoBar && (
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.hostInfoBar.titleMode")}
|
||
|
|
description={t("settings.terminal.hostInfoBar.titleMode.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.hostInfoBarTitleMode ?? "address"}
|
||
|
|
options={[
|
||
|
|
{ value: "address", label: t("settings.terminal.hostInfoBar.titleMode.address") },
|
||
|
|
{ value: "label", label: t("settings.terminal.hostInfoBar.titleMode.label") },
|
||
|
|
]}
|
||
|
|
onChange={(v) => updateTerminalSetting("hostInfoBarTitleMode", v as HostInfoBarTitleMode)}
|
||
|
|
className="w-44"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
)}
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-server-stats-show"
|
||
|
|
label={t("settings.terminal.serverStats.show")}
|
||
|
|
description={t("settings.terminal.serverStats.show.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.showServerStats}
|
||
|
|
onChange={(v) => updateTerminalSetting("showServerStats", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
{terminalSettings.showServerStats && (
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.serverStats.refreshInterval")}
|
||
|
|
description={t("settings.terminal.serverStats.refreshInterval.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={5}
|
||
|
|
max={300}
|
||
|
|
value={terminalSettings.serverStatsRefreshInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value) || 5;
|
||
|
|
if (val >= 5 && val <= 300) {
|
||
|
|
updateTerminalSetting("serverStatsRefreshInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.systemManager")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.systemManager.processRefreshInterval")}
|
||
|
|
description={t("settings.terminal.systemManager.processRefreshInterval.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={2}
|
||
|
|
max={60}
|
||
|
|
value={terminalSettings.systemManagerProcessRefreshInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10) || 3;
|
||
|
|
if (val >= 2 && val <= 60) {
|
||
|
|
updateTerminalSetting("systemManagerProcessRefreshInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.systemManager.tmuxRefreshInterval")}
|
||
|
|
description={t("settings.terminal.systemManager.tmuxRefreshInterval.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={2}
|
||
|
|
max={60}
|
||
|
|
value={terminalSettings.systemManagerTmuxRefreshInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10) || 3;
|
||
|
|
if (val >= 2 && val <= 60) {
|
||
|
|
updateTerminalSetting("systemManagerTmuxRefreshInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.systemManager.dockerListRefreshInterval")}
|
||
|
|
description={t("settings.terminal.systemManager.dockerListRefreshInterval.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={3}
|
||
|
|
max={120}
|
||
|
|
value={terminalSettings.systemManagerDockerListRefreshInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10) || 5;
|
||
|
|
if (val >= 3 && val <= 120) {
|
||
|
|
updateTerminalSetting("systemManagerDockerListRefreshInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.systemManager.dockerStatsRefreshInterval")}
|
||
|
|
description={t("settings.terminal.systemManager.dockerStatsRefreshInterval.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={2}
|
||
|
|
max={60}
|
||
|
|
value={terminalSettings.systemManagerDockerStatsRefreshInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10) || 3;
|
||
|
|
if (val >= 2 && val <= 60) {
|
||
|
|
updateTerminalSetting("systemManagerDockerStatsRefreshInterval", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.rendering")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-renderer"
|
||
|
|
label={t("settings.terminal.rendering.renderer")}
|
||
|
|
description={t("settings.terminal.rendering.renderer.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.rendererType}
|
||
|
|
options={[
|
||
|
|
{ value: "auto", label: t("settings.terminal.rendering.auto") },
|
||
|
|
{ value: "webgl", label: "WebGL" },
|
||
|
|
{ value: "dom", label: "DOM" },
|
||
|
|
]}
|
||
|
|
onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "dom")}
|
||
|
|
className="w-32"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernateHiddenTabs")}
|
||
|
|
description={t("settings.terminal.rendering.hibernateHiddenTabs.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.hibernateHiddenTabs}
|
||
|
|
onChange={(v) => updateTerminalSetting("hibernateHiddenTabs", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
{terminalSettings.hibernateHiddenTabs && (
|
||
|
|
<>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernateHiddenTabsDelay")}
|
||
|
|
description={t("settings.terminal.rendering.hibernateHiddenTabsDelay.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={5}
|
||
|
|
max={600}
|
||
|
|
value={terminalSettings.hibernateHiddenTabsDelaySec}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (!Number.isNaN(val) && val >= 5 && val <= 600) {
|
||
|
|
updateTerminalSetting("hibernateHiddenTabsDelaySec", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernateSkipAltScreen")}
|
||
|
|
description={t("settings.terminal.rendering.hibernateSkipAltScreen.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.hibernateSkipAltScreen}
|
||
|
|
onChange={(v) => updateTerminalSetting("hibernateSkipAltScreen", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernateKeepRendererCount")}
|
||
|
|
description={t("settings.terminal.rendering.hibernateKeepRendererCount.desc")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={0}
|
||
|
|
max={12}
|
||
|
|
value={terminalSettings.hibernateKeepRendererCount}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (!Number.isNaN(val) && val >= 0 && val <= 12) {
|
||
|
|
updateTerminalSetting("hibernateKeepRendererCount", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernateReplayChunkBytes")}
|
||
|
|
description={t("settings.terminal.rendering.hibernateReplayChunkBytes.desc")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={4096}
|
||
|
|
max={65536}
|
||
|
|
step={1024}
|
||
|
|
value={terminalSettings.hibernateReplayChunkBytes}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (!Number.isNaN(val) && val >= 4096 && val <= 65536) {
|
||
|
|
updateTerminalSetting("hibernateReplayChunkBytes", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-28"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.rendering.hibernatePreferWasmSerialize")}
|
||
|
|
description={t("settings.terminal.rendering.hibernatePreferWasmSerialize.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.hibernatePreferWasmSerialize}
|
||
|
|
onChange={(v) => updateTerminalSetting("hibernatePreferWasmSerialize", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.inlineImages")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-inline-images-enabled"
|
||
|
|
label={t("settings.terminal.inlineImages.enabled")}
|
||
|
|
description={t("settings.terminal.inlineImages.enabled.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.inlineImagesEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("inlineImagesEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
{terminalSettings.inlineImagesEnabled && (
|
||
|
|
<>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.kitty")}
|
||
|
|
description={t("settings.terminal.inlineImages.kitty.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.inlineImageKittyEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("inlineImageKittyEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.sixel")}
|
||
|
|
description={t("settings.terminal.inlineImages.sixel.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.inlineImageSixelEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("inlineImageSixelEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.iip")}
|
||
|
|
description={t("settings.terminal.inlineImages.iip.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.inlineImageIipEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("inlineImageIipEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.storageLimit")}
|
||
|
|
description={t("settings.terminal.inlineImages.storageLimit.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MIN}
|
||
|
|
max={TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MAX}
|
||
|
|
value={terminalSettings.inlineImageStorageLimitMb}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (
|
||
|
|
!Number.isNaN(val)
|
||
|
|
&& val >= TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MIN
|
||
|
|
&& val <= TERMINAL_INLINE_IMAGE_STORAGE_LIMIT_MB_MAX
|
||
|
|
) {
|
||
|
|
updateTerminalSetting("inlineImageStorageLimitMb", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.inlineImages.unit.mb")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.maxMegapixels")}
|
||
|
|
description={t("settings.terminal.inlineImages.maxMegapixels.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MIN}
|
||
|
|
max={TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MAX}
|
||
|
|
value={terminalSettings.inlineImageMaxMegapixels}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (
|
||
|
|
!Number.isNaN(val)
|
||
|
|
&& val >= TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MIN
|
||
|
|
&& val <= TERMINAL_INLINE_IMAGE_MAX_MEGAPIXELS_MAX
|
||
|
|
) {
|
||
|
|
updateTerminalSetting("inlineImageMaxMegapixels", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.inlineImages.unit.megapixels")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.inlineImages.sequenceLimit")}
|
||
|
|
description={t("settings.terminal.inlineImages.sequenceLimit.desc")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MIN}
|
||
|
|
max={TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MAX}
|
||
|
|
value={terminalSettings.inlineImageSequenceLimitMb}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseInt(e.target.value, 10);
|
||
|
|
if (
|
||
|
|
!Number.isNaN(val)
|
||
|
|
&& val >= TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MIN
|
||
|
|
&& val <= TERMINAL_INLINE_IMAGE_SEQUENCE_LIMIT_MB_MAX
|
||
|
|
) {
|
||
|
|
updateTerminalSetting("inlineImageSequenceLimitMb", val);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-20"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground">{t("settings.terminal.inlineImages.unit.mb")}</span>
|
||
|
|
</div>
|
||
|
|
</SettingRow>
|
||
|
|
{terminalSettings.hibernateHiddenTabs && (
|
||
|
|
<div className="py-3 text-xs text-muted-foreground">
|
||
|
|
{t("settings.terminal.inlineImages.hibernateNote")}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{/* Autocomplete */}
|
||
|
|
<SectionHeader title={t("settings.terminal.section.workspaceFocus")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-workspace-focus-style"
|
||
|
|
label={t("settings.terminal.workspaceFocus.style")}
|
||
|
|
description={t("settings.terminal.workspaceFocus.style.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={workspaceFocusStyle}
|
||
|
|
onChange={(v) => setWorkspaceFocusStyle(v as 'dim' | 'border')}
|
||
|
|
options={[
|
||
|
|
{ value: 'dim', label: t("settings.terminal.workspaceFocus.dim") },
|
||
|
|
{ value: 'border', label: t("settings.terminal.workspaceFocus.border") },
|
||
|
|
]}
|
||
|
|
className="w-40"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.autocomplete")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-autocomplete-enabled"
|
||
|
|
label={t("settings.terminal.autocomplete.enabled")}
|
||
|
|
description={t("settings.terminal.autocomplete.enabled.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.autocompleteEnabled}
|
||
|
|
onChange={(v) => updateTerminalSetting("autocompleteEnabled", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.autocomplete.ghostText")}
|
||
|
|
description={t("settings.terminal.autocomplete.ghostText.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.autocompleteGhostText}
|
||
|
|
onChange={handleAutocompleteGhostTextChange}
|
||
|
|
disabled={!terminalSettings.autocompleteEnabled}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.autocomplete.popupMenu")}
|
||
|
|
description={t("settings.terminal.autocomplete.popupMenu.desc")}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={terminalSettings.autocompletePopupMenu}
|
||
|
|
onChange={handleAutocompletePopupMenuChange}
|
||
|
|
disabled={!terminalSettings.autocompleteEnabled}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("settings.terminal.autocomplete.historyScope")}
|
||
|
|
description={t("settings.terminal.autocomplete.historyScope.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.autocompleteHistoryScope ?? "host"}
|
||
|
|
onChange={(v) =>
|
||
|
|
updateTerminalSetting(
|
||
|
|
"autocompleteHistoryScope",
|
||
|
|
v as AutocompleteHistoryScope,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
options={[
|
||
|
|
{
|
||
|
|
value: "host",
|
||
|
|
label: t("settings.terminal.autocomplete.historyScope.host"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "global",
|
||
|
|
label: t("settings.terminal.autocomplete.historyScope.global"),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
className="w-48"
|
||
|
|
disabled={!terminalSettings.autocompleteEnabled}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader title={t("settings.terminal.section.passwordPromptAssist")} />
|
||
|
|
<div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
|
||
|
|
<SettingRow
|
||
|
|
anchorId="terminal-password-prompt-assist"
|
||
|
|
label={t("settings.terminal.passwordPromptAssist.mode")}
|
||
|
|
description={t("settings.terminal.passwordPromptAssist.mode.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={terminalSettings.passwordPromptAssist ?? "hint"}
|
||
|
|
onChange={(v) =>
|
||
|
|
updateTerminalSetting("passwordPromptAssist", v as PasswordPromptAssistMode)
|
||
|
|
}
|
||
|
|
options={[
|
||
|
|
{ value: "off", label: t("settings.terminal.passwordPromptAssist.off") },
|
||
|
|
{ value: "hint", label: t("settings.terminal.passwordPromptAssist.hint") },
|
||
|
|
{ value: "picker", label: t("settings.terminal.passwordPromptAssist.picker") },
|
||
|
|
]}
|
||
|
|
className="w-48"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
{/* Custom Shell Modal */}
|
||
|
|
<Dialog open={customShellModalOpen} onOpenChange={setCustomShellModalOpen}>
|
||
|
|
<DialogContent className="sm:max-w-[480px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>{t("settings.terminal.localShell.shell.custom")}</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="space-y-4 py-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-sm font-medium">{t("settings.terminal.localShell.shell.customPath")}</label>
|
||
|
|
<Input
|
||
|
|
value={customShellDraft}
|
||
|
|
placeholder={t("settings.terminal.localShell.shell.placeholder")}
|
||
|
|
onChange={(e) => setCustomShellDraft(e.target.value)}
|
||
|
|
className="w-full"
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
{shellValidation && !shellValidation.valid && shellValidation.message && (
|
||
|
|
<span className="text-xs text-destructive flex items-center gap-1">
|
||
|
|
<AlertCircle size={12} />
|
||
|
|
{shellValidation.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{shellValidation?.valid && (
|
||
|
|
<span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
|
||
|
|
✓ {t("settings.terminal.localShell.shell.pathValid")}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-sm font-medium">{t("settings.terminal.localShell.shell.customArgs")}</label>
|
||
|
|
<Input
|
||
|
|
value={customArgsDraft}
|
||
|
|
placeholder={t("settings.terminal.localShell.shell.customArgs.placeholder")}
|
||
|
|
onChange={(e) => setCustomArgsDraft(e.target.value)}
|
||
|
|
className="w-full"
|
||
|
|
/>
|
||
|
|
<span className="text-xs text-muted-foreground">{t("settings.terminal.localShell.shell.customArgs.desc")}</span>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<label className="text-xs text-muted-foreground">{t("settings.terminal.localShell.shell.commonPaths")}</label>
|
||
|
|
<div className="flex flex-wrap gap-1.5">
|
||
|
|
{["/bin/bash", "/bin/zsh", "/usr/bin/fish", "/bin/sh", "powershell.exe", "pwsh.exe", "cmd.exe"].map((p) => (
|
||
|
|
<button
|
||
|
|
key={p}
|
||
|
|
type="button"
|
||
|
|
onClick={() => setCustomShellDraft(p)}
|
||
|
|
className="text-xs px-2 py-1 rounded-md border border-border bg-muted/50 hover:bg-muted transition-colors"
|
||
|
|
>
|
||
|
|
{p}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<DialogFooter>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setCustomShellModalOpen(false)}
|
||
|
|
className="px-3 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
|
||
|
|
>
|
||
|
|
{t("common.cancel")}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
updateTerminalSetting("localShell", customShellDraft);
|
||
|
|
updateTerminalSetting("localShellArgs", parseShellArgs(customArgsDraft));
|
||
|
|
setShowCustomShellInput(true);
|
||
|
|
setCustomShellModalOpen(false);
|
||
|
|
}}
|
||
|
|
disabled={!customShellDraft.trim()}
|
||
|
|
className="px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{t("common.save")}
|
||
|
|
</button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</SettingsTabContent>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(SettingsTerminalTab);
|