diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx index 8d411f62..31ec0b9f 100644 --- a/frontend/src/app/components/Layout/AppShell.tsx +++ b/frontend/src/app/components/Layout/AppShell.tsx @@ -82,9 +82,9 @@ const AppShell: React.FC = () => { const canGoForward = historyIdx < maxHistoryIdx.current; const [dashboardsExpanded, setDashboardsExpanded] = useState(true); const [appsExpanded, setAppsExpanded] = useState(true); - // Starts collapsed so a fresh boot lands on a clean canvas; the toggle brings it back. - // Arc/Zen: the sidebar is the primary chrome (search + nav live here), shown by default. - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); + // Desktop shell: the wallpaper canvas IS the home surface, so the sidebar starts docked away + // (left-edge hover peeks it; the pin toggle brings it back full-time). + const [sidebarCollapsed, setSidebarCollapsed] = useState(true); const [renamingDashboardId, setRenamingDashboardId] = useState(null); const [renamingAppId, setRenamingAppId] = useState(null); const [renameValue, setRenameValue] = useState(''); diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx index 41b071b8..fbe86dfd 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx @@ -170,6 +170,7 @@ const DashboardCanvas: React.FC = ({ // macOS full screen: one card owns the whole window, every piece of chrome steps aside; Esc exits. const dispatch = useAppDispatch(); const fullscreenCardId = useAppSelector(selectFullscreenCardId); + const [headerRevealed, setHeaderRevealed] = React.useState(false); useEffect(() => { if (!fullscreenCardId) return undefined; const onKey = (e: KeyboardEvent): void => { @@ -184,8 +185,14 @@ const DashboardCanvas: React.FC = ({ return ( <> + {/* Top-edge hover strip: the desktop shell keeps the top chromeless; grazing it reveals the header. */} + setHeaderRevealed(true)} + sx={{ position: 'absolute', top: 0, left: 0, right: 0, height: 22, zIndex: 9 }} + /> {/* Floating header overlay */} setHeaderRevealed(false)} sx={{ display: fullscreenCardId ? 'none' : undefined, position: 'absolute', @@ -193,7 +200,10 @@ const DashboardCanvas: React.FC = ({ left: 0, right: 0, zIndex: 10, - pointerEvents: 'none', + pointerEvents: headerRevealed ? undefined : 'none', + opacity: headerRevealed ? 1 : 0, + transform: headerRevealed ? 'translateY(0)' : 'translateY(-6px)', + transition: 'opacity 0.18s ease, transform 0.18s ease', // p: 3 (24px) was leaving a chunky air gap between the sidebar edge and the dashboard header that read as "two disconnected panels" rather than one continuous surface. 0.75 (6px) tightens the inset so the header floats just inside the content area without losing its breathing room from the top-most pixel. p: 0.75, pb: 0,