From 2dd4a7a3a6c84f2314b93b827754860f68a7dbf1 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Thu, 22 Jan 2026 14:12:19 +0200
Subject: [PATCH] feature: header layout changes (#195)

* fix(ui): remove fixed sessions button and mac titlebar coupling

Remove fixed sessions button from header on desktop Mac
Eliminate Mac titlebar spacer and drag-to-dock logic in sidebar
Update layout to rely on standard header/sidebar without mac-specific tweaks

* feat: improve mobile header with session toggle and back button

Add back button in mobile header to exit session switcher
Show Sessions label when session switcher is open in mobile header
Toggle between opening sessions and back navigation based on session state
---
 packages/ui/src/components/layout/Header.tsx  | 257 +++++++-----------
 .../ui/src/components/layout/MainLayout.tsx   |  56 ++--
 packages/ui/src/components/layout/Sidebar.tsx |  34 +--
 3 files changed, 130 insertions(+), 217 deletions(-)

diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index a4ceb5ae..71a8827b 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -5,7 +5,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
-import { RiChat4Line, RiCodeLine, RiCommandLine, RiFolder6Line, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowLeftSLine, RiChat4Line, RiCodeLine, RiCommandLine, RiFolder6Line, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useConfigStore } from '@/stores/useConfigStore';
@@ -24,71 +24,12 @@ interface TabConfig {
   showDot?: boolean;
 }
 
-export const FixedSessionsButton: React.FC = () => {
-  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
-  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
-  const { isMobile } = useDeviceInfo();
-
-  const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-    return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
-  });
-
-  const isMacPlatform = React.useMemo(() => {
-    if (typeof navigator === 'undefined') {
-      return false;
-    }
-    return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
-  }, []);
-
-  React.useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
-    setIsDesktopApp(detected);
-  }, []);
-
-  const handleOpenSessionSwitcher = React.useCallback(() => {
-    if (isMobile) {
-      setSessionSwitcherOpen(true);
-    } else {
-      toggleSidebar();
-    }
-  }, [isMobile, setSessionSwitcherOpen, toggleSidebar]);
-
-  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center rounded-md gap-2 p-2 typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-secondary/50 transition-colors';
-
-  if (isMobile || !isDesktopApp || !isMacPlatform) {
-    return null;
-  }
-
-  return (
-     <div
-       className="fixed top-[0.375rem] left-[5.25rem] z-[9999]"
-       style={{ pointerEvents: 'auto', ['--padding-scale' as string]: '1' } as React.CSSProperties}
-     >
-       <button
-         type="button"
-         onClick={handleOpenSessionSwitcher}
-         aria-label="Open sessions"
-         className={headerIconButtonClass}
-       >
-         <RiLayoutLeftLine className="h-5 w-5" />
-       </button>
-     </div>
-  );
-};
-
 export const Header: React.FC = () => {
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
   const toggleSidebar = useUIStore((state) => state.toggleSidebar);
   const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
   const toggleCommandPalette = useUIStore((state) => state.toggleCommandPalette);
   const toggleHelpDialog = useUIStore((state) => state.toggleHelpDialog);
-  const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
   const activeMainTab = useUIStore((state) => state.activeMainTab);
   const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
 
@@ -171,10 +112,11 @@ export const Header: React.FC = () => {
 
   const desktopPaddingClass = React.useMemo(() => {
     if (isDesktopApp && isMacPlatform) {
-      return isSidebarOpen ? 'pl-2' : 'pl-[8.0rem]';
+      // Always reserve space for Mac traffic lights since header is always on top
+      return 'pl-[5.75rem]';
     }
     return 'pl-3';
-  }, [isDesktopApp, isMacPlatform, isSidebarOpen]);
+  }, [isDesktopApp, isMacPlatform]);
 
   const updateHeaderHeight = React.useCallback(() => {
     if (typeof document === 'undefined') {
@@ -344,18 +286,14 @@ export const Header: React.FC = () => {
       role="tablist"
       aria-label="Main navigation"
     >
-      {!(isDesktopApp && isMacPlatform) && (
-        <>
-          <button
-            type="button"
-            onClick={handleOpenSessionSwitcher}
-            aria-label="Open sessions"
-            className={`${headerIconButtonClass} mr-2`}
-          >
-            <RiLayoutLeftLine className="h-5 w-5" />
-          </button>
-        </>
-      )}
+      <button
+        type="button"
+        onClick={handleOpenSessionSwitcher}
+        aria-label="Open sessions"
+        className={`${headerIconButtonClass} mr-2`}
+      >
+        <RiLayoutLeftLine className="h-5 w-5" />
+      </button>
 
       <div className="flex items-center gap-1 p-1 bg-background/50 rounded-lg">
         {tabs.map((tab) => renderTab(tab))}
@@ -404,14 +342,25 @@ export const Header: React.FC = () => {
   const renderMobile = () => (
     <div className="app-region-drag relative flex items-center justify-between gap-2 px-3 py-2 select-none">
       <div className="flex items-center gap-2">
-        <button
-          onClick={handleOpenSessionSwitcher}
-          className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-secondary"
-          aria-label="Open sessions"
-        >
-          <RiPlayListAddLine className="h-5 w-5" />
-        </button>
-        {contextUsage && contextUsage.totalTokens > 0 && activeMainTab === 'chat' && (
+        {/* Show back button when sessions sidebar is open, otherwise show sessions toggle */}
+        {isSessionSwitcherOpen ? (
+          <button
+            onClick={() => setSessionSwitcherOpen(false)}
+            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-secondary"
+            aria-label="Back"
+          >
+            <RiArrowLeftSLine className="h-5 w-5" />
+          </button>
+        ) : (
+          <button
+            onClick={handleOpenSessionSwitcher}
+            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-secondary"
+            aria-label="Open sessions"
+          >
+            <RiPlayListAddLine className="h-5 w-5" />
+          </button>
+        )}
+        {!isSessionSwitcherOpen && contextUsage && contextUsage.totalTokens > 0 && activeMainTab === 'chat' && (
           <ContextUsageDisplay
             totalTokens={contextUsage.totalTokens}
             percentage={contextUsage.percentage}
@@ -421,81 +370,85 @@ export const Header: React.FC = () => {
             isMobile={true}
           />
         )}
+        {isSessionSwitcherOpen && (
+          <span className="typography-ui-label font-semibold text-foreground">Sessions</span>
+        )}
       </div>
 
-      <div className="app-region-no-drag flex items-center gap-1">
+      {/* Hide tabs and right-side buttons when sessions sidebar is open */}
+      {!isSessionSwitcherOpen && (
+        <div className="app-region-no-drag flex items-center gap-1">
+          <div className="flex items-center gap-0.5" role="tablist" aria-label="Main navigation">
+            {tabs.map((tab) => {
+              const isActive = activeMainTab === tab.id;
+              const Icon = tab.icon;
+              return (
+                <Tooltip key={tab.id} delayDuration={500}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isMobile) {
+                          blurActiveElement();
+                        }
+                        setActiveMainTab(tab.id);
+                      }}
+                      aria-label={tab.label}
+                      aria-selected={isActive}
+                      role="tab"
+                      className={cn(
+                        headerIconButtonClass,
+                        'relative',
+                        isActive && 'text-foreground bg-secondary'
+                      )}
+                    >
+                      <Icon className="h-5 w-5" />
+                      {tab.badge !== undefined && tab.badge > 0 && (
+                        <span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
+                          {tab.badge}
+                        </span>
+                      )}
+                      {tab.showDot && (
+                        <span
+                          className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
+                          aria-label="Changes available"
+                        />
+                      )}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{tab.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
 
-        <div className="flex items-center gap-0.5" role="tablist" aria-label="Main navigation">
+          <McpDropdown headerIconButtonClass={headerIconButtonClass} />
 
-          {tabs.map((tab) => {
-            const isActive = activeMainTab === tab.id;
-            const Icon = tab.icon;
-            return (
-              <Tooltip key={tab.id} delayDuration={500}>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (isMobile) {
-                        blurActiveElement();
-                      }
-                      setActiveMainTab(tab.id);
-                    }}
-                    aria-label={tab.label}
-                    aria-selected={isActive}
-                    role="tab"
-                    className={cn(
-                      headerIconButtonClass,
-                      'relative',
-                      isActive && 'text-foreground bg-secondary'
-                    )}
-                  >
-                    <Icon className="h-5 w-5" />
-                    {tab.badge !== undefined && tab.badge > 0 && (
-                      <span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
-                        {tab.badge}
-                      </span>
-                    )}
-                    {tab.showDot && (
-                      <span
-                        className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
-                        aria-label="Changes available"
-                      />
-                    )}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{tab.label}</p>
-                </TooltipContent>
-              </Tooltip>
-            );
-          })}
+          <Tooltip delayDuration={500}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={handleOpenSettings}
+                aria-label="Open settings"
+                className={cn(headerIconButtonClass, 'relative')}
+              >
+                <RiSettings3Line className="h-5 w-5" />
+                {updateAvailable && (
+                  <span
+                    className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
+                    aria-label="Update available"
+                  />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{updateAvailable ? 'Settings (Update available)' : 'Settings'}</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
-
-        <McpDropdown headerIconButtonClass={headerIconButtonClass} />
-
-        <Tooltip delayDuration={500}>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={handleOpenSettings}
-              aria-label="Open settings"
-              className={cn(headerIconButtonClass, 'relative')}
-            >
-              <RiSettings3Line className="h-5 w-5" />
-              {updateAvailable && (
-                <span
-                  className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
-                  aria-label="Update available"
-                />
-              )}
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{updateAvailable ? 'Settings (Update available)' : 'Settings'}</p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
+      )}
     </div>
   );
 
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index adf750dc..e8f83392 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Header, FixedSessionsButton } from './Header';
+import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { CommandPalette } from '../ui/CommandPalette';
 import { HelpDialog } from '../ui/HelpDialog';
 import { SessionSidebar } from '@/components/session/SessionSidebar';
 import { SessionDialogs } from '@/components/session/SessionDialogs';
-import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
 import { MultiRunLauncher } from '@/components/multirun';
 
@@ -24,7 +23,6 @@ export const MainLayout: React.FC = () => {
         activeMainTab,
         setIsMobile,
         isSessionSwitcherOpen,
-        setSessionSwitcherOpen,
         isSettingsDialogOpen,
         setSettingsDialogOpen,
         isMultiRunLauncherOpen,
@@ -331,35 +329,34 @@ export const MainLayout: React.FC = () => {
 
                 {isMobile ? (
                 <>
-                    {/* Mobile: Header + content + overlays */}
+                    {/* Mobile: Header + content with drill-down pattern */}
                     {!(isSettingsDialogOpen || isMultiRunLauncherOpen) && <Header />}
                     <div
                         className={cn(
-                            'flex flex-1 overflow-hidden bg-background',
+                            'flex flex-1 overflow-hidden',
                             (isSettingsDialogOpen || isMultiRunLauncherOpen) && 'hidden'
                         )}
                         style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
                     >
-                        <main className="flex-1 overflow-hidden bg-background relative">
-                            <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
-                                <ErrorBoundary><ChatView /></ErrorBoundary>
+                        {/* Mobile drill-down: show sessions sidebar OR main content */}
+                        {isSessionSwitcherOpen ? (
+                            <div className="flex-1 overflow-hidden bg-sidebar">
+                                <ErrorBoundary><SessionSidebar mobileVariant /></ErrorBoundary>
                             </div>
-                            {secondaryView && (
-                                <div className="absolute inset-0">
-                                    <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                        ) : (
+                            <main className="flex-1 overflow-hidden bg-background relative">
+                                <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
+                                    <ErrorBoundary><ChatView /></ErrorBoundary>
                                 </div>
-                            )}
-                        </main>
+                                {secondaryView && (
+                                    <div className="absolute inset-0">
+                                        <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                                    </div>
+                                )}
+                            </main>
+                        )}
                     </div>
 
-                    <MobileOverlayPanel
-                        open={isSessionSwitcherOpen}
-                        onClose={() => setSessionSwitcherOpen(false)}
-                        title="Sessions"
-                    >
-                        <SessionSidebar mobileVariant />
-                    </MobileOverlayPanel>
-
                     {/* Mobile multi-run launcher: full screen */}
                     {isMultiRunLauncherOpen && (
                         <div className="absolute inset-0 z-10 bg-background header-safe-area">
@@ -382,18 +379,15 @@ export const MainLayout: React.FC = () => {
                 </>
             ) : (
                 <>
-                    {!isSettingsActive && (
-                        <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
-                            <SessionSidebar />
-                        </Sidebar>
-                    )}
-
-                    {/* Main content area */}
+                    {/* Desktop: Header always on top, then Sidebar + Content below */}
                     <div className="flex flex-1 flex-col overflow-hidden relative">
-                        {/* Normal view: Header + content */}
+                        {/* Normal view: Header above Sidebar + content (like SettingsView) */}
                         <div className={cn('absolute inset-0 flex flex-col', (isSettingsActive || isMultiRunLauncherOpen) && 'invisible')}>
                             <Header />
-                            <div className="flex flex-1 overflow-hidden bg-background">
+                            <div className="flex flex-1 overflow-hidden">
+                                <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
+                                    <SessionSidebar />
+                                </Sidebar>
                                 <main className="flex-1 overflow-hidden bg-background relative">
                                     <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
                                         <ErrorBoundary><ChatView /></ErrorBoundary>
@@ -430,8 +424,6 @@ export const MainLayout: React.FC = () => {
                 </>
             )}
 
-            {/* Hide fixed sessions button when settings is open */}
-            {!isSettingsActive && <FixedSessionsButton />}
         </div>
     </DiffWorkerProvider>
     );
diff --git a/packages/ui/src/components/layout/Sidebar.tsx b/packages/ui/src/components/layout/Sidebar.tsx
index 96846f67..9ebf7c9a 100644
--- a/packages/ui/src/components/layout/Sidebar.tsx
+++ b/packages/ui/src/components/layout/Sidebar.tsx
@@ -11,7 +11,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 export const SIDEBAR_CONTENT_WIDTH = 264;
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_MAX_WIDTH = 500;
-const MAC_TITLEBAR_SAFE_AREA = 40;
 const CHECK_FOR_UPDATES_EVENT = 'openchamber:check-for-updates';
 
 interface SidebarProps {
@@ -40,12 +39,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
         return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
     });
 
-    const isMacPlatform = React.useMemo(() => {
-        if (typeof navigator === 'undefined') {
-            return false;
-        }
-        return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
-    }, []);
+
 
     React.useEffect(() => {
         if (typeof window === 'undefined') {
@@ -127,23 +121,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
         }
     }, [isMobile, isResizing]);
 
-    const handleTitlebarDragStart = React.useCallback(async (e: React.MouseEvent) => {
-
-        if (e.button !== 0) {
-            return;
-        }
-
-        if (isDesktopApp) {
-            try {
-                const { getCurrentWindow } = await import('@tauri-apps/api/window');
-                const window = getCurrentWindow();
-                await window.startDragging();
-            } catch (error) {
-                console.error('Failed to start window dragging from sidebar:', error);
-            }
-        }
-    }, [isDesktopApp]);
-
     if (isMobile) {
 
         return null;
@@ -153,7 +130,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
         SIDEBAR_MAX_WIDTH,
         Math.max(SIDEBAR_MIN_WIDTH, sidebarWidth || SIDEBAR_CONTENT_WIDTH)
     ) : 0;
-    const shouldRenderTitlebarSpacer = isDesktopApp && isMacPlatform;
 
     const handlePointerDown = (event: React.PointerEvent) => {
         if (!isOpen) {
@@ -203,14 +179,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
                 style={{ width: `${appliedWidth}px`, overflowX: 'hidden' }}
                 aria-hidden={!isOpen}
             >
-                {shouldRenderTitlebarSpacer && (
-                    <div
-                        className="flex-shrink-0 select-none"
-                        style={{ height: `${MAC_TITLEBAR_SAFE_AREA}px` }}
-                        onMouseDown={handleTitlebarDragStart}
-                        aria-hidden
-                    />
-                )}
                 <div className="flex-1 overflow-hidden">
                     <ErrorBoundary>{children}</ErrorBoundary>
                 </div>