mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-29 14:45:24 +00:00
feat: redesign user host defaults system
This commit is contained in:
1 parent
3028ab1176
commit
a4a4d4f27b
144 files changed
+24609
-2555
No files matched your search
@@ -461,13 +461,11 @@
|
||||
"lineHeight": "Line Height",
|
||||
"lineHeightLabel": "Line Height",
|
||||
"linkClickBehaviorConfirm": "Show popup to open or copy",
|
||||
"linkClickBehaviorDefault": "Default (follow app setting)",
|
||||
"linkClickBehaviorDesc": "Controls what happens when you click a link in the terminal. Use 'Default' to follow the app-level setting.",
|
||||
"linkClickBehaviorDirect": "Open directly",
|
||||
"linkClickBehaviorLabel": "Link Click Behavior",
|
||||
"loadingHost": "Loading host...",
|
||||
"localEchoAuto": "Automatic",
|
||||
"localEchoDefault": "Use global setting",
|
||||
"localEchoDesc": "Predict safe printable keystrokes locally on slow connections. Password prompts and control input are never echoed.",
|
||||
"localEchoLabel": "Local Echo",
|
||||
"localEchoOff": "Off",
|
||||
@@ -512,8 +510,6 @@
|
||||
"themePreview": "Theme Preview",
|
||||
"useSSHTitleDesc": "Update the tab title from the shell's window title instead of the host name",
|
||||
"useSSHTitleLabel": "Use SSH Window Title",
|
||||
"useUserDefaults": "Use user defaults",
|
||||
"useUserTerminalDefaultsDesc": "Keep this host in step with the terminal defaults in your profile.",
|
||||
"enableTunnel": "Enable Tunnel",
|
||||
"enableFileManager": "Enable File Manager",
|
||||
"enableDocker": "Enable Docker",
|
||||
@@ -571,19 +567,6 @@
|
||||
"startRecording": "Start Recording",
|
||||
"stopRecording": "Stop Recording"
|
||||
},
|
||||
"terminalDefaults": {
|
||||
"clearAll": "Clear All",
|
||||
"description": "Set values that every host inherits unless it overrides them.",
|
||||
"dialogDescription": "These apply to hosts that leave a setting unset. Anything set on a host wins.",
|
||||
"inherit": "Inherit",
|
||||
"manage": "Manage",
|
||||
"off": "Off",
|
||||
"on": "On",
|
||||
"savedThemeLabel": "Apply Saved Theme",
|
||||
"savedThemePlaceholder": "Choose a saved theme",
|
||||
"title": "Connection Defaults",
|
||||
"apply": "Apply"
|
||||
},
|
||||
"keybindings": {
|
||||
"copy": "Copy selection",
|
||||
"paste": "Paste",
|
||||
|
||||
@@ -151,21 +151,24 @@
|
||||
"type": "boolean",
|
||||
"labelKey": "settings.admin.commandHistoryForNewHosts.label",
|
||||
"descriptionKey": "settings.admin.commandHistoryForNewHosts.description",
|
||||
"default": true
|
||||
"default": true,
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostTheme",
|
||||
"type": "custom",
|
||||
"component": "newHostTheme",
|
||||
"group": "settings.admin.group.newHosts",
|
||||
"default": "termix"
|
||||
"default": "termix",
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostFontFamily",
|
||||
"type": "custom",
|
||||
"component": "newHostFontFamily",
|
||||
"group": "settings.admin.group.newHosts",
|
||||
"default": "Caskaydia Cove Nerd Font Mono"
|
||||
"default": "Caskaydia Cove Nerd Font Mono",
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostFontSize",
|
||||
@@ -175,7 +178,8 @@
|
||||
"group": "settings.admin.group.newHosts",
|
||||
"min": 8,
|
||||
"max": 36,
|
||||
"default": 14
|
||||
"default": 14,
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostCursorStyle",
|
||||
@@ -196,14 +200,16 @@
|
||||
"value": "bar",
|
||||
"labelKey": "hosts.cursorStyleBar"
|
||||
}
|
||||
]
|
||||
],
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostCursorBlink",
|
||||
"type": "boolean",
|
||||
"labelKey": "settings.admin.newHostCursorBlink.label",
|
||||
"group": "settings.admin.group.newHosts",
|
||||
"default": true
|
||||
"default": true,
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "newHostAutoTmux",
|
||||
@@ -211,7 +217,8 @@
|
||||
"labelKey": "settings.admin.newHostAutoTmux.label",
|
||||
"descriptionKey": "settings.admin.newHostAutoTmux.description",
|
||||
"group": "settings.admin.group.newHosts",
|
||||
"default": false
|
||||
"default": false,
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "touchInput",
|
||||
@@ -399,15 +406,15 @@
|
||||
"type": "boolean",
|
||||
"labelKey": "settings.host.enableCommandHistory.label",
|
||||
"descriptionKey": "settings.host.enableCommandHistory.description",
|
||||
"default": true,
|
||||
"defaultFrom": "commandHistoryForNewHosts"
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"key": "inheritAppearance",
|
||||
"type": "boolean",
|
||||
"labelKey": "settings.host.inheritAppearance.label",
|
||||
"hidden": true,
|
||||
"default": true
|
||||
"default": true,
|
||||
"defaultable": false
|
||||
},
|
||||
{
|
||||
"key": "theme",
|
||||
@@ -415,7 +422,7 @@
|
||||
"labelKey": "settings.host.theme.label",
|
||||
"hidden": true,
|
||||
"default": "termix",
|
||||
"defaultFrom": "newHostTheme"
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "cursorBlink",
|
||||
@@ -423,7 +430,7 @@
|
||||
"labelKey": "settings.host.cursorBlink.label",
|
||||
"hidden": true,
|
||||
"default": true,
|
||||
"defaultFrom": "newHostCursorBlink"
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "cursorStyle",
|
||||
@@ -445,7 +452,7 @@
|
||||
"labelKey": "hosts.cursorStyleBar"
|
||||
}
|
||||
],
|
||||
"defaultFrom": "newHostCursorStyle"
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "fontSize",
|
||||
@@ -453,7 +460,7 @@
|
||||
"labelKey": "settings.host.fontSize.label",
|
||||
"hidden": true,
|
||||
"default": 14,
|
||||
"defaultFrom": "newHostFontSize"
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "fontFamily",
|
||||
@@ -461,28 +468,31 @@
|
||||
"labelKey": "settings.host.fontFamily.label",
|
||||
"hidden": true,
|
||||
"default": "Caskaydia Cove Nerd Font Mono",
|
||||
"defaultFrom": "newHostFontFamily"
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "scrollback",
|
||||
"type": "number",
|
||||
"labelKey": "settings.host.scrollback.label",
|
||||
"hidden": true,
|
||||
"default": 10000
|
||||
"default": 10000,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "letterSpacing",
|
||||
"type": "number",
|
||||
"labelKey": "settings.host.letterSpacing.label",
|
||||
"hidden": true,
|
||||
"default": 0
|
||||
"default": 0,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "lineHeight",
|
||||
"type": "number",
|
||||
"labelKey": "settings.host.lineHeight.label",
|
||||
"hidden": true,
|
||||
"default": 1
|
||||
"default": 1,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "bellStyle",
|
||||
@@ -507,34 +517,39 @@
|
||||
"value": "both",
|
||||
"labelKey": "hosts.bellStyleBoth"
|
||||
}
|
||||
]
|
||||
],
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "minimumContrastRatio",
|
||||
"type": "number",
|
||||
"labelKey": "settings.host.minimumContrastRatio.label",
|
||||
"hidden": true,
|
||||
"default": 1
|
||||
"default": 1,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "backgroundImage",
|
||||
"type": "string",
|
||||
"labelKey": "settings.host.backgroundImage.label",
|
||||
"hidden": true,
|
||||
"default": ""
|
||||
"default": "",
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "backgroundImageOpacity",
|
||||
"type": "number",
|
||||
"labelKey": "settings.host.backgroundImageOpacity.label",
|
||||
"hidden": true,
|
||||
"default": 0.15
|
||||
"default": 0.15,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "customThemeColors",
|
||||
"type": "json",
|
||||
"labelKey": "settings.host.customThemeColors.label",
|
||||
"hidden": true
|
||||
"hidden": true,
|
||||
"personal": true
|
||||
},
|
||||
{
|
||||
"key": "rightClickSelectsWord",
|
||||
@@ -614,8 +629,7 @@
|
||||
"type": "boolean",
|
||||
"labelKey": "settings.host.autoTmux.label",
|
||||
"hidden": true,
|
||||
"default": false,
|
||||
"defaultFrom": "newHostAutoTmux"
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"key": "useSSHTitle",
|
||||
@@ -642,12 +656,8 @@
|
||||
"type": "select",
|
||||
"labelKey": "settings.host.linkClickBehavior.label",
|
||||
"hidden": true,
|
||||
"default": "default",
|
||||
"default": "confirm",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"labelKey": "hosts.linkClickBehaviorDefault"
|
||||
},
|
||||
{
|
||||
"value": "confirm",
|
||||
"labelKey": "hosts.linkClickBehaviorConfirm"
|
||||
@@ -663,12 +673,8 @@
|
||||
"type": "select",
|
||||
"labelKey": "settings.host.localEcho.label",
|
||||
"hidden": true,
|
||||
"default": "default",
|
||||
"default": "auto",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"labelKey": "hosts.localEchoDefault"
|
||||
},
|
||||
{
|
||||
"value": "off",
|
||||
"labelKey": "hosts.localEchoOff"
|
||||
@@ -704,7 +710,8 @@
|
||||
"key": "terminalDefaults",
|
||||
"type": "custom",
|
||||
"component": "terminalDefaults",
|
||||
"default": {}
|
||||
"default": {},
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "customThemes",
|
||||
@@ -739,7 +746,8 @@
|
||||
"value": "on",
|
||||
"labelKey": "hosts.localEchoOn"
|
||||
}
|
||||
]
|
||||
],
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "linkClickBehavior",
|
||||
@@ -756,7 +764,8 @@
|
||||
"value": "direct",
|
||||
"labelKey": "hosts.linkClickBehaviorDirect"
|
||||
}
|
||||
]
|
||||
],
|
||||
"hidden": true
|
||||
},
|
||||
{
|
||||
"key": "macros",
|
||||
|
||||
@@ -10,11 +10,7 @@ import {
|
||||
} from "./images/image-storage-settings.js";
|
||||
import { DEFAULT_TIMEOUT_MINUTES } from "./session-manager.js";
|
||||
import {
|
||||
DEFAULT_APPEARANCE,
|
||||
NEW_HOST_ADMIN_KEYS,
|
||||
pickTerminalValues,
|
||||
readUserSettings,
|
||||
type NewHostTerminalDefaults,
|
||||
type TerminalUserSettings,
|
||||
} from "../shared/terminal-settings.js";
|
||||
|
||||
@@ -84,8 +80,6 @@ export interface ClientSettings {
|
||||
sessionPersistence: boolean;
|
||||
commandHistoryEnabled: boolean;
|
||||
touchInput: TouchInputSettings;
|
||||
/** What a new host's terminal starts with. */
|
||||
newHostDefaults: NewHostTerminalDefaults;
|
||||
/** The caller's own terminal settings. */
|
||||
user: TerminalUserSettings;
|
||||
}
|
||||
@@ -114,26 +108,6 @@ export async function readClientSettings(
|
||||
sessionPersistence: all[ADMIN_KEYS.sessionPersistence] !== false,
|
||||
commandHistoryEnabled: all[ADMIN_KEYS.commandHistoryEnabled] !== false,
|
||||
touchInput: normalizeTouchInputSettings(touch),
|
||||
newHostDefaults: readNewHostDefaults(all),
|
||||
user: readUserSettings(user),
|
||||
};
|
||||
}
|
||||
|
||||
/** The admin's new-host terminal defaults, typed, with the built-in ones under them. */
|
||||
export function readNewHostDefaults(
|
||||
admin: Record<string, unknown>,
|
||||
): NewHostTerminalDefaults {
|
||||
const byHostKey: Record<string, unknown> = {};
|
||||
for (const [adminKey, hostKey] of Object.entries(NEW_HOST_ADMIN_KEYS)) {
|
||||
byHostKey[hostKey] = admin[adminKey];
|
||||
}
|
||||
return {
|
||||
fontSize: DEFAULT_APPEARANCE.fontSize,
|
||||
fontFamily: DEFAULT_APPEARANCE.fontFamily,
|
||||
theme: DEFAULT_APPEARANCE.theme,
|
||||
cursorStyle: DEFAULT_APPEARANCE.cursorStyle,
|
||||
cursorBlink: DEFAULT_APPEARANCE.cursorBlink,
|
||||
autoTmux: false,
|
||||
...pickTerminalValues(byHostKey, Object.values(NEW_HOST_ADMIN_KEYS)),
|
||||
} as NewHostTerminalDefaults;
|
||||
}
|
||||
@@ -46,11 +46,6 @@ import {
|
||||
SendControlCodeEditor,
|
||||
SendTextEditor,
|
||||
} from "./lib/keybinding-editors";
|
||||
import { TerminalDefaultsSettings } from "./settings/TerminalDefaultsSettings";
|
||||
import {
|
||||
NewHostFontSetting,
|
||||
NewHostThemeSetting,
|
||||
} from "./settings/NewHostLookSettings";
|
||||
import { TerminalPreview } from "./look/TerminalPreview";
|
||||
import { installTerminalGlobalStyles } from "./look/terminal-global-styles";
|
||||
import {
|
||||
@@ -60,7 +55,6 @@ import {
|
||||
} from "./look/look-actions";
|
||||
import {
|
||||
invalidateTerminalClientSettings,
|
||||
loadTerminalClientSettings,
|
||||
resetTerminalClientSettings,
|
||||
} from "./terminal-settings";
|
||||
import { moveLocalTerminalPreferences } from "./settings/local-preferences-migration";
|
||||
@@ -142,6 +136,7 @@ export function activate(app: TermixApp): void {
|
||||
titleKey: "hosts.tabTerminal",
|
||||
icon: SquareTerminal,
|
||||
order: 10,
|
||||
defaults: true,
|
||||
component: HostTerminalSection,
|
||||
});
|
||||
|
||||
@@ -305,9 +300,6 @@ export function activate(app: TermixApp): void {
|
||||
app.registerAction("terminal.resolveTheme", (async (
|
||||
request: ResolveLookRequest & { hostId?: number | string } = {},
|
||||
) => {
|
||||
const settings = await loadTerminalClientSettings(app.api).catch(
|
||||
() => null,
|
||||
);
|
||||
let host: PluginHostRecord | null | undefined = request.host;
|
||||
if (!host && request.hostId !== undefined) {
|
||||
host =
|
||||
@@ -316,15 +308,12 @@ export function activate(app: TermixApp): void {
|
||||
(entry) => String(entry.id) === String(request.hostId),
|
||||
);
|
||||
}
|
||||
return resolveTerminalLook({ ...request, host }, settings?.user);
|
||||
return resolveTerminalLook({ ...request, host });
|
||||
}) as never);
|
||||
app.registerAction("terminal.themes", () => listTerminalThemes());
|
||||
|
||||
app.registerSettingsComponent("touchInput", TouchInputSettings);
|
||||
app.registerSettingsComponent("imageStorageTest", ImageStorageTest);
|
||||
app.registerSettingsComponent("terminalDefaults", TerminalDefaultsSettings);
|
||||
app.registerSettingsComponent("newHostTheme", NewHostThemeSetting);
|
||||
app.registerSettingsComponent("newHostFontFamily", NewHostFontSetting);
|
||||
|
||||
app.onSettingsChanged(() => invalidateTerminalClientSettings());
|
||||
if (!app.guest) void moveLocalTerminalPreferences(app);
|
||||
|
||||
@@ -10,7 +10,6 @@ import { resolveForHost } from "../terminal-settings";
|
||||
import type {
|
||||
CursorStyle,
|
||||
TerminalThemeColors,
|
||||
TerminalUserSettings,
|
||||
} from "../../shared/terminal-settings";
|
||||
|
||||
/**
|
||||
@@ -45,9 +44,8 @@ export interface ResolveLookRequest {
|
||||
|
||||
export function resolveTerminalLook(
|
||||
request: ResolveLookRequest,
|
||||
user: TerminalUserSettings | undefined,
|
||||
): ResolvedTerminalLook {
|
||||
const config = resolveForHost(request.host ?? null, user);
|
||||
const config = resolveForHost(request.host ?? null);
|
||||
const themeId = request.theme || config.theme;
|
||||
ensureTerminalFontsLoaded(config.fontFamily);
|
||||
return {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { toast } from "sonner";
|
||||
import {
|
||||
Button,
|
||||
FakeSwitch,
|
||||
HostDefaultBadge,
|
||||
Input,
|
||||
SectionCard,
|
||||
Select2,
|
||||
@@ -33,9 +34,6 @@ import {
|
||||
TERMINAL_FONT_ZOOM_MAX,
|
||||
} from "../look/terminal-font-zoom";
|
||||
import {
|
||||
APPEARANCE_KEYS,
|
||||
INHERIT_APPEARANCE_KEY,
|
||||
pickTerminalValues,
|
||||
readHostTerminalSettings,
|
||||
readUserSettings,
|
||||
type BackspaceMode,
|
||||
@@ -45,14 +43,10 @@ import {
|
||||
type HostTerminalSettings as HostTerminalValues,
|
||||
type SavedCustomTheme,
|
||||
} from "../../shared/terminal-settings";
|
||||
import {
|
||||
invalidateTerminalClientSettings,
|
||||
useTerminalClientSettings,
|
||||
} from "../terminal-settings";
|
||||
import { invalidateTerminalClientSettings } from "../terminal-settings";
|
||||
|
||||
const PLUGIN_ID = "ssh-terminal";
|
||||
const CUSTOM_FONT_OPTION = "__custom__";
|
||||
const APPEARANCE = new Set<string>(APPEARANCE_KEYS);
|
||||
|
||||
type HostPluginSettings = Record<string, Record<string, unknown>>;
|
||||
|
||||
@@ -64,10 +58,8 @@ type HostPluginSettings = Record<string, Record<string, unknown>>;
|
||||
export function HostTerminalSettings({
|
||||
form: editorForm,
|
||||
updateForm,
|
||||
host,
|
||||
}: Pick<HostEditorSectionProps, "form" | "setField" | "updateForm" | "host">) {
|
||||
const { t } = useTranslation();
|
||||
const client = useTerminalClientSettings();
|
||||
const userSettings = useSettings("user");
|
||||
// The preview ends when the editor section goes away.
|
||||
useEffect(() => () => setThemePreview(null), []);
|
||||
@@ -75,18 +67,8 @@ export function HostTerminalSettings({
|
||||
const stored = ((editorForm?.pluginSettings as HostPluginSettings)?.[
|
||||
PLUGIN_ID
|
||||
] ?? {}) as Record<string, unknown>;
|
||||
// A new host starts from the admin's new-host defaults.
|
||||
const seed = host ? {} : (client?.newHostDefaults ?? {});
|
||||
const own = readHostTerminalSettings({ ...seed, ...stored });
|
||||
const userDefaults = pickTerminalValues(
|
||||
client?.user.terminalDefaults ?? {},
|
||||
APPEARANCE_KEYS,
|
||||
);
|
||||
// While the host follows the user, show the look it will actually get.
|
||||
const form = {
|
||||
...own,
|
||||
...(own.inheritAppearance ? userDefaults : {}),
|
||||
} as HostTerminalValues;
|
||||
// The form holds what the host follows, so this is what it will look like.
|
||||
const form = readHostTerminalSettings(stored) as HostTerminalValues;
|
||||
|
||||
const writeValues = (values: Record<string, unknown>) =>
|
||||
updateForm((current) => {
|
||||
@@ -103,23 +85,7 @@ export function HostTerminalSettings({
|
||||
const setField = <K extends keyof HostTerminalValues>(
|
||||
key: K,
|
||||
value: HostTerminalValues[K],
|
||||
) =>
|
||||
writeValues({
|
||||
[key]: value,
|
||||
// Touching the look takes the host off the user's defaults.
|
||||
...(APPEARANCE.has(key) ? { [INHERIT_APPEARANCE_KEY]: false } : {}),
|
||||
});
|
||||
|
||||
const setInheritAppearance = (inherit: boolean) => {
|
||||
if (inherit) {
|
||||
writeValues({ [INHERIT_APPEARANCE_KEY]: true });
|
||||
return;
|
||||
}
|
||||
// Keep what was shown, so switching off does not change the look.
|
||||
const shown: Record<string, unknown> = {};
|
||||
for (const key of APPEARANCE_KEYS) shown[key] = form[key];
|
||||
writeValues({ ...shown, [INHERIT_APPEARANCE_KEY]: false });
|
||||
};
|
||||
) => writeValues({ [key]: value });
|
||||
|
||||
const [isCustomFont, setIsCustomFont] = useState(
|
||||
() => !TERMINAL_FONTS.some((f) => f.value === form.fontFamily),
|
||||
@@ -183,21 +149,7 @@ export function HostTerminalSettings({
|
||||
icon={<Palette className="size-3.5" />}
|
||||
>
|
||||
<div className="flex flex-col gap-4 py-3">
|
||||
<SettingRow
|
||||
label={t("hosts.useUserDefaults")}
|
||||
description={t("hosts.useUserTerminalDefaultsDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
checked={form.inheritAppearance}
|
||||
onChange={setInheritAppearance}
|
||||
/>
|
||||
</SettingRow>
|
||||
<fieldset
|
||||
disabled={form.inheritAppearance}
|
||||
className={
|
||||
form.inheritAppearance ? "contents opacity-60" : "contents"
|
||||
}
|
||||
>
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.themePreview")}
|
||||
@@ -215,8 +167,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.colorTheme")}
|
||||
<HostDefaultBadge settingKey="theme" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.theme}
|
||||
@@ -245,8 +198,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.fontFamilyLabel")}
|
||||
<HostDefaultBadge settingKey="fontFamily" />
|
||||
</label>
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
@@ -292,8 +246,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.fontSizeLabel")}
|
||||
<HostDefaultBadge settingKey="fontSize" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{form.fontSize}px
|
||||
@@ -308,8 +263,9 @@ export function HostTerminalSettings({
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.cursorStyleLabel")}
|
||||
<HostDefaultBadge settingKey="cursorStyle" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.cursorStyle}
|
||||
@@ -327,8 +283,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.letterSpacingPx")}
|
||||
<HostDefaultBadge settingKey="letterSpacing" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{form.letterSpacing}px
|
||||
@@ -344,8 +301,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.lineHeightLabel")}
|
||||
<HostDefaultBadge settingKey="lineHeight" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{form.lineHeight.toFixed(1)}
|
||||
@@ -360,8 +318,9 @@ export function HostTerminalSettings({
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.bellStyleLabel")}
|
||||
<HostDefaultBadge settingKey="bellStyle" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.bellStyle}
|
||||
@@ -378,8 +337,9 @@ export function HostTerminalSettings({
|
||||
</Select2>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.backspaceModeLabel")}
|
||||
<HostDefaultBadge settingKey="backspaceMode" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.backspaceMode}
|
||||
@@ -397,7 +357,7 @@ export function HostTerminalSettings({
|
||||
</Select2>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
{form.theme === "custom" && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
@@ -455,8 +415,9 @@ export function HostTerminalSettings({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.customThemeColors")}
|
||||
<HostDefaultBadge settingKey="customThemeColors" />
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
@@ -569,6 +530,7 @@ export function HostTerminalSettings({
|
||||
)}
|
||||
<SettingRow
|
||||
label={t("hosts.cursorBlinking")}
|
||||
defaultKey="cursorBlink"
|
||||
description={t("hosts.cursorBlinkingDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -578,6 +540,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.rightClickSelectsWordLabel")}
|
||||
defaultKey="rightClickSelectsWord"
|
||||
description={t("hosts.rightClickSelectsWordShortDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -587,6 +550,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.macOptionIsMetaLabel")}
|
||||
defaultKey="macOptionIsMeta"
|
||||
description={t("hosts.macOptionIsMetaShortDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -596,6 +560,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.syntaxHighlightingLabel")}
|
||||
defaultKey="syntaxHighlighting"
|
||||
description={t("hosts.syntaxHighlightingDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -633,6 +598,7 @@ export function HostTerminalSettings({
|
||||
).map(([key, labelKey, descKey]) => (
|
||||
<SettingRow
|
||||
key={key}
|
||||
defaultKey="syntaxHighlightingOptions"
|
||||
label={t(`hosts.${labelKey}`)}
|
||||
description={t(`hosts.${descKey}`)}
|
||||
>
|
||||
@@ -650,8 +616,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.backgroundImageLabel")}
|
||||
<HostDefaultBadge settingKey="backgroundImage" />
|
||||
</label>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{t("hosts.backgroundImageDesc")}
|
||||
@@ -667,8 +634,9 @@ export function HostTerminalSettings({
|
||||
{form.backgroundImage && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.backgroundImageOpacityLabel")}
|
||||
<HostDefaultBadge settingKey="backgroundImageOpacity" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{Math.round(form.backgroundImageOpacity * 100)}%
|
||||
@@ -693,8 +661,9 @@ export function HostTerminalSettings({
|
||||
<div className="flex flex-col gap-4 py-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.scrollbackBufferLabel")}
|
||||
<HostDefaultBadge settingKey="scrollback" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{form.scrollback.toLocaleString()}{" "}
|
||||
@@ -711,6 +680,7 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<SettingRow
|
||||
label={t("hosts.enableAutoTmux")}
|
||||
defaultKey="autoTmux"
|
||||
description={
|
||||
<>
|
||||
{t("hosts.enableAutoTmuxDesc")}{" "}
|
||||
@@ -732,6 +702,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.useSSHTitleLabel")}
|
||||
defaultKey="useSSHTitle"
|
||||
description={t("hosts.useSSHTitleDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -741,6 +712,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.enableAutoMosh")}
|
||||
defaultKey="autoMosh"
|
||||
description={t("hosts.enableAutoMoshDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -750,6 +722,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.passwordPromptAutoFillLabel")}
|
||||
defaultKey="passwordPromptAutoFill"
|
||||
description={t("hosts.passwordPromptAutoFillDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -759,6 +732,7 @@ export function HostTerminalSettings({
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={t("hosts.sudoPasswordAutoFillLabel")}
|
||||
defaultKey="sudoPasswordAutoFill"
|
||||
description={t("hosts.sudoPasswordAutoFillDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
@@ -767,20 +741,17 @@ export function HostTerminalSettings({
|
||||
/>
|
||||
</SettingRow>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.localEchoLabel")}
|
||||
<HostDefaultBadge settingKey="localEcho" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.localEcho}
|
||||
onChange={(e) =>
|
||||
setField(
|
||||
"localEcho",
|
||||
e.target.value as "default" | "off" | "auto" | "on",
|
||||
)
|
||||
setField("localEcho", e.target.value as "off" | "auto" | "on")
|
||||
}
|
||||
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="default">{t("hosts.localEchoDefault")}</option>
|
||||
<option value="off">{t("hosts.localEchoOff")}</option>
|
||||
<option value="auto">{t("hosts.localEchoAuto")}</option>
|
||||
<option value="on">{t("hosts.localEchoOn")}</option>
|
||||
@@ -798,22 +769,20 @@ export function HostTerminalSettings({
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.linkClickBehaviorLabel")}
|
||||
<HostDefaultBadge settingKey="linkClickBehavior" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.linkClickBehavior}
|
||||
onChange={(e) =>
|
||||
setField(
|
||||
"linkClickBehavior",
|
||||
e.target.value as "default" | "confirm" | "direct",
|
||||
e.target.value as "confirm" | "direct",
|
||||
)
|
||||
}
|
||||
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="default">
|
||||
{t("hosts.linkClickBehaviorDefault")}
|
||||
</option>
|
||||
<option value="confirm">
|
||||
{t("hosts.linkClickBehaviorConfirm")}
|
||||
</option>
|
||||
@@ -827,8 +796,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-border pt-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.fastScrollModifierLabel")}
|
||||
<HostDefaultBadge settingKey="fastScrollModifier" />
|
||||
</label>
|
||||
<Select2
|
||||
value={form.fastScrollModifier}
|
||||
@@ -849,8 +819,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.fastScrollSensitivityLabel")}
|
||||
<HostDefaultBadge settingKey="fastScrollSensitivity" />
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||||
{form.fastScrollSensitivity}
|
||||
@@ -867,8 +838,9 @@ export function HostTerminalSettings({
|
||||
</div>
|
||||
{form.autoMosh && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
<label className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.moshCommandLabel")}
|
||||
<HostDefaultBadge settingKey="moshCommand" />
|
||||
</label>
|
||||
<Input
|
||||
placeholder="mosh"
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import { SettingRow, Select2 } from "@termix/plugin-sdk/ui";
|
||||
import {
|
||||
useTranslation,
|
||||
type SettingsComponentProps,
|
||||
} from "@termix/plugin-sdk/frontend";
|
||||
import { TERMINAL_FONTS, TERMINAL_THEMES } from "../look/terminal-themes";
|
||||
import { DEFAULT_APPEARANCE } from "../../shared/terminal-settings";
|
||||
|
||||
const selectClass =
|
||||
"flex h-8 w-48 border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring";
|
||||
|
||||
/** Admin setting `newHostTheme`: the theme a new host starts with. */
|
||||
export function NewHostThemeSetting({
|
||||
values,
|
||||
setValue,
|
||||
running,
|
||||
}: SettingsComponentProps) {
|
||||
const { t } = useTranslation();
|
||||
const value =
|
||||
typeof values.newHostTheme === "string"
|
||||
? values.newHostTheme
|
||||
: DEFAULT_APPEARANCE.theme;
|
||||
return (
|
||||
<SettingRow
|
||||
label={t("settings.admin.newHostTheme.label")}
|
||||
description={t("settings.admin.newHostTheme.description")}
|
||||
>
|
||||
<Select2
|
||||
value={value}
|
||||
disabled={!running}
|
||||
onChange={(e) => setValue("newHostTheme", e.target.value)}
|
||||
className={selectClass}
|
||||
>
|
||||
{Object.entries(TERMINAL_THEMES)
|
||||
.filter(([key]) => key !== "termixDark" && key !== "termixLight")
|
||||
.map(([key, theme]) => (
|
||||
<option key={key} value={key}>
|
||||
{theme.name}
|
||||
</option>
|
||||
))}
|
||||
</Select2>
|
||||
</SettingRow>
|
||||
);
|
||||
}
|
||||
|
||||
/** Admin setting `newHostFontFamily`: the font a new host starts with. */
|
||||
export function NewHostFontSetting({
|
||||
values,
|
||||
setValue,
|
||||
running,
|
||||
}: SettingsComponentProps) {
|
||||
const { t } = useTranslation();
|
||||
const value =
|
||||
typeof values.newHostFontFamily === "string"
|
||||
? values.newHostFontFamily
|
||||
: DEFAULT_APPEARANCE.fontFamily;
|
||||
const known = TERMINAL_FONTS.some((font) => font.value === value);
|
||||
return (
|
||||
<SettingRow
|
||||
label={t("settings.admin.newHostFontFamily.label")}
|
||||
description={t("settings.admin.newHostFontFamily.description")}
|
||||
>
|
||||
<Select2
|
||||
value={value}
|
||||
disabled={!running}
|
||||
onChange={(e) => setValue("newHostFontFamily", e.target.value)}
|
||||
className={`${selectClass} font-mono`}
|
||||
>
|
||||
{!known && <option value={value}>{value}</option>}
|
||||
{TERMINAL_FONTS.map((font) => (
|
||||
<option key={font.value} value={font.value}>
|
||||
{font.label}
|
||||
</option>
|
||||
))}
|
||||
</Select2>
|
||||
</SettingRow>
|
||||
);
|
||||
}
|
||||
@@ -1,317 +0,0 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import type React from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
SettingRow,
|
||||
} from "@termix/plugin-sdk/ui";
|
||||
import {
|
||||
useTranslation,
|
||||
type SettingsComponentProps,
|
||||
} from "@termix/plugin-sdk/frontend";
|
||||
import {
|
||||
CURSOR_STYLES,
|
||||
TERMINAL_FONTS,
|
||||
TERMINAL_THEMES,
|
||||
} from "../look/terminal-themes";
|
||||
import { fromTriState, toTriState, type TriState } from "./tri-state";
|
||||
import {
|
||||
readUserSettings,
|
||||
type TerminalDefaults,
|
||||
} from "../../shared/terminal-settings";
|
||||
|
||||
const inputClass =
|
||||
"h-8 w-full border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring";
|
||||
const labelClass =
|
||||
"text-[10px] font-bold uppercase tracking-widest text-muted-foreground";
|
||||
|
||||
function Field({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className={labelClass}>{label}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TriStateSelect({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value?: boolean;
|
||||
onChange: (value: boolean | undefined) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<select
|
||||
className="h-7 w-28 border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
value={toTriState(value)}
|
||||
onChange={(e) => onChange(fromTriState(e.target.value as TriState))}
|
||||
>
|
||||
<option value="inherit">{t("terminalDefaults.inherit")}</option>
|
||||
<option value="on">{t("terminalDefaults.on")}</option>
|
||||
<option value="off">{t("terminalDefaults.off")}</option>
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The user's terminal defaults (the `terminalDefaults` user setting): the
|
||||
* look every host that follows the user starts from. Applied to the form,
|
||||
* saved with the rest of the section.
|
||||
*/
|
||||
export function TerminalDefaultsSettings({
|
||||
values,
|
||||
setValue,
|
||||
running,
|
||||
}: SettingsComponentProps) {
|
||||
const { t } = useTranslation();
|
||||
const saved = useMemo(() => readUserSettings(values), [values]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [terminal, setTerminal] = useState<TerminalDefaults>({});
|
||||
|
||||
const configuredCount = Object.values(saved.terminalDefaults).filter(
|
||||
(value) => value !== undefined,
|
||||
).length;
|
||||
|
||||
const openDialog = () => {
|
||||
setTerminal(saved.terminalDefaults);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const updateTerminal = <K extends keyof TerminalDefaults>(
|
||||
key: K,
|
||||
value: TerminalDefaults[K],
|
||||
) => setTerminal((current) => ({ ...current, [key]: value }));
|
||||
|
||||
const applySavedTheme = (id: string) => {
|
||||
const theme = saved.customThemes.find((entry) => entry.id === id);
|
||||
if (!theme) return;
|
||||
setTerminal((current) => ({
|
||||
...current,
|
||||
theme: "custom",
|
||||
customThemeColors: { ...theme.colors },
|
||||
}));
|
||||
};
|
||||
|
||||
const apply = () => {
|
||||
const cleaned = Object.fromEntries(
|
||||
Object.entries(terminal).filter(([, value]) => value !== undefined),
|
||||
);
|
||||
setValue("terminalDefaults", cleaned);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const inheritLabel = t("terminalDefaults.inherit");
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingRow
|
||||
label={t("terminalDefaults.title")}
|
||||
description={t("terminalDefaults.description")}
|
||||
badge={configuredCount > 0 ? String(configuredCount) : undefined}
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!running}
|
||||
onClick={openDialog}
|
||||
>
|
||||
{t("terminalDefaults.manage")}
|
||||
</Button>
|
||||
</SettingRow>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-bold">
|
||||
{t("terminalDefaults.title")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs text-muted-foreground">
|
||||
{t("terminalDefaults.dialogDescription")}{" "}
|
||||
<a
|
||||
href="https://docs.termix.site/features/files-and-hosts/connection-defaults"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-accent-brand hover:underline"
|
||||
>
|
||||
{t("hosts.docsLink")}
|
||||
</a>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[55vh] overflow-y-auto pr-1">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<Field label={t("hosts.fontFamilyLabel")}>
|
||||
<select
|
||||
className={inputClass}
|
||||
value={terminal.fontFamily ?? ""}
|
||||
onChange={(e) =>
|
||||
updateTerminal("fontFamily", e.target.value || undefined)
|
||||
}
|
||||
>
|
||||
<option value="">{inheritLabel}</option>
|
||||
{TERMINAL_FONTS.map((font) => (
|
||||
<option key={font.value} value={font.value}>
|
||||
{font.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field label={t("hosts.colorTheme")}>
|
||||
<select
|
||||
className={inputClass}
|
||||
value={terminal.theme ?? ""}
|
||||
onChange={(e) =>
|
||||
updateTerminal("theme", e.target.value || undefined)
|
||||
}
|
||||
>
|
||||
<option value="">{inheritLabel}</option>
|
||||
{Object.entries(TERMINAL_THEMES)
|
||||
.filter(
|
||||
([key]) => key !== "termixDark" && key !== "termixLight",
|
||||
)
|
||||
.map(([key, theme]) => (
|
||||
<option key={key} value={key}>
|
||||
{theme.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{saved.customThemes.length > 0 && (
|
||||
<Field label={t("terminalDefaults.savedThemeLabel")}>
|
||||
<select
|
||||
className={inputClass}
|
||||
value=""
|
||||
onChange={(e) => applySavedTheme(e.target.value)}
|
||||
>
|
||||
<option value="">
|
||||
{t("terminalDefaults.savedThemePlaceholder")}
|
||||
</option>
|
||||
{saved.customThemes.map((theme) => (
|
||||
<option key={theme.id} value={theme.id}>
|
||||
{theme.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field label={t("hosts.fontSizeLabel")}>
|
||||
<input
|
||||
className={inputClass}
|
||||
type="number"
|
||||
min={8}
|
||||
max={32}
|
||||
value={terminal.fontSize ?? ""}
|
||||
placeholder={inheritLabel}
|
||||
onChange={(e) =>
|
||||
updateTerminal(
|
||||
"fontSize",
|
||||
e.target.value ? Number(e.target.value) : undefined,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label={t("hosts.lineHeightLabel")}>
|
||||
<input
|
||||
className={inputClass}
|
||||
type="number"
|
||||
min={0.8}
|
||||
max={2}
|
||||
step={0.05}
|
||||
value={terminal.lineHeight ?? ""}
|
||||
placeholder={inheritLabel}
|
||||
onChange={(e) =>
|
||||
updateTerminal(
|
||||
"lineHeight",
|
||||
e.target.value ? Number(e.target.value) : undefined,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label={t("hosts.cursorStyleLabel")}>
|
||||
<select
|
||||
className={inputClass}
|
||||
value={terminal.cursorStyle ?? ""}
|
||||
onChange={(e) =>
|
||||
updateTerminal(
|
||||
"cursorStyle",
|
||||
(e.target.value || undefined) as
|
||||
TerminalDefaults["cursorStyle"] | undefined,
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">{inheritLabel}</option>
|
||||
{CURSOR_STYLES.map((style) => (
|
||||
<option key={style.value} value={style.value}>
|
||||
{t(style.labelKey)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field label={t("hosts.scrollbackBufferLabel")}>
|
||||
<input
|
||||
className={inputClass}
|
||||
type="number"
|
||||
min={1000}
|
||||
max={100000}
|
||||
step={1000}
|
||||
value={terminal.scrollback ?? ""}
|
||||
placeholder={inheritLabel}
|
||||
onChange={(e) =>
|
||||
updateTerminal(
|
||||
"scrollback",
|
||||
e.target.value ? Number(e.target.value) : undefined,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<SettingRow
|
||||
label={t("hosts.cursorBlinking")}
|
||||
description={t("hosts.cursorBlinkingDesc")}
|
||||
>
|
||||
<TriStateSelect
|
||||
value={terminal.cursorBlink}
|
||||
onChange={(value) => updateTerminal("cursorBlink", value)}
|
||||
/>
|
||||
</SettingRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-2 pt-3 border-t border-border">
|
||||
<Button variant="ghost" size="sm" onClick={() => setTerminal({})}>
|
||||
{t("terminalDefaults.clearAll")}
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button size="sm" onClick={apply}>
|
||||
{t("terminalDefaults.apply")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
// Booleans have three states in the defaults UI: unset means the host decides.
|
||||
export type TriState = "inherit" | "on" | "off";
|
||||
|
||||
export function toTriState(value?: boolean): TriState {
|
||||
if (value === undefined) return "inherit";
|
||||
return value ? "on" : "off";
|
||||
}
|
||||
|
||||
export function fromTriState(value: TriState): boolean | undefined {
|
||||
if (value === "inherit") return undefined;
|
||||
return value === "on";
|
||||
}
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
} from "../shared/touch-input-settings";
|
||||
import {
|
||||
readUserSettings,
|
||||
type NewHostTerminalDefaults,
|
||||
type TerminalUserSettings,
|
||||
} from "../shared/terminal-settings";
|
||||
|
||||
@@ -16,7 +15,6 @@ export interface TerminalClientSettings {
|
||||
sessionPersistence: boolean;
|
||||
commandHistoryEnabled: boolean;
|
||||
touchInput: TouchInputSettings;
|
||||
newHostDefaults?: NewHostTerminalDefaults;
|
||||
user: TerminalUserSettings;
|
||||
}
|
||||
|
||||
|
||||
@@ -105,11 +105,9 @@ export function hostTerminalValues(
|
||||
|
||||
export function resolveForHost(
|
||||
host: object | null | undefined,
|
||||
user: TerminalUserSettings = DEFAULT_USER_SETTINGS,
|
||||
): ResolvedTerminalConfig {
|
||||
const resolved = resolveTerminalSettings(
|
||||
readHostTerminalSettings(hostTerminalValues(host)),
|
||||
user.terminalDefaults,
|
||||
);
|
||||
return {
|
||||
...resolved,
|
||||
@@ -126,7 +124,7 @@ export function useTerminalSettings(
|
||||
const ownKey = own ? JSON.stringify(own) : "";
|
||||
return useMemo(() => {
|
||||
const user = client?.user ?? DEFAULT_USER_SETTINGS;
|
||||
return { config: resolveForHost(host, user), user };
|
||||
return { config: resolveForHost(host), user };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ownKey, client]);
|
||||
}
|
||||
@@ -47,7 +47,7 @@ export type BackspaceMode = "normal" | "control-h";
|
||||
export type HostLocalEcho = "default" | "off" | "auto" | "on";
|
||||
export type HostLinkClickBehavior = "default" | "confirm" | "direct";
|
||||
|
||||
/** How a terminal looks. A host follows the user's defaults unless it opts out. */
|
||||
/** How a terminal looks. Each value follows the host defaults unless the host sets it. */
|
||||
export interface TerminalAppearance {
|
||||
theme: string;
|
||||
cursorBlink: boolean;
|
||||
@@ -64,7 +64,7 @@ export interface TerminalAppearance {
|
||||
customThemeColors: TerminalThemeColors | null;
|
||||
}
|
||||
|
||||
/** How a terminal behaves on one host. Always the host's own. */
|
||||
/** How a terminal behaves on one host. */
|
||||
export interface TerminalBehavior {
|
||||
rightClickSelectsWord: boolean;
|
||||
macOptionIsMeta: boolean;
|
||||
@@ -165,8 +165,8 @@ export const DEFAULT_BEHAVIOR: TerminalBehavior = {
|
||||
useSSHTitle: false,
|
||||
syntaxHighlighting: true,
|
||||
syntaxHighlightingOptions: DEFAULT_SYNTAX_HIGHLIGHTING,
|
||||
linkClickBehavior: "default",
|
||||
localEcho: "default",
|
||||
linkClickBehavior: "confirm",
|
||||
localEcho: "auto",
|
||||
passwordPromptAutoFill: true,
|
||||
sudoPasswordAutoFill: false,
|
||||
};
|
||||
@@ -177,9 +177,6 @@ export const DEFAULT_HOST_TERMINAL_SETTINGS: HostTerminalSettings = {
|
||||
inheritAppearance: true,
|
||||
};
|
||||
|
||||
/** The user's terminal defaults: any appearance key, unset ones inherit. */
|
||||
export type TerminalDefaults = Partial<TerminalAppearance>;
|
||||
|
||||
export interface SavedCustomTheme {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -188,7 +185,6 @@ export interface SavedCustomTheme {
|
||||
|
||||
/** The ssh-terminal user settings the terminal reads. */
|
||||
export interface TerminalUserSettings {
|
||||
terminalDefaults: TerminalDefaults;
|
||||
customThemes: SavedCustomTheme[];
|
||||
commandAutocomplete: boolean;
|
||||
localEcho: "off" | "auto" | "on";
|
||||
@@ -196,33 +192,12 @@ export interface TerminalUserSettings {
|
||||
}
|
||||
|
||||
export const DEFAULT_USER_SETTINGS: TerminalUserSettings = {
|
||||
terminalDefaults: {},
|
||||
customThemes: [],
|
||||
commandAutocomplete: false,
|
||||
localEcho: "auto",
|
||||
linkClickBehavior: "confirm",
|
||||
};
|
||||
|
||||
/** The admin's defaults for a new host's terminal. */
|
||||
export interface NewHostTerminalDefaults {
|
||||
fontSize: number;
|
||||
fontFamily: string;
|
||||
theme: string;
|
||||
cursorStyle: CursorStyle;
|
||||
cursorBlink: boolean;
|
||||
autoTmux: boolean;
|
||||
}
|
||||
|
||||
/** Admin field -> the host field it seeds (manifest defaultFrom). */
|
||||
export const NEW_HOST_ADMIN_KEYS = {
|
||||
newHostFontSize: "fontSize",
|
||||
newHostFontFamily: "fontFamily",
|
||||
newHostTheme: "theme",
|
||||
newHostCursorStyle: "cursorStyle",
|
||||
newHostCursorBlink: "cursorBlink",
|
||||
newHostAutoTmux: "autoTmux",
|
||||
} as const satisfies Record<string, keyof NewHostTerminalDefaults>;
|
||||
|
||||
const ENUMS: Record<string, readonly string[]> = {
|
||||
cursorStyle: ["block", "underline", "bar"],
|
||||
bellStyle: ["none", "sound", "visual", "both"],
|
||||
@@ -357,7 +332,6 @@ export function readUserSettings(
|
||||
values: Record<string, unknown> | null | undefined,
|
||||
): TerminalUserSettings {
|
||||
const source = values ?? {};
|
||||
const defaults = asObject(source.terminalDefaults);
|
||||
const themes = Array.isArray(source.customThemes)
|
||||
? source.customThemes
|
||||
: typeof source.customThemes === "string"
|
||||
@@ -371,10 +345,6 @@ export function readUserSettings(
|
||||
})()
|
||||
: [];
|
||||
return {
|
||||
terminalDefaults: pickTerminalValues(
|
||||
defaults,
|
||||
APPEARANCE_KEYS,
|
||||
) as TerminalDefaults,
|
||||
customThemes: themes.filter(
|
||||
(theme): theme is SavedCustomTheme =>
|
||||
isObject(theme) &&
|
||||
@@ -393,35 +363,25 @@ export function readUserSettings(
|
||||
}
|
||||
|
||||
/**
|
||||
* What a terminal on a host runs with: the defaults, then the user's
|
||||
* terminal defaults, then the host's own look when it does not follow the
|
||||
* user, then the host's behavior.
|
||||
* What a terminal on a host runs with: the host's values over the built-in
|
||||
* ones. The host's values already follow its host defaults, and for a host
|
||||
* shared with this user its look follows theirs.
|
||||
*/
|
||||
export function resolveTerminalSettings(
|
||||
host: HostTerminalSettings | null | undefined,
|
||||
userDefaults: TerminalDefaults = {},
|
||||
): TerminalAppearance & TerminalBehavior {
|
||||
const own = host ?? DEFAULT_HOST_TERMINAL_SETTINGS;
|
||||
const appearance: TerminalAppearance = {
|
||||
...DEFAULT_APPEARANCE,
|
||||
...pickTerminalValues(userDefaults, APPEARANCE_KEYS),
|
||||
};
|
||||
if (!own.inheritAppearance) {
|
||||
for (const key of APPEARANCE_KEYS) {
|
||||
(appearance as unknown as Record<string, unknown>)[key] = own[key];
|
||||
}
|
||||
const resolved = {} as Record<string, unknown>;
|
||||
for (const key of APPEARANCE_KEYS) {
|
||||
resolved[key] = own[key] ?? DEFAULT_APPEARANCE[key];
|
||||
}
|
||||
const behavior = {} as TerminalBehavior;
|
||||
for (const key of BEHAVIOR_KEYS) {
|
||||
(behavior as unknown as Record<string, unknown>)[key] = own[key];
|
||||
}
|
||||
return { ...appearance, ...behavior };
|
||||
for (const key of BEHAVIOR_KEYS) resolved[key] = own[key];
|
||||
return resolved as unknown as TerminalAppearance & TerminalBehavior;
|
||||
}
|
||||
|
||||
/**
|
||||
* The host's settings in the 2.8 `terminalConfig` shape, for clients that
|
||||
* still read it (Termix-Mobile). The look is left out while the host follows
|
||||
* the user, the way 2.8 stored it.
|
||||
* still read it (Termix-Mobile).
|
||||
*/
|
||||
export function terminalConfigFromHostSettings(
|
||||
values: Record<string, unknown>,
|
||||
@@ -429,9 +389,7 @@ export function terminalConfigFromHostSettings(
|
||||
const settings = readHostTerminalSettings(values);
|
||||
const config: Record<string, unknown> = {};
|
||||
for (const key of BEHAVIOR_KEYS) config[key] = settings[key];
|
||||
if (!settings.inheritAppearance) {
|
||||
for (const key of APPEARANCE_KEYS) config[key] = settings[key];
|
||||
}
|
||||
for (const key of APPEARANCE_KEYS) config[key] = settings[key];
|
||||
if (config.linkClickBehavior === "default") delete config.linkClickBehavior;
|
||||
if (config.localEcho === "default") delete config.localEcho;
|
||||
return config;
|
||||
|
||||
@@ -54,8 +54,9 @@ describe("hostPayloadLegacy", () => {
|
||||
fontSize: 20,
|
||||
}) as { terminalConfig: Record<string, unknown> };
|
||||
expect(terminalConfig.autoTmux).toBe(true);
|
||||
expect(terminalConfig).not.toHaveProperty("fontSize");
|
||||
expect(terminalConfig).not.toHaveProperty("localEcho");
|
||||
// The values already follow the host defaults, so the look is included.
|
||||
expect(terminalConfig.fontSize).toBe(20);
|
||||
expect(terminalConfig.localEcho).toBe("auto");
|
||||
});
|
||||
|
||||
it("includes the look of a host that has its own", () => {
|
||||
|
||||
@@ -146,26 +146,20 @@ describe("terminal settings routes", () => {
|
||||
authType: "password",
|
||||
});
|
||||
|
||||
it("hands every user their own terminal settings and the new-host defaults", async () => {
|
||||
server = await startServer({
|
||||
settings: { newHostFontSize: 20, newHostTheme: "nord" },
|
||||
});
|
||||
it("hands every user their own terminal settings", async () => {
|
||||
server = await startServer();
|
||||
await server.mock.ctx.settings.setUser(
|
||||
"user-1",
|
||||
"commandAutocomplete",
|
||||
true,
|
||||
);
|
||||
await server.mock.ctx.settings.setUser("user-1", "terminalDefaults", {
|
||||
fontSize: 18,
|
||||
});
|
||||
const { body } = await server.request("GET", "/client-settings");
|
||||
expect(body.user).toMatchObject({
|
||||
commandAutocomplete: true,
|
||||
terminalDefaults: { fontSize: 18 },
|
||||
localEcho: "auto",
|
||||
linkClickBehavior: "confirm",
|
||||
});
|
||||
expect(body.newHostDefaults).toMatchObject({ fontSize: 20, theme: "nord" });
|
||||
expect(body).not.toHaveProperty("newHostDefaults");
|
||||
const other = await server.request("GET", "/client-settings", {
|
||||
user: "user-2",
|
||||
});
|
||||
|
||||
@@ -30,19 +30,25 @@ describe("hostSettingsFromTerminalConfig", () => {
|
||||
});
|
||||
|
||||
describe("resolveTerminalSettings", () => {
|
||||
it("uses the user's defaults while the host follows them", () => {
|
||||
it("runs with the host's values, which already follow its defaults", () => {
|
||||
const host = readHostTerminalSettings({ fontSize: 30, autoTmux: true });
|
||||
const resolved = resolveTerminalSettings(host, { fontSize: 18 });
|
||||
expect(resolved.fontSize).toBe(18);
|
||||
const resolved = resolveTerminalSettings(host);
|
||||
expect(resolved.fontSize).toBe(30);
|
||||
expect(resolved.autoTmux).toBe(true);
|
||||
});
|
||||
|
||||
it("uses the host's own look once it opts out", () => {
|
||||
it("ignores the old follow-the-user switch", () => {
|
||||
const host = readHostTerminalSettings({
|
||||
inheritAppearance: false,
|
||||
fontSize: 30,
|
||||
inheritAppearance: true,
|
||||
fontSize: 22,
|
||||
});
|
||||
expect(resolveTerminalSettings(host, { fontSize: 18 }).fontSize).toBe(30);
|
||||
expect(resolveTerminalSettings(host).fontSize).toBe(22);
|
||||
});
|
||||
|
||||
it("defaults echo and link clicks to concrete modes", () => {
|
||||
const resolved = resolveTerminalSettings(readHostTerminalSettings({}));
|
||||
expect(resolved.localEcho).toBe("auto");
|
||||
expect(resolved.linkClickBehavior).toBe("confirm");
|
||||
});
|
||||
|
||||
it("falls back to the built-in defaults", () => {
|
||||
@@ -62,7 +68,6 @@ describe("readUserSettings", () => {
|
||||
linkClickBehavior: "direct",
|
||||
}),
|
||||
).toEqual({
|
||||
terminalDefaults: { fontSize: 16 },
|
||||
customThemes: [{ id: "a", name: "A", colors: {} }],
|
||||
commandAutocomplete: false,
|
||||
localEcho: "auto",
|
||||
|
||||
@@ -116,11 +116,11 @@ describe(`${manifest.id} activate`, () => {
|
||||
it("registers its settings components", async () => {
|
||||
rendered = await renderWithApp(plugin, { manifest, locales });
|
||||
expect(rendered.registered.settingsComponents()).toEqual(
|
||||
expect.arrayContaining([
|
||||
"terminalDefaults",
|
||||
"newHostTheme",
|
||||
"newHostFontFamily",
|
||||
]),
|
||||
expect.arrayContaining(["touchInput", "imageStorageTest"]),
|
||||
);
|
||||
// Terminal defaults are host defaults now, set in the host editor.
|
||||
expect(rendered.registered.settingsComponents()).not.toContain(
|
||||
"terminalDefaults",
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
||||
import { TerminalDefaultsSettings } from "../../../src/frontend/settings/TerminalDefaultsSettings";
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe("TerminalDefaultsSettings", () => {
|
||||
it("counts the defaults the user set", () => {
|
||||
render(
|
||||
<TerminalDefaultsSettings
|
||||
pluginId="ssh-terminal"
|
||||
values={{ terminalDefaults: { fontSize: 18, cursorBlink: false } }}
|
||||
setValue={vi.fn()}
|
||||
running
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("2")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies the dialog's values to the terminalDefaults setting", () => {
|
||||
const setValue = vi.fn();
|
||||
render(
|
||||
<TerminalDefaultsSettings
|
||||
pluginId="ssh-terminal"
|
||||
values={{ terminalDefaults: { fontSize: 18 } }}
|
||||
setValue={setValue}
|
||||
running
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByText("terminalDefaults.manage"));
|
||||
fireEvent.change(screen.getByDisplayValue("18"), {
|
||||
target: { value: "20" },
|
||||
});
|
||||
fireEvent.click(screen.getByText("terminalDefaults.apply"));
|
||||
expect(setValue).toHaveBeenCalledWith("terminalDefaults", { fontSize: 20 });
|
||||
});
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
fromTriState,
|
||||
toTriState,
|
||||
} from "../../../src/frontend/settings/tri-state";
|
||||
|
||||
describe("tri-state", () => {
|
||||
it("keeps unset booleans distinct from false", () => {
|
||||
expect(toTriState(undefined)).toBe("inherit");
|
||||
expect(toTriState(true)).toBe("on");
|
||||
expect(toTriState(false)).toBe("off");
|
||||
|
||||
expect(fromTriState("inherit")).toBeUndefined();
|
||||
expect(fromTriState("on")).toBe(true);
|
||||
expect(fromTriState("off")).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user