provenance/frontend/components/app-sidebar.tsx

"use client";

import {
  Archive,
  ArrowDownUp,
  BookText,
  FolderTree,
  Image as ImageIcon,
  LogOut,
  Network,
  Users,
} from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

import { api } from "@/lib/api/client";
import { cn } from "@/lib/utils";

export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const router = useRouter();
  const segs = pathname.split("/").filter(Boolean); // ["trees", "<id>", ...]
  const treeId = segs[0] === "trees" && segs[1] ? segs[1] : null;
  const [treeName, setTreeName] = useState<string | null>(null);

  useEffect(() => {
    if (!treeId) {
      setTreeName(null);
      return;
    }
    api
      .GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } })
      .then((r) => setTreeName(r.data?.name ?? null));
  }, [treeId]);

  async function logout() {
    onNavigate?.();
    await api.POST("/api/v1/auth/logout");
    router.push("/login");
  }

  const Item = ({
    href,
    label,
    icon: Icon,
    active,
  }: {
    href: string;
    label: string;
    icon: typeof Users;
    active: boolean;
  }) => (
    <Link
      href={href}
      onClick={onNavigate}
      className={cn(
        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
        active
          ? "bg-bronze/12 font-medium text-bronze"
          : "text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-[var(--foreground)]",
      )}
    >
      <Icon className="h-4 w-4 shrink-0" />
      {label}
    </Link>
  );

  return (
    <nav className="flex h-full flex-col gap-1 p-4">
      <Link href="/" className="mb-5 flex items-center px-2" aria-label="Provenance — home">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
      </Link>

      <Item href="/trees" label="Trees" icon={FolderTree} active={pathname === "/trees"} />
      <Item href="/import" label="Import" icon={ArrowDownUp} active={pathname === "/import"} />

      {treeId && (
        <div className="mt-5 flex flex-col gap-1">
          <div className="truncate px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
            {treeName ?? "Tree"}
          </div>
          <Item
            href={`/trees/${treeId}/tree`}
            label="Tree"
            icon={Network}
            active={pathname.startsWith(`/trees/${treeId}/tree`)}
          />
          <Item
            href={`/trees/${treeId}`}
            label="People"
            icon={Users}
            active={pathname === `/trees/${treeId}` || pathname.startsWith(`/trees/${treeId}/persons`)}
          />
          <Item
            href={`/trees/${treeId}/sources`}
            label="Sources"
            icon={BookText}
            active={pathname.startsWith(`/trees/${treeId}/sources`)}
          />
          <Item
            href={`/trees/${treeId}/media`}
            label="Media"
            icon={ImageIcon}
            active={pathname.startsWith(`/trees/${treeId}/media`)}
          />
          <Item
            href={`/trees/${treeId}/gedcom`}
            label="Import / Export"
            icon={ArrowDownUp}
            active={pathname.startsWith(`/trees/${treeId}/gedcom`)}
          />
          <Item
            href={`/trees/${treeId}/recovery`}
            label="Recovery"
            icon={Archive}
            active={pathname.startsWith(`/trees/${treeId}/recovery`)}
          />
        </div>
      )}

      <button
        onClick={logout}
        className="mt-auto flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-colors hover:bg-bronze/[0.07] hover:text-bronze"
      >
        <LogOut className="h-4 w-4 shrink-0" />
        Sign out
      </button>
    </nav>
  );
}