From fca779b064aaa2d9024ae0c96da37c1e0ba4a9c3 Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <chris@ozmm.org>
Date: Thu, 19 Feb 2026 10:12:48 -0800
Subject: [PATCH] Reorganize collapsed sidebar to show hamburger button without
 logo and add dashboard shortcut icon to AppSelector

---
 src/client/components/AppSelector.tsx | 13 ++++++++++-
 src/client/components/Sidebar.tsx     | 32 ++++++++++++++++++---------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/client/components/AppSelector.tsx b/src/client/components/AppSelector.tsx
index dc856e3..64aad9e 100644
--- a/src/client/components/AppSelector.tsx
+++ b/src/client/components/AppSelector.tsx
@@ -17,12 +17,13 @@ import {
 interface AppSelectorProps {
   render: () => void
   onSelect?: () => void
+  onDashboard?: () => void
   collapsed?: boolean
   switcherStyle?: CSSProperties
   listStyle?: CSSProperties
 }
 
-export function AppSelector({ render, onSelect, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
+export function AppSelector({ render, onSelect, onDashboard, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
   const selectApp = (name: string) => {
     setSelectedApp(name)
     onSelect?.()
@@ -51,6 +52,16 @@ export function AppSelector({ render, onSelect, collapsed, switcherStyle, listSt
         </SectionSwitcher>
       )}
       <AppList style={listStyle}>
+        {collapsed && onDashboard && (
+          <AppItem
+            onClick={onDashboard}
+            selected={!selectedApp ? true : undefined}
+            style={{ justifyContent: 'center', padding: '10px 12px' }}
+            title="Toes"
+          >
+            <span style={{ fontSize: 18 }}>🐾</span>
+          </AppItem>
+        )}
         {activeApps.map(app => (
           <AppItem
             key={app.name}
diff --git a/src/client/components/Sidebar.tsx b/src/client/components/Sidebar.tsx
index 77e9054..ea4bf25 100644
--- a/src/client/components/Sidebar.tsx
+++ b/src/client/components/Sidebar.tsx
@@ -30,17 +30,27 @@ export function Sidebar({ render }: { render: () => void }) {
 
   return (
     <SidebarContainer style={sidebarCollapsed ? { width: 'auto' } : undefined}>
-      <Logo>
-        <LogoLink onClick={goToDashboard} title="Go to dashboard">
-          {sidebarCollapsed ? '🐾' : '🐾 Toes'}
-        </LogoLink>
-        <HamburgerButton onClick={toggleSidebar} title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}>
-          <HamburgerLine />
-          <HamburgerLine />
-          <HamburgerLine />
-        </HamburgerButton>
-      </Logo>
-      <AppSelector render={render} collapsed={sidebarCollapsed} />
+      {sidebarCollapsed ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
+          <HamburgerButton onClick={toggleSidebar} title="Show sidebar">
+            <HamburgerLine />
+            <HamburgerLine />
+            <HamburgerLine />
+          </HamburgerButton>
+        </div>
+      ) : (
+        <Logo>
+          <LogoLink onClick={goToDashboard} title="Go to dashboard">
+            🐾 Toes
+          </LogoLink>
+          <HamburgerButton onClick={toggleSidebar} title="Hide sidebar">
+            <HamburgerLine />
+            <HamburgerLine />
+            <HamburgerLine />
+          </HamburgerButton>
+        </Logo>
+      )}
+      <AppSelector render={render} collapsed={sidebarCollapsed} onDashboard={goToDashboard} />
       {!sidebarCollapsed && (
         <SidebarFooter>
           <NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>