provenance/frontend/components/app-sidebar.tsx

"use client";

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

import { api } from "@/lib/api/client";
import { cn } from "@/lib/utils";
import { ThemeToggle } from "@/components/theme-toggle";

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);
  const [me, setMe] = useState<{ display_name: string | null; email: string } | null>(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(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]);

  useEffect(() => {
    api.GET("/api/v1/users/me").then((r) => setMe(r.data ?? null));
  }, []);

  useEffect(() => {
    function onDoc(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
    }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  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>
      )}

      <div className="mt-auto">
        <ThemeToggle />
      </div>

      <div ref={menuRef} className="relative">
        {menuOpen && (
          <div className="absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
            <Link
              href="/settings"
              onClick={() => {
                setMenuOpen(false);
                onNavigate?.();
              }}
              className="flex items-center gap-3 px-3 py-2 text-sm text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-[var(--foreground)]"
            >
              <Settings className="h-4 w-4 shrink-0" />
              Settings
            </Link>
            <button
              onClick={logout}
              className="flex w-full items-center gap-3 px-3 py-2 text-sm text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-bronze"
            >
              <LogOut className="h-4 w-4 shrink-0" />
              Sign out
            </button>
          </div>
        )}
        <button
          onClick={() => setMenuOpen((o) => !o)}
          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-[var(--foreground)] transition-colors hover:bg-bronze/[0.07]"
        >
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-bronze/15 text-xs font-semibold uppercase text-bronze">
            {(me?.display_name || me?.email || "?").slice(0, 1)}
          </span>
          <span className="min-w-0 flex-1 truncate">
            {me?.display_name || me?.email || "Account"}
          </span>
        </button>
      </div>
    </nav>
  );
}