J621/frontend/src/components/AppShell.tsx

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

import { CommandPalette } from "@/components/CommandPalette";
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 { useE621 } from "@/store/e621";
import { useUi } from "@/store/ui";

export function AppShell() {
  const user = useAuth((state) => state.user);
  const logout = useAuth((state) => state.logout);
  const toggleSidebar = useUi((state) => state.toggleSidebar);
  const loadE621 = useE621((state) => state.load);
  const location = useLocation();
  const [paletteOpen, setPaletteOpen] = useState(false);

  useEffect(() => {
    void loadE621();
  }, [loadE621]);

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

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

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

  const navItems = [
    { to: "/", label: "Library" },
    { to: "/online", label: "Online" },
    { to: "/pools", label: "Pools" },
    ...(user ? [{ to: "/followed", label: "Followed" }] : []),
    ...(user ? [{ to: "/similar", label: "Similar" }] : []),
    ...(user?.can_upload
      ? [
          { to: "/upload", label: "Upload" },
          { to: "/duplicates", label: "Duplicates" },
          { to: "/delete", label: "Delete" },
        ]
      : []),
    ...(user && (user.is_staff || user.is_superuser || user.role === "staff")
      ? [
          { to: "/stats", label: "Stats" },
          { to: "/users", label: "Users" },
        ]
      : []),
  ];

  const navigationType = useNavigationType();
  useEffect(() => {
    // New navigations start at the top; history back/forward keeps position.
    if (navigationType === "POP") return;
    window.scrollTo({ top: 0 });
  }, [location.pathname, navigationType]);

  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 ? (
              <>
                <Link
                  to="/account"
                  title="Account settings"
                  className="flex items-center gap-2 transition hover:opacity-80"
                >
                  {user.avatar_url ? (
                    <img
                      src={user.avatar_url}
                      alt={user.username}
                      className="h-7 w-7 rounded-full border border-ctp-surface1 object-cover"
                    />
                  ) : (
                    <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>
                </Link>
                <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}
        staff={Boolean(
          user && (user.is_staff || user.is_superuser || user.role === "staff"),
        )}
      />
      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
    </div>
  );
}