feat(web): overhaul frontend with cyber-intelligence design and interactive topology

apps/web/app/components/Sidebar.tsx

@@ -4,6 +4,16 @@ import { useEffect, useState, useMemo } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { getSectionMeta } from "@mcpedia/config/sections";
+import {
+  Folder,
+  FolderOpen,
+  FileText,
+  ChevronRight,
+  Search,
+  X,
+  Plus,
+  Compass,
+} from "lucide-react";
 
 interface Doc {
   slug: string;
@@ -102,11 +112,11 @@ function TreeNodeItem({
   const isCollapsed = collapsedMap[node.slug] ?? false;
 
   return (
-    <li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[var(--border-color)]" : ""}`}>
+    <li className={`select-none ${depth > 0 ? "ml-3.5 pl-2 border-l border-[var(--border-color)]" : ""}`}>
       <div
-        className={`group flex items-center justify-between gap-1.5 text-xs py-1.5 px-2 rounded-md transition-all ${
+        className={`group flex items-center justify-between gap-1 text-xs py-1.5 px-2 rounded-lg transition-all ${
           isActive
-            ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/15 font-semibold border border-[var(--brand)]/30 shadow-sm"
+            ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/15 font-semibold border border-[var(--brand)]/30 shadow-xs"
             : isParentOfActive
               ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
               : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
@@ -117,15 +127,23 @@ function TreeNodeItem({
           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 className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors">
+            {isFolder ? (
+              isCollapsed ? (
+                <Folder className="w-3.5 h-3.5" />
+              ) : (
+                <FolderOpen className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" />
+              )
+            ) : (
+              <FileText className="w-3.5 h-3.5" />
+            )}
           </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-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1 py-0.2 rounded font-mono">
+            <span className="text-[10px] text-[var(--text-dim)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1.5 py-0.2 rounded font-mono">
               {node.docCount}
             </span>
             <button
@@ -135,24 +153,19 @@ function TreeNodeItem({
                 e.stopPropagation();
                 toggleCollapse(node.slug);
               }}
-              className="p-0.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform"
+              className="p-1 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] 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>
+              <ChevronRight
+                className={`w-3 h-3 transition-transform duration-200 ${isCollapsed ? "rotate-0" : "rotate-90"}`}
+              />
             </button>
           </div>
         )}
       </div>
 
       {isFolder && !isCollapsed && (
-        <ul className="mt-0.5 space-y-0.5 animate-fade-in">
+        <ul className="mt-1 space-y-0.5 animate-fade-in">
           {node.children.map((child) => (
             <TreeNodeItem
               key={child.slug}
@@ -212,7 +225,7 @@ export default function Sidebar() {
   }, [filteredDocs]);
 
   return (
-    <nav className="h-full flex flex-col py-4 px-3">
+    <nav className="h-full flex flex-col py-4 px-3 select-none">
       {/* Sidebar search filter */}
       <div className="mb-3">
         <div className="relative">
@@ -220,31 +233,25 @@ export default function Sidebar() {
             type="text"
             value={filterText}
             onChange={(e) => setFilterText(e.target.value)}
-            placeholder="Filter docs..."
-            className="w-full pl-7 pr-3 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] transition-colors"
+            placeholder="Filter knowledge tree..."
+            className="w-full pl-8 pr-7 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[var(--brand)] transition-all"
           />
-          <svg
-            className="w-3.5 h-3.5 text-[var(--text-muted)] 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>
+          <Search className="w-3.5 h-3.5 text-[var(--text-dim)] absolute left-2.5 top-2.5 pointer-events-none" />
           {filterText && (
             <button
               onClick={() => setFilterText("")}
-              className="absolute right-2 top-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+              className="absolute right-2 top-2 p-0.5 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated)]"
+              aria-label="Clear filter"
             >
-              ✕
+              <X className="w-3.5 h-3.5" />
             </button>
           )}
         </div>
       </div>
 
       {/* Summary count */}
-      <div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[var(--text-dim)]">
-        <span className="uppercase tracking-wider font-mono">Knowledge Base</span>
+      <div className="flex items-center justify-between px-1 mb-2 text-[10px] text-[var(--text-dim)] font-mono uppercase tracking-wider">
+        <span>Knowledge Index</span>
         <span>{filteredDocs.length} items</span>
       </div>
 
@@ -261,17 +268,17 @@ export default function Sidebar() {
             <div key={id} className="border-b border-[var(--border-color)] 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 ${
+                className={`flex items-center justify-between gap-1.5 px-2 py-1.5 mb-1 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors ${
                   isSectionActive
-                    ? "text-[var(--brand)] dark:text-[var(--accent)]"
-                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+                    ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/10"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
                 }`}
               >
-                <div className="flex items-center gap-1.5">
-                  <span>{icon}</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs">{icon}</span>
                   <span>{label}</span>
                 </div>
-                <span className="text-[10px] text-[var(--text-dim)] font-normal font-mono">
+                <span className="text-[10px] text-[var(--text-dim)] font-normal font-mono bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]">
                   {sectionDocs.length}
                 </span>
               </Link>
@@ -291,15 +298,22 @@ export default function Sidebar() {
             </div>
           );
         })}
+
+        {filteredDocs.length === 0 && (
+          <div className="text-center py-8 text-xs text-[var(--text-dim)]">
+            No matching documents
+          </div>
+        )}
       </div>
 
       {/* Bottom quick links */}
       <div className="pt-3 border-t border-[var(--border-color)] mt-auto">
         <Link
           href="/create"
-          className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors font-medium"
+          className="flex items-center justify-center gap-2 w-full py-2 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all font-medium shadow-xs group"
         >
-          <span>+ Create New Document</span>
+          <Plus className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)] group-hover:scale-110 transition-transform" />
+          <span>Create New Document</span>
         </Link>
       </div>
     </nav>