feat: resolve all 22 items in Features and Bugs.txt and complete UI polish

apps/web/src/App.tsx

@@ -2,7 +2,9 @@ import { useState, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
 import { Sidebar, Topbar, CommandPalette, SplashScreen } from "./components/index.js";
 import { ExportDialog } from "./features/export/ExportDialog.js";
+import { AISidebar } from "./features/ai/AISidebar.js";
 import { ToastViewport } from "@pubscript/ui";
+import { useSettings } from "./store/settings.js";
 import Write from "./routes/Write.js";
 import { Characters } from "./routes/Characters.js";
 import { Plot } from "./routes/Plot.js";
@@ -28,6 +30,8 @@ const NAV = [
 export default function App() {
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
+  const navCollapsed = useSettings((s) => s.navCollapsed);
+  const aiSidebarOpen = useSettings((s) => s.aiSidebarOpen);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -41,24 +45,27 @@ export default function App() {
   }, []);
 
   return (
-    <div className="ps-app">
+    <div className={`ps-app${navCollapsed ? " is-nav-collapsed" : ""}${aiSidebarOpen ? " is-ai-open" : ""}`}>
       <SplashScreen />
       <Sidebar nav={NAV} />
       <Topbar onOpenPalette={() => setPaletteOpen(true)} onOpenExport={() => setExportOpen(true)} />
-      <main className="ps-main">
-        <Routes>
-          <Route path="/" element={<Write />} />
-          <Route path="/characters" element={<Characters />} />
-          <Route path="/plot" element={<Plot />} />
-          <Route path="/timeline" element={<Timeline />} />
-          <Route path="/whiteboard" element={<Whiteboard />} />
-          <Route path="/ai" element={<AI />} />
-          <Route path="/projects" element={<Projects />} />
-          <Route path="/settings" element={<Settings />} />
-          <Route path="/admin" element={<Admin />} />
-          <Route path="*" element={<Write />} />
-        </Routes>
-      </main>
+      <div className="ps-workspace-row">
+        <main className="ps-main">
+          <Routes>
+            <Route path="/" element={<Write />} />
+            <Route path="/characters" element={<Characters />} />
+            <Route path="/plot" element={<Plot />} />
+            <Route path="/timeline" element={<Timeline />} />
+            <Route path="/whiteboard" element={<Whiteboard />} />
+            <Route path="/ai" element={<AI />} />
+            <Route path="/projects" element={<Projects />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/admin" element={<Admin />} />
+            <Route path="*" element={<Write />} />
+          </Routes>
+        </main>
+        {aiSidebarOpen && <AISidebar />}
+      </div>
 
       <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} nav={NAV} />
       <ExportDialog open={exportOpen} onClose={() => setExportOpen(false)} />