pastilhas
926034750f
Layout reaches zero. The dock, header, user menu, theme switcher, spotlight, shortcuts modal, screen-error fallback, rescan and bug report. Three things worth knowing: CORE_DOCK_ITEMS now carries labelKey instead of label, and one useDockItems() hook resolves the composed list. DashboardLayout, Spotlight and DockSettings each spread the same two sources before, so each would have had to resolve labels itself. Plugin tiles keep the name from their own manifest — a plugin's strings are not ours. Spotlight resolves labels INSIDE the hook, so rank() still matches what the reader can see rather than a dot-path. Its to: '/settings/...' literals are untouched, which is what docs:check parses — verified still 20 offered, 0 missing. The rescan toast said 'N skill(s)'. That is English giving up on a plural, so it is now a real plural entry per noun and reads correctly at 0, 1 and 2 in both locales. ThemeSwitcher used t as its theme loop variable; renamed to entry.
84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Keyboard } from 'lucide-react';
|
|
import { isShortcutsChord, SHORTCUT_SECTIONS } from '@/state/shortcuts';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
|
|
/*
|
|
`Ctrl+?` — every shortcut the shell owns, on one screen.
|
|
|
|
Ported in shape from `vimazing`, where the controls are declared as data and the help screen renders them.
|
|
Its renderer was a recursive `any` walk over arbitrary content, which is right for a game whose help also
|
|
carries rules and scoring; here the content is one shape, so the renderer is typed and boring and the
|
|
interesting part is `state/shortcuts.ts`.
|
|
|
|
Card per section, two columns on anything wider than a phone — the same arrangement vimazing used for its
|
|
controls grid, and for the same reason: these are short lists that read badly as one long column.
|
|
*/
|
|
|
|
const Row = ({ keys, description }: { keys: string; description: string }) => (
|
|
<div className="flex items-baseline gap-3 py-1">
|
|
{/* Fixed width, tabular: the chords line up into a column you can scan, which is the whole point of
|
|
putting them on the left. */}
|
|
<kbd className="w-32 shrink-0 rounded border border-border bg-muted/60 px-1.5 py-0.5 text-center font-mono text-[11px] text-foreground/90">
|
|
{keys}
|
|
</kbd>
|
|
<span className="text-sm text-muted-foreground">{description}</span>
|
|
</div>
|
|
);
|
|
|
|
export const ShortcutsModal = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
const onKey = (ev: KeyboardEvent) => {
|
|
if (isShortcutsChord(ev)) {
|
|
// No focus check: `Ctrl+?` types nothing in a text field, and a help list you cannot open from the
|
|
// composer is a help list you cannot open — the lesson from the Spotlight guard.
|
|
ev.preventDefault();
|
|
setOpen((was) => !was);
|
|
return;
|
|
}
|
|
if (ev.key === 'Escape' && open) setOpen(false);
|
|
};
|
|
// Capture, so a panel with its own key handling cannot swallow it first.
|
|
window.addEventListener('keydown', onKey, true);
|
|
return () => window.removeEventListener('keydown', onKey, true);
|
|
}, [open]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[901] flex items-start justify-center bg-black/50 pt-[8vh] backdrop-blur-sm"
|
|
onMouseDown={() => setOpen(false)}
|
|
>
|
|
<div
|
|
className="flex max-h-[80vh] w-[min(94vw,860px)] flex-col overflow-hidden rounded-2xl border border-border bg-background/95 shadow-2xl"
|
|
onMouseDown={(ev) => ev.stopPropagation()}
|
|
>
|
|
<div className="flex shrink-0 items-center gap-2 border-b border-border px-5 py-3">
|
|
<Keyboard className="h-4 w-4 text-muted-foreground" />
|
|
<h2 className="text-sm font-semibold">{t('shortcutsModal.title')}</h2>
|
|
<span className="ms-auto text-xs text-muted-foreground">{t('shortcutsModal.hint')}</span>
|
|
</div>
|
|
|
|
{/* Only this scrolls — the header stays, for the same reason the theme dropdown's does. */}
|
|
<div className="grid min-h-0 flex-1 gap-5 overflow-y-auto p-5 sm:grid-cols-2">
|
|
{SHORTCUT_SECTIONS.map((section) => (
|
|
<section key={section.title} className="rounded-xl border border-border bg-muted/20 p-4">
|
|
<h3 className="text-xs font-semibold uppercase tracking-wide text-foreground/80">{section.title}</h3>
|
|
{section.note && <p className="mt-1 text-[11px] leading-snug text-muted-foreground">{section.note}</p>}
|
|
<div className="mt-2">
|
|
{section.shortcuts.map((shortcut) => (
|
|
<Row key={shortcut.keys} keys={shortcut.keys} description={shortcut.description} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|