Add PageShell — collapsed sidebar strip on Dashboard and all admin pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/PageShell.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { Sidebar } from './Sidebar'
+import type { User } from '../types'
+
+interface Props {
+  user: User
+  children: React.ReactNode
+  padding?: string
+}
+
+export function PageShell({ user, children, padding = '1.5rem 2rem' }: Props) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <div style={{ display: 'flex', height: '100dvh' }}>
+
+      {/* Collapsed sidebar strip */}
+      <div style={{
+        width: 44, flexShrink: 0,
+        background: 'var(--navy)', borderRight: '1px solid var(--surface-2)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        height: '100dvh', position: 'sticky', top: 0,
+      }}>
+        <button
+          onClick={() => setMenuOpen(true)}
+          title="Open menu"
+          style={{
+            background: 'none', border: 'none', cursor: 'pointer',
+            color: 'var(--text-muted)', padding: '0.5rem',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            borderRadius: 6,
+          }}
+        >
+          <ChevronRight size={18} strokeWidth={1.75} />
+        </button>
+      </div>
+
+      {/* Overlay sidebar + backdrop when open */}
+      {menuOpen && (
+        <>
+          <div
+            onClick={() => setMenuOpen(false)}
+            style={{ position: 'fixed', inset: 0, zIndex: 19, background: 'rgba(0,0,0,0.35)' }}
+          />
+          <div style={{ position: 'fixed', left: 0, top: 0, height: '100dvh', zIndex: 20 }}>
+            <Sidebar user={user} onCollapse={() => setMenuOpen(false)} />
+          </div>
+        </>
+      )}
+
+      <main style={{ flex: 1, overflowY: 'auto', padding }}>
+        {children}
+      </main>
+    </div>
+  )
+}

src/pages/AdminDepartments.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import type { User, Role } from '../types'
 
 interface WfDept {
@@ -93,9 +93,7 @@ export function AdminDepartments({ user }: { user: User }) {
   }
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user}>
-      <Sidebar user={user} />
-      <main style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.5rem', flexWrap: 'wrap', gap: '0.5rem' }}>
           <h1 style={{ fontSize: '1.2rem' }}>Workforce Departments</h1>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -173,8 +171,7 @@ export function AdminDepartments({ user }: { user: User }) {
             ))}
           </div>
         )}
-      </main>
+    </PageShell>
-    </div>
   )
 }
 

src/pages/AdminMonitor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { ArrowUpCircle, Activity, ScrollText, RefreshCw, TerminalSquare, HardDrive, ChevronDown, ChevronRight, Play } from 'lucide-react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import type { User } from '../types'
 
 interface AppStatus {
@@ -238,8 +238,7 @@ export function AdminMonitor({ user }: { user: User }) {
   ]
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user} padding="2rem">
-      <Sidebar user={user} />
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
         {/* Tab bar */}
@@ -718,6 +717,6 @@ export function AdminMonitor({ user }: { user: User }) {
         )}
 
       </div>
-    </div>
+    </PageShell>
   )
 }

src/pages/AdminRoles.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import type { User, Role, Capability } from '../types'
 
 export function AdminRoles({ user }: { user: User }) {
@@ -51,9 +51,7 @@ export function AdminRoles({ user }: { user: User }) {
   }
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user}>
-      <Sidebar user={user} />
-      <main style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
           <h1 style={{ fontSize: '1.2rem' }}>Roles</h1>
           <button onClick={() => setShowCreate(v => !v)} style={goldBtn}>
@@ -138,8 +136,7 @@ export function AdminRoles({ user }: { user: User }) {
             </div>
           ))}
         </div>
-      </main>
+    </PageShell>
-    </div>
   )
 }
 

src/pages/AdminSettings.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { CheckCircle, XCircle, RefreshCw, ChevronDown, ChevronUp, Clock, Folder, FolderOpen, ChevronRight, KeyRound, Copy, Check } from 'lucide-react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import type { User } from '../types'
 
 const MASKED = '••••••••'
@@ -62,9 +62,7 @@ export function AdminSettings({ user }: { user: User }) {
   }, [])
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user} padding="2rem">
-      <Sidebar user={user} />
-      <main style={{ flex: 1, overflowY: 'auto', padding: '2rem' }}>
         <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '0.25rem' }}>
           Settings
         </h1>
@@ -101,8 +99,7 @@ export function AdminSettings({ user }: { user: User }) {
         {tab === 'rooms' && <RoomsTab />}
         {tab === 'apps' && <AppsTab />}
         {tab === 'device' && <DeviceTab />}
-      </main>
+    </PageShell>
-    </div>
   )
 }
 

src/pages/AdminUsers.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import type { User, Role, Capability } from '../types'
 
 interface ManagedUser {
@@ -93,9 +93,7 @@ export function AdminUsers({ user }: { user: User }) {
   }
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user}>
-      <Sidebar user={user} />
-      <main style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
           <h1 style={{ fontSize: '1.2rem' }}>Users</h1>
           <button onClick={() => setShowCreate(v => !v)} style={goldBtn}>
@@ -244,8 +242,7 @@ export function AdminUsers({ user }: { user: User }) {
             )
           })}
         </div>
-      </main>
+    </PageShell>
-    </div>
   )
 }
 

src/pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { Download } from 'lucide-react'
-import { Sidebar } from '../components/Sidebar'
+import { PageShell } from '../components/PageShell'
 import { AppIcon } from '../components/AppIcon'
 import type { User, App } from '../types'
 
@@ -18,9 +18,7 @@ export function Dashboard({ user }: { user: User }) {
   const hasAny = user.apps.length > 0
 
   return (
-    <div style={{ display: 'flex', height: '100dvh' }}>
+    <PageShell user={user} padding="2rem">
-      <Sidebar user={user} />
-      <main style={{ flex: 1, overflowY: 'auto', padding: '2rem' }}>
         <p style={{ fontSize: '1rem', color: 'var(--text-mid)', marginBottom: '2rem' }}>
           Good {greeting()},{' '}
           <span style={{ color: 'var(--text-dark)', fontWeight: 600 }}>{user.name}</span>
@@ -50,8 +48,7 @@ export function Dashboard({ user }: { user: User }) {
             <AppGrid apps={grouped[cat]} onOpen={slug => navigate(`/app/${slug}`)} />
           </div>
         ))}
-      </main>
+    </PageShell>
-    </div>
   )
 }