Align Code navigation and branding with workspace header rows

src/components/layout/TitleBar.tsx

@@ -15,7 +15,8 @@ import { useSettingsStore } from '@/stores/settings';
 import { normalizeClassroomSidebarWidth } from '@/lib/classroom-layout';
 import logoWordmarkSource from '@/assets/makelore-wordmark-source.png';
 import type { SidebarPeekSource } from './sidebar-peek';
-import { TITLEBAR_LOGO_WIDTH, WINDOWS_TITLEBAR_CONTROLS_WIDTH } from './titlebar-metrics';
+import { ModuleSwitcher } from './ModuleSwitcher';
+import { getClassroomTitlebarWidth, TITLEBAR_LOGO_WIDTH, WINDOWS_TITLEBAR_CONTROLS_WIDTH } from './titlebar-metrics';
 
 type SidebarPeekChange = (open: boolean, source: SidebarPeekSource) => void;
 
@@ -69,6 +70,7 @@ function ProductTitleBar({
 }) {
   const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
   const sidebarWidth = useSettingsStore((state) => normalizeClassroomSidebarWidth(state.classroomSidebarWidth));
+  const classroomTitlebarWidth = getClassroomTitlebarWidth(nativeTrafficLights ? 'darwin' : 'win32', sidebarCollapsed, sidebarWidth);
   const activeProject = useCodingWorkspaceStore((state) => state.activeProject);
   const toolbarButtonClass = 'no-drag motion-press flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-surface-subtle hover:text-foreground';
   const setSidebarCollapsed = useSettingsStore((state) => state.setSidebarCollapsed);
@@ -94,13 +96,13 @@ function ProductTitleBar({
       className={cn(
         toolbarButtonClass,
         'pointer-events-auto absolute top-1 z-[401]',
-        nativeTrafficLights ? 'left-[88px]' : 'left-2',
+        workspaceLayout ? 'right-2' : nativeTrafficLights ? 'left-[88px]' : 'left-2',
       )}
       onClick={toggleSidebar}
       onPointerEnter={() => handleSidebarPeekEnter('toggle')}
       onPointerLeave={() => handleSidebarPeekLeave('toggle')}
-      onFocus={() => handleSidebarPeekEnter('focus')}
-      onBlur={() => handleSidebarPeekLeave('focus')}
+      onFocus={!workspaceLayout ? () => handleSidebarPeekEnter('focus') : undefined}
+      onBlur={!workspaceLayout ? () => handleSidebarPeekLeave('focus') : undefined}
     >
       {sidebarCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
     </button>
@@ -110,10 +112,23 @@ function ProductTitleBar({
       data-testid="titlebar-sidebar-toggle-layer"
       className={cn(
         'no-drag pointer-events-auto fixed left-0 top-0 z-[400] h-10',
-        nativeTrafficLights ? 'w-[132px]' : 'w-[52px]',
+        !workspaceLayout && (nativeTrafficLights ? 'w-[132px]' : 'w-[52px]'),
       )}
+      style={workspaceLayout ? { width: classroomTitlebarWidth } : undefined}
+      onPointerEnter={workspaceLayout ? () => handleSidebarPeekEnter('titlebar') : undefined}
+      onPointerLeave={workspaceLayout ? () => handleSidebarPeekLeave('titlebar') : undefined}
+      onFocusCapture={workspaceLayout ? () => handleSidebarPeekEnter('focus') : undefined}
+      onBlurCapture={workspaceLayout ? (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) handleSidebarPeekLeave('focus');
+      } : undefined}
     >
-      {sidebarToggle}
+      {workspaceLayout ? <div
+        data-testid="classroom-titlebar-navigation"
+        className={cn('flex h-full items-center gap-2 pr-12', nativeTrafficLights ? 'pl-[88px]' : 'pl-2')}
+      >
+        <ModuleSwitcher sidebarCollapsed={false} toolbar iconOnly />
+        {sidebarToggle}
+      </div> : sidebarToggle}
     </div>
   );
   const titlebarLogo = (
@@ -155,16 +170,16 @@ function ProductTitleBar({
         <>
           <div
             data-testid="titlebar-sidebar-surface"
-            style={workspaceLayout && !sidebarTitlebarHidden ? { width: sidebarWidth, minWidth: sidebarWidth, flexBasis: sidebarWidth } : undefined}
+            style={workspaceLayout ? { width: classroomTitlebarWidth, minWidth: classroomTitlebarWidth, flexBasis: classroomTitlebarWidth } : undefined}
             className={cn(
               'flex h-full shrink-0 items-center gap-1 px-2',
-              sidebarTitlebarHidden
+              workspaceLayout
+                ? ''
+                : sidebarTitlebarHidden
                 ? nativeTrafficLights
                   ? 'w-[132px]'
                   : 'w-[52px]'
-                : workspaceLayout
-                  ? ''
-                  : 'w-64',
+                : 'w-64',
               overlay
                 ? 'pointer-events-none border-r-0 bg-transparent'
                 : sidebarTitlebarHidden
@@ -178,7 +193,7 @@ function ProductTitleBar({
             onPointerEnter={sidebarPreviewTitlebarVisible ? () => handleSidebarPeekEnter('titlebar') : undefined}
             onPointerLeave={sidebarPreviewTitlebarVisible ? () => handleSidebarPeekLeave('titlebar') : undefined}
           />
-          {(!workspaceLayout || sidebarCollapsed) && (typeof document !== 'undefined' ? createPortal(sidebarTogglePortal, document.body) : sidebarTogglePortal)}
+          {typeof document !== 'undefined' ? createPortal(sidebarTogglePortal, document.body) : sidebarTogglePortal}
         </>
       ) : null}
       {integrated ? (