jcoffey-dev
645b8b510f
Replace the FastAPI/HTMX prototype with a Node/Hono session proxy and a React 19/Vite SPA. Mail (conversation view, search operators, labels, sanitised HTML, privacy image proxy, invites, undo send, templates), calendar (month/week/day/agenda, invites, free/busy, categories, context menus), contacts (JSContact, groups, vCard), files, Sieve filter builder (incl. filter-from-message with retroactive apply), vacation, identities with default + Reply-To, PWA/mobile layout, push via SSE, in-memory mock Stalwart for dev, Docker + CI.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { useMemo } from "react";
|
|
import { keyboard } from "@/lib/keyboard";
|
|
import { Kbd } from "@/ui/misc";
|
|
|
|
export function ShortcutsSettings() {
|
|
const list = useMemo(() => keyboard.list(), []);
|
|
const groups = useMemo(() => {
|
|
const g = new Map<string, typeof list>();
|
|
for (const b of list) {
|
|
const arr = g.get(b.group) ?? [];
|
|
arr.push(b);
|
|
g.set(b.group, arr);
|
|
}
|
|
return [...g.entries()];
|
|
}, [list]);
|
|
return (
|
|
<div>
|
|
<h1>Keyboard shortcuts</h1>
|
|
<p className="lead">Gmail-style shortcuts are always on. Press <kbd className="kbd">?</kbd> anywhere to see this list.</p>
|
|
<div className="shortcut-grid">
|
|
{groups.map(([group, items]) => (
|
|
<div key={group}>
|
|
<h3>{group}</h3>
|
|
{items.map((b) => (
|
|
<div key={b.keys} className="shortcut-row"><span>{b.description}</span><Kbd keys={b.keys} /></div>
|
|
))}
|
|
</div>
|
|
))}
|
|
{!groups.length && <p className="hint">Open the Mail view to see all shortcuts.</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|