feat(sidebar): add host click behavior setting, default to always opening a new tab

This commit is contained in:
LukeGus committed 2026-09-28 19:56:52 -05:00
1 parent 81e7aa6274
commit 278fc7e32a
9 files changed
+218 -48

No files matched your search

+16 -7
View File
@@ -32,6 +32,10 @@ export type HostDensity = "comfortable" | "compact";
export type HostTrayTrigger = "always" | "hover" | "click" | "actionsOnly";
/** What clicking a host does when it already has an open tab. */
export type HostClickBehavior =
"newTab" | "focusExisting" | "focusExistingDoubleClickNew";
export interface HostSidebarFilterState {
status: ("online" | "offline" | "pinned")[];
/** SSH auth type ids; plugins add their own. */
@@ -52,8 +56,7 @@ export interface HostSidebarDisplayPreferences {
openOnDoubleClick: boolean;
/** When false, nested folders hide the parent-path breadcrumb before their name. */
showFolderPaths: boolean;
/** When true, clicking a host with an already-open tab focuses it instead of opening a new one. */
focusExistingTab: boolean;
hostClickBehavior: HostClickBehavior;
}
export interface HostSidebarPreferences {
@@ -89,6 +92,11 @@ const TRAY_TRIGGERS: HostTrayTrigger[] = [
"click",
"actionsOnly",
];
const HOST_CLICK_BEHAVIORS: HostClickBehavior[] = [
"newTab",
"focusExisting",
"focusExistingDoubleClickNew",
];
const STATUS_COLOR_SCHEMES: StatusColorScheme[] = ["accent", "status"];
const FILTER_STATUS: HostSidebarFilterState["status"] = [
"online",
@@ -118,7 +126,7 @@ export function defaultHostSidebarPreferences(): HostSidebarPreferences {
statusColorScheme: "accent",
openOnDoubleClick: false,
showFolderPaths: true,
focusExistingTab: true,
hostClickBehavior: "newTab",
},
};
}
@@ -202,10 +210,11 @@ export function sanitizeHostSidebarPreferences(
typeof displayObj.showFolderPaths === "boolean"
? displayObj.showFolderPaths
: defaults.display.showFolderPaths,
focusExistingTab:
typeof displayObj.focusExistingTab === "boolean"
? displayObj.focusExistingTab
: defaults.display.focusExistingTab,
hostClickBehavior: HOST_CLICK_BEHAVIORS.includes(
displayObj.hostClickBehavior as HostClickBehavior,
)
? (displayObj.hostClickBehavior as HostClickBehavior)
: defaults.display.hostClickBehavior,
};
return {
+5 -2
View File
@@ -745,8 +745,11 @@
"openOnDoubleClickDesc": "Require a double click to open a host session instead of a single click",
"showFolderPaths": "Show folder paths",
"showFolderPathsDesc": "Show the parent folder path above nested subfolder names. Subfolders stay indented either way.",
"focusExistingTab": "Focus existing tab",
"focusExistingTabDesc": "Clicking a host with an open tab switches to it instead of opening a new session. Ctrl/Cmd click, middle click, or \"Open in new tab\" always start a new one.",
"hostClickBehavior": "Clicking a host",
"hostClickBehaviorDesc": "What happens when you click a host that already has an open tab. Ctrl/Cmd click, middle click, or \"Open in new tab\" always start a new one.",
"hostClickNewTab": "Always open a new tab",
"hostClickFocusExisting": "Switch to the open tab",
"hostClickFocusExistingDoubleNew": "Click to switch, double click for a new tab",
"openInNewTab": "Open in new tab",
"deletedHost": "Deleted {{name}}",
"copiedToClipboard": "Copied to clipboard",
+36 -14
View File
@@ -9,6 +9,7 @@ import {
} from "@/components/dialog";
import { SectionCard, SettingRow, FakeSwitch } from "@/components/section-card";
import type {
HostClickBehavior,
HostDensity,
HostSidebarPreferences,
HostTrayTrigger,
@@ -139,12 +140,47 @@ export function CustomizeSidebarPanel({
<option value="click">{t("hosts.actionsClick")}</option>
</select>
</div>
<div className="flex flex-col gap-1.5 py-3 border-b border-border last:border-0">
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium leading-snug">
{t("hosts.hostClickBehavior")}
</span>
<span className="text-xs text-muted-foreground leading-snug">
{t("hosts.hostClickBehaviorDesc")}
</span>
</div>
<select
value={preferences.display.hostClickBehavior}
onChange={(e) =>
update((prev) => ({
...prev,
display: {
...prev.display,
hostClickBehavior: e.target.value as HostClickBehavior,
},
}))
}
className="h-8 w-full border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
>
<option value="newTab">{t("hosts.hostClickNewTab")}</option>
<option value="focusExisting">
{t("hosts.hostClickFocusExisting")}
</option>
<option value="focusExistingDoubleClickNew">
{t("hosts.hostClickFocusExistingDoubleNew")}
</option>
</select>
</div>
<SettingRow
label={t("hosts.openOnDoubleClick")}
description={t("hosts.openOnDoubleClickDesc")}
>
<FakeSwitch
checked={preferences.display.openOnDoubleClick}
disabled={
preferences.display.hostClickBehavior ===
"focusExistingDoubleClickNew"
}
onChange={(v) =>
update((prev) => ({
...prev,
@@ -153,20 +189,6 @@ export function CustomizeSidebarPanel({
}
/>
</SettingRow>
<SettingRow
label={t("hosts.focusExistingTab")}
description={t("hosts.focusExistingTabDesc")}
>
<FakeSwitch
checked={preferences.display.focusExistingTab}
onChange={(v) =>
update((prev) => ({
...prev,
display: { ...prev.display, focusExistingTab: v },
}))
}
/>
</SettingRow>
<SettingRow
label={t("newUi.sidebar.userProfile.statusColors")}
description={t("newUi.sidebar.userProfile.statusColorsDesc")}
+1 -1
View File
@@ -1045,7 +1045,7 @@ export function HostsPanel({
showTags={sidebarPrefs.display.showTags}
openOnDoubleClick={sidebarPrefs.display.openOnDoubleClick}
showFolderPaths={sidebarPrefs.display.showFolderPaths}
focusExistingTab={sidebarPrefs.display.focusExistingTab}
hostClickBehavior={sidebarPrefs.display.hostClickBehavior}
/>
</div>
)}
@@ -6,6 +6,7 @@ import { ChevronRight, Check, GripVertical } from "lucide-react";
import type { Host, HostFolder, TabType } from "@/types/ui-types";
import type {
HostDensity,
HostClickBehavior,
HostTrayTrigger,
} from "@/types/host-sidebar-preferences";
import { FolderIconEl } from "@/components/folder-style";
@@ -69,7 +70,7 @@ export function FolderItem({
showTags = true,
openOnDoubleClick = false,
showFolderPaths = true,
focusExistingTab = true,
hostClickBehavior = "newTab",
arrangeMode = false,
isDragging = false,
onReorderDrop,
@@ -122,8 +123,7 @@ export function FolderItem({
openOnDoubleClick?: boolean;
/** When false, nested folders hide the parent-path breadcrumb before their name. */
showFolderPaths?: boolean;
/** When true, clicking a host with an already-open tab focuses it instead of opening a new one. */
focusExistingTab?: boolean;
hostClickBehavior?: HostClickBehavior;
/** When true (rearranging unlocked), the header can be dragged and its
* top/bottom edges become reorder drop zones. The middle still accepts
* hosts dropped into the folder. */
@@ -347,7 +347,7 @@ export function FolderItem({
showTags={showTags}
openOnDoubleClick={openOnDoubleClick}
showFolderPaths={showFolderPaths}
focusExistingTab={focusExistingTab}
hostClickBehavior={hostClickBehavior}
arrangeMode={arrangeMode}
onReorderDrop={onReorderDrop}
onFolderDragStart={onFolderDragStart}
@@ -381,7 +381,7 @@ export function FolderItem({
trayTrigger={trayTrigger}
showTags={showTags}
openOnDoubleClick={openOnDoubleClick}
focusExistingTab={focusExistingTab}
hostClickBehavior={hostClickBehavior}
arrangeMode={arrangeMode}
onReorderDrop={
onReorderDrop
+43 -5
View File
@@ -41,6 +41,7 @@ import { getHostPassword } from "@/main-axios";
import type { Host, TabType } from "@/types/ui-types";
import type {
HostDensity,
HostClickBehavior,
HostTrayTrigger,
} from "@/types/host-sidebar-preferences";
import { copyToClipboard } from "@/lib/clipboard";
@@ -153,6 +154,8 @@ function canCopyHostSudoPassword(host: Host): boolean {
* differ. Keeping this as one lookup (rather than two parallel JSX trees)
* means a future style tweak only has to be made once.
*/
const DOUBLE_CLICK_WINDOW_MS = 250;
const HOST_ITEM_DENSITY_TOKENS = {
comfortable: {
rowPadding: "pl-[8.75px] pr-[7px] py-[7px]",
@@ -195,7 +198,7 @@ export function HostItem({
trayTrigger = "hover",
showTags = true,
openOnDoubleClick = false,
focusExistingTab = true,
hostClickBehavior = "newTab",
showResourceBars = true,
showStatusStripes = true,
rowActions = "full",
@@ -243,8 +246,8 @@ export function HostItem({
showTags?: boolean;
/** Requires a double click to launch instead of a single click. */
openOnDoubleClick?: boolean;
/** When true, clicking a host with an already-open tab focuses it instead of opening a new one. */
focusExistingTab?: boolean;
/** What a click does when the host already has an open tab. */
hostClickBehavior?: HostClickBehavior;
/** Preset-driven: hides the CPU/RAM bars without changing density. */
showResourceBars?: boolean;
/** Preset-driven: hides the per-row status color stripe. */
@@ -344,6 +347,18 @@ export function HostItem({
showResourceRow: densityTokens.showResourceRow && showResourceBars,
};
const isCompact = density === "compact";
const focusExistingTab = hostClickBehavior !== "newTab";
const doubleClickOpensNew =
hostClickBehavior === "focusExistingDoubleClickNew";
// In double click mode a single click waits out the double click window,
// so a double click doesn't also switch to (or open) a tab first.
const singleClickTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(
() => () => {
if (singleClickTimer.current) clearTimeout(singleClickTimer.current);
},
[],
);
const reorderEdge = isReorderHovered ? reorderHoverEdge : null;
const canDrag =
arrangeMode && !selectionMode && !isTouchOnly && canEditHost(host);
@@ -1033,12 +1048,35 @@ export function HostItem({
}
return;
}
if (openOnDoubleClick) return;
const forceNewTab = e.ctrlKey || e.metaKey;
if (doubleClickOpensNew) {
if (singleClickTimer.current) clearTimeout(singleClickTimer.current);
singleClickTimer.current = null;
if (e.detail > 1) return;
if (forceNewTab) {
openHostTab(defaultAction, { forceNewTab });
} else {
singleClickTimer.current = setTimeout(() => {
singleClickTimer.current = null;
openHostTab(defaultAction);
}, DOUBLE_CLICK_WINDOW_MS);
}
return;
}
if (openOnDoubleClick) return;
openHostTab(defaultAction, forceNewTab ? { forceNewTab } : undefined);
}}
onDoubleClick={(e) => {
if (selectionMode || isTouchOnly || !openOnDoubleClick) return;
if (selectionMode || isTouchOnly) return;
if (doubleClickOpensNew) {
e.stopPropagation();
if (singleClickTimer.current) clearTimeout(singleClickTimer.current);
singleClickTimer.current = null;
if (e.ctrlKey || e.metaKey) return;
openHostTab(defaultAction, { forceNewTab: true });
return;
}
if (!openOnDoubleClick) return;
e.stopPropagation();
const forceNewTab = e.ctrlKey || e.metaKey;
openHostTab(defaultAction, forceNewTab ? { forceNewTab } : undefined);
+5 -5
View File
@@ -45,6 +45,7 @@ import type { Host, HostFolder, TabType } from "@/types/ui-types";
import type { SSHHostData } from "@/types/index";
import type {
HostDensity,
HostClickBehavior,
HostTrayTrigger,
} from "@/types/host-sidebar-preferences";
import { resolveHostTabType } from "@/lib/host-connection-tabs";
@@ -86,7 +87,7 @@ export function SidebarTree({
showTags = true,
openOnDoubleClick = false,
showFolderPaths = true,
focusExistingTab = true,
hostClickBehavior = "newTab",
}: {
children: (Host | HostFolder)[];
onOpenTab: (
@@ -113,8 +114,7 @@ export function SidebarTree({
openOnDoubleClick?: boolean;
/** When false, nested folders hide the parent-path breadcrumb before their name. */
showFolderPaths?: boolean;
/** When true, clicking a host with an already-open tab focuses it instead of opening a new one. */
focusExistingTab?: boolean;
hostClickBehavior?: HostClickBehavior;
}) {
const { t } = useTranslation();
const hostSwitchPlugins = usePluginHostSections().filter(
@@ -1016,7 +1016,7 @@ export function SidebarTree({
showTags={showTags}
openOnDoubleClick={openOnDoubleClick}
showFolderPaths={showFolderPaths}
focusExistingTab={focusExistingTab}
hostClickBehavior={hostClickBehavior}
arrangeMode={arrangeMode}
isDragging={
draggedReorderKey === `folder:${item.path ?? item.name}`
@@ -1088,7 +1088,7 @@ export function SidebarTree({
trayTrigger={trayTrigger}
showTags={showTags}
openOnDoubleClick={openOnDoubleClick}
focusExistingTab={focusExistingTab}
hostClickBehavior={hostClickBehavior}
showResourceBars={showResourceBars}
showStatusStripes={showStatusStripes}
rowActions={rowActions}
@@ -1,4 +1,10 @@
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import {
act,
cleanup,
fireEvent,
render,
screen,
} from "@testing-library/react";
import { useState } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import type { Host } from "@/types/ui-types";
@@ -234,3 +240,90 @@ describe("HostItem density parity", () => {
}
});
});
describe("HostItem click behavior", () => {
function setup(
hostClickBehavior:
"newTab" | "focusExisting" | "focusExistingDoubleClickNew",
) {
const Icon = (() => null) as never;
const dispose = registerHostAction({
id: "terminal_test",
titleKey: "Terminal",
icon: Icon,
kind: "connect",
tabType: "terminal",
when: () => true,
});
const onOpenTab = vi.fn();
render(
<HostItem
host={baseHost}
onOpenTab={onOpenTab}
onDelete={noop}
onDuplicate={noop}
hostClickBehavior={hostClickBehavior}
/>,
);
const row = screen.getByText("web-01").closest(".cursor-pointer")!;
return { onOpenTab, row, dispose };
}
afterEach(() => {
vi.useRealTimers();
});
it("always opens a new tab by default", () => {
const { onOpenTab, row, dispose } = setup("newTab");
try {
fireEvent.click(row);
expect(onOpenTab).toHaveBeenCalledWith("terminal", { forceNewTab: true });
} finally {
dispose();
}
});
it("switches to the open tab when set to focus existing", () => {
const { onOpenTab, row, dispose } = setup("focusExisting");
try {
fireEvent.click(row);
expect(onOpenTab).toHaveBeenCalledWith("terminal", {
forceNewTab: false,
});
fireEvent.click(row, { ctrlKey: true });
expect(onOpenTab).toHaveBeenLastCalledWith("terminal", {
forceNewTab: true,
});
} finally {
dispose();
}
});
it("switches on a single click and opens a new tab on a double click", () => {
vi.useFakeTimers();
const { onOpenTab, row, dispose } = setup("focusExistingDoubleClickNew");
try {
fireEvent.click(row, { detail: 1 });
expect(onOpenTab).not.toHaveBeenCalled();
act(() => {
vi.runAllTimers();
});
expect(onOpenTab).toHaveBeenCalledTimes(1);
expect(onOpenTab).toHaveBeenCalledWith("terminal", {
forceNewTab: false,
});
onOpenTab.mockClear();
fireEvent.click(row, { detail: 1 });
fireEvent.click(row, { detail: 2 });
fireEvent.doubleClick(row);
act(() => {
vi.runAllTimers();
});
expect(onOpenTab).toHaveBeenCalledTimes(1);
expect(onOpenTab).toHaveBeenCalledWith("terminal", { forceNewTab: true });
} finally {
dispose();
}
});
});
@@ -27,7 +27,7 @@ describe("defaultHostSidebarPreferences", () => {
statusColorScheme: "accent",
openOnDoubleClick: false,
showFolderPaths: true,
focusExistingTab: true,
hostClickBehavior: "newTab",
},
});
});
@@ -66,7 +66,7 @@ describe("sanitizeHostSidebarPreferences", () => {
statusColorScheme: "status",
openOnDoubleClick: true,
showFolderPaths: false,
focusExistingTab: false,
hostClickBehavior: "focusExistingDoubleClickNew",
},
};
expect(sanitizeHostSidebarPreferences(valid)).toEqual(valid);
@@ -92,14 +92,19 @@ describe("sanitizeHostSidebarPreferences", () => {
).toBe(true);
});
it("defaults focusExistingTab to true when missing or not a boolean", () => {
it("defaults hostClickBehavior to newTab when missing or invalid", () => {
expect(
sanitizeHostSidebarPreferences({ display: {} }).display.focusExistingTab,
).toBe(true);
sanitizeHostSidebarPreferences({ display: {} }).display.hostClickBehavior,
).toBe("newTab");
expect(
sanitizeHostSidebarPreferences({ display: { focusExistingTab: "no" } })
.display.focusExistingTab,
).toBe(true);
sanitizeHostSidebarPreferences({ display: { hostClickBehavior: "nope" } })
.display.hostClickBehavior,
).toBe("newTab");
expect(
sanitizeHostSidebarPreferences({
display: { hostClickBehavior: "focusExisting" },
}).display.hostClickBehavior,
).toBe("focusExisting");
});
it("falls back to defaults for invalid enum values", () => {