import { useTranslation } from "react-i18next"; import { useFetcher, useNavigate } from "react-router"; import { UI_SURFACE_IDS } from "~/application/ui/uiRegistry"; import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "~/components/ui/command"; import { getCommandRegistryActions, type CommandRegistryLayout, type ScopedCommandAction } from "~/services/command-registry/commandRegistry"; import type { AppLoaderData } from "~/utils/data/useAppData"; import { useAppOrAdminData } from "~/utils/data/useAppOrAdminData"; import { useRootData } from "~/utils/data/useRootData"; export default function CommandPaletteDialog({ actions, layout, open, setOpen, }: { actions?: ScopedCommandAction[]; layout?: CommandRegistryLayout; open: boolean; setOpen: (open: boolean) => void; }) { const { t, i18n } = useTranslation(); const navigate = useNavigate(); const fetcher = useFetcher(); const appData = useAppOrAdminData() as AppLoaderData | undefined; const rootData = useRootData(); const resolvedActions = actions ?? (layout ? getCommandRegistryActions({ layout, t, i18n, navigate, submitLogout: () => { const form = new FormData(); if (rootData?.csrf) { form.set("csrf", rootData.csrf); } fetcher.submit(form, { method: "post", action: "/logout" }); }, appData, rootData, }) : []); return (

{ // The palette opens via controlled state, not a Radix trigger, so Radix // drops focus to on close. Return focus to the search trigger. const trigger = typeof document !== "undefined" ? document.querySelector('[data-ui-id="ui.action.shell.search"]') : null; if (trigger) { event.preventDefault(); trigger.focus(); } }} > {t("app.commands.empty.title")} {resolvedActions.map((action) => ( { action.perform?.(action); setOpen(false); }} >

{action.name}

{action.subtitle ?

{action.subtitle}

: null}

))}

); }