J621/frontend/src/components/CommandPalette.tsx

import {
  FolderOpen,
  Globe,
  LogIn,
  LogOut,
  Menu,
  Search,
  Settings,
  Upload,
  type LucideIcon,
} from "lucide-react";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

import { cn } from "@/lib/cn";
import { useAuth } from "@/store/auth";
import { useUi } from "@/store/ui";

interface Command {
  id: string;
  label: string;
  hint?: string;
  icon: LucideIcon;
  run: () => void;
}

export function CommandPalette({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  if (!open) return null;
  return <CommandPaletteDialog onClose={onClose} />;
}

function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
  const navigate = useNavigate();
  const user = useAuth((state) => state.user);
  const logout = useAuth((state) => state.logout);
  const toggleSidebar = useUi((state) => state.toggleSidebar);
  const [query, setQuery] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);

  const commands = useMemo<Command[]>(() => {
    const list: Command[] = [
      {
        id: "library",
        label: "Go to Library",
        icon: FolderOpen,
        run: () => navigate("/"),
      },
      {
        id: "upload",
        label: "Go to Upload",
        icon: Upload,
        run: () => navigate("/upload"),
      },
      {
        id: "online",
        label: "Go to Online browser",
        icon: Globe,
        run: () => navigate("/online"),
      },
      {
        id: "filters",
        label: "Toggle filters",
        hint: "Ctrl+B",
        icon: Menu,
        run: toggleSidebar,
      },
      {
        id: "search",
        label: "Focus library search",
        hint: "/",
        icon: Search,
        run: () => {
          navigate("/");
          window.requestAnimationFrame(() => {
            document.getElementById("library-search")?.focus();
          });
        },
      },
    ];
    if (user) {
      list.push({
        id: "account",
        label: "Account settings",
        icon: Settings,
        run: () => navigate("/account"),
      });
      list.push({
        id: "logout",
        label: `Log out (${user.username})`,
        icon: LogOut,
        run: () => void logout(),
      });
    } else {
      list.push({
        id: "login",
        label: "Log in",
        icon: LogIn,
        run: () => navigate("/login"),
      });
    }
    return list;
  }, [navigate, toggleSidebar, user, logout]);

  const filtered = useMemo(() => {
    const needle = query.trim().toLowerCase();
    return needle
      ? commands.filter((command) =>
          command.label.toLowerCase().includes(needle),
        )
      : commands;
  }, [commands, query]);

  function runCommand(command: Command | undefined) {
    if (!command) return;
    onClose();
    command.run();
  }

  return (
    <div
      className="fixed inset-0 z-[60] flex items-start justify-center bg-ctp-crust/70 px-4 pt-[18vh] backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="w-full max-w-lg overflow-hidden rounded-lg border border-ctp-surface1 bg-ctp-surface0 shadow-[0_4px_12px_rgba(17,17,27,0.6)]"
        onClick={(event) => event.stopPropagation()}
      >
        <input
          autoFocus
          value={query}
          onChange={(event) => {
            setQuery(event.target.value);
            setActiveIndex(0);
          }}
          onKeyDown={(event) => {
            if (event.key === "ArrowDown") {
              event.preventDefault();
              setActiveIndex((index) =>
                Math.min(index + 1, filtered.length - 1),
              );
            } else if (event.key === "ArrowUp") {
              event.preventDefault();
              setActiveIndex((index) => Math.max(index - 1, 0));
            } else if (event.key === "Enter") {
              event.preventDefault();
              runCommand(filtered[activeIndex]);
            } else if (event.key === "Escape") {
              onClose();
            }
          }}
          placeholder="Type a command…"
          className="w-full border-b border-ctp-surface1 bg-transparent px-4 py-3 font-mono text-sm text-ctp-text placeholder:text-ctp-overlay0 focus:outline-none"
        />
        <ul className="max-h-72 overflow-y-auto p-1.5">
          {filtered.length === 0 ? (
            <li className="px-3 py-6 text-center text-sm text-ctp-overlay0">
              No matching commands
            </li>
          ) : (
            filtered.map((command, index) => (
              <li key={command.id}>
                <button
                  type="button"
                  onMouseEnter={() => setActiveIndex(index)}
                  onClick={() => runCommand(command)}
                  className={cn(
                    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition",
                    index === activeIndex
                      ? "bg-ctp-surface1 text-ctp-text"
                      : "text-ctp-subtext0",
                  )}
                >
                  <command.icon className="h-4 w-4 shrink-0" />
                  <span className="flex-1 truncate">{command.label}</span>
                  {command.hint ? (
                    <span className="font-mono text-[11px] text-ctp-overlay0">
                      {command.hint}
                    </span>
                  ) : null}
                </button>
              </li>
            ))
          )}
        </ul>
      </div>
    </div>
  );
}