feat: react-router, sidebar layout, sticky header, dropdown component, remove emojis, rounded corners

web/src/pages/ConfigPage.tsx

@@ -1,17 +1,32 @@
 import { useEffect, useRef, useState, useMemo } from "react";
 import {
+  Bot,
+  ChevronRight,
   Code,
+  Ear,
   Download,
+  FileText,
   FormInput,
+  Globe,
+  Lock,
+  MessageSquare,
+  Mic,
+  Monitor,
+  Package,
+  Palette,
   RotateCcw,
   Save,
+  ScrollText,
   Search,
-  Upload,
-  X,
-  ChevronRight,
+  Settings,
   Settings2,
-  FileText,
+  Upload,
+  Users,
+  Volume2,
+  Wrench,
+  X,
 } from "lucide-react";
+import type { ComponentType } from "react";
 import { api } from "@/lib/api";
 import { getNestedValue, setNestedValue } from "@/lib/nested";
 import { useToast } from "@/hooks/useToast";
@@ -26,23 +41,24 @@ import { Badge } from "@/components/ui/badge";
 /*  Helpers                                                            */
 /* ------------------------------------------------------------------ */
 
-const CATEGORY_ICONS: Record<string, string> = {
-  general: "⚙️",
-  agent: "🤖",
-  terminal: "💻",
-  display: "🎨",
-  delegation: "👥",
-  memory: "🧠",
-  compression: "📦",
-  security: "🔒",
-  browser: "🌐",
-  voice: "🎙️",
-  tts: "🔊",
-  stt: "👂",
-  logging: "📋",
-  discord: "💬",
-  auxiliary: "🔧",
+const CATEGORY_ICONS: Record<string, ComponentType<{ className?: string }>> = {
+  general: Settings,
+  agent: Bot,
+  terminal: Monitor,
+  display: Palette,
+  delegation: Users,
+  memory: Package,
+  compression: Package,
+  security: Lock,
+  browser: Globe,
+  voice: Mic,
+  tts: Volume2,
+  stt: Ear,
+  logging: ScrollText,
+  discord: MessageSquare,
+  auxiliary: Wrench,
 };
+const FallbackIcon = FileText;
 
 function prettyCategoryName(cat: string): string {
   if (cat === "tts") return "Text-to-Speech";
@@ -50,6 +66,11 @@ function prettyCategoryName(cat: string): string {
   return cat.charAt(0).toUpperCase() + cat.slice(1);
 }
 
+function CategoryIcon({ cat, className }: { cat: string; className?: string }) {
+  const Icon = CATEGORY_ICONS[cat] ?? FallbackIcon;
+  return <Icon className={className} />;
+}
+
 /* ------------------------------------------------------------------ */
 /*  Component                                                          */
 /* ------------------------------------------------------------------ */
@@ -230,7 +251,7 @@ export default function ConfigPage() {
         <div key={key}>
           {showCatBadge && (
             <div className="flex items-center gap-2 pt-4 pb-2 first:pt-0">
-              <span className="text-base">{CATEGORY_ICONS[cat] || "📄"}</span>
+              <CategoryIcon cat={cat} className="h-4 w-4 text-muted-foreground" />
               <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 {prettyCategoryName(cat)}
               </span>
@@ -266,7 +287,7 @@ export default function ConfigPage() {
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-2">
           <Settings2 className="h-4 w-4 text-muted-foreground" />
-          <code className="text-xs text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
+          <code className="text-xs text-muted-foreground bg-muted/50 px-2 py-0.5">
             ~/.hermes/config.yaml
           </code>
         </div>
@@ -379,13 +400,13 @@ export default function ConfigPage() {
                       setSearchQuery("");
                       setActiveCategory(cat);
                     }}
-                    className={`group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
+                    className={`group flex items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
                       isActive
                         ? "bg-primary/10 text-primary font-medium"
                         : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                     }`}
                   >
-                    <span className="text-sm leading-none">{CATEGORY_ICONS[cat] || "📄"}</span>
+                    <CategoryIcon cat={cat} className="h-4 w-4 shrink-0" />
                     <span className="flex-1 truncate">{prettyCategoryName(cat)}</span>
                     <span className={`text-[10px] tabular-nums ${isActive ? "text-primary/60" : "text-muted-foreground/50"}`}>
                       {categoryCounts[cat] || 0}
@@ -432,7 +453,7 @@ export default function ConfigPage() {
                 <CardHeader className="py-3 px-4">
                   <div className="flex items-center justify-between">
                     <CardTitle className="text-sm flex items-center gap-2">
-                      <span className="text-base">{CATEGORY_ICONS[activeCategory] || "📄"}</span>
+                      <CategoryIcon cat={activeCategory} className="h-4 w-4" />
                       {prettyCategoryName(activeCategory)}
                     </CardTitle>
                     <Badge variant="secondary" className="text-[10px]">