App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import {
  Activity,
  BellRing,
  CalendarClock,
  ChevronsUpDown,
  FileText,
  Inbox,
  LayoutDashboard,
  PanelLeft,
  Plus,
  Radio,
  Search,
  Settings,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppSidebarItem {
  label: string;
  href: string;
  icon: LucideIcon;
  count?: number;
}

export interface AppSidebarGroup {
  label?: string;
  items: AppSidebarItem[];
}

export interface AppSidebarProps {
  workspace?: { name: string; initials?: string };
  groups?: AppSidebarGroup[];
  activeHref?: string;
  /** Teams shown as a collapsible-looking list with colored squares. */
  teams?: { name: string; href: string; color: string }[];
  primaryAction?: { label: string; onClick?: () => void };
  children?: ReactNode;
  className?: string;
}

const DEFAULT_GROUPS: AppSidebarGroup[] = [
  {
    items: [
      { label: "Inbox", href: "#inbox", icon: Inbox, count: 4 },
      { label: "Incidents", href: "#incidents", icon: Activity, count: 2 },
      { label: "Dashboard", href: "#dashboard", icon: LayoutDashboard },
    ],
  },
  {
    label: "Operate",
    items: [
      { 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 },
    ],
  },
];

const DEFAULT_TEAMS = [
  { name: "Payments", href: "#t-payments", color: "#5e6ad2" },
  { name: "Platform", href: "#t-platform", color: "#26b5ce" },
  { name: "Growth", href: "#t-growth", color: "#f2994a" },
];

export function AppSidebar({
  workspace = { name: "Acme" },
  groups = DEFAULT_GROUPS,
  activeHref = "#incidents",
  teams = DEFAULT_TEAMS,
  primaryAction = { label: "New incident" },
  children,
  className,
}: AppSidebarProps) {
  const [open, setOpen] = useState(false);
  const drawerId = useId();

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const link = (item: { href: string }, active: boolean, content: ReactNode) => (
    <a
      href={item.href}
      aria-current={active ? "page" : undefined}
      onClick={() => setOpen(false)}
      className={cn(
        "da-focus da-transition flex h-8 items-center gap-2.5 rounded-da-sm px-2 text-[13px]",
        active ? "bg-da-fg/[0.07] font-medium text-da-fg" : "text-da-muted-fg hover:bg-da-fg/[0.04] hover:text-da-fg",
      )}
    >
      {content}
    </a>
  );

  const panel = (
    <div className="flex h-full flex-col gap-4 p-3">
      <div className="flex items-center gap-1">
        <button type="button" className="da-focus da-transition flex min-w-0 flex-1 items-center gap-2 rounded-da-sm px-2 py-1.5 text-left hover:bg-da-fg/[0.04]">
          <span className="grid size-5 shrink-0 place-items-center rounded-[5px] bg-da-primary text-[10px] font-semibold text-da-primary-fg">
            {workspace.initials ?? workspace.name.slice(0, 1)}
          </span>
          <span className="truncate text-[13px] font-medium">{workspace.name}</span>
          <ChevronsUpDown aria-hidden className="ml-auto size-3.5 text-da-muted-fg" />
        </button>
        <button type="button" aria-label="Search" className="da-focus da-transition grid size-7 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-fg/[0.04] hover:text-da-fg">
          <Search aria-hidden className="size-4" />
        </button>
      </div>

      <button
        type="button"
        onClick={primaryAction.onClick}
        className="da-focus da-transition da-stroke flex h-8 items-center gap-2 rounded-da-md bg-da-surface px-2.5 text-[13px] font-medium text-da-surface-fg shadow-da-sm hover:bg-da-muted"
      >
        <Plus aria-hidden className="size-4" />
        {primaryAction.label}
        <kbd aria-hidden className="ml-auto font-da-mono text-[10px] text-da-muted-fg">
          C
        </kbd>
      </button>

      <nav aria-label="Sidebar" className="-mx-1 flex flex-1 flex-col gap-5 overflow-y-auto px-1">
        {groups.map((group, gi) => (
          <div key={group.label ?? gi}>
            {group.label && <p className="px-2 pb-1 text-[11px] font-medium text-da-muted-fg">{group.label}</p>}
            <ul className="flex flex-col gap-px">
              {group.items.map((item) => {
                const Icon = item.icon;
                return (
                  <li key={item.href}>
                    {link(
                      item,
                      item.href === activeHref,
                      <>
                        <Icon aria-hidden className="size-4 shrink-0" />
                        <span className="flex-1 truncate">{item.label}</span>
                        {item.count !== undefined && (
                          <span className="font-da-mono text-[11px] text-da-muted-fg">
                            {item.count}
                            <span className="sr-only"> items</span>
                          </span>
                        )}
                      </>,
                    )}
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
        {teams.length > 0 && (
          <div>
            <p className="px-2 pb-1 text-[11px] font-medium text-da-muted-fg">Teams</p>
            <ul className="flex flex-col gap-px">
              {teams.map((t) => (
                <li key={t.href}>
                  {link(
                    t,
                    t.href === activeHref,
                    <>
                      <span aria-hidden className="size-2.5 rounded-[3px]" style={{ backgroundColor: t.color }} />
                      <span className="truncate">{t.name}</span>
                    </>,
                  )}
                </li>
              ))}
            </ul>
          </div>
        )}
      </nav>

      <div className="flex flex-col gap-px">
        {link(
          { href: "#settings" },
          activeHref === "#settings",
          <>
            <Settings aria-hidden className="size-4" />
            Settings
          </>,
        )}
      </div>
    </div>
  );

  return (
    <div className={cn("flex min-h-full bg-da-bg text-da-fg", className)}>
      <aside className="sticky top-0 hidden h-dvh w-60 shrink-0 border-r border-da-border bg-da-surface-2/50 lg:block">{panel}</aside>

      {open && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button type="button" aria-label="Close menu" onClick={() => setOpen(false)} className="absolute inset-0 bg-da-overlay" />
          <aside
            id={drawerId}
            className="relative h-full w-64 max-w-[85vw] border-r border-da-border bg-da-surface shadow-da-lg transition-transform duration-(--da-duration-slow) ease-da starting:-translate-x-full motion-reduce:transition-none"
          >
            {panel}
          </aside>
        </div>
      )}

      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-12 items-center gap-2 border-b border-da-border px-3 lg:hidden">
          <button
            type="button"
            aria-label="Open menu"
            aria-expanded={open}
            aria-controls={drawerId}
            onClick={() => setOpen(true)}
            className="da-focus da-transition grid size-8 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg"
          >
            <PanelLeft aria-hidden className="size-4" />
          </button>
          <span className="text-[13px] font-medium">{workspace.name}</span>
        </div>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;