frontend/src/components/layout/Sidebar.tsx

import { ListChecks, SlidersHorizontal, TestTube, Zap } from "lucide-react"
import type { LucideIcon } from "lucide-react"
import { SECTIONS, type SectionId } from "@/modules/registry"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SECTION_ICON: Record<SectionId, LucideIcon> = {
  test: TestTube,
  automation: ListChecks,
  settings: SlidersHorizontal,
}

export function Sidebar() {
  return (
    <aside className="sticky top-0 hidden h-screen w-16 shrink-0 flex-col items-center border-r border-border/60 bg-card/40 py-4 backdrop-blur-sm md:flex">
      <a
        href="#top"
        className="flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-[0_8px_24px_-12px_oklch(0.885_0.19_122_/_0.8)]"
        aria-label="Tiny Trigger"
      >
        <Zap className="size-5" />
      </a>

      <nav className="mt-6 flex flex-1 flex-col items-center gap-1.5">
        <TooltipProvider delayDuration={200}>
          {SECTIONS.map((s) => {
            const Icon = SECTION_ICON[s.id]
            return (
              <Tooltip key={s.id}>
                <TooltipTrigger asChild>
                  <a
                    href={`#${s.id}`}
                    className="group flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/5 hover:text-foreground"
                  >
                    <Icon className="size-4" />
                  </a>
                </TooltipTrigger>
                <TooltipContent side="right">{s.label}</TooltipContent>
              </Tooltip>
            )
          })}
        </TooltipProvider>
      </nav>

      <div className="font-mono text-[0.5rem] uppercase tracking-[0.2em] text-muted-foreground/50 [writing-mode:vertical-rl]">
        local-first
      </div>
    </aside>
  )
}