feat: redesign user host defaults system

This commit is contained in:
LukeGus committed 2026-09-30 06:19:56 -05:00
1 parent 3028ab1176
commit a4a4d4f27b
144 files changed
+24609 -2555

No files matched your search

-17
View File
@@ -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",
+47 -38
View File
@@ -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;
}
+2 -13
View File
@@ -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);
});
});