Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 3x 6x 36x 126x 132x | import type { JSX } from "react";
import styles from "./SettingsPanel.module.scss";
import shortcutStyles from "./KeyboardShortcutsPanel.module.scss";
/** A single keyboard shortcut definition. */
interface Shortcut {
/** Key combination displayed as kbd badges (e.g. ["?"], ["Ctrl", "/"]). */
keys: string[];
/** Human-readable description of the action. */
description: string;
}
/** A named group of related shortcuts. */
interface ShortcutGroup {
/** Section heading. */
title: string;
/** Shortcuts in this group. */
shortcuts: Shortcut[];
}
/** Static shortcut data — all shortcuts documented in the app. */
const SHORTCUT_GROUPS: ShortcutGroup[] = [
{
title: "Global",
shortcuts: [
{ keys: ["?"], description: "Open keyboard shortcuts reference" },
{ keys: ["N"], description: "Create a new task" },
{ keys: ["Escape"], description: "Close dialog or cancel editing" },
],
},
{
title: "Task Page",
shortcuts: [
{ keys: ["1"], description: "Switch to Overview tab" },
{ keys: ["2"], description: "Switch to Stream tab" },
],
},
{
title: "Workspace Page",
shortcuts: [
{ keys: ["1"], description: "Switch to Graph view" },
{ keys: ["2"], description: "Switch to Board view" },
{ keys: ["3"], description: "Switch to Tasks view" },
],
},
{
title: "Navigation Lists",
shortcuts: [
{ keys: ["\u2190"], description: "Previous tab (horizontal nav)" },
{ keys: ["\u2192"], description: "Next tab (horizontal nav)" },
{ keys: ["\u2191"], description: "Previous item (vertical nav)" },
{ keys: ["\u2193"], description: "Next item (vertical nav)" },
{ keys: ["J"], description: "Next item (alias for arrow down/right)" },
{ keys: ["K"], description: "Previous item (alias for arrow up/left)" },
{ keys: ["Home"], description: "Jump to first item" },
{ keys: ["End"], description: "Jump to last item" },
],
},
{
title: "Editing",
shortcuts: [
{ keys: ["Enter"], description: "Activate / save inline edit" },
{ keys: ["Space"], description: "Activate button or start editing" },
{ keys: ["Escape"], description: "Cancel edit and discard changes" },
],
},
{
title: "Root",
shortcuts: [
{ keys: ["Ctrl/Cmd", "Enter"], description: "Send message (when the composer is focused)" },
{ keys: ["Enter"], description: "Insert a new line in the message composer" },
],
},
];
/** Settings panel listing all keyboard shortcuts grouped by category. */
export function KeyboardShortcutsPanel(): JSX.Element {
return (
<section className={styles.section} data-testid="keyboard-shortcuts-panel">
<h3 className={styles.sectionTitle}>Keyboard Shortcuts</h3>
<p className={styles.sectionDescription}>
Keyboard shortcuts for navigating and interacting with Grackle. Global shortcuts are
suppressed while typing in text fields.
</p>
{SHORTCUT_GROUPS.map((group) => (
<div key={group.title} className={shortcutStyles.group}>
<h4 className={shortcutStyles.groupTitle}>{group.title}</h4>
<div className={shortcutStyles.shortcutList}>
{group.shortcuts.map((shortcut) => (
<div key={shortcut.description} className={shortcutStyles.shortcutRow}>
<span className={shortcutStyles.keys}>
{shortcut.keys.map((k) => (
<kbd key={k} className={shortcutStyles.kbd}>
{k}
</kbd>
))}
</span>
<span className={shortcutStyles.description}>{shortcut.description}</span>
</div>
))}
</div>
</div>
))}
</section>
);
}
|