feat: add mobile navigation, toast system, and confirm dialogs

Phase 8 (Mobile Nav): responsive hamburger menus for PublicLayout,
ConsoleLayout, and AppLayout with Sheet slide-in panels; collapsible
desktop sidebar with localStorage persistence; responsive PlaygroundPage
with single-column mobile layout.

Phase 9 (Toast + AlertDialog): replace all alert()/confirm() calls with
sonner toasts and Radix AlertDialog-based ConfirmDialog. New UI
components: Sheet, AlertDialog, ConfirmDialog, Tooltip, useIsMobile hook.
i18n keys added across all 8 locales.

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

Author: gcmsg

web/app/package-lock.json

@@ -21,6 +21,7 @@
     "react-i18next": "^16.5.6",
     "react-router-dom": "^7.13.1",
     "recharts": "^3.7.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {

web/app/package.json

@@ -1,4 +1,5 @@
 import { Routes, Route } from "react-router-dom"
+import { Toaster } from "sonner"
 import { AppLayout } from "@/components/layout/AppLayout"
 import { ConsoleLayout } from "@/components/layout/ConsoleLayout"
 import { PublicLayout } from "@/components/public/PublicLayout"
@@ -96,6 +97,17 @@ export function App() {
           {/* Catch-all 404 */}
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
+        <Toaster
+          theme="dark"
+          position="bottom-right"
+          toastOptions={{
+            classNames: {
+              toast: "bg-card border-border text-foreground",
+              error: "bg-destructive/10 border-destructive/30 text-destructive",
+              success: "bg-emerald-500/10 border-emerald-500/30 text-emerald-400",
+            },
+          }}
+        />
       </AuthProvider>
     </div>
   )

web/app/src/App.tsx

@@ -1,12 +1,85 @@
-import { Outlet } from "react-router-dom"
+import { useState, useEffect } from "react"
+import { Outlet, useLocation } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { Sidebar } from "./Sidebar"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react"
+
+const COLLAPSED_KEY = "peerclaw_admin_sidebar_collapsed"
 
 export function AppLayout() {
+  const { t } = useTranslation()
+  const isMobile = useIsMobile()
+  const location = useLocation()
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return localStorage.getItem(COLLAPSED_KEY) === "true" } catch { return false }
+  })
+
+  // Close mobile sheet on route change
+  useEffect(() => {
+    setMobileOpen(false)
+  }, [location.pathname])
+
+  const toggleCollapsed = () => {
+    setCollapsed((prev) => {
+      const next = !prev
+      try { localStorage.setItem(COLLAPSED_KEY, String(next)) } catch {}
+      return next
+    })
+  }
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto p-6">
-        <Outlet />
+      {/* Desktop sidebar */}
+      {!isMobile && (
+        <div className="hidden md:flex">
+          <Sidebar collapsed={collapsed} />
+        </div>
+      )}
+
+      {/* Mobile sheet */}
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent side="left" className="w-56 p-0">
+          <SheetTitle className="sr-only">{t('nav.menu')}</SheetTitle>
+          <Sidebar />
+        </SheetContent>
+      </Sheet>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-y-auto">
+        {/* Mobile header */}
+        {isMobile && (
+          <div className="flex h-12 items-center border-b border-border px-4">
+            <button
+              onClick={() => setMobileOpen(true)}
+              className="mr-2 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+              aria-label={t('nav.menu')}
+            >
+              <Menu className="size-5" />
+            </button>
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <img src="/logo.jpg" alt="PeerClaw" className="size-6 rounded-md object-cover" />
+              <span className="font-semibold text-sm truncate">{t('nav.peerclawAdmin')}</span>
+            </div>
+          </div>
+        )}
+        {/* Desktop collapse toggle */}
+        {!isMobile && (
+          <div className="flex h-12 items-center border-b border-border px-6">
+            <button
+              onClick={toggleCollapsed}
+              className="rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+              title={collapsed ? t('nav.expandSidebar') : t('nav.collapseSidebar')}
+            >
+              {collapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
+            </button>
+          </div>
+        )}
+        <div className="p-6">
+          <Outlet />
+        </div>
       </main>
     </div>
   )