Nav state.

web/src/components/AppSidebar.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { NavLink, useParams, useMatch } from 'react-router';
 import { Server, AppWindow, Settings, CloudLightning, Sun, Moon, Monitor, ChevronDown, Usb, Archive, TerminalSquare, Cog, Compass, Lock, Globe, Cpu, Layers } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -20,9 +21,17 @@ import { useTheme } from '../contexts/ThemeContext';
 import { InstanceSwitcher } from './InstanceSwitcher';
 import { useSetupStatus } from '../services/api';
 
+function useSidebarSection(key: string) {
+  const [open, setOpen] = useState(() => localStorage.getItem(key) !== 'false');
+  return [open, (v: boolean) => { setOpen(v); localStorage.setItem(key, String(v)); }] as const;
+}
+
 export function AppSidebar() {
   const { theme, setTheme } = useTheme();
   const { state } = useSidebar();
+  const [centralOpen, setCentralOpen] = useSidebarSection('sidebar_central_open');
+  const [cloudOpen, setCloudOpen] = useSidebarSection('sidebar_cloud_open');
+  const [advancedOpen, setAdvancedOpen] = useSidebarSection('sidebar_advanced_open');
   const { instanceId } = useParams<{ instanceId: string }>();
   const appsMatch = useMatch(`/instances/${instanceId}/apps/*`);
   const appDirectoryMatch = useMatch(`/instances/${instanceId}/app-directory`);
@@ -204,7 +213,7 @@ export function AppSidebar() {
           ) : (
             /* When expanded, show grouped/collapsible structure */
             <>
-              <Collapsible defaultOpen className="group/collapsible">
+              <Collapsible open={centralOpen} onOpenChange={setCentralOpen} className="group/collapsible">
             <SidebarMenuItem>
               <CollapsibleTrigger asChild>
                 <SidebarMenuButton>
@@ -293,7 +302,7 @@ export function AppSidebar() {
             </NavLink>
           </SidebarMenuItem>
 
-          <Collapsible defaultOpen className="group/collapsible">
+          <Collapsible open={cloudOpen} onOpenChange={setCloudOpen} className="group/collapsible">
             <SidebarMenuItem>
               <CollapsibleTrigger asChild>
                 <SidebarMenuButton>
@@ -379,7 +388,7 @@ export function AppSidebar() {
             </SidebarMenuButton>
           </SidebarMenuItem>
 
-          <Collapsible defaultOpen className="group/collapsible">
+          <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen} className="group/collapsible">
             <SidebarMenuItem>
               <CollapsibleTrigger asChild>
                 <SidebarMenuButton>

web/src/router/InstanceLayout.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet, useParams, Navigate } from 'react-router';
 import { useInstanceContext } from '../hooks/useInstanceContext';
 import { AppSidebar } from '../components/AppSidebar';
@@ -44,6 +44,9 @@ function InstanceLayoutContent() {
 export function InstanceLayout() {
   const { instanceId } = useParams<{ instanceId: string }>();
   const { setCurrentInstance } = useInstanceContext();
+  const [sidebarOpen, setSidebarOpen] = useState(
+    () => localStorage.getItem('sidebar_state') !== 'false'
+  );
 
   useEffect(() => {
     if (instanceId) {
@@ -61,7 +64,13 @@ export function InstanceLayout() {
 
   return (
     <HelpProvider>
-      <SidebarProvider>
+      <SidebarProvider
+        open={sidebarOpen}
+        onOpenChange={(open) => {
+          setSidebarOpen(open);
+          localStorage.setItem('sidebar_state', String(open));
+        }}
+      >
         <InstanceLayoutContent />
       </SidebarProvider>
     </HelpProvider>