overhaul complete

frontend/src/components/layout/AppShell.tsx

@@ -1,23 +1,29 @@
 import { Outlet } from 'react-router-dom'
+import { Header } from './Header'
 import { Sidebar } from './Sidebar'
 import { BottomTabBar } from './BottomTabBar'
 
 export function AppShell() {
   return (
-    <div className="flex h-screen overflow-hidden bg-[#FAFBFC]">
-      {/* Desktop sidebar — hidden below md breakpoint */}
-      <Sidebar className="hidden md:flex" />
+    <div className="flex flex-col h-screen overflow-hidden bg-[#F4F5F7]">
+      {/* Top header — full width, always visible */}
+      <Header />
 
-      {/* Main content area — bottom padding leaves room for mobile tab bar */}
-      <main
-        id="main-content"
-        className="flex-1 overflow-y-auto pb-14 md:pb-0"
-        tabIndex={-1}
-      >
-        <Outlet />
-      </main>
+      <div className="flex flex-1 overflow-hidden">
+        {/* Desktop sidebar */}
+        <Sidebar className="hidden md:flex flex-col" />
 
-      {/* Mobile bottom tab bar — hidden above md breakpoint */}
+        {/* Main content */}
+        <main
+          id="main-content"
+          className="flex-1 overflow-y-auto pb-14 md:pb-0"
+          tabIndex={-1}
+        >
+          <Outlet />
+        </main>
+      </div>
+
+      {/* Mobile bottom tab bar */}
       <BottomTabBar className="md:hidden" />
     </div>
   )