J621/frontend/src/components/AppShell.tsx

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

import { CommandPalette } from "@/components/CommandPalette";
import { ConfirmDialog } from "@/components/ConfirmDialog";
import { StatusFooter } from "@/components/StatusFooter";
import { StatusPill } from "@/components/StatusPill";
import { Toasts } from "@/components/Toasts";
import { UploadIndicator } from "@/components/UploadIndicator";
import { api } from "@/lib/api";
import { hasBackend } from "@/lib/backend";
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 navigate = useNavigate();
  const [paletteOpen, setPaletteOpen] = useState(false);
  const landingApplied = useRef(false);
  const backend = hasBackend();

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

  // Open on the preferred landing page, but only for the initial "/" visit.
  useEffect(() => {
    if (landingApplied.current || !user) return;
    landingApplied.current = true;
    const landing = user.preferences?.landing_page ?? "library";
    if (landing === "library" || location.pathname !== "/") return;
    navigate(landing === "pools" ? "/pools" : `/${landing}`, { replace: true });
  }, [user, location.pathname, navigate]);

  const statusQuery = useQuery({
    queryKey: ["status"],
    queryFn: () => api<SystemStatus>("/api/status/"),
    refetchInterval: 5_000,
    staleTime: 4_000,
    enabled: backend,
  });
  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 = [
    ...(backend ? [{ to: "/", label: "Library" }] : []),
    ...(backend ? [{ to: "/random", label: "Random" }] : []),
    { to: "/online", label: "Online" },
    { to: "/pools", label: "Pools" },
    ...(backend && user ? [{ to: "/followed", label: "Followed" }] : []),
    ...(backend && user ? [{ to: "/similar", label: "Similar" }] : []),
    ...(backend && user?.can_upload
      ? [
          { to: "/upload", label: "Upload" },
          { to: "/duplicates", label: "Duplicates" },
          { to: "/delete", label: "Delete" },
        ]
      : []),
    ...(backend && 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="flex h-14 w-full items-center gap-4 px-3 sm: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">
            {backend ? (
              <>
                <UploadIndicator />
                <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>
                )}
              </>
            ) : (
              <>
                <Link
                  to="/account"
                  title="e621 credentials (stored in this browser)"
                  className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
                >
                  <KeyRound className="h-4 w-4" />
                </Link>
                <Link
                  to="/setup"
                  className="inline-flex items-center gap-1.5 rounded-md border border-ctp-surface1 bg-ctp-surface0 px-3 py-1.5 text-sm font-medium text-ctp-text transition hover:bg-ctp-surface1"
                >
                  <Cable className="h-3.5 w-3.5" />
                  Setup Backend
                </Link>
              </>
            )}
          </div>
        </div>
      </header>

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

      <StatusFooter
        backend={backend}
        status={status}
        staff={Boolean(
          backend &&
            user &&
            (user.is_staff || user.is_superuser || user.role === "staff"),
        )}
      />
      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
      <ConfirmDialog />
      <Toasts />
    </div>
  );
}