mirror of
https://github.com/documenso/documenso.git
synced 2026-07-24 17:04:12 +10:00
David Nguyen
914 lines
29 KiB
TypeScript
914 lines
29 KiB
TypeScript
import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
|
||
import { useSession } from '@documenso/lib/client-only/providers/session';
|
||
import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
|
||
import {
|
||
DOCUMENTS_PAGE_SHORTCUT,
|
||
SETTINGS_PAGE_SHORTCUT,
|
||
TEMPLATES_PAGE_SHORTCUT,
|
||
} from '@documenso/lib/constants/keyboard-shortcuts';
|
||
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
|
||
import { dynamicActivate } from '@documenso/lib/utils/i18n';
|
||
import { trpc as trpcReact } from '@documenso/trpc/react';
|
||
import { cn } from '@documenso/ui/lib/utils';
|
||
import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from '@documenso/ui/primitives/command';
|
||
import { Dialog, DialogContent } from '@documenso/ui/primitives/dialog';
|
||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||
import type { MessageDescriptor } from '@lingui/core';
|
||
import { msg } from '@lingui/core/macro';
|
||
import { useLingui } from '@lingui/react';
|
||
import { Trans } from '@lingui/react/macro';
|
||
import { keepPreviousData } from '@tanstack/react-query';
|
||
import { commandScore } from 'cmdk/dist/command-score';
|
||
import {
|
||
ArrowLeftIcon,
|
||
CheckIcon,
|
||
CornerDownLeftIcon,
|
||
FileTextIcon,
|
||
GlobeIcon,
|
||
KeyRoundIcon,
|
||
LanguagesIcon,
|
||
LayoutTemplateIcon,
|
||
LoaderIcon,
|
||
MonitorIcon,
|
||
MoonIcon,
|
||
PaletteIcon,
|
||
SettingsIcon,
|
||
SunIcon,
|
||
UserIcon,
|
||
} from 'lucide-react';
|
||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import { useHotkeys } from 'react-hotkeys-hook';
|
||
import { Link, useNavigate } from 'react-router';
|
||
import { Theme, useTheme } from 'remix-themes';
|
||
import { match } from 'ts-pattern';
|
||
|
||
import { useOptionalCurrentTeam } from '~/providers/team';
|
||
|
||
import type { PromptCategory, PromptItem } from './app-command-menu.types';
|
||
import { useAdminSearchCategories } from './use-admin-search-categories';
|
||
|
||
/**
|
||
* The maximum number of results the personal document/template searches return.
|
||
*/
|
||
const PERSONAL_SEARCH_RESULTS_CAP = 20;
|
||
|
||
/**
|
||
* The minimum score for a hardcoded item to count as a fuzzy match.
|
||
*
|
||
* Prevents searches like "pass" showing "Templates"
|
||
*/
|
||
const MIN_FUZZY_SCORE = 0.1;
|
||
|
||
const PROMPT_GROUP_CLASSNAME =
|
||
'border-0 p-0 pt-1 [&_[cmdk-group-heading]]:mt-0 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.07em] [&_[cmdk-group-heading]]:opacity-100';
|
||
|
||
export type AppCommandMenuProps = {
|
||
open?: boolean;
|
||
onOpenChange?: (_open: boolean) => void;
|
||
};
|
||
|
||
export const AppCommandMenu = ({ open, onOpenChange }: AppCommandMenuProps) => {
|
||
const { _ } = useLingui();
|
||
const { organisations } = useSession();
|
||
|
||
const navigate = useNavigate();
|
||
const currentTeam = useOptionalCurrentTeam();
|
||
|
||
const [isOpen, setIsOpen] = useState(() => open ?? false);
|
||
const [search, setSearch] = useState('');
|
||
const [activePage, setActivePage] = useState<'theme' | 'language' | null>(null);
|
||
const [activeChip, setActiveChip] = useState('all');
|
||
const [commandValue, setCommandValue] = useState('');
|
||
|
||
// Support both controlled and uncontrolled usage.
|
||
const isPromptOpen = open ?? isOpen;
|
||
|
||
const debouncedSearch = useDebouncedValue(search, 200);
|
||
const trimmedSearch = debouncedSearch.trim();
|
||
|
||
// cmdk keeps a stale selection value behind when the entire result list is
|
||
// replaced, which prevents it from auto selecting the first new result.
|
||
// Controlling the value and clearing it whenever the query changes makes
|
||
// cmdk reliably select the first item once the new results register.
|
||
useEffect(() => {
|
||
setCommandValue('');
|
||
}, [debouncedSearch, activePage]);
|
||
|
||
const hasValidSearch = trimmedSearch.length > 0;
|
||
|
||
const {
|
||
data: searchDocumentsData,
|
||
isFetching: isFetchingDocuments,
|
||
isError: isDocumentsSearchError,
|
||
} = trpcReact.document.search.useQuery(
|
||
{
|
||
query: debouncedSearch,
|
||
},
|
||
{
|
||
// Sub pages filter their own local lists, so the searches pause while
|
||
// one is open.
|
||
enabled: isPromptOpen && activePage === null && hasValidSearch,
|
||
placeholderData: keepPreviousData,
|
||
// Show immediate failure instead of a long spinner.
|
||
retry: false,
|
||
|
||
// Do not batch this due to relatively long request time compared to
|
||
// other queries which are generally batched with this.
|
||
...SKIP_QUERY_BATCH_META,
|
||
...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
|
||
},
|
||
);
|
||
|
||
const {
|
||
data: searchTemplatesData,
|
||
isFetching: isFetchingTemplates,
|
||
isError: isTemplatesSearchError,
|
||
} = trpcReact.template.search.useQuery(
|
||
{
|
||
query: debouncedSearch,
|
||
},
|
||
{
|
||
enabled: isPromptOpen && activePage === null && hasValidSearch,
|
||
placeholderData: keepPreviousData,
|
||
retry: false,
|
||
...SKIP_QUERY_BATCH_META,
|
||
...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
|
||
},
|
||
);
|
||
|
||
const {
|
||
isUserAdmin,
|
||
categories: adminSearchCategories,
|
||
isFetching: isFetchingAdminSearch,
|
||
isError: isAdminSearchError,
|
||
} = useAdminSearchCategories({
|
||
query: trimmedSearch,
|
||
open: isPromptOpen && activePage === null,
|
||
});
|
||
|
||
// Hide the page scrollbar while the prompt is open. Radix's scroll lock
|
||
// blocks wheel and touch scrolling, but the page scrolls on the root
|
||
// element so its scrollbar stays visible and draggable.
|
||
useEffect(() => {
|
||
if (!isPromptOpen) {
|
||
return;
|
||
}
|
||
|
||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||
|
||
const previousOverflow = document.documentElement.style.overflow;
|
||
const previousPaddingRight = document.body.style.paddingRight;
|
||
|
||
document.documentElement.style.overflow = 'hidden';
|
||
|
||
// Compensate for the removed scrollbar so the page doesn't shift.
|
||
if (scrollbarWidth > 0) {
|
||
document.body.style.paddingRight = `${scrollbarWidth}px`;
|
||
}
|
||
|
||
return () => {
|
||
document.documentElement.style.overflow = previousOverflow;
|
||
document.body.style.paddingRight = previousPaddingRight;
|
||
};
|
||
}, [isPromptOpen]);
|
||
|
||
const setOpen = useCallback(
|
||
(nextOpen: boolean) => {
|
||
setIsOpen(nextOpen);
|
||
onOpenChange?.(nextOpen);
|
||
|
||
if (!nextOpen) {
|
||
setActivePage(null);
|
||
setActiveChip('all');
|
||
setSearch('');
|
||
setCommandValue('');
|
||
}
|
||
},
|
||
[onOpenChange],
|
||
);
|
||
|
||
const toggleOpen = () => {
|
||
setOpen(!isPromptOpen);
|
||
};
|
||
|
||
const push = useCallback(
|
||
(path: string) => {
|
||
void navigate(path);
|
||
setOpen(false);
|
||
},
|
||
[navigate, setOpen],
|
||
);
|
||
|
||
const goToPage = useCallback((page: 'theme' | 'language') => {
|
||
setActivePage(page);
|
||
setSearch('');
|
||
}, []);
|
||
|
||
const resolveItemLabel = useCallback(
|
||
(label: string | MessageDescriptor) => (typeof label === 'string' ? label : _(label)),
|
||
[_],
|
||
);
|
||
|
||
// Fall back to the first available team so the default view always shows
|
||
// the document/template page links, even outside a team context such as the
|
||
// admin pages.
|
||
const teamUrl = useMemo(
|
||
() => currentTeam?.url || organisations[0]?.teams[0]?.url || null,
|
||
[currentTeam, organisations],
|
||
);
|
||
|
||
// Fuzzy match and rank the hardcoded items using the same scorer cmdk uses
|
||
// internally, so abbreviations like "setg" still match "Settings".
|
||
const filterBySearch = useCallback(
|
||
(items: PromptItem[]) => {
|
||
if (!hasValidSearch) {
|
||
return items;
|
||
}
|
||
|
||
return items
|
||
.map((item) => ({ item, score: commandScore(resolveItemLabel(item.label), trimmedSearch) }))
|
||
.filter(({ score }) => score >= MIN_FUZZY_SCORE)
|
||
.sort((a, b) => b.score - a.score)
|
||
.map(({ item }) => item);
|
||
},
|
||
[hasValidSearch, trimmedSearch, resolveItemLabel],
|
||
);
|
||
|
||
const categories = useMemo(() => {
|
||
const documentPageLinks: PromptItem[] = teamUrl
|
||
? [
|
||
{
|
||
id: 'documents-all',
|
||
label: msg`All documents`,
|
||
path: `/t/${teamUrl}/documents?status=ALL`,
|
||
icon: FileTextIcon,
|
||
shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
|
||
},
|
||
{
|
||
id: 'documents-draft',
|
||
label: msg`Draft documents`,
|
||
path: `/t/${teamUrl}/documents?status=DRAFT`,
|
||
icon: FileTextIcon,
|
||
},
|
||
{
|
||
id: 'documents-completed',
|
||
label: msg`Completed documents`,
|
||
path: `/t/${teamUrl}/documents?status=COMPLETED`,
|
||
icon: FileTextIcon,
|
||
},
|
||
{
|
||
id: 'documents-pending',
|
||
label: msg`Pending documents`,
|
||
path: `/t/${teamUrl}/documents?status=PENDING`,
|
||
icon: FileTextIcon,
|
||
},
|
||
{
|
||
id: 'documents-inbox',
|
||
label: msg`Inbox documents`,
|
||
path: `/t/${teamUrl}/documents?status=INBOX`,
|
||
icon: FileTextIcon,
|
||
},
|
||
]
|
||
: [];
|
||
|
||
const templatePageLinks: PromptItem[] = teamUrl
|
||
? [
|
||
{
|
||
id: 'templates-all',
|
||
label: msg`All templates`,
|
||
path: `/t/${teamUrl}/templates`,
|
||
icon: LayoutTemplateIcon,
|
||
shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
|
||
},
|
||
]
|
||
: [];
|
||
|
||
const settingsLinks: PromptItem[] = [
|
||
{
|
||
id: 'settings-main',
|
||
label: msg`Settings`,
|
||
path: '/settings',
|
||
icon: SettingsIcon,
|
||
shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', ''),
|
||
},
|
||
{ id: 'settings-profile', label: msg`Profile`, path: '/settings/profile', icon: UserIcon },
|
||
{ id: 'settings-password', label: msg`Password`, path: '/settings/security', icon: KeyRoundIcon },
|
||
{
|
||
id: 'settings-language',
|
||
label: msg`Change language`,
|
||
icon: LanguagesIcon,
|
||
onAction: () => goToPage('language'),
|
||
},
|
||
{ id: 'settings-theme', label: msg`Change theme`, icon: PaletteIcon, onAction: () => goToPage('theme') },
|
||
];
|
||
|
||
const personalDocumentItems: PromptItem[] =
|
||
hasValidSearch && searchDocumentsData
|
||
? searchDocumentsData.map((document) => ({
|
||
id: `personal-document-${document.path}`,
|
||
label: document.title,
|
||
path: document.path,
|
||
icon: FileTextIcon,
|
||
}))
|
||
: [];
|
||
|
||
const personalTemplateItems: PromptItem[] =
|
||
hasValidSearch && searchTemplatesData
|
||
? searchTemplatesData.map((template) => ({
|
||
id: `personal-template-${template.path}`,
|
||
label: template.title,
|
||
path: template.path,
|
||
icon: LayoutTemplateIcon,
|
||
}))
|
||
: [];
|
||
|
||
const documentItems = [...filterBySearch(documentPageLinks), ...personalDocumentItems];
|
||
|
||
const templateItems = [...filterBySearch(templatePageLinks), ...personalTemplateItems];
|
||
|
||
const settingsItems = filterBySearch(settingsLinks);
|
||
|
||
const allCategories: PromptCategory[] = [
|
||
...adminSearchCategories,
|
||
{
|
||
id: 'documents',
|
||
label: msg`Documents`,
|
||
items: documentItems,
|
||
count: documentItems.length,
|
||
chipCount: personalDocumentItems.length > 0 ? personalDocumentItems.length : null,
|
||
isCapped: personalDocumentItems.length >= PERSONAL_SEARCH_RESULTS_CAP,
|
||
isGlobal: false,
|
||
},
|
||
{
|
||
id: 'templates',
|
||
label: msg`Templates`,
|
||
items: templateItems,
|
||
count: templateItems.length,
|
||
chipCount: personalTemplateItems.length > 0 ? personalTemplateItems.length : null,
|
||
isCapped: personalTemplateItems.length >= PERSONAL_SEARCH_RESULTS_CAP,
|
||
isGlobal: false,
|
||
},
|
||
{
|
||
id: 'settings',
|
||
label: msg`Settings`,
|
||
items: settingsItems,
|
||
count: settingsItems.length,
|
||
chipCount: settingsItems.length,
|
||
isCapped: false,
|
||
isGlobal: false,
|
||
},
|
||
];
|
||
|
||
return allCategories.filter((category) => category.items.length > 0);
|
||
}, [
|
||
teamUrl,
|
||
hasValidSearch,
|
||
searchDocumentsData,
|
||
searchTemplatesData,
|
||
adminSearchCategories,
|
||
filterBySearch,
|
||
goToPage,
|
||
]);
|
||
|
||
const effectiveChip = categories.some((category) => category.id === activeChip && category.chipCount !== null)
|
||
? activeChip
|
||
: 'all';
|
||
|
||
const visibleCategories =
|
||
effectiveChip === 'all' ? categories : categories.filter((category) => category.id === effectiveChip);
|
||
|
||
const totalVisibleCount = visibleCategories.reduce((total, category) => total + category.count, 0);
|
||
const isVisibleCountCapped = visibleCategories.some((category) => category.isCapped);
|
||
|
||
const totalAllCount = categories.reduce((total, category) => total + category.count, 0);
|
||
const isAllCountCapped = categories.some((category) => category.isCapped);
|
||
|
||
const isAnySearchFetching = isFetchingDocuments || isFetchingTemplates || isFetchingAdminSearch;
|
||
|
||
const hasSearchError = isDocumentsSearchError || isTemplatesSearchError || isAdminSearchError;
|
||
|
||
const formatChipCount = (count: number, isCapped: boolean) => (isCapped ? `≥${count}` : `${count}`);
|
||
|
||
const goToSettings = useCallback(() => push('/settings'), [push]);
|
||
const goToDocuments = useCallback(() => {
|
||
if (teamUrl) {
|
||
push(`/t/${teamUrl}/documents?status=ALL`);
|
||
}
|
||
}, [push, teamUrl]);
|
||
const goToTemplates = useCallback(() => {
|
||
if (teamUrl) {
|
||
push(`/t/${teamUrl}/templates`);
|
||
}
|
||
}, [push, teamUrl]);
|
||
|
||
useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
|
||
useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
|
||
useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
|
||
useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
|
||
|
||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||
// Escape goes to the previous page, or closes the prompt at the root.
|
||
// Backspace goes to the previous page when the search is empty.
|
||
if (event.key === 'Escape' || (event.key === 'Backspace' && !search)) {
|
||
event.preventDefault();
|
||
|
||
if (activePage === null) {
|
||
setOpen(false);
|
||
}
|
||
|
||
setActivePage(null);
|
||
}
|
||
};
|
||
|
||
const isSearchLoading = isAnySearchFetching && hasValidSearch;
|
||
|
||
const showSearchError = hasValidSearch && !isAnySearchFetching && hasSearchError;
|
||
|
||
const showNoResults = hasValidSearch && totalVisibleCount === 0 && !isAnySearchFetching && !hasSearchError;
|
||
|
||
const placeholder = match(activePage)
|
||
.with('theme', () => msg`Search themes…`)
|
||
.with('language', () => msg`Search languages…`)
|
||
.otherwise(() => (isUserAdmin ? msg`Search documents, users, organisations…` : msg`Type a command or search...`));
|
||
|
||
return (
|
||
<Dialog open={isPromptOpen} onOpenChange={setOpen}>
|
||
<DialogContent
|
||
hideClose={true}
|
||
overlayClassName="bg-foreground/40 backdrop-blur-[3px]"
|
||
className="mt-[11vh] flex max-h-[min(560px,76vh)] w-[620px] max-w-[calc(100vw-2rem)] flex-col gap-0 self-start overflow-hidden rounded-[10px] p-0 shadow-2xl sm:max-w-[620px]"
|
||
>
|
||
<Command
|
||
shouldFilter={false}
|
||
loop={true}
|
||
value={commandValue}
|
||
onValueChange={setCommandValue}
|
||
onKeyDown={handleKeyDown}
|
||
>
|
||
<div className="relative flex-none">
|
||
<CommandInput
|
||
value={search}
|
||
onValueChange={setSearch}
|
||
placeholder={_(placeholder)}
|
||
className="h-14 pr-14 text-[15px]"
|
||
/>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
// Mirror the escape key behaviour: back on sub pages,
|
||
// otherwise close.
|
||
if (activePage !== null) {
|
||
setActivePage(null);
|
||
return;
|
||
}
|
||
|
||
setOpen(false);
|
||
}}
|
||
className="absolute top-1/2 right-3 inline-flex -translate-y-1/2 items-center rounded border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
|
||
>
|
||
<Trans>esc</Trans>
|
||
</button>
|
||
</div>
|
||
|
||
{activePage === null && (
|
||
<div className="flex flex-none gap-1.5 overflow-x-auto border-b px-3.5 py-2.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||
<PromptChip
|
||
label={_(msg`All`)}
|
||
count={formatChipCount(totalAllCount, isAllCountCapped)}
|
||
isActive={effectiveChip === 'all'}
|
||
onSelect={() => setActiveChip('all')}
|
||
/>
|
||
|
||
{categories
|
||
.filter((category) => category.chipCount !== null)
|
||
.map((category) => (
|
||
<PromptChip
|
||
key={category.id}
|
||
label={_(category.label)}
|
||
count={formatChipCount(category.chipCount ?? 0, category.isCapped)}
|
||
isActive={effectiveChip === category.id}
|
||
isGlobal={category.isGlobal}
|
||
onSelect={() => setActiveChip(category.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<CommandList className="max-h-none flex-1 overscroll-contain px-2 pt-0.5 pb-2">
|
||
{activePage === null && (
|
||
<>
|
||
{isSearchLoading && (
|
||
// The single loading state, replacing the results while any
|
||
// search is in flight. Mirrors the padding and content
|
||
// height of the no results state below so swapping between
|
||
// them doesn't change the height of the prompt.
|
||
<div className="flex items-center justify-center px-5 pt-12 pb-11">
|
||
<div className="flex h-11 items-center">
|
||
<LoaderIcon className="h-4 w-4 animate-spin text-muted-foreground" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{!isSearchLoading &&
|
||
visibleCategories.map((category) => (
|
||
<CommandGroup
|
||
key={category.id}
|
||
heading={
|
||
category.isGlobal ? (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<GlobeIcon aria-hidden="true" className="h-3 w-3" />
|
||
<span className="sr-only">{_(msg`Global`)} </span>
|
||
{_(category.label)}
|
||
</span>
|
||
) : (
|
||
_(category.label)
|
||
)
|
||
}
|
||
className={PROMPT_GROUP_CLASSNAME}
|
||
>
|
||
{category.items.map((item) => (
|
||
<PromptCommandItem key={item.id} item={item} query={trimmedSearch} push={push} />
|
||
))}
|
||
</CommandGroup>
|
||
))}
|
||
|
||
{showSearchError && totalVisibleCount > 0 && (
|
||
// Partial failure: the results from the searches that
|
||
// succeeded stay visible, flagged as incomplete.
|
||
<div className="px-5 pt-2 pb-3 text-center text-muted-foreground text-xs">
|
||
<Trans>Some searches failed — results may be incomplete.</Trans>
|
||
</div>
|
||
)}
|
||
|
||
{showSearchError && totalVisibleCount === 0 && (
|
||
// Total failure: an honest error state instead of a
|
||
// misleading "No results", height-matched to it so the
|
||
// prompt doesn't jump.
|
||
<div className="px-5 pt-12 pb-11 text-center">
|
||
<div className="font-medium text-sm">
|
||
<Trans>Something went wrong</Trans>
|
||
</div>
|
||
<div className="mt-1 text-muted-foreground text-sm">
|
||
<Trans>We couldn’t complete the search. Try again.</Trans>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showNoResults && (
|
||
<div className="px-5 pt-12 pb-11 text-center">
|
||
<div className="font-medium text-sm">
|
||
<Trans>No results for “{trimmedSearch}”</Trans>
|
||
</div>
|
||
<div className="mt-1 text-muted-foreground text-sm">
|
||
<Trans>Try a different search or switch category.</Trans>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{activePage === 'theme' && (
|
||
<PromptThemeCommands query={trimmedSearch} push={push} onBack={() => setActivePage(null)} />
|
||
)}
|
||
{activePage === 'language' && (
|
||
<PromptLanguageCommands query={trimmedSearch} push={push} onBack={() => setActivePage(null)} />
|
||
)}
|
||
</CommandList>
|
||
|
||
<div className="flex h-10 flex-none items-center justify-between gap-3 border-t bg-muted/50 px-3.5">
|
||
<div className="hidden items-center gap-3.5 text-muted-foreground text-xs sm:flex">
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<PromptKbd>↑</PromptKbd>
|
||
<PromptKbd>↓</PromptKbd>
|
||
<Trans>Navigate</Trans>
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<PromptKbd>↵</PromptKbd>
|
||
<Trans>Open</Trans>
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<PromptKbd>esc</PromptKbd>
|
||
{activePage === null ? <Trans>Close</Trans> : <Trans>Back</Trans>}
|
||
</span>
|
||
</div>
|
||
|
||
<span className="ml-auto text-muted-foreground text-xs">
|
||
{hasValidSearch ? (
|
||
<Trans>{formatChipCount(totalVisibleCount, isVisibleCountCapped)} results</Trans>
|
||
) : (
|
||
<Trans>{totalVisibleCount} items</Trans>
|
||
)}
|
||
</span>
|
||
</div>
|
||
</Command>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
const PromptChip = ({
|
||
label,
|
||
count,
|
||
isActive,
|
||
isGlobal = false,
|
||
onSelect,
|
||
}: {
|
||
label: string;
|
||
count: string;
|
||
isActive: boolean;
|
||
isGlobal?: boolean;
|
||
onSelect: () => void;
|
||
}) => {
|
||
const { _ } = useLingui();
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onSelect}
|
||
aria-pressed={isActive}
|
||
className={cn(
|
||
'inline-flex h-7 flex-none items-center gap-1.5 whitespace-nowrap rounded-md border px-2.5 font-medium text-[13px] transition-colors',
|
||
isActive
|
||
? 'border-input bg-muted text-foreground'
|
||
: 'border-border bg-background text-muted-foreground hover:bg-muted/50',
|
||
)}
|
||
>
|
||
{isGlobal && (
|
||
<>
|
||
<GlobeIcon aria-hidden="true" className="h-3.5 w-3.5" />
|
||
<span className="sr-only">{_(msg`Global`)} </span>
|
||
</>
|
||
)}
|
||
{label}
|
||
<span className="font-normal opacity-60">{count}</span>
|
||
</button>
|
||
);
|
||
};
|
||
|
||
const PromptKbd = ({ children }: { children: React.ReactNode }) => {
|
||
return (
|
||
<span className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-border bg-background px-1 font-mono text-[11px]">
|
||
{children}
|
||
</span>
|
||
);
|
||
};
|
||
|
||
const HighlightedText = ({ text, query }: { text: string; query: string }) => {
|
||
if (!query) {
|
||
return <>{text}</>;
|
||
}
|
||
|
||
const index = text.toLowerCase().indexOf(query.toLowerCase());
|
||
|
||
if (index === -1) {
|
||
return <>{text}</>;
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{text.slice(0, index)}
|
||
<mark className="rounded-[3px] bg-primary/40 text-inherit">{text.slice(index, index + query.length)}</mark>
|
||
{text.slice(index + query.length)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
const PromptCommandItem = ({
|
||
item,
|
||
query,
|
||
push,
|
||
disabled = false,
|
||
}: {
|
||
item: PromptItem;
|
||
query: string;
|
||
push: (_path: string) => void;
|
||
disabled?: boolean;
|
||
}) => {
|
||
const { _ } = useLingui();
|
||
|
||
const label = typeof item.label === 'string' ? item.label : _(item.label);
|
||
|
||
const onSelect = () => {
|
||
if (item.onAction) {
|
||
item.onAction();
|
||
return;
|
||
}
|
||
|
||
if (item.path) {
|
||
push(item.path);
|
||
}
|
||
};
|
||
|
||
const content = (
|
||
<>
|
||
<span
|
||
className={cn(
|
||
'inline-flex h-[34px] w-[34px] flex-none items-center justify-center rounded-lg border border-border bg-background text-muted-foreground',
|
||
item.initials && 'border-transparent bg-primary/10 font-semibold text-primary text-xs',
|
||
)}
|
||
>
|
||
{item.initials ? item.initials : item.icon && <item.icon className="h-4 w-4" />}
|
||
</span>
|
||
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block truncate font-medium text-foreground text-sm">
|
||
<HighlightedText text={label} query={query} />
|
||
</span>
|
||
{item.sublabel && (
|
||
<span className="mt-px block truncate text-muted-foreground text-xs">
|
||
<HighlightedText text={item.sublabel} query={query} />
|
||
</span>
|
||
)}
|
||
</span>
|
||
|
||
{item.shortcut && <span className="text-muted-foreground text-xs tracking-widest">{item.shortcut}</span>}
|
||
|
||
{item.isChecked && <CheckIcon className="h-4 w-4 flex-none text-primary" />}
|
||
|
||
<span className="hidden h-[22px] w-[22px] flex-none items-center justify-center rounded border border-border bg-background text-muted-foreground group-aria-selected:inline-flex">
|
||
<CornerDownLeftIcon className="h-3 w-3" />
|
||
</span>
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<CommandItem
|
||
value={item.id}
|
||
onSelect={onSelect}
|
||
disabled={disabled}
|
||
className="group items-center gap-3 rounded-lg px-2.5 py-2"
|
||
>
|
||
{item.path ? (
|
||
<Link
|
||
to={item.path}
|
||
tabIndex={-1}
|
||
className="flex w-full min-w-0 items-center gap-3"
|
||
onClick={(event) => {
|
||
// Let the browser handle modified clicks natively, such as opening
|
||
// the link in a new tab, without navigating or closing the prompt.
|
||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
||
event.stopPropagation();
|
||
return;
|
||
}
|
||
|
||
// Plain clicks bubble to the CommandItem which navigates and
|
||
// closes the prompt via onSelect.
|
||
event.preventDefault();
|
||
}}
|
||
>
|
||
{content}
|
||
</Link>
|
||
) : (
|
||
content
|
||
)}
|
||
</CommandItem>
|
||
);
|
||
};
|
||
|
||
const PromptBackCommand = ({ onBack }: { onBack: () => void }) => {
|
||
return (
|
||
<PromptCommandItem
|
||
query=""
|
||
push={() => undefined}
|
||
item={{
|
||
id: 'back',
|
||
label: msg`Back`,
|
||
icon: ArrowLeftIcon,
|
||
onAction: onBack,
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
|
||
const PromptThemeCommands = ({
|
||
query,
|
||
push,
|
||
onBack,
|
||
}: {
|
||
query: string;
|
||
push: (_path: string) => void;
|
||
onBack: () => void;
|
||
}) => {
|
||
const { _ } = useLingui();
|
||
|
||
const [theme, setTheme, metadata] = useTheme();
|
||
|
||
const themes = [
|
||
{ id: 'theme-light', label: msg`Light Mode`, icon: SunIcon, theme: Theme.LIGHT },
|
||
{ id: 'theme-dark', label: msg`Dark Mode`, icon: MoonIcon, theme: Theme.DARK },
|
||
{ id: 'theme-system', label: msg`System Theme`, icon: MonitorIcon, theme: null },
|
||
] as const;
|
||
|
||
const visibleThemes = themes.filter((item) => !query || commandScore(_(item.label), query) >= MIN_FUZZY_SCORE);
|
||
|
||
const isThemeChecked = (itemTheme: Theme | null) => {
|
||
if (itemTheme === null) {
|
||
return metadata.definedBy === 'SYSTEM';
|
||
}
|
||
|
||
return metadata.definedBy === 'USER' && theme === itemTheme;
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<PromptBackCommand onBack={onBack} />
|
||
|
||
<CommandGroup heading={_(msg`Theme`)} className={PROMPT_GROUP_CLASSNAME}>
|
||
{visibleThemes.map((item) => (
|
||
<PromptCommandItem
|
||
key={item.id}
|
||
query={query}
|
||
push={push}
|
||
item={{
|
||
id: item.id,
|
||
label: item.label,
|
||
icon: item.icon,
|
||
onAction: () => setTheme(item.theme),
|
||
isChecked: isThemeChecked(item.theme),
|
||
}}
|
||
/>
|
||
))}
|
||
</CommandGroup>
|
||
</>
|
||
);
|
||
};
|
||
|
||
const PromptLanguageCommands = ({
|
||
query,
|
||
push,
|
||
onBack,
|
||
}: {
|
||
query: string;
|
||
push: (_path: string) => void;
|
||
onBack: () => void;
|
||
}) => {
|
||
const { i18n, _ } = useLingui();
|
||
const { toast } = useToast();
|
||
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
const setLanguage = async (lang: string) => {
|
||
if (isLoading || lang === i18n.locale) {
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
await dynamicActivate(lang);
|
||
|
||
const formData = new FormData();
|
||
|
||
formData.append('lang', lang);
|
||
|
||
const response = await fetch('/api/locale', {
|
||
method: 'post',
|
||
body: formData,
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(response.statusText);
|
||
}
|
||
} catch (e) {
|
||
console.error(`Failed to set language: ${e}`);
|
||
|
||
toast({
|
||
title: _(msg`An unknown error occurred`),
|
||
variant: 'destructive',
|
||
description: _(msg`Unable to change the language at this time. Please try again later.`),
|
||
});
|
||
}
|
||
|
||
setIsLoading(false);
|
||
};
|
||
|
||
const visibleLanguages = Object.values(SUPPORTED_LANGUAGES).filter(
|
||
(language) => !query || commandScore(_(language.full), query) >= MIN_FUZZY_SCORE,
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<PromptBackCommand onBack={onBack} />
|
||
|
||
<CommandGroup heading={_(msg`Language`)} className={PROMPT_GROUP_CLASSNAME}>
|
||
{visibleLanguages.map((language) => (
|
||
<PromptCommandItem
|
||
key={language.short}
|
||
query={query}
|
||
push={push}
|
||
disabled={isLoading}
|
||
item={{
|
||
id: `language-${language.short}`,
|
||
label: language.full,
|
||
initials: language.short.toUpperCase(),
|
||
onAction: async () => setLanguage(language.short),
|
||
isChecked: i18n.locale === language.short,
|
||
}}
|
||
/>
|
||
))}
|
||
</CommandGroup>
|
||
</>
|
||
);
|
||
};
|