more files

frontend/src/components/layout/AppShell.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom'
+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" />
+
+      {/* 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>
+
+      {/* Mobile bottom tab bar — hidden above md breakpoint */}
+      <BottomTabBar className="md:hidden" />
+    </div>
+  )
+}