feat: integrate pixel teacher presence and resilient classroom preview

src/components/layout/TitleBar.tsx

@@ -12,6 +12,7 @@ import { invokeIpc } from '@/lib/api-client';
 import { cn } from '@/lib/utils';
 import { useCodingWorkspaceStore } from '@/stores/coding-workspace';
 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';
@@ -67,6 +68,7 @@ function ProductTitleBar({
   onSidebarPeekChange?: SidebarPeekChange;
 }) {
   const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
+  const sidebarWidth = useSettingsStore((state) => normalizeClassroomSidebarWidth(state.classroomSidebarWidth));
   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);
@@ -153,6 +155,7 @@ function ProductTitleBar({
         <>
           <div
             data-testid="titlebar-sidebar-surface"
+            style={workspaceLayout && !sidebarTitlebarHidden ? { width: sidebarWidth, minWidth: sidebarWidth, flexBasis: sidebarWidth } : undefined}
             className={cn(
               'flex h-full shrink-0 items-center gap-1 px-2',
               sidebarTitlebarHidden
@@ -160,7 +163,7 @@ function ProductTitleBar({
                   ? 'w-[132px]'
                   : 'w-[52px]'
                 : workspaceLayout
-                  ? 'w-[256px] min-w-[256px] basis-[256px]'
+                  ? ''
                   : 'w-64',
               overlay
                 ? 'pointer-events-none border-r-0 bg-transparent'