jcoffey-dev
b10149fd54
A native speaker reviewing the German catalogue reported strings appearing in English (#247). Three of the reported areas turned out not to be missing translations at all: the strings were there, and the code was rendering the English source instead of asking for one. The Sieve rule dialog rendered HEADER_CHOICES and HEADER_OPS labels directly. All sixteen are already in every catalogue -- "Subject" has been "Betreff" in de.ts all along, which is exactly the inconsistency the reporter noticed against the Out-of-office page, where it already reads Betreff. Wrapping the two dropdowns fixes nine languages at once and adds nothing to any catalogue. The keyboard shortcut panel rendered each binding's group and description directly. Those are registered in English at the call sites and should stay that way -- the binding table is data and the English is the catalogue key -- so the panel translates them at render instead. A binding added anywhere is then translatable without its registrar knowing i18n exists. The palette grid marks every name translate="no". That is right for ihasmail, Dracula, Gruvbox, Rosé Pine and Tokyo Night, which are names. "Classic" is an adjective describing the theme, not a name, so PaletteMeta gains a `translatable` flag for the one entry that is a word. Flagging the exception beats dropping the attribute from all six. No catalogue changes here: the strings the first two need are already present in all nine. "Classic" needs an entry, which lands with each language.
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { useMemo } from "react";
|
|
import { keyboard } from "@/lib/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 catalogue
|
|
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>
|
|
);
|
|
}
|