Merge pull request 'fix(a11y): the keyboard shortcuts dialog lists every shortcut (#334)' (#401) from fix/shortcuts-dialog into lotus

src/app/features/shortcuts/KeyboardShortcutsDialog.tsx

@@ -25,6 +25,9 @@ import { settingsAtom } from '../../state/settings';
 import { isMacOS } from '../../utils/user-agent';
 import { KeySymbol } from '../../utils/key-symbol';
 import * as css from './KeyboardShortcutsDialog.css';
+import { BLOCK_HOTKEYS, INLINE_HOTKEYS } from '../../components/editor/keyboard';
+import { MarkType } from '../../components/editor/types';
+import { BLOCK_LABELS, MARK_LABELS, hotkeyKeys, keyCodeLabel } from './shortcutLabels';
 
 /** Global open-state for the keyboard shortcuts help dialog. */
 export const keyboardShortcutsDialogAtom = atom<boolean>(false);
@@ -98,6 +101,9 @@ export function KeyboardShortcutsDialog() {
   const { open, closeDialog } = useKeyboardShortcutsDialog();
   const modalStyle = useModalStyle(480);
   const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
+  const [pttMode] = useSetting(settingsAtom, 'pttMode');
+  const [pttKey] = useSetting(settingsAtom, 'pttKey');
+  const [deafenKey] = useSetting(settingsAtom, 'deafenKey');
 
   const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
 
@@ -109,6 +115,8 @@ export function KeyboardShortcutsDialog() {
       rows: [
         { description: 'Show keyboard shortcuts', keys: ['?'] },
         { description: 'Close open panel, otherwise mark room as read', keys: [KeySymbol.Escape] },
+        // [Gitea #334] the quick switcher / search was missing
+        { description: 'Quick switcher: jump to a room or person', keys: [modKey, 'K'] },
       ],
     },
     {
@@ -124,6 +132,26 @@ export function KeyboardShortcutsDialog() {
           keys: enterForNewline ? ['Enter'] : [KeySymbol.Shift, 'Enter'],
         },
         { description: 'Send message (always)', keys: [modKey, 'Enter'] },
+        { description: 'Edit your last message (empty composer)', keys: ['↑'] },
+      ],
+    },
+    {
+      // [Gitea #334] generated from the editor's own bindings so they can't drift
+      title: 'Composer formatting',
+      rows: [
+        ...Object.entries(INLINE_HOTKEYS).map(([hotkey, mark]) => ({
+          description:
+            mark === MarkType.StrikeThrough
+              ? `${MARK_LABELS[mark]} (not the browser's Save)`
+              : MARK_LABELS[mark],
+          keys: hotkeyKeys(hotkey, modKey),
+        })),
+        { description: 'Heading 1 / 2 / 3', keys: [modKey, '1 / 2 / 3'] },
+        ...Object.entries(BLOCK_HOTKEYS).map(([hotkey, block]) => ({
+          description: BLOCK_LABELS[block] ?? block,
+          keys: hotkeyKeys(hotkey, modKey),
+        })),
+        { description: 'Clear formatting', keys: [modKey, 'E'] },
       ],
     },
     {
@@ -132,6 +160,19 @@ export function KeyboardShortcutsDialog() {
         { description: 'Reveal message actions (react, reply, more)', keys: ['Hover / focus'] },
       ],
     },
+    {
+      // [Gitea #334] the user's own bindings (Settings → Calls)
+      title: 'Calls',
+      rows: [
+        {
+          description: pttMode
+            ? 'Push to talk (hold)'
+            : 'Push to talk (hold; turn on in Settings → Calls)',
+          keys: [keyCodeLabel(pttKey)],
+        },
+        { description: 'Deafen / undeafen', keys: [keyCodeLabel(deafenKey)] },
+      ],
+    },
   ];
 
   return (

src/app/features/shortcuts/shortcutLabels.test.ts

@@ -0,0 +1,16 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { hotkeyKeys, keyCodeLabel } from './shortcutLabels';
+
+test('hotkeyKeys (#334)', () => {
+  assert.deepEqual(hotkeyKeys('mod+b', 'Ctrl'), ['Ctrl', 'B']);
+  assert.deepEqual(hotkeyKeys("mod+'", '⌘'), ['⌘', "'"]);
+  assert.deepEqual(hotkeyKeys('mod+[', 'Ctrl'), ['Ctrl', '[']);
+});
+
+test('keyCodeLabel (#334)', () => {
+  assert.equal(keyCodeLabel('KeyM'), 'M');
+  assert.equal(keyCodeLabel('Digit1'), '1');
+  assert.equal(keyCodeLabel('Space'), 'Space');
+  assert.equal(keyCodeLabel(''), 'Not set');
+});

src/app/features/shortcuts/shortcutLabels.ts

@@ -0,0 +1,29 @@
+import { BlockType, MarkType } from '../../components/editor/types';
+
+/** Pure: an is-hotkey string ('mod+b', "mod+'") as keycap labels. */
+export const hotkeyKeys = (hotkey: string, modKey: string): string[] =>
+  hotkey.split('+').map((k) => (k === 'mod' ? modKey : k.length === 1 ? k.toUpperCase() : k));
+
+/** Pure: a KeyboardEvent.code ('KeyM', 'Digit1', 'Space') as a keycap label. */
+export const keyCodeLabel = (code: string | undefined): string => {
+  if (!code) return 'Not set';
+  if (/^Key[A-Z]$/.test(code)) return code.slice(3);
+  if (/^Digit\d$/.test(code)) return code.slice(5);
+  return code;
+};
+
+export const MARK_LABELS: Record<MarkType, string> = {
+  [MarkType.Bold]: 'Bold',
+  [MarkType.Italic]: 'Italic',
+  [MarkType.Underline]: 'Underline',
+  [MarkType.StrikeThrough]: 'Strikethrough',
+  [MarkType.Code]: 'Inline code',
+  [MarkType.Spoiler]: 'Spoiler',
+};
+
+export const BLOCK_LABELS: Partial<Record<BlockType, string>> = {
+  [BlockType.OrderedList]: 'Numbered list',
+  [BlockType.UnorderedList]: 'Bulleted list',
+  [BlockType.BlockQuote]: 'Quote',
+  [BlockType.CodeBlock]: 'Code block',
+};