Sidebar Rail

"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";
import { Activity, BellRing, CalendarClock, ChevronsLeft, ChevronsRight, FileText, Inbox, Radio, Settings, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarRailItem {
  label: string;
  href: string;
  icon: LucideIcon;
  badge?: number;
}

export interface SidebarRailProps {
  items?: SidebarRailItem[];
  activeHref?: string;
  /** Start collapsed to icons. */
  defaultCollapsed?: boolean;
  /** Controlled state (pair with onCollapsedChange to persist it). */
  collapsed?: boolean;
  onCollapsedChange?: (collapsed: boolean) => void;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS: SidebarRailItem[] = [
  { label: "Inbox", href: "#inbox", icon: Inbox, badge: 4 },
  { label: "Incidents", href: "#incidents", icon: Activity, badge: 2 },
  { label: "On-call", href: "#on-call", icon: CalendarClock },
  { label: "Alert rules", href: "#alerts", icon: BellRing },
  { label: "Status pages", href: "#status", icon: Radio },
  { label: "Postmortems", href: "#postmortems", icon: FileText },
];

function Row({ it, collapsed, activeHref }: { it: SidebarRailItem; collapsed: boolean; activeHref: string }) {
  const active = it.href === activeHref;
  return (
    <a
      href={it.href}
      aria-current={active ? "page" : undefined}
      aria-label={collapsed ? it.label : undefined}
      className={cn(
        "da-focus da-transition group/item relative flex h-9 items-center gap-3 rounded-da-md px-2.5 text-[13px]",
        active ? "bg-da-muted font-medium text-da-fg" : "text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg",
      )}
    >
      <it.icon aria-hidden className="size-4 shrink-0" />
      <span className={cn("truncate", collapsed ? "sr-only" : "max-md:sr-only")}>{it.label}</span>
      {it.badge !== undefined && (
        <span
          className={cn(
            "rounded-da-pill bg-da-primary font-da-mono text-[10px] text-da-primary-fg",
            collapsed
              ? "absolute top-1 right-1 grid size-4 place-items-center"
              : "max-md:absolute max-md:top-1 max-md:right-1 max-md:grid max-md:size-4 max-md:place-items-center md:ml-auto md:px-1.5",
          )}
        >
          {it.badge}
        </span>
      )}
      {
        <span
          aria-hidden
          className={cn(
            !collapsed && "md:hidden",
            "pointer-events-none absolute left-full z-20 ml-3 rounded-da-sm bg-da-fg px-2 py-1 text-[12px] whitespace-nowrap text-da-bg opacity-0 shadow-da-md transition-opacity duration-(--da-duration) group-hover/item:opacity-100 group-focus-visible/item:opacity-100",
          )}
        >
          {it.label}
        </span>
      }
    </a>
  );
}

/** Sidebar that collapses between 224px (icons + labels) and a 56px icon rail with hover/focus tooltips. ⌘B toggles; controlled or uncontrolled. */
export function SidebarRail({
  items = DEFAULT_ITEMS,
  activeHref = "#incidents",
  defaultCollapsed = false,
  collapsed: controlled,
  onCollapsedChange,
  children,
  className,
}: SidebarRailProps) {
  const [inner, setInner] = useState(defaultCollapsed);
  const collapsed = controlled ?? inner;
  const toggleRef = useRef<() => void>(() => {});
  const toggle = () => {
    setInner(!collapsed);
    onCollapsedChange?.(!collapsed);
  };
  useEffect(() => {
    toggleRef.current = toggle;
  });

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "b") {
        e.preventDefault();
        toggleRef.current();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div className={cn("flex min-h-dvh bg-da-bg text-da-fg", className)}>
      <aside
        className={cn(
          "sticky top-0 flex h-dvh shrink-0 flex-col border-r border-da-border bg-da-surface-2 p-2 transition-[width] duration-(--da-duration-slow) ease-da motion-reduce:transition-none",
          collapsed ? "w-14" : "w-14 md:w-56",
        )}
      >
        <div className="flex h-10 items-center gap-2 px-2.5">
          <svg aria-hidden viewBox="0 0 24 24" className="size-5 shrink-0 text-da-primary" fill="none">
            <path d="M3 12h4l2.5-6 5 12 2.5-6H21" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span className={cn("text-sm font-semibold", collapsed ? "sr-only" : "hidden md:inline")}>Tracewise</span>
        </div>
        <nav aria-label="Main" className="mt-3 flex-1 space-y-0.5">
          {items.map((it) => (
            <Row key={it.href} it={it} collapsed={collapsed} activeHref={activeHref} />
          ))}
        </nav>
        <Row it={{ label: "Settings", href: "#settings", icon: Settings }} collapsed={collapsed} activeHref={activeHref} />
        <button
          type="button"
          onClick={toggle}
          aria-pressed={collapsed}
          aria-keyshortcuts="Meta+B"
          className="da-focus da-transition mt-1 hidden h-9 items-center gap-3 rounded-da-md px-2.5 text-[13px] text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg md:flex"
        >
          {collapsed ? <ChevronsRight aria-hidden className="size-4 shrink-0" /> : <ChevronsLeft aria-hidden className="size-4 shrink-0" />}
          <span className={cn(collapsed && "sr-only")}>Collapse sidebar</span>
          {!collapsed && <kbd className="ml-auto font-da-mono text-[10px]">⌘B</kbd>}
        </button>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarRail;