J621/frontend/src/components/AppShell.tsx

import { useQuery } from "@tanstack/react-query";
import { LogOut, Menu } from "lucide-react";
import { useEffect } from "react";
import { Link, NavLink, Outlet, useLocation } from "react-router-dom";

import { StatusFooter } from "@/components/StatusFooter";
import { StatusPill } from "@/components/StatusPill";
import { api } from "@/lib/api";
import { cn } from "@/lib/cn";
import type { SystemStatus } from "@/lib/types";
import { useAuth } from "@/store/auth";
import { useUi } from "@/store/ui";

const navItems = [
  { to: "/", label: "Library" },
  { to: "/upload", label: "Upload" },
];

export function AppShell() {
  const user = useAuth((state) => state.user);
  const logout = useAuth((state) => state.logout);
  const toggleSidebar = useUi((state) => state.toggleSidebar);
  const location = useLocation();

  const statusQuery = useQuery({
    queryKey: ["status"],
    queryFn: () => api<SystemStatus>("/api/status/"),
    refetchInterval: 30_000,
    staleTime: 15_000,
  });
  const status = statusQuery.data;

  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "b") {
        event.preventDefault();
        toggleSidebar();
      }
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleSidebar]);

  const showSidebarToggle = location.pathname === "/";

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-40 border-b border-ctp-surface0 bg-ctp-crust/95 backdrop-blur">
        <div className="mx-auto flex h-14 w-full max-w-[1600px] items-center gap-4 px-4">
          <Link to="/" className="flex shrink-0 items-center">
            <span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust">
              J621
            </span>
          </Link>

          {showSidebarToggle ? (
            <button
              type="button"
              onClick={toggleSidebar}
              title="Toggle filters (Ctrl+B)"
              className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
            >
              <Menu className="h-4 w-4" />
            </button>
          ) : null}

          <nav className="flex items-center gap-1">
            {navItems.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                end={item.to === "/"}
                className={({ isActive }) =>
                  cn(
                    "rounded-md px-3 py-1.5 text-sm font-medium transition",
                    isActive
                      ? "bg-ctp-surface0 text-ctp-text"
                      : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
                  )
                }
              >
                {item.label}
              </NavLink>
            ))}
          </nav>

          <div className="ml-auto flex items-center gap-3">
            <StatusPill status={status} />
            {user ? (
              <>
                <div className="flex items-center gap-2">
                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
                    {user.username.slice(0, 1).toUpperCase()}
                  </span>
                  <span className="hidden text-sm text-ctp-subtext1 sm:block">
                    {user.username}
                  </span>
                </div>
                <button
                  type="button"
                  onClick={() => void logout()}
                  title="Log out"
                  className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
                >
                  <LogOut className="h-4 w-4" />
                </button>
              </>
            ) : (
              <Link
                to="/login"
                className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
              >
                Log in
              </Link>
            )}
          </div>
        </div>
      </header>

      <main className="mx-auto w-full max-w-[1600px] flex-1 px-4 pb-14 pt-6">
        <Outlet />
      </main>

      <StatusFooter status={status} />
    </div>
  );
}