feat(web): design system — ms-* tokens, ThemeProvider, MosaicLogo, sidebar (#221)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/layout/app-shell.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import type { ReactNode } from 'react';
+import { SidebarProvider, useSidebar } from './sidebar-context';
 import { Sidebar } from './sidebar';
 import { Topbar } from './topbar';
 
@@ -6,14 +9,24 @@ interface AppShellProps {
   children: ReactNode;
 }
 
-export function AppShell({ children }: AppShellProps): React.ReactElement {
+function AppShellFrame({ children }: AppShellProps): React.ReactElement {
+  const { collapsed, isMobile } = useSidebar();
+
   return (
-    <div className="min-h-screen">
+    <div className="app-shell" data-sidebar-hidden={!isMobile && collapsed ? 'true' : undefined}>
+      <Topbar />
       <Sidebar />
-      <div className="pl-sidebar">
-        <Topbar />
-        <main className="p-6">{children}</main>
+      <div className="app-main">
+        <main className="h-full overflow-y-auto p-6">{children}</main>
       </div>
     </div>
   );
 }
+
+export function AppShell({ children }: AppShellProps): React.ReactElement {
+  return (
+    <SidebarProvider>
+      <AppShellFrame>{children}</AppShellFrame>
+    </SidebarProvider>
+  );
+}