Files
ihasmail-inbuxa/web/src/views/settings/ShortcutsSettings.tsx
T
jcoffey-dev bd6a605d61 Group six more clusters out of web/src/lib
Takes the flat module count from 66 to 42, continuing what admin/ and
calendar/ started.

  lib/mailbox/  archiveDate, emptyFolder, folderMove, labelTree,
                mailboxName, mailboxRoute
  lib/sieve/    sieve, sieveApply, sieveFolders
  lib/input/    keyboard, swipe, touch, listSelection, dropUpload
  lib/notify/   notify, webpush, webpushEnable
  lib/sw/       swCache, swFacts, staleBuild
  lib/text/     html, markdown, text, emlName

FOUR THINGS THE FILENAMES GET WRONG, each checked by reading the file
rather than trusting what it is called:

  - appFolder is not a mailbox. It is the `ihasmail` folder in JMAP
    *Files*, where the client keeps signature images and synced settings.
    It stays flat.
  - format holds no formatting of text. It re-exports the date and clock
    formatters, so it belongs with dates/datetime, not with text/.
  - preview is the file viewer deciding what it can show without
    downloading, and source is where to point someone asking for this
    instance's AGPL source. Neither is about text.
  - notify is not Web Push. It is the tab title, the favicon badge and
    the new-mail sound -- in-app notification, which is why it sits with
    webpush rather than under sw/ with the service worker's own concerns.

threadScroll stays flat too: it decides where a conversation opens, which
is view state rather than a gesture, and input/ is honest only if
everything in it interprets something the reader did.

No behavior change. Almost every reference was on the @/ alias; eight
relative imports in files that did not move, or that moved away from a
sibling, needed rewriting by hand.
2026-09-15 23:17:50 -07:00

41 lines
1.6 KiB
TypeScript

import { useMemo } from "react";
import { keyboard } from "@/lib/input/keyboard";
import { Kbd } from "@/ui/misc";
import { t, tNode } from "@/lib/i18n";
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>{t("Keyboard shortcuts")}</h1>
<p className="lead">{tNode("Gmail-style shortcuts are always on. Press {key} anywhere to see this list.", { key: <kbd className="kbd">?</kbd> })}</p>
<div className="shortcut-grid">
{groups.map(([group, items]) => (
<div key={group}>
{/* Group names and descriptions are registered in English at the
call sites -- see views/Shortcuts.tsx -- because the binding
table is data, not markup, and the English is the catalog
key. Translating at render keeps the registration simple and
means a binding added anywhere is translatable without the
registrar knowing about i18n. */}
<h3>{t(group)}</h3>
{items.map((b) => (
<div key={b.keys} className="shortcut-row"><span>{t(b.description)}</span><Kbd keys={b.keys} /></div>
))}
</div>
))}
{!groups.length && <p className="hint">{t("Open the Mail view to see all shortcuts.")}</p>}
</div>
</div>
);
}