feat(ui): overhaul UI/UX with CommandMenu, modern Linear design, interactive TOC, and live preview

apps/web/app/components/CommandMenu.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+interface Hit {
+  slug: string;
+  title: string;
+  section: string;
+  snippet?: string;
+  score: number;
+}
+
+export default function CommandMenu() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Hit[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Global shortcut ⌘K or /
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      } else if (e.key === "/" && !["INPUT", "TEXTAREA"].includes((e.target as HTMLElement)?.tagName)) {
+        e.preventDefault();
+        setOpen(true);
+      } else if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setQuery("");
+      setResults([]);
+      setSelectedIndex(0);
+    }
+  }, [open]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      return;
+    }
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=8`);
+        const data = await res.json();
+        setResults(data.results || []);
+        setSelectedIndex(0);
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  function handleNavigate(slug: string) {
+    setOpen(false);
+    router.push(`/${slug}`);
+  }
+
+  function handleKeyNavigation(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (results.length > 0 ? (prev + 1) % results.length : 0));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (results.length > 0 ? (prev - 1 + results.length) % results.length : 0));
+    } else if (e.key === "Enter" && results[selectedIndex]) {
+      e.preventDefault();
+      handleNavigate(results[selectedIndex].slug);
+    }
+  }
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-xs text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg transition-all shadow-inner"
+      >
+        <svg className="w-3.5 h-3.5 text-[#62666d]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        <span>Search documentation...</span>
+        <kbd className="ml-2 font-mono bg-[#08090a] px-1.5 py-0.5 rounded border border-[#1f2022] text-[10px] text-[#62666d]">
+          ⌘K
+        </kbd>
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+        onClick={() => setOpen(false)}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-2xl bg-[#0f1011] border border-[#27292d] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
+        {/* Search input bar */}
+        <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#1f2022] bg-[#141517]">
+          <svg className="w-5 h-5 text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyNavigation}
+            placeholder="Type to search (titles, keywords, concepts)..."
+            className="w-full bg-transparent text-[#f7f8f8] placeholder-[#62666d] text-sm focus:outline-none"
+          />
+          {loading && (
+            <div className="w-4 h-4 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin shrink-0" />
+          )}
+          <button
+            onClick={() => setOpen(false)}
+            className="text-xs text-[#62666d] hover:text-[#d0d6e0] bg-[#1b1d20] px-1.5 py-0.5 rounded border border-[#27292d]"
+          >
+            ESC
+          </button>
+        </div>
+
+        {/* Results / Suggestions */}
+        <div className="max-h-96 overflow-y-auto p-2">
+          {query.trim() === "" ? (
+            <div className="px-3 py-6 text-center">
+              <p className="text-xs text-[#8a8f98]">Search full-text, semantic embeddings, and CTF writeups.</p>
+              <div className="flex justify-center gap-2 mt-3 text-[11px] text-[#62666d]">
+                <span>Navigation: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↑</kbd> <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↓</kbd></span>
+                <span>Select: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↵</kbd></span>
+              </div>
+            </div>
+          ) : results.length === 0 && !loading ? (
+            <div className="px-4 py-8 text-center text-xs text-[#8a8f98]">
+              No documents matching &quot;{query}&quot;
+            </div>
+          ) : (
+            <ul className="space-y-1">
+              {results.map((hit, index) => {
+                const isSelected = index === selectedIndex;
+                return (
+                  <li
+                    key={hit.slug}
+                    onClick={() => handleNavigate(hit.slug)}
+                    onMouseEnter={() => setSelectedIndex(index)}
+                    className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
+                      isSelected
+                        ? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[#f7f8f8]"
+                        : "hover:bg-[#141517] text-[#d0d6e0] border border-transparent"
+                    }`}
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs px-1.5 py-0.25 bg-[#191a1b] border border-[#23252a] rounded text-[#7170ff] font-mono">
+                          {hit.section}
+                        </span>
+                        <span className={`text-sm font-medium ${isSelected ? "text-[#7170ff]" : "text-[#f7f8f8]"} truncate`}>
+                          {hit.title}
+                        </span>
+                      </div>
+                      {hit.snippet && (
+                        <p
+                          className="text-xs text-[#8a8f98] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[#f7f8f8] [&>mark]:rounded [&>mark]:px-0.5"
+                          dangerouslySetInnerHTML={{ __html: hit.snippet }}
+                        />
+                      )}
+                    </div>
+                    <span className="text-[11px] text-[#62666d] shrink-0 self-center">
+                      {hit.slug}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-[#1f2022] bg-[#0c0d0e] text-[11px] text-[#62666d]">
+          <span>Tip: Press <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">Hybrid</kbd> search is enabled by default</span>
+          <Link
+            href={`/search?q=${encodeURIComponent(query)}`}
+            onClick={() => setOpen(false)}
+            className="hover:text-[#7170ff] transition-colors"
+          >
+            Open full search page →
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/components/DocActions.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+interface DocActionsProps {
+  slug: string;
+  body: string;
+  canEdit: boolean;
+}
+
+export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
+  const [copiedMd, setCopiedMd] = useState(false);
+  const [copiedLink, setCopiedLink] = useState(false);
+
+  function handleCopyMarkdown() {
+    navigator.clipboard.writeText(body);
+    setCopiedMd(true);
+    setTimeout(() => setCopiedMd(false), 2000);
+  }
+
+  function handleCopyLink() {
+    navigator.clipboard.writeText(window.location.href);
+    setCopiedLink(true);
+    setTimeout(() => setCopiedLink(false), 2000);
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 shrink-0 flex-wrap">
+      {/* Copy Markdown */}
+      <button
+        onClick={handleCopyMarkdown}
+        type="button"
+        title="Copy raw markdown content"
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
+      >
+        {copiedMd ? (
+          <>
+            <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span className="text-emerald-400">Copied MD</span>
+          </>
+        ) : (
+          <>
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+            </svg>
+            <span>Raw MD</span>
+          </>
+        )}
+      </button>
+
+      {/* Copy Link */}
+      <button
+        onClick={handleCopyLink}
+        type="button"
+        title="Copy link to document"
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
+      >
+        {copiedLink ? (
+          <>
+            <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span className="text-emerald-400">Copied</span>
+          </>
+        ) : (
+          <>
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+            </svg>
+            <span>Share</span>
+          </>
+        )}
+      </button>
+
+      {/* Edit Link */}
+      <Link
+        href={canEdit ? `/${slug}?edit=1` : `/login?redirect=/${slug}`}
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/15 hover:bg-[#5e6ad2]/25 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#7170ff] hover:text-white rounded-md transition-all"
+      >
+        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+        </svg>
+        <span>{canEdit ? "Edit" : "Edit"}</span>
+      </Link>
+    </div>
+  );
+}

apps/web/app/components/DocForm.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useRouter } from "next/navigation";
+import Markdown from "./Markdown";
 
 interface DocFormProps {
   mode: "create" | "edit";
@@ -23,6 +24,14 @@ interface DocFormProps {
 const SECTION_OPTIONS = ["docs", "writeups", "research", "notes"] as const;
 const TYPE_OPTIONS = ["documentation", "writeup", "research", "note"] as const;
 
+const PRESET_FIELDS = [
+  { key: "difficulty", value: "medium" },
+  { key: "points", value: "100" },
+  { key: "category", value: "pwn" },
+  { key: "event", value: "DEF CON Quals 2024" },
+  { key: "solved", value: "true" },
+];
+
 export default function DocForm({
   mode,
   slug,
@@ -33,6 +42,7 @@ export default function DocForm({
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"write" | "preview">("write");
 
   const [title, setTitle] = useState(initial?.title ?? "");
   const [slugInput, setSlugInput] = useState("");
@@ -44,10 +54,10 @@ export default function DocForm({
   const [author, setAuthor] = useState(initial?.author ?? "");
   const [parentFolder, setParentFolder] = useState("");
 
-  // Extract existing custom fields from initial for edit mode
-  const [customFields, setCustomFields] = useState<
-    Array<{ key: string; value: string }>
-  >(() => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Extract existing custom fields
+  const [customFields, setCustomFields] = useState<Array<{ key: string; value: string }>>(() => {
     if (initial?.extraFields) {
       return Object.entries(initial.extraFields)
         .filter(([k, v]) => k !== "slug" && v !== undefined && v !== null)
@@ -72,12 +82,10 @@ export default function DocForm({
   const availableFolders = existingFolders?.[section] ?? [];
 
   const baseInputCls =
-    "w-full px-3 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]";
+    "w-full px-3.5 py-2 bg-[#0f1011] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
 
-  const baseSelectCls = baseInputCls;
-
-  function addCustomField() {
-    setCustomFields([...customFields, { key: "", value: "" }]);
+  function addCustomField(key = "", value = "") {
+    setCustomFields([...customFields, { key, value }]);
   }
 
   function updateCustomField(index: number, field: "key" | "value", value: string) {
@@ -90,6 +98,24 @@ export default function DocForm({
     setCustomFields(customFields.filter((_, i) => i !== index));
   }
 
+  function insertMarkdown(prefix: string, suffix = "") {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selection = body.substring(start, end);
+    const replacement = `${prefix}${selection || "text"}${suffix}`;
+
+    const newBody = body.substring(0, start) + replacement + body.substring(end);
+    setBody(newBody);
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + prefix.length, start + replacement.length - suffix.length);
+    }, 10);
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setLoading(true);
@@ -158,52 +184,53 @@ export default function DocForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
       {error && (
-        <div className="p-3 rounded border border-[#274360] text-[#fca5a5] text-sm">
+        <div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-sm">
           {error}
         </div>
       )}
 
       {/* Title */}
       <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
-          Title
+        <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          Document Title *
         </label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className={baseInputCls}
+          placeholder="e.g. DEF CON Quals 2024 — pwn-100 Writeup"
+          className={`${baseInputCls} text-base`}
           required
         />
       </div>
 
       {/* Section + Type + Status */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
             Section
           </label>
           <select
             value={section}
             onChange={(e) => setSection(e.target.value as typeof section)}
-            className={baseSelectCls}
+            className={baseInputCls}
             disabled={isEdit}
           >
             {SECTION_OPTIONS.map((s) => (
               <option key={s} value={s}>
-                {s}
+                {s.toUpperCase()}
               </option>
             ))}
           </select>
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
             Type
           </label>
           <select
             value={type}
             onChange={(e) => setType(e.target.value as typeof type)}
-            className={baseSelectCls}
+            className={baseInputCls}
           >
             {TYPE_OPTIONS.map((t) => (
               <option key={t} value={t}>
@@ -213,13 +240,13 @@ export default function DocForm({
           </select>
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
             Status
           </label>
           <select
             value={status}
             onChange={(e) => setStatus(e.target.value as typeof status)}
-            className={baseSelectCls}
+            className={baseInputCls}
           >
             <option value="published">Published</option>
             <option value="draft">Draft</option>
@@ -228,71 +255,68 @@ export default function DocForm({
       </div>
 
       {/* Folder + Slug */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
-            Parent folder (optional)
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+            Parent Folder
           </label>
           <select
             value={parentFolder}
             onChange={(e) => setParentFolder(e.target.value)}
-            className={baseSelectCls}
+            className={baseInputCls}
             disabled={isEdit}
           >
-            <option value="">(root of section)</option>
+            <option value="">(Root of section)</option>
             {availableFolders.map((folder) => (
               <option key={folder} value={folder}>
-                {folder}
+                /{folder}
               </option>
             ))}
           </select>
-          <p className="text-xs text-[#62666d] mt-1">
-            Place inside an existing folder.
-          </p>
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
-            {isEdit ? "Full slug" : "Slug (file name)"}
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+            {isEdit ? "Full Slug" : "Slug (File name) *"}
           </label>
           {isEdit ? (
             <input
               type="text"
               value={slug ?? ""}
               readOnly
-              className="w-full px-3 py-2 bg-[#191a1b] border border-[#23252a] rounded text-[#8a8f98]"
+              className="w-full px-3.5 py-2 bg-[#141517] border border-[#23252a] rounded-lg text-sm text-[#8a8f98] font-mono"
             />
           ) : (
             <input
               type="text"
               value={slugInput}
               onChange={(e) => setSlugInput(e.target.value)}
-              className={baseInputCls}
-              placeholder="my-document-slug"
+              className={`${baseInputCls} font-mono`}
+              placeholder="my-new-post"
               required
             />
           )}
-          <p className="text-xs text-[#62666d] mt-1">
-            Resolved: <code className="bg-[#191a1b] px-1 py-0.25 rounded">{effectiveSlug || section}</code>
+          <p className="text-[11px] text-[#62666d] mt-1 font-mono">
+            Path: <span className="text-[#7170ff]">{effectiveSlug || section}</span>
           </p>
         </div>
       </div>
 
       {/* Tags + Author */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
-            Tags
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+            Tags (comma separated)
           </label>
           <input
             type="text"
             value={tags}
             onChange={(e) => setTags(e.target.value)}
             className={baseInputCls}
-            placeholder="comma, separated, tags"
+            placeholder="ctf, pwn, reverse, tutorial"
           />
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
             Author
           </label>
           <input
@@ -300,83 +324,196 @@ export default function DocForm({
             value={author}
             onChange={(e) => setAuthor(e.target.value)}
             className={baseInputCls}
+            placeholder="asep"
           />
         </div>
       </div>
 
-      {/* Custom fields */}
-      <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-2">
-          Custom metadata fields
-        </label>
-        <p className="text-xs text-[#62666d] mb-3">
-          Add extra frontmatter fields. Any field you add will be rendered as
-          an auto-styled badge on the doc page based on its value.
-        </p>
-        {customFields.length > 0 && (
-          <div className="space-y-3 mb-3">
-            {customFields.map((field, i) => (
-              <div key={i} className="flex gap-2 items-center">
-                <input
-                  type="text"
-                  placeholder="field name"
-                  value={field.key}
-                  onChange={(e) => updateCustomField(i, "key", e.target.value)}
-                  className={baseInputCls}
-                />
-                <input
-                  type="text"
-                  placeholder="value"
-                  value={field.value}
-                  onChange={(e) => updateCustomField(i, "value", e.target.value)}
-                  className={baseInputCls}
-                />
-                <button
-                  type="button"
-                  onClick={() => removeCustomField(i)}
-                  className="text-xs text-[#fca5a5] hover:text-[#ff6b6b] px-2 py-1 rounded hover:bg-[#191a1b] transition-colors"
-                >
-                  ✕
-                </button>
-              </div>
+      {/* Custom Metadata Fields */}
+      <div className="p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-[#8a8f98]">
+              Dynamic Custom Metadata
+            </h3>
+            <p className="text-[11px] text-[#62666d] mt-0.5">
+              Add custom key-values (event, difficulty, points, etc.) rendered as styled badges.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <span className="text-[11px] text-[#62666d]">Presets:</span>
+            {PRESET_FIELDS.map((preset) => (
+              <button
+                key={preset.key}
+                type="button"
+                onClick={() => addCustomField(preset.key, preset.value)}
+                className="px-2 py-0.5 text-[11px] bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded transition-colors"
+              >
+                +{preset.key}
+              </button>
             ))}
           </div>
-        )}
+        </div>
+
+        {customFields.map((field, i) => (
+          <div key={i} className="flex gap-2 items-center">
+            <input
+              type="text"
+              placeholder="Field name (e.g. event)"
+              value={field.key}
+              onChange={(e) => updateCustomField(i, "key", e.target.value)}
+              className={`${baseInputCls} text-xs font-mono`}
+            />
+            <input
+              type="text"
+              placeholder="Value (e.g. DEF CON 2024)"
+              value={field.value}
+              onChange={(e) => updateCustomField(i, "value", e.target.value)}
+              className={`${baseInputCls} text-xs font-mono`}
+            />
+            <button
+              type="button"
+              onClick={() => removeCustomField(i)}
+              className="p-2 text-[#fca5a5] hover:text-rose-400 rounded hover:bg-[#191a1b] transition-colors"
+              title="Remove field"
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+
         <button
           type="button"
-          onClick={addCustomField}
-          className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 transition-colors"
+          onClick={() => addCustomField()}
+          className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors"
         >
-          + Add field
+          + Add Custom Field
         </button>
       </div>
 
-      {/* Body */}
-      <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
-          Body (Markdown)
-        </label>
-        <textarea
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          className="w-full h-96 px-3 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] font-mono text-sm focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
-          placeholder="# Heading&#10;&#10;Content here..."
-        />
+      {/* Body with Write / Preview Tabs */}
+      <div className="border border-[#1f2022] rounded-xl overflow-hidden bg-[#0c0d0e]">
+        {/* Editor Toolbar */}
+        <div className="flex items-center justify-between px-3 py-2 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
+          {/* Tabs */}
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => setActiveTab("write")}
+              className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
+                activeTab === "write"
+                  ? "bg-[#5e6ad2] text-white"
+                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+              }`}
+            >
+              Write
+            </button>
+            <button
+              type="button"
+              onClick={() => setActiveTab("preview")}
+              className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
+                activeTab === "preview"
+                  ? "bg-[#5e6ad2] text-white"
+                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+              }`}
+            >
+              Live Preview
+            </button>
+          </div>
+
+          {/* Markdown Action Shortcuts */}
+          {activeTab === "write" && (
+            <div className="flex items-center gap-1 text-xs text-[#8a8f98]">
+              <button
+                type="button"
+                onClick={() => insertMarkdown("**", "**")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                title="Bold"
+              >
+                <b>B</b>
+              </button>
+              <button
+                type="button"
+                onClick={() => insertMarkdown("*", "*")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                title="Italic"
+              >
+                <i>I</i>
+              </button>
+              <button
+                type="button"
+                onClick={() => insertMarkdown("## ")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                title="Heading 2"
+              >
+                H2
+              </button>
+              <button
+                type="button"
+                onClick={() => insertMarkdown("```\n", "\n```")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0] font-mono"
+                title="Code Block"
+              >
+                {"</>"}
+              </button>
+              <button
+                type="button"
+                onClick={() => insertMarkdown("[", "](https://)")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                title="Link"
+              >
+                Link
+              </button>
+              <button
+                type="button"
+                onClick={() => insertMarkdown("> [!NOTE]\n> ")}
+                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                title="Note Callout"
+              >
+                Note
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Tab content */}
+        {activeTab === "write" ? (
+          <textarea
+            ref={textareaRef}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            className="w-full h-96 p-4 bg-transparent text-[#f7f8f8] placeholder-[#62666d] font-mono text-sm focus:outline-none resize-y leading-relaxed"
+            placeholder="# Write your markdown document here..."
+            required
+          />
+        ) : (
+          <div className="p-6 h-96 overflow-y-auto bg-[#08090a]">
+            {body.trim() ? (
+              <Markdown source={body} />
+            ) : (
+              <p className="text-xs text-[#62666d] italic">Nothing to preview yet.</p>
+            )}
+          </div>
+        )}
       </div>
 
-      {/* Submit */}
-      <div className="flex gap-3">
+      {/* Actions */}
+      <div className="flex items-center gap-3">
         <button
           type="submit"
           disabled={loading}
-          className="px-4 py-2 bg-[#5e6ad2] text-white rounded hover:bg-[#7170ff] disabled:opacity-50 font-medium text-sm"
+          className="px-6 py-2.5 bg-[#5e6ad2] hover:bg-[#6a75e0] text-white rounded-lg font-medium text-sm transition-all shadow-md shadow-[#5e6ad2]/20 disabled:opacity-50 flex items-center gap-2"
         >
-          {loading ? "Saving..." : mode === "create" ? "Create" : "Update"}
+          {loading && (
+            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          )}
+          <span>{loading ? "Saving document..." : mode === "create" ? "Create Document" : "Save Changes"}</span>
         </button>
         <button
           type="button"
           onClick={() => router.back()}
-          className="px-4 py-2 border border-[#23252a] rounded text-[#d0d6e0] hover:text-[#f7f8f8] hover:border-[#3e3e44] transition-colors text-sm"
+          className="px-4 py-2.5 border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
         >
           Cancel
         </button>

apps/web/app/components/Header.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SECTIONS } from "@mcpedia/config/sections";
+import ThemeToggle from "@/components/ThemeToggle";
+import CommandMenu from "@/components/CommandMenu";
+
+export default function Header() {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-[#1f2022] glass-nav">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
+        {/* Brand */}
+        <div className="flex items-center gap-3">
+          <Link href="/" className="flex items-center gap-2 group">
+            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-[#5e6ad2] to-[#7170ff] flex items-center justify-center text-white font-bold text-xs shadow-md shadow-[#5e6ad2]/20 group-hover:scale-105 transition-transform">
+              M
+            </div>
+            <span className="font-semibold text-[#f7f8f8] text-base tracking-tight group-hover:text-white transition-colors">
+              MCPedia
+            </span>
+          </Link>
+          <span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[#141517] border border-[#23252a] text-[#8a8f98]">
+            v0.1.0
+          </span>
+        </div>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center gap-1">
+          {SECTIONS.map((s) => {
+            const isActive = pathname === `/${s.id}` || pathname.startsWith(`/${s.id}/`);
+            return (
+              <Link
+                key={s.id}
+                href={`/${s.id}`}
+                className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  isActive
+                    ? "text-[#f7f8f8] bg-[#141517] border border-[#23252a]"
+                    : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]/50"
+                }`}
+              >
+                <span className="mr-1.5 opacity-70">{s.icon}</span>
+                {s.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Right tools */}
+        <div className="flex items-center gap-2.5">
+          <CommandMenu />
+
+          <Link
+            href="/search"
+            className="md:hidden p-1.5 text-[#8a8f98] hover:text-[#f7f8f8] rounded-lg hover:bg-[#141517] transition-colors"
+            title="Search"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </Link>
+
+          <Link
+            href="/create"
+            className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm hover:shadow-[#5e6ad2]/20"
+          >
+            <span>+</span>
+            <span>New Doc</span>
+          </Link>
+
+          <Link
+            href="/login"
+            className={`px-2.5 py-1 text-xs rounded-lg transition-colors ${
+              pathname === "/login"
+                ? "text-[#f7f8f8] bg-[#141517]"
+                : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
+            }`}
+          >
+            Login
+          </Link>
+
+          <div className="border-l border-[#1f2022] pl-2.5 flex items-center">
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile menu toggle */}
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="md:hidden p-1 text-[#8a8f98] hover:text-[#f7f8f8]"
+            aria-label="Toggle navigation"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              {mobileMenuOpen ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              )}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Drawer */}
+      {mobileMenuOpen && (
+        <div className="md:hidden border-t border-[#1f2022] bg-[#0c0d0e] px-4 py-3 space-y-1 animate-fade-in">
+          {SECTIONS.map((s) => (
+            <Link
+              key={s.id}
+              href={`/${s.id}`}
+              onClick={() => setMobileMenuOpen(false)}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[#d0d6e0] hover:bg-[#141517] hover:text-[#f7f8f8]"
+            >
+              <span>{s.icon}</span>
+              <span>{s.label}</span>
+            </Link>
+          ))}
+          <div className="pt-2 border-t border-[#1f2022] flex gap-2">
+            <Link
+              href="/search"
+              onClick={() => setMobileMenuOpen(false)}
+              className="flex-1 text-center py-2 text-xs bg-[#141517] text-[#d0d6e0] rounded-lg"
+            >
+              Search
+            </Link>
+            <Link
+              href="/create"
+              onClick={() => setMobileMenuOpen(false)}
+              className="flex-1 text-center py-2 text-xs bg-[#5e6ad2] text-white rounded-lg font-medium"
+            >
+              + Create
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}

apps/web/app/components/Markdown.tsx

@@ -1,32 +1,101 @@
+"use client";
+
+import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 
+function CodeBlock({ children, className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  const [copied, setCopied] = useState(false);
+  const textContent = String(children).replace(/\n$/, "");
+  const match = /language-(\w+)/.exec(className || "");
+  const language = match ? match[1] : "";
+
+  // If inline code
+  if (!className && typeof children === "string" && !children.includes("\n")) {
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  function handleCopy() {
+    navigator.clipboard.writeText(textContent);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="relative group my-4 rounded-lg overflow-hidden border border-[#23252a] bg-[#0c0d0e]">
+      {/* Code block header bar */}
+      <div className="flex items-center justify-between px-3.5 py-1.5 bg-[#141517] border-b border-[#1f2022] text-[11px] text-[#8a8f98] font-mono">
+        <span>{language || "text"}</span>
+        <button
+          onClick={handleCopy}
+          type="button"
+          className="flex items-center gap-1 text-[#8a8f98] hover:text-[#f7f8f8] bg-[#1a1b1d] hover:bg-[#23252a] px-2 py-0.5 rounded border border-[#27292d] transition-all"
+        >
+          {copied ? (
+            <>
+              <svg className="w-3 h-3 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              <span className="text-emerald-400 font-sans">Copied!</span>
+            </>
+          ) : (
+            <>
+              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              <span className="font-sans">Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      <pre className="!m-0 !bg-transparent p-4 overflow-x-auto text-sm text-[#e2e4e7] font-mono leading-relaxed">
+        <code className={className} {...props}>
+          {children}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
 export default function Markdown({ source }: { source: string }) {
   return (
     <div
-      className="prose prose-lg max-w-none
-      prose-headings:text-[#f7f8f8] prose-headings:font-light prose-headings:mb-4
-      prose-p:text-[#d0d6e0] prose-p:mb-4
-      prose-a:text-[#7170ff] prose-a:no-underline hover:prose-a:text-[#828fff]
-      prose-code:text-[#d0d6e0] prose-code:bg-[#191a1b] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
-      prose-pre:bg-[#191a1b] prose-pre:border prose-pre:border-[#23252a] prose-pre:rounded-lg
-      prose-pre code:bg-transparent prose-pre code:p-0 prose-pre code:text-sm
-      prose-blockquote:border-l-[#23252a] prose-blockquote:text-[#a0a4a8]
-      prose-ul:text-[#d0d6e0] prose-ol:text-[#d0d6e0]
-      prose-table:border-collapse [&>_table]:overflow-x-auto
-      prose-th:bg-[#191a1b] prose-th:text-[#f7f8f8] prose-th:font-medium
-      prose-td:border-[#1f2022] prose-th:border-[#1f2022]"
+      className="prose prose-invert max-w-none
+      prose-headings:text-[#f7f8f8] prose-headings:font-medium prose-headings:tracking-tight
+      prose-h1:text-2xl prose-h1:mb-6 prose-h1:mt-8 prose-h1:pb-2 prose-h1:border-b prose-h1:border-[#1f2022]
+      prose-h2:text-xl prose-h2:mb-4 prose-h2:mt-8
+      prose-h3:text-base prose-h3:mb-3 prose-h3:mt-6
+      prose-p:text-[#d0d6e0] prose-p:leading-relaxed prose-p:mb-4
+      prose-a:text-[#7170ff] prose-a:no-underline hover:prose-a:underline hover:prose-a:text-[#828fff]
+      prose-ul:text-[#d0d6e0] prose-ul:my-3 prose-li:my-1
+      prose-ol:text-[#d0d6e0] prose-ol:my-3
+      prose-strong:text-[#f7f8f8] prose-strong:font-semibold
+      prose-hr:border-[#1f2022] prose-hr:my-8"
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeSlug]}
         components={{
+          code: CodeBlock as any,
+          pre: ({ children }) => <>{children}</>,
           table: ({ node, ...props }) => (
-            <div className="overflow-x-auto">
+            <div className="overflow-x-auto my-6 border border-[#1f2022] rounded-lg">
               <table className="w-full border-collapse" {...props} />
             </div>
           ),
+          blockquote: ({ children }) => {
+            return (
+              <blockquote className="border-l-4 border-[#5e6ad2] bg-[#141517]/60 pl-4 py-2 my-4 rounded-r text-[#a0a4a8] not-italic">
+                {children}
+              </blockquote>
+            );
+          },
         }}
       >
         {source}

apps/web/app/components/McpConfigSnippet.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+
+const CONFIGS = [
+  {
+    id: "claude",
+    label: "Claude Desktop",
+    filename: "~/Library/Application Support/Claude/claude_desktop_config.json",
+    content: `{
+  "mcpServers": {
+    "mcpedia": {
+      "command": "bun",
+      "args": ["run", "/path/to/mcpedia/apps/mcp/src/index.ts"],
+      "env": {
+        "DATABASE_URL": "postgresql://...",
+        "OPENROUTER_API_KEY": "sk-or-v1-..."
+      }
+    }
+  }
+}`,
+  },
+  {
+    id: "http",
+    label: "Remote HTTP (SSE)",
+    filename: "Streamable HTTP Endpoint",
+    content: `{
+  "mcpServers": {
+    "mcpedia-remote": {
+      "url": "https://mcp.asepharyana.my.id/mcp",
+      "headers": {
+        "x-webhook-secret": "your-secret-here"
+      }
+    }
+  }
+}`,
+  },
+  {
+    id: "cli",
+    label: "CLI Client",
+    filename: "Terminal One-Shot / REPL",
+    content: `# One-shot question
+bun run apps/mcp-client/src/ask.ts "How does ret2win stack alignment work?"
+
+# Interactive REPL
+bun run apps/mcp-client/src/index.ts`,
+  },
+];
+
+export default function McpConfigSnippet() {
+  const [activeTab, setActiveTab] = useState("claude");
+  const [copied, setCopied] = useState(false);
+
+  const current = CONFIGS.find((c) => c.id === activeTab) || CONFIGS[0];
+
+  function handleCopy() {
+    navigator.clipboard.writeText(current.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl overflow-hidden shadow-lg">
+      {/* Header bar with tabs */}
+      <div className="flex items-center justify-between px-4 py-2.5 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
+        <div className="flex items-center gap-1.5">
+          {CONFIGS.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => setActiveTab(c.id)}
+              className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
+                activeTab === c.id
+                  ? "bg-[#5e6ad2] text-white shadow-sm"
+                  : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#1b1d20]"
+              }`}
+            >
+              {c.label}
+            </button>
+          ))}
+        </div>
+
+        <button
+          onClick={handleCopy}
+          type="button"
+          className="flex items-center gap-1.5 text-xs text-[#8a8f98] hover:text-white bg-[#1a1b1d] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#27292d] transition-all"
+        >
+          {copied ? (
+            <>
+              <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              <span className="text-emerald-400 font-medium">Copied!</span>
+            </>
+          ) : (
+            <>
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              <span>Copy Config</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Code preview */}
+      <pre className="p-4 text-xs font-mono text-[#d0d6e0] overflow-x-auto leading-relaxed">
+        <code>{current.content}</code>
+      </pre>
+
+      <div className="px-4 py-2 bg-[#090a0b] border-t border-[#1a1b1d] text-[11px] text-[#62666d]">
+        Config location: <span className="font-mono text-[#8a8f98]">{current.filename}</span>
+      </div>
+    </div>
+  );
+}

apps/web/app/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SECTIONS } from "@mcpedia/config/sections";
@@ -12,17 +12,13 @@ interface Doc {
   tags: string[];
 }
 
-/**
- * Build a hierarchical folder tree from flat document slugs.
- * Each node is either a folder (has children) or a leaf doc.
- */
 interface TreeNode {
   name: string;
   slug: string;
   title: string;
   children: TreeNode[];
   isLeaf: boolean;
-  docCount: number; // total docs in subtree
+  docCount: number;
 }
 
 function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
@@ -30,7 +26,6 @@ function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
 
   for (const doc of docs.filter((d) => d.section === section)) {
     const parts = doc.slug.split("/");
-    // parts[0] is the section; skip it
     let current = root;
 
     for (let i = 1; i < parts.length; i++) {
@@ -63,7 +58,6 @@ function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
     }
   }
 
-  // Recursively compute docCount
   function countDocs(node: TreeNode): number {
     if (node.isLeaf) return 1;
     return node.children.reduce((sum, child) => sum + countDocs(child), 0);
@@ -73,15 +67,15 @@ function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
     node.docCount = countDocs(node);
   }
 
-  // Sort: folders first, then docs, alphabetically
   function sortNodes(nodes: TreeNode[]): TreeNode[] {
     return nodes.sort((a, b) => {
       const aFolder = a.children.length > 0 ? 0 : 1;
       const bFolder = b.children.length > 0 ? 0 : 1;
       if (aFolder !== bFolder) return aFolder - bFolder;
-      return a.title.localeCompare(b.title);
+      return (a.title || a.name).localeCompare(b.title || b.name);
     });
   }
+
   for (const node of root) {
     sortNodes(node.children);
   }
@@ -89,55 +83,96 @@ function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
   return sortNodes(root);
 }
 
-/**
- * Recursively render the folder tree with proper depth styling.
- * Each level gets a 20px left margin + subtle border for visual hierarchy.
- */
-function renderTreeNode(
-  node: TreeNode,
-  depth: number,
-  pathname: string,
-): React.ReactElement {
+function TreeNodeItem({
+  node,
+  depth,
+  pathname,
+  collapsedMap,
+  toggleCollapse,
+}: {
+  node: TreeNode;
+  depth: number;
+  pathname: string;
+  collapsedMap: Record<string, boolean>;
+  toggleCollapse: (slug: string) => void;
+}) {
   const isFolder = node.children.length > 0;
   const isActive = pathname === `/${node.slug}`;
-  const hasActiveChild = pathname.startsWith(`/${node.slug}/`);
+  const isParentOfActive = pathname.startsWith(`/${node.slug}/`);
+  const isCollapsed = collapsedMap[node.slug] ?? false;
 
   return (
-    <li key={node.slug} className={depth > 0 ? "ml-5 border-l border-[#1f2022] pl-2" : ""}>
-      <Link
-        href={`/${node.slug}`}
-        className={`flex items-center justify-between gap-1.5 text-xs py-1 px-2 rounded transition-all ${
+    <li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[#1f2022]" : ""}`}>
+      <div
+        className={`group flex items-center justify-between gap-1.5 text-xs py-1.5 px-2 rounded-md transition-all ${
           isActive
-            ? "text-[#7170ff] bg-[#191a1b]"
-            : hasActiveChild
-              ? "text-[#d0d6e0]"
-              : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#191a1b]"
+            ? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30 shadow-sm"
+            : isParentOfActive
+              ? "text-[#d0d6e0] bg-[#141517]/80"
+              : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
         }`}
-        title={node.title}
       >
-        <span className="flex items-center gap-1.5 truncate">
-          <span>{isFolder ? "📁" : "📄"}</span>
-          {node.title || node.name}
-        </span>
-        {isFolder && node.docCount > 0 && (
-          <span className="ml-auto text-[#62666d] bg-[#191a1b] px-1 py-0 rounded">
-            {node.docCount}
+        <Link
+          href={`/${node.slug}`}
+          className="flex items-center gap-2 min-w-0 flex-1 py-0.5"
+          title={node.title || node.name}
+        >
+          <span className="text-xs shrink-0 opacity-80 group-hover:opacity-100">
+            {isFolder ? "📁" : "📄"}
           </span>
+          <span className="truncate">{node.title || node.name}</span>
+        </Link>
+
+        {isFolder && (
+          <div className="flex items-center gap-1 shrink-0">
+            <span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1 py-0.2 rounded font-mono">
+              {node.docCount}
+            </span>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleCollapse(node.slug);
+              }}
+              className="p-0.5 text-[#62666d] hover:text-[#d0d6e0] rounded hover:bg-[#23252a] transition-transform"
+              aria-label={isCollapsed ? "Expand folder" : "Collapse folder"}
+            >
+              <svg
+                className={`w-3 h-3 transition-transform duration-200 ${isCollapsed ? "-rotate-90" : "rotate-0"}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+          </div>
         )}
-      </Link>
-      {node.children.length > 0 && (
-        <ul className="mt-0.5 space-y-0.5">
-          {node.children.map((child) => renderTreeNode(child, depth + 1, pathname))}
+      </div>
+
+      {isFolder && !isCollapsed && (
+        <ul className="mt-0.5 space-y-0.5 animate-fade-in">
+          {node.children.map((child) => (
+            <TreeNodeItem
+              key={child.slug}
+              node={child}
+              depth={depth + 1}
+              pathname={pathname}
+              collapsedMap={collapsedMap}
+              toggleCollapse={toggleCollapse}
+            />
+          ))}
         </ul>
       )}
     </li>
   );
 }
 
-/** Client-side sidebar (fetches doc list via /api/docs at runtime).
- *  Client component so `next build` SSG doesn't hit Postgres (CI has no DB). */
 export default function Sidebar() {
   const [docs, setDocs] = useState<Doc[]>([]);
+  const [filterText, setFilterText] = useState("");
+  const [collapsedMap, setCollapsedMap] = useState<Record<string, boolean>>({});
   const pathname = usePathname();
 
   useEffect(() => {
@@ -150,40 +185,112 @@ export default function Sidebar() {
       .catch(() => setDocs([]));
   }, []);
 
+  function toggleCollapse(slug: string) {
+    setCollapsedMap((prev) => ({ ...prev, [slug]: !prev[slug] }));
+  }
+
+  const filteredDocs = useMemo(() => {
+    if (!filterText.trim()) return docs;
+    const lower = filterText.toLowerCase();
+    return docs.filter(
+      (d) =>
+        d.title.toLowerCase().includes(lower) ||
+        d.slug.toLowerCase().includes(lower) ||
+        d.tags.some((t) => t.toLowerCase().includes(lower)),
+    );
+  }, [docs, filterText]);
+
   return (
-    <nav className="h-full overflow-y-auto py-6">
-      <div className="mb-4 px-3">
-        <span className="text-xs text-[#62666d] uppercase">
-          {docs.length} documents
-        </span>
+    <nav className="h-full flex flex-col py-4 px-3">
+      {/* Sidebar search filter */}
+      <div className="mb-3">
+        <div className="relative">
+          <input
+            type="text"
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+            placeholder="Filter docs..."
+            className="w-full pl-7 pr-3 py-1.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-md text-xs text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] transition-colors"
+          />
+          <svg
+            className="w-3.5 h-3.5 text-[#62666d] absolute left-2 top-2.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          {filterText && (
+            <button
+              onClick={() => setFilterText("")}
+              className="absolute right-2 top-2 text-xs text-[#62666d] hover:text-[#d0d6e0]"
+            >
+              ✕
+            </button>
+          )}
+        </div>
       </div>
-      <ul className="space-y-3 px-3 text-sm">
+
+      {/* Summary count */}
+      <div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[#62666d]">
+        <span className="uppercase tracking-wider font-mono">Documentation</span>
+        <span>{filteredDocs.length} items</span>
+      </div>
+
+      {/* Section Trees */}
+      <div className="flex-1 overflow-y-auto space-y-4 pr-1">
         {SECTIONS.map(({ id, label, icon }) => {
-          const sectionDocs = docs.filter((d) => d.section === id);
+          const sectionDocs = filteredDocs.filter((d) => d.section === id);
           if (sectionDocs.length === 0) return null;
 
-          const tree = buildFolderTree(docs, id);
-          const isActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
+          const tree = buildFolderTree(filteredDocs, id);
+          const isSectionActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
 
           return (
-            <li key={id} className="border-b border-[#141516] pb-2 last:border-0">
-              <div
-                className={`flex items-center gap-1.5 mb-1.5 ${
-                  isActive ? "text-[#7170ff]" : "text-[#62666d]"
+            <div key={id} className="border-b border-[#141516] pb-3 last:border-0">
+              <Link
+                href={`/${id}`}
+                className={`flex items-center justify-between gap-1.5 px-1 py-1 mb-1 rounded text-xs font-semibold uppercase tracking-wider transition-colors ${
+                  isSectionActive
+                    ? "text-[#7170ff]"
+                    : "text-[#8a8f98] hover:text-[#d0d6e0]"
                 }`}
               >
-                <span className="text-lg">{icon}</span>
-                <span className="font-medium text-xs uppercase tracking-wider">
-                  {label}
+                <div className="flex items-center gap-1.5">
+                  <span>{icon}</span>
+                  <span>{label}</span>
+                </div>
+                <span className="text-[10px] text-[#62666d] font-normal font-mono">
+                  {sectionDocs.length}
                 </span>
-              </div>
-              <ul className="space-y-0.5">
-                {tree.map((node) => renderTreeNode(node, 0, pathname))}
+              </Link>
+
+              <ul className="space-y-0.5 mt-1">
+                {tree.map((node) => (
+                  <TreeNodeItem
+                    key={node.slug}
+                    node={node}
+                    depth={0}
+                    pathname={pathname}
+                    collapsedMap={collapsedMap}
+                    toggleCollapse={toggleCollapse}
+                  />
+                ))}
               </ul>
-            </li>
+            </div>
           );
         })}
-      </ul>
+      </div>
+
+      {/* Bottom quick links */}
+      <div className="pt-3 border-t border-[#1f2022] mt-auto">
+        <Link
+          href="/create"
+          className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#d0d6e0] hover:text-white rounded-md transition-colors font-medium"
+        >
+          <span>+ Create New Document</span>
+        </Link>
+      </div>
     </nav>
   );
 }

apps/web/app/components/TOC.tsx

@@ -10,11 +10,9 @@ interface TOCEntry {
   level: number;
 }
 
-/** Extract h2/h3 headings from markdown and render as a clickable TOC. The
- *  heading `id`s are generated by rehype-slug (via github-slugger) in Markdown.tsx,
- *  so the same slugger is used here to produce matching anchors. */
 export default function TOC({ source }: { source: string }) {
   const [toc, setToc] = useState<TOCEntry[]>([]);
+  const [activeId, setActiveId] = useState<string>("");
 
   useEffect(() => {
     const slugger = new GithubSlugger();
@@ -31,24 +29,79 @@ export default function TOC({ source }: { source: string }) {
     setToc(entries);
   }, [source]);
 
+  // Scroll spy using IntersectionObserver
+  useEffect(() => {
+    if (toc.length === 0) return;
+
+    const headingElements = toc
+      .map((entry) => document.getElementById(entry.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+            break;
+          }
+        }
+      },
+      {
+        rootMargin: "-80px 0% -60% 0%",
+        threshold: 0.1,
+      },
+    );
+
+    headingElements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [toc]);
+
   if (toc.length === 0) return null;
 
   return (
-    <nav className="mb-6 text-sm">
-      <h3 className="text-xs font-semibold text-zinc-500 uppercase mb-2">
-        Contents
-      </h3>
-      <ul className="space-y-1">
-        {toc.map((entry) => (
-          <li key={entry.id} className={entry.level === 3 ? "ml-3" : ""}>
-            <Link
-              href={`#${entry.id}`}
-              className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:underline"
+    <nav className="text-xs">
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[#1f2022]">
+        <svg className="w-3.5 h-3.5 text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
+        </svg>
+        <span className="font-semibold uppercase tracking-wider text-[#8a8f98] text-[11px]">
+          On this page
+        </span>
+      </div>
+
+      <ul className="space-y-1.5 border-l border-[#1f2022] pl-2.5">
+        {toc.map((entry) => {
+          const isActive = activeId === entry.id;
+          return (
+            <li
+              key={entry.id}
+              className={`transition-all ${entry.level === 3 ? "ml-3" : ""}`}
             >
-              {entry.text}
-            </Link>
-          </li>
-        ))}
+              <Link
+                href={`#${entry.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  const target = document.getElementById(entry.id);
+                  if (target) {
+                    const offset = 80;
+                    const top = target.getBoundingClientRect().top + window.scrollY - offset;
+                    window.scrollTo({ top, behavior: "smooth" });
+                    setActiveId(entry.id);
+                    history.pushState(null, "", `#${entry.id}`);
+                  }
+                }}
+                className={`block py-0.5 transition-colors line-clamp-1 ${
+                  isActive
+                    ? "text-[#7170ff] font-medium translate-x-0.5"
+                    : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                }`}
+                title={entry.text}
+              >
+                {entry.text}
+              </Link>
+            </li>
+          );
+        })}
       </ul>
     </nav>
   );