Editor has Settings modal access (via EditorToolbar) but no help button — user has to navigate to /help from the navbar to find the (also-missing) shortcut documentation #181

New issue

Closed

opened 2026-10-03 18:56:50 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 18:56:50 +00:00

Owner

Finding

src/components/editor/EditorToolbar.tsx renders a Settings button that opens the SettingsModal. The Editor's other affordances (Undo, Redo, Export, Save) are in the header (EditorHeader.tsx). The Editor's keyboard shortcuts (12+ bindings per useKeyboardShortcuts.ts) are not surfaced anywhere in the Editor.

The user is in the Editor — a power-user surface — and has no way to discover the shortcuts without:

Knowing to look in the Help page
Navigating to /help (the only way to see the shortcut documentation, which is also missing per #178)
Or reading the source code

The Workspace has both a Settings button and a Help button (per AppHeader.tsx:218-225). The Editor is missing the Help button.

Where

Editor settings: src/components/editor/EditorToolbar.tsx:88-92 (SettingsModal opened)
No Editor help: grep -n 'Help\b' src/components/editor/EditorHeader.tsx returns 0 matches
Workspace help exists: src/components/workspace/AppHeader.tsx (HelpCircle button)

Suggested fix shape

Add a Help button to the Editor's header (next to Undo/Redo) that opens a popover with the shortcut list. Or, link to /help with a target="_blank" so the user can keep the Editor open in one tab and reference the help in another.

The popover approach is more elegant. Render:

<button onClick={() => setShowHelpPopover(true)} title="Keyboard shortcuts (?)">
  <HelpCircle size={14} />
</button>
<HelpPopover open={showHelpPopover} onClose={...}>
  <table>
    <tr><td>n</td><td>Select tool</td></tr>
    <tr><td>a</td><td>Add node</td></tr>
    ... 12 more rows
  </table>
</HelpPopover>

The popover also gets triggered by ? (Shift+/) so the user can find it without knowing the button.

Severity

Low. The user can navigate to /help or read the source. Power users will notice; new users won't.

Discovered by

Gap analysis (2026-10-02) of editor affordances.

#178 (open) — Help page documents zero editor shortcuts. The Help button + popover is the in-context mirror of the same content.
#156 (open) — Workspace has no keyboard shortcut hook. The ? for "show help" is a workspace-level shortcut that would need the same hook.

## Finding `src/components/editor/EditorToolbar.tsx` renders a Settings button that opens the `SettingsModal`. The Editor's other affordances (Undo, Redo, Export, Save) are in the header (`EditorHeader.tsx`). The Editor's keyboard shortcuts (12+ bindings per `useKeyboardShortcuts.ts`) are not surfaced anywhere in the Editor. The user is in the Editor — a power-user surface — and has no way to discover the shortcuts without: 1. Knowing to look in the Help page 2. Navigating to `/help` (the only way to see the shortcut documentation, which is also missing per #178) 3. Or reading the source code The Workspace has both a Settings button and a Help button (per `AppHeader.tsx:218-225`). The Editor is missing the Help button. ## Where - Editor settings: `src/components/editor/EditorToolbar.tsx:88-92` (SettingsModal opened) - No Editor help: `grep -n 'Help\b' src/components/editor/EditorHeader.tsx` returns 0 matches - Workspace help exists: `src/components/workspace/AppHeader.tsx` (HelpCircle button) ## Suggested fix shape Add a Help button to the Editor's header (next to Undo/Redo) that opens a popover with the shortcut list. Or, link to `/help` with a `target="_blank"` so the user can keep the Editor open in one tab and reference the help in another. The popover approach is more elegant. Render: ```tsx <button onClick={() => setShowHelpPopover(true)} title="Keyboard shortcuts (?)"> <HelpCircle size={14} /> </button> <HelpPopover open={showHelpPopover} onClose={...}> <table> <tr><td>n</td><td>Select tool</td></tr> <tr><td>a</td><td>Add node</td></tr> ... 12 more rows </table> </HelpPopover> ``` The popover also gets triggered by `?` (Shift+/) so the user can find it without knowing the button. ## Severity Low. The user can navigate to /help or read the source. Power users will notice; new users won't. ## Discovered by Gap analysis (2026-10-02) of editor affordances. ## Related - #178 (open) — Help page documents zero editor shortcuts. The Help button + popover is the in-context mirror of the same content. - #156 (open) — Workspace has no keyboard shortcut hook. The `?` for "show help" is a workspace-level shortcut that would need the same hook.

Mark added the

feature-request

triage-approved

labels

2026-10-03 18:56:50 +00:00

Mark referenced this issue from a commit

2026-10-03 20:13:23 +00:00

fix(#181): Editor Help button + in-context keyboard shortcut popover

Mark commented

2026-10-03 20:13:33 +00:00

Author

Owner

Closed via commit 12c7274 on main.

What changed

src/components/editor/EditorHeader.tsx — HelpCircle button next to Undo/Redo, opens an in-context popover listing all 16 editor keyboard shortcuts (mirrors the bindings in useKeyboardShortcuts.ts and the list on /help).
src/components/editor/EditorHeader.test.tsx — 9 new tests covering: button presence, click-to-open, all shortcut rows render, button toggles closed, ? key toggles open/closed, ? inside an input is ignored, Escape closes, X button closes.

How to use

Click the HelpCircle button in the Editor header (top-right, next to Undo/Redo).
Or press ? (Shift+/) anywhere in the Editor to toggle the popover.
Escape, click outside, or the X button dismiss it.

The popover is anchored under the header so the user can keep their cursor on the canvas while reading the list. Power users no longer need to navigate to /help to discover shortcuts — they show up exactly where the bindings are made.

Closed via commit 12c7274 on `main`. **What changed** - `src/components/editor/EditorHeader.tsx` — HelpCircle button next to Undo/Redo, opens an in-context popover listing all 16 editor keyboard shortcuts (mirrors the bindings in `useKeyboardShortcuts.ts` and the list on `/help`). - `src/components/editor/EditorHeader.test.tsx` — 9 new tests covering: button presence, click-to-open, all shortcut rows render, button toggles closed, `?` key toggles open/closed, `?` inside an input is ignored, Escape closes, X button closes. **How to use** - Click the HelpCircle button in the Editor header (top-right, next to Undo/Redo). - Or press `?` (Shift+/) anywhere in the Editor to toggle the popover. - Escape, click outside, or the X button dismiss it. The popover is anchored under the header so the user can keep their cursor on the canvas while reading the list. Power users no longer need to navigate to `/help` to discover shortcuts — they show up exactly where the bindings are made.

Mark closed this issue

2026-10-03 20:13:35 +00:00

Mark referenced this issue from a commit

2026-10-04 05:29:05 +00:00

fix(#227): bridge editor's keyboard-shortcut popover to the full /help page

Mark referenced this issue

2026-10-04 05:29:09 +00:00

Editor has no help link — workspace and gallery have nav links to /help but the editor's header is a dead-end if the user wants to look up a feature #227