refactor(App): update sidebar toggle functionality and adjust button configurations

apps/x/apps/renderer/src/App.tsx

@@ -124,8 +124,8 @@ const TITLEBAR_BUTTON_PX = 32
 const TITLEBAR_BUTTON_GAP_PX = 4
 const TITLEBAR_HEADER_GAP_PX = 8
 const TITLEBAR_TOGGLE_MARGIN_LEFT_PX = 12
-const TITLEBAR_BUTTONS_COLLAPSED = 5
+const TITLEBAR_BUTTONS_COLLAPSED = 4
-const TITLEBAR_BUTTON_GAPS_COLLAPSED = 4
+const TITLEBAR_BUTTON_GAPS_COLLAPSED = 3
 const GRAPH_TAB_PATH = '__rowboat_graph_view__'
 const BASES_DEFAULT_TAB_PATH = '__rowboat_bases_default__'
 
@@ -446,12 +446,8 @@ function viewStatesEqual(a: ViewState, b: ViewState): boolean {
   return true // both graph
 }
 
-/** Sidebar toggle + back/forward nav */
+/** Sidebar toggle + utility buttons (fixed position, top-left) */
 function FixedSidebarToggle({
-  onNavigateBack,
-  onNavigateForward,
-  canNavigateBack,
-  canNavigateForward,
   onNewChat,
   onOpenSearch,
   meetingState,
@@ -460,10 +456,6 @@ function FixedSidebarToggle({
   onToggleMeeting,
   leftInsetPx,
 }: {
-  onNavigateBack: () => void
-  onNavigateForward: () => void
-  canNavigateBack: boolean
-  canNavigateForward: boolean
   onNewChat: () => void
   onOpenSearch: () => void
   meetingState: MeetingTranscriptionState
@@ -472,8 +464,7 @@ function FixedSidebarToggle({
   onToggleMeeting: () => void
   leftInsetPx: number
 }) {
-  const { toggleSidebar, state } = useSidebar()
+  const { toggleSidebar } = useSidebar()
-  const isCollapsed = state === "collapsed"
   return (
     <div className="fixed left-0 top-0 z-50 flex h-10 items-center" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
       <div aria-hidden="true" className="h-10 shrink-0" style={{ width: leftInsetPx }} />
@@ -536,30 +527,6 @@ function FixedSidebarToggle({
           </TooltipContent>
         </Tooltip>
       )}
-      {/* Back / Forward navigation */}
-      {isCollapsed && (
-        <>
-          <button
-            type="button"
-            onClick={onNavigateBack}
-            disabled={!canNavigateBack}
-            className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
-            style={{ marginLeft: TITLEBAR_BUTTON_GAP_PX }}
-            aria-label="Go back"
-          >
-            <ChevronLeftIcon className="size-5" />
-          </button>
-          <button
-            type="button"
-            onClick={onNavigateForward}
-            disabled={!canNavigateForward}
-            className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
-            aria-label="Go forward"
-          >
-            <ChevronRightIcon className="size-5" />
-          </button>
-        </>
-      )}
     </div>
   )
 }
@@ -584,15 +551,14 @@ function ContentHeader({
   const isCollapsed = state === "collapsed"
   return (
     <header
-      className={cn(
+      className="titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border bg-sidebar overflow-hidden"
-        "titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border px-3 bg-sidebar transition-[padding] duration-200 ease-linear overflow-hidden",
+      style={{
-        // When the sidebar is collapsed the content area shifts left, so we need enough left padding
+        paddingLeft: isCollapsed ? (collapsedLeftPaddingPx ?? 196) : 12,
-        // to avoid overlapping the fixed traffic-lights/toggle/back/forward controls.
+        paddingRight: 12,
-        isCollapsed && !collapsedLeftPaddingPx && "pl-[196px]"
+        transition: 'padding-left 200ms linear',
-      )}
+      }}
-      style={isCollapsed && collapsedLeftPaddingPx ? { paddingLeft: collapsedLeftPaddingPx } : undefined}
     >
-      {!isCollapsed && onNavigateBack && onNavigateForward ? (
+      {onNavigateBack && onNavigateForward ? (
         <div className="titlebar-no-drag flex items-center gap-1 pr-2 shrink-0">
           <button
             type="button"
@@ -4553,10 +4519,6 @@ function App() {
             )}
             {/* Rendered last so its no-drag region paints over the sidebar drag region */}
             <FixedSidebarToggle
-              onNavigateBack={() => { void navigateBack() }}
-              onNavigateForward={() => { void navigateForward() }}
-              canNavigateBack={canNavigateBack}
-              canNavigateForward={canNavigateForward}
               onNewChat={handleNewChatTab}
               onOpenSearch={() => setIsSearchOpen(true)}
               meetingState={meetingTranscription.state}