feat(frontend): Transform layout to use shadcn dashboard-01 with iOS PWA safe area support.

- Replace custom layout with modern SidebarProvider/SidebarInset structure
- Add AppSidebar component using shadcn patterns with preserved account summary
- Add SiteHeader component with SidebarTrigger integration
- Install shadcn sidebar, separator, and related UI components
- Fix iOS PWA safe area issues - sidebar no longer overlaps dynamic island/notch
- Add pt-safe-top and pl-safe-left classes to sidebar and header components
- Remove legacy Sidebar.tsx and Header.tsx components
- Preserve all existing functionality: navigation, API health status, theme toggle, PWA features
- Improve mobile responsive behavior with built-in shadcn drawer patterns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/routes/__root.tsx

@@ -1,12 +1,14 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
-import Sidebar from "../components/Sidebar";
-import Header from "../components/Header";
+import { AppSidebar } from "../components/AppSidebar";
+import { SiteHeader } from "../components/SiteHeader";
 import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
 import { usePWA } from "../hooks/usePWA";
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "../components/ui/sidebar";
 
 function RootLayout() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
   const { updateAvailable, updateSW } = usePWA();
 
   const handlePWAInstall = () => {
@@ -23,23 +25,21 @@ function RootLayout() {
   };
 
   return (
-    <div className="flex min-h-screen bg-background">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <div className="flex flex-col flex-1 min-w-0">
-        <Header setSidebarOpen={setSidebarOpen} />
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "16rem",
+          "--header-height": "4rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <SiteHeader />
         <main className="flex-1 p-6 min-w-0">
           <Outlet />
         </main>
-      </div>
+      </SidebarInset>
 
       {/* PWA Prompts */}
       <PWAInstallPrompt onInstall={handlePWAInstall} />
@@ -47,7 +47,7 @@ function RootLayout() {
         updateAvailable={updateAvailable}
         onUpdate={handlePWAUpdate}
       />
-    </div>
+    </SidebarProvider>
   );
 }