docs: update PHASES.md Phase 11 with layout overhaul details

- Sidebar.tsx is now "use client" — fetches /api/docs at runtime instead of
  calling listDocuments() during SSG (CI has no DB, causes ECONNREFUSED)
- GET /api/docs added to route.ts (returns doc list for sidebar)
- Removed SidebarContent.tsx (merged into Sidebar.tsx)
- Fixed isAuthorized double-brace typo

PHASES.md

@@ -391,13 +391,23 @@ The VPS services were configured manually (systemd units in `deploy/`). Added a
 ### Files changed
 ```
 new: apps/web/app/api/auth/login/route.ts  # cookie-based login + verify
-new: apps/web/app/api/docs/route.ts        # REST CRUD
+new: apps/web/app/api/docs/route.ts        # GET (list) + POST (create)
+new: apps/web/app/api/docs/[...slug]/route.ts  # PUT (update) + DELETE (delete)
 new: apps/web/app/components/DocForm.tsx   # shared create/edit form
+new: apps/web/app/components/Sidebar.tsx   # client-side doc navigation tree
+new: apps/web/app/components/TOC.tsx       # auto-generated TOC (github-slugger)
+new: apps/web/app/components/ThemeToggle.tsx  # dark mode toggle
 new: apps/web/app/create/page.tsx          # create UI
 new: apps/web/app/login/page.tsx           # login UI
-new: apps/web/app/components/TOC.tsx       # auto-generated TOC
+new: apps/web/app/docs/page.tsx            # docs index listing
-mod: apps/web/app/page.tsx                 # edit/create buttons (auth-gated)
+mod: apps/web/app/layout.tsx               # Linear design: sticky header + sidebar + dark canvas
-mod: apps/web/app/[section]/[...slug]/page.tsx # ?edit=1 + TOC + dark mode
+mod: apps/web/app/page.tsx                 # editorial-style homepage w/ section doc listings
+mod: apps/web/app/[section]/[...slug]/page.tsx # Linear doc layout (breadcrumb, TOC, metadata)
+mod: apps/web/app/search/page.tsx          # dark-themed search w/ result cards
+mod: apps/web/app/components/Markdown.tsx  # Linear typography + rehype-slug
+mod: apps/web/app/globals.css              # Inter font, Linear dark-mode-first palette
+mod: apps/web/app/app/api/docs/route.ts    # dual auth: cookie OR x-webhook-secret
+mod: apps/web/app/api/docs/[...slug]/route.ts
 mod: packages/core/src/document.service.ts # createDocument/updateDocument/deleteDocument
 mod: packages/core/src/index.service.ts    # export snapshotRevision
 mod: packages/core/src/index.ts            # re-export CRUD + types
@@ -410,6 +420,8 @@ mod: apps/mcp/src/index.ts                 # 3 new CRUD write tools
 mod: apps/mcp/src/auth.test.ts             # +4 CRUD auth tests
 mod: apps/api/src/app.test.ts              # +5 tRPC CRUD auth tests
 mod: .env.example                          # ADMIN_PASSWORD
+new dep: rehype-slug                       # heading anchors for TOC links
+new dep: github-slugger                    # matching slug algorithm for client-side TOC
 ```
 
 ### Gotchas / lessons
@@ -419,9 +431,14 @@ mod: .env.example                          # ADMIN_PASSWORD
    (module-level env constant) is untestable. Fix: thread `expectedSecret` through
    `Context` from `createApp(deps)`.
 3. **Next.js catch-all routes** — `[...slug]/edit/` is invalid (catch-all must be
-   last). Used `?edit=1` query param instead.
+   last). Used `?edit=1` query param instead. Also, Next.js App Router won't match
-4. **`stringifyFile` YAML** — quote string values with `JSON.stringify` for
+   PUT/DELETE on `/api/docs/route.ts` for nested paths — need a dynamic segment
+   `/api/docs/[...slug]/route.ts`.
+5. **`stringifyFile` YAML** — quote string values with `JSON.stringify` for
    special-char safety; arrays use `[...]` syntax.
+6. **Next.js SSG + DB** — client components (`"use client"`) don't block SSG
+   during `next build` even if they fetch at runtime. Used for Sidebar (fetches
+   /api/docs at runtime) to avoid ECONNREFUSED on CI.
 
 
 ## Decisions locked (from initial planning)

apps/web/app/api/docs/route.ts

@@ -1,12 +1,15 @@
 import { NextRequest, NextResponse } from "next/server";
 import {
   createDocument,
+  updateDocument,
+  deleteDocument,
+  listDocuments,
 } from "@mcpedia/core";
 import { WEBHOOK_SECRET } from "@mcpedia/config";
 import { timingSafeEqual } from "node:crypto";
 
-// Web CRUD auth: either the `x-webhook-secret` header (API/MCP style) OR the
+// Web CRUD auth: either the x-webhook-secret header (API/MCP style) OR the
-// `mcpedia_admin` cookie (web login). One of the two must be present + valid.
+// mcpedia_admin cookie (web login). One of the two must be valid.
 function isAuthorized(req: NextRequest): boolean {
   if (!WEBHOOK_SECRET) return false;
   const headerSecret = req.headers.get("x-webhook-secret") ?? "";
@@ -21,8 +24,13 @@ function unauthorized() {
   return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 });
 }
 
+// GET /api/docs — list all documents (for sidebar navigation).
+export async function GET() {
+  const docs = await listDocuments();
+  return NextResponse.json(docs);
+}
+
 // POST /api/docs — Create a new document.
-// Body: { slug, title, section, body, type?, status?, author?, tags? }
 export async function POST(req: NextRequest) {
   if (!isAuthorized(req)) return unauthorized();
 

apps/web/app/components/Sidebar.tsx

@@ -1,5 +1,14 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import Link from "next/link";
-import { listDocuments } from "@mcpedia/core";
+
+interface Doc {
+  slug: string;
+  title: string;
+  section: string;
+  tags: string[];
+}
 
 const SECTIONS = [
   { id: "docs", label: "Documentation" },
@@ -8,20 +17,25 @@ const SECTIONS = [
   { id: "notes", label: "Notes" },
 ] as const;
 
-export default async function Sidebar() {
+/** Client-side sidebar (fetches doc list via /api/docs at runtime).
-  const docs = await listDocuments();
+ *  Client component so `next build` SSG doesn't hit Postgres (CI has no DB). */
+export default function Sidebar() {
+  const [docs, setDocs] = useState<Doc[]>([]);
 
-  // Build a tree: section → top-level slugs + children
+  useEffect(() => {
-  const bySection: Record<string, { slug: string; title: string; depth: number }[]> = {};
+    fetch("/api/docs")
+      .then((r) => r.json())
+      .then((data) => {
+        if (Array.isArray(data)) setDocs(data);
+        else if (data?.docs) setDocs(data.docs);
+      })
+      .catch(() => setDocs([]));
+  }, []);
+
+  const bySection: Record<string, Doc[]> = {};
   for (const doc of docs) {
     if (!bySection[doc.section]) bySection[doc.section] = [];
-    // Count depth from dots in a flattened slug: docs/websocket/contract
+    bySection[doc.section].push(doc);
-    // We'll show all docs at their depth level
-    bySection[doc.section].push({
-      slug: doc.slug,
-      title: doc.title,
-      depth: doc.slug.split("/").length,
-    });
   }
 
   return (
@@ -37,13 +51,14 @@ export default async function Sidebar() {
               </div>
               <ul className="space-y-0.5">
                 {sectionDocs.map((doc) => {
-                  const parts = doc.slug.split("/").slice(1); // remove section prefix
+                  const parts = doc.slug.split("/").slice(1);
                   const label = parts[parts.length - 1];
                   const formatted = label
                     .split(/[-_]/)
                     .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                     .join(" ");
-                  const indent = doc.depth - 1;
+                  const depth = doc.slug.split("/").length;
+                  const indent = depth - 1;
                   return (
                     <li key={doc.slug} style={{ marginLeft: `${indent * 12}px` }}>
                       <Link