feat: option to hide the sidebar after opening a host (#1652)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 26.10.2
 
+### Added
+
+- Hide sidebar after opening, in Customize Sidebar, closes the host list once you open a host
+
 ### Fixed
 
 - Picking a section lower down in the host editor, like Warpgate, stuttered on the way and sometimes stopped before it got there

src/types/host-sidebar-preferences.ts

@@ -88,6 +88,8 @@ export interface HostSidebarDisplayPreferences extends HostRowFields {
   /** When false, nested folders hide the parent-path breadcrumb before their name. */
   showFolderPaths: boolean;
   hostClickBehavior: HostClickBehavior;
+  /** When true, the sidebar closes after a host is opened from it. */
+  closeOnOpen: boolean;
   /**
    * Host action id to whether it shows in the row's connect bar. An action
    * missing here follows its own default. Every action stays in the menu.
@@ -163,6 +165,7 @@ export function defaultHostSidebarPreferences(): HostSidebarPreferences {
       openOnDoubleClick: false,
       showFolderPaths: true,
       hostClickBehavior: "newTab",
+      closeOnOpen: false,
       barActions: {},
       ...defaultHostRowFields(),
     },
@@ -274,6 +277,10 @@ export function sanitizeHostSidebarPreferences(
     )
       ? (displayObj.hostClickBehavior as HostClickBehavior)
       : defaults.display.hostClickBehavior,
+    closeOnOpen:
+      typeof displayObj.closeOnOpen === "boolean"
+        ? displayObj.closeOnOpen
+        : defaults.display.closeOnOpen,
     barActions: sanitizeBarActions(displayObj.barActions),
   };
 

src/ui/AppShell.tsx

@@ -2698,6 +2698,7 @@ export function AppShell({
                   if (isMobile) setSidebarOpen(false);
                 }}
                 onEditHost={editHostInManager}
+                onCloseSidebar={() => setSidebarOpen(false)}
                 hostTree={realHostTree ?? undefined}
                 loading={hostsLoading}
                 onEditingChange={panelEditingSetter("hosts")}

src/ui/locales/en.json

@@ -644,6 +644,8 @@
     "actionsClick": "Click to expand/collapse",
     "openOnDoubleClick": "Open on double click",
     "openOnDoubleClickDesc": "Require a double click to open a host session instead of a single click",
+    "closeOnOpen": "Hide sidebar after opening",
+    "closeOnOpenDesc": "Close the sidebar after you open a host from it",
     "showFolderPaths": "Show folder paths",
     "showFolderPathsDesc": "Show the parent folder path above nested subfolder names. Subfolders stay indented either way.",
     "rowDetailsTitle": "Row details",

src/ui/sidebar/CustomizeSidebarPanel.tsx

@@ -223,6 +223,20 @@ export function CustomizeSidebarPanel({
               }
             />
           </SettingRow>
+          <SettingRow
+            label={t("hosts.closeOnOpen")}
+            description={t("hosts.closeOnOpenDesc")}
+          >
+            <FakeSwitch
+              checked={preferences.display.closeOnOpen}
+              onChange={(v) =>
+                update((prev) => ({
+                  ...prev,
+                  display: { ...prev.display, closeOnOpen: v },
+                }))
+              }
+            />
+          </SettingRow>
           <SettingRow
             label={t("newUi.sidebar.userProfile.statusColors")}
             description={t("newUi.sidebar.userProfile.statusColorsDesc")}

src/ui/sidebar/HostsPanel.tsx

@@ -201,6 +201,7 @@ export function HostsPanel({
   hostTree,
   loading,
   active = true,
+  onCloseSidebar,
 }: {
   onOpenTab: (
     host: Host,
@@ -217,6 +218,7 @@ export function HostsPanel({
   /** Unused since editing moved to the Manage tab. */
   onEditingChange?: (editing: boolean) => void;
   active?: boolean;
+  onCloseSidebar?: () => void;
 }) {
   const { t } = useTranslation();
   const { statuses, getStatus } = useServerStatus();
@@ -1044,7 +1046,10 @@ export function HostsPanel({
                   ).children
                 : []
             }
-            onOpenTab={onOpenTab}
+            onOpenTab={(host, type, options) => {
+              onOpenTab(host, type, options);
+              if (sidebarPrefs.display.closeOnOpen) onCloseSidebar?.();
+            }}
             onEditHost={onEditHost}
             onShareHost={(host) => setShareModalHost(host)}
             query={hostSearch.trim().toLowerCase()}

src/ui/tests/types/host-sidebar-preferences.test.ts

@@ -28,6 +28,7 @@ describe("defaultHostSidebarPreferences", () => {
         openOnDoubleClick: false,
         showFolderPaths: true,
         hostClickBehavior: "newTab",
+        closeOnOpen: false,
         barActions: {},
         showAddress: true,
         showUsername: true,
@@ -74,6 +75,7 @@ describe("sanitizeHostSidebarPreferences", () => {
         openOnDoubleClick: true,
         showFolderPaths: false,
         hostClickBehavior: "focusExistingDoubleClickNew",
+        closeOnOpen: true,
         barActions: { maintenance: true },
         showAddress: false,
         showUsername: false,