feat(dashboard): refactor navigation items to use NavItem component and enhance styling

frontend/src/components/organisms/DashboardSidebar.tsx

@@ -2,16 +2,17 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
 import {
   Activity,
   BarChart3,
   Bot,
   Boxes,
+  Building2,
   CheckCircle2,
+  CircleDot,
   Folder,
   FolderGit,
-  CircleDot,
-  Building2,
   LayoutGrid,
   Network,
   Settings,
@@ -19,15 +20,85 @@ import {
   Tags,
 } from "lucide-react";
 
-import { useAuth } from "@/auth/clerk";
 import { ApiError } from "@/api/mutator";
-import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import {
   type healthzHealthzGetResponse,
   useHealthzHealthzGet,
 } from "@/api/generated/default/default";
+import { useAuth } from "@/auth/clerk";
+import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import { cn } from "@/lib/utils";
 
+type NavTone = "blue" | "cyan" | "emerald" | "violet" | "amber" | "rose";
+
+const iconToneClass: Record<NavTone, string> = {
+  blue: "bg-blue-500/15 text-blue-300 ring-blue-400/20",
+  cyan: "bg-cyan-500/15 text-cyan-300 ring-cyan-400/20",
+  emerald: "bg-emerald-500/15 text-emerald-300 ring-emerald-400/20",
+  violet: "bg-violet-500/15 text-violet-300 ring-violet-400/20",
+  amber: "bg-amber-500/15 text-amber-300 ring-amber-400/20",
+  rose: "bg-rose-500/15 text-rose-300 ring-rose-400/20",
+};
+
+const sectionHeaderClass =
+  "px-3 text-[13px] font-bold uppercase tracking-[0.18em] text-[color:var(--text)]";
+
+const navItemClass = (active: boolean) =>
+  cn(
+    "group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-[15px] font-semibold text-[color:var(--text-muted)] transition duration-200",
+    "before:absolute before:inset-y-2 before:left-0 before:w-1 before:rounded-full before:bg-transparent before:transition",
+    active
+      ? "bg-[color:var(--accent-soft)] text-[color:var(--text)] shadow-sm before:bg-[color:var(--accent)]"
+      : "hover:bg-[color:var(--surface-muted)] hover:text-[color:var(--text)] hover:before:bg-[color:var(--border-strong)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--surface)]",
+  );
+
+const iconClass = (active: boolean, tone: NavTone) =>
+  cn(
+    "flex h-8 w-8 shrink-0 items-center justify-center rounded-md ring-1 transition duration-200",
+    iconToneClass[tone],
+    active &&
+      "bg-[color:var(--accent)] text-[color:var(--primary-foreground)] ring-[color:var(--accent)]",
+    !active && "group-hover:scale-105 group-hover:ring-[color:var(--accent)]",
+  );
+
+function isNavActive(pathname: string, href: string) {
+  if (href === "/git-projects") {
+    return (
+      pathname === href ||
+      pathname.startsWith("/git-projects/connections") ||
+      pathname.startsWith("/git-projects/repositories")
+    );
+  }
+
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+function NavItem({
+  href,
+  label,
+  icon,
+  tone,
+  active,
+}: {
+  href: string;
+  label: string;
+  icon: ReactNode;
+  tone: NavTone;
+  active: boolean;
+}) {
+  return (
+    <Link
+      href={href}
+      className={navItemClass(active)}
+      aria-current={active ? "page" : undefined}
+    >
+      <span className={iconClass(active, tone)}>{icon}</span>
+      <span className="truncate">{label}</span>
+    </Link>
+  );
+}
+
 export function DashboardSidebar() {
   const pathname = usePathname();
   const { isSignedIn } = useAuth();
@@ -58,177 +129,162 @@ export function DashboardSidebar() {
       : systemStatus === "unknown"
         ? "System status unavailable"
         : "System degraded";
-  const navItemClass = (active: boolean) =>
-    cn(
-      "flex items-center gap-3 rounded-lg px-3 py-2.5 text-[color:var(--text-muted)] transition",
-      active
-        ? "bg-[color:var(--accent-soft)] font-medium text-[color:var(--accent-strong)]"
-        : "hover:bg-[color:var(--surface-muted)] hover:text-[color:var(--text)]",
-    );
+  const isActive = (href: string) => isNavActive(pathname, href);
 
   return (
-    <aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-[color:var(--border)] bg-[color:var(--surface)] pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-[260px] md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
-      <div className="flex-1 px-3 py-4">
-        <p className="px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--text-muted)]">
+    <aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-[color:var(--border)] bg-[linear-gradient(180deg,var(--surface)_0%,var(--surface-muted)_100%)] pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-[260px] md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
+      <div className="flex-1 overflow-y-auto px-3 py-5">
+        <p className="px-3 font-heading text-lg font-bold text-[color:var(--text)]">
           Navigation
         </p>
-        <nav className="mt-3 space-y-4 text-sm">
+        <nav className="mt-5 space-y-5">
           <div>
-            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-[color:var(--text-quiet)]">
-              Overview
-            </p>
-            <div className="mt-1 space-y-1">
-              <Link
+            <p className={sectionHeaderClass}>Overview</p>
+            <div className="mt-2 space-y-1.5">
+              <NavItem
                 href="/dashboard"
-                className={navItemClass(pathname === "/dashboard")}
-              >
-                <BarChart3 className="h-4 w-4" />
-                Dashboard
-              </Link>
-              <Link
+                label="Dashboard"
+                icon={<BarChart3 className="h-4 w-4" />}
+                tone="blue"
+                active={isActive("/dashboard")}
+              />
+              <NavItem
                 href="/activity"
-                className={navItemClass(pathname === "/activity")}
-              >
-                <Activity className="h-4 w-4" />
-                Live feed
-              </Link>
+                label="Live feed"
+                icon={<Activity className="h-4 w-4" />}
+                tone="cyan"
+                active={isActive("/activity")}
+              />
             </div>
           </div>
 
           <div>
-            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-[color:var(--text-quiet)]">
-              Boards
-            </p>
-            <div className="mt-1 space-y-1">
-              <Link
+            <p className={sectionHeaderClass}>Boards</p>
+            <div className="mt-2 space-y-1.5">
+              <NavItem
                 href="/board-groups"
-                className={navItemClass(pathname === "/board-groups")}
-              >
-                <Folder className="h-4 w-4" />
-                Board groups
-              </Link>
-              <Link
+                label="Board groups"
+                icon={<Folder className="h-4 w-4" />}
+                tone="emerald"
+                active={isActive("/board-groups")}
+              />
+              <NavItem
                 href="/boards"
-                className={navItemClass(pathname === "/boards")}
-              >
-                <LayoutGrid className="h-4 w-4" />
-                Boards
-              </Link>
-              <Link
+                label="Boards"
+                icon={<LayoutGrid className="h-4 w-4" />}
+                tone="blue"
+                active={isActive("/boards")}
+              />
+              <NavItem
                 href="/git-projects"
-                className={navItemClass(pathname === "/git-projects")}
-              >
-                <FolderGit className="h-4 w-4" />
-                Git Projects
-              </Link>
-              <Link
+                label="Git projects"
+                icon={<FolderGit className="h-4 w-4" />}
+                tone="violet"
+                active={isActive("/git-projects")}
+              />
+              <NavItem
                 href="/git-projects/issues"
-                className={navItemClass(pathname === "/git-projects/issues")}
-              >
-                <CircleDot className="h-4 w-4" />
-                Issues
-              </Link>
-              <Link
+                label="Issues"
+                icon={<CircleDot className="h-4 w-4" />}
+                tone="amber"
+                active={isActive("/git-projects/issues")}
+              />
+              <NavItem
                 href="/tags"
-                className={navItemClass(pathname === "/tags")}
-              >
-                <Tags className="h-4 w-4" />
-                Tags
-              </Link>
-              <Link
+                label="Tags"
+                icon={<Tags className="h-4 w-4" />}
+                tone="cyan"
+                active={isActive("/tags")}
+              />
+              <NavItem
                 href="/approvals"
-                className={navItemClass(pathname === "/approvals")}
-              >
-                <CheckCircle2 className="h-4 w-4" />
-                Approvals
-              </Link>
+                label="Approvals"
+                icon={<CheckCircle2 className="h-4 w-4" />}
+                tone="emerald"
+                active={isActive("/approvals")}
+              />
               {isAdmin ? (
-                <Link
+                <NavItem
                   href="/custom-fields"
-                  className={navItemClass(pathname === "/custom-fields")}
-                >
-                  <Settings className="h-4 w-4" />
-                  Custom fields
-                </Link>
+                  label="Custom fields"
+                  icon={<Settings className="h-4 w-4" />}
+                  tone="rose"
+                  active={isActive("/custom-fields")}
+                />
               ) : null}
             </div>
           </div>
 
-          <div>
-            {isAdmin ? (
-              <>
-                <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-[color:var(--text-quiet)]">
-                  Skills
-                </p>
-                <div className="mt-1 space-y-1">
-                  <Link
-                    href="/skills/marketplace"
-                    className={navItemClass(pathname === "/skills/marketplace")}
-                  >
-                    <Store className="h-4 w-4" />
-                    Marketplace
-                  </Link>
-                  <Link
-                    href="/skills/packs"
-                    className={navItemClass(pathname === "/skills/packs")}
-                  >
-                    <Boxes className="h-4 w-4" />
-                    Packs
-                  </Link>
-                </div>
-              </>
-            ) : null}
-          </div>
+          {isAdmin ? (
+            <div>
+              <p className={sectionHeaderClass}>Skills</p>
+              <div className="mt-2 space-y-1.5">
+                <NavItem
+                  href="/skills/marketplace"
+                  label="Marketplace"
+                  icon={<Store className="h-4 w-4" />}
+                  tone="violet"
+                  active={isActive("/skills/marketplace")}
+                />
+                <NavItem
+                  href="/skills/packs"
+                  label="Packs"
+                  icon={<Boxes className="h-4 w-4" />}
+                  tone="cyan"
+                  active={isActive("/skills/packs")}
+                />
+              </div>
+            </div>
+          ) : null}
 
           <div>
-            <p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-[color:var(--text-quiet)]">
-              Administration
-            </p>
-            <div className="mt-1 space-y-1">
-              <Link
+            <p className={sectionHeaderClass}>Administration</p>
+            <div className="mt-2 space-y-1.5">
+              <NavItem
                 href="/organization"
-                className={navItemClass(pathname === "/organization")}
-              >
-                <Building2 className="h-4 w-4" />
-                Organization
-              </Link>
-              <Link
+                label="Organization"
+                icon={<Building2 className="h-4 w-4" />}
+                tone="blue"
+                active={isActive("/organization")}
+              />
+              <NavItem
                 href="/settings"
-                className={navItemClass(pathname === "/settings")}
-              >
-                <Settings className="h-4 w-4" />
-                Settings
-              </Link>
+                label="Settings"
+                icon={<Settings className="h-4 w-4" />}
+                tone="amber"
+                active={isActive("/settings")}
+              />
               {isAdmin ? (
-                <Link
+                <NavItem
                   href="/gateways"
-                  className={navItemClass(pathname === "/gateways")}
-                >
-                  <Network className="h-4 w-4" />
-                  Gateways
-                </Link>
+                  label="Gateways"
+                  icon={<Network className="h-4 w-4" />}
+                  tone="emerald"
+                  active={isActive("/gateways")}
+                />
               ) : null}
               {isAdmin ? (
-                <Link
+                <NavItem
                   href="/agents"
-                  className={navItemClass(pathname === "/agents")}
-                >
-                  <Bot className="h-4 w-4" />
-                  Agents
-                </Link>
+                  label="Agents"
+                  icon={<Bot className="h-4 w-4" />}
+                  tone="violet"
+                  active={isActive("/agents")}
+                />
               ) : null}
             </div>
           </div>
         </nav>
       </div>
-      <div className="border-t border-[color:var(--border)] p-4">
-        <div className="flex items-center gap-2 text-xs text-[color:var(--text-muted)]">
+      <div className="border-t border-[color:var(--border)] bg-[color:var(--surface)]/70 p-4">
+        <div className="flex items-center gap-2 text-xs font-medium text-[color:var(--text-muted)]">
           <span
             className={cn(
-              "h-2 w-2 rounded-full",
-              systemStatus === "operational" && "bg-emerald-500",
-              systemStatus === "degraded" && "bg-rose-500",
-              systemStatus === "unknown" && "bg-[color:var(--text-quiet)]",
+              "h-2.5 w-2.5 rounded-full shadow-[0_0_18px_currentColor]",
+              systemStatus === "operational" && "bg-emerald-500 text-emerald-500",
+              systemStatus === "degraded" && "bg-rose-500 text-rose-500",
+              systemStatus === "unknown" &&
+                "bg-[color:var(--text-quiet)] text-[color:var(--text-quiet)]",
             )}
           />
           {statusLabel}