Eng 1552 enable ability to change discourse graph specific keyboard

[sid597]

https://www.loom.com/share/79ae34d2e5ec4bb0acc461756cd2d4bf

---

Summary by CodeRabbit

Release Notes

• New Features
  • Added customizable keyboard shortcuts for canvas nodes directly in Personal Settings, allowing personalization of node tool key bindings
  • New "Canvas" tab in the settings panel provides an easy way to configure your preferred keyboard shortcuts
  • Your shortcut customizations take effect the next time you open a canvas

[linear-code]

ENG-1552 Enable Ability to change discourse graph specific keyboard shortcuts in the canvas per user

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces customizable keyboard shortcuts for canvas nodes. A new personal settings field stores node-specific shortcut overrides, a settings UI component allows configuration, the schema validates the setting structure, and the canvas UI layer reads and applies these overrides when rendering node tools.

Changes

Cohort / File(s)	Summary
Settings Schema apps/roam/src/components/settings/utils/zodSchema.ts, apps/roam/src/components/settings/utils/zodSchema.example.ts	Added "Canvas node shortcuts" field to personal settings schema as a string-to-string record with empty object default; example populated with sample node shortcut mappings.
Settings UI apps/roam/src/components/settings/CanvasShortcutSettings.tsx, apps/roam/src/components/settings/Settings.tsx	Created new CanvasShortcutSettings component rendering editable shortcut panels per discourse node type; integrated as new "Canvas" tab in personal settings dialog between "Queries" and "Left sidebar" tabs.
Canvas Implementation apps/roam/src/components/canvas/uiOverrides.tsx	Modified node tool creation to override kbd values with custom shortcuts from personal settings, falling back to default node shortcuts when custom overrides unavailable.

Sequence Diagram

sequenceDiagram
    actor User
    participant Settings as CanvasShortcutSettings UI
    participant PersonalSettings as Personal Settings Store
    participant Canvas as Canvas Component
    participant UIOverrides as uiOverrides Logic

    User->>Settings: Opens Canvas shortcuts tab
    Settings->>PersonalSettings: Reads current shortcuts via getPersonalSetting()
    PersonalSettings-->>Settings: Returns shortcuts map
    Settings->>User: Displays shortcut fields for each node type
    User->>Settings: Customizes shortcut for a node
    Settings->>PersonalSettings: Saves updated shortcut mapping
    PersonalSettings-->>Settings: Confirms save

    Note over Canvas,UIOverrides: Next Canvas Load
    Canvas->>UIOverrides: createUiOverrides() initializes
    UIOverrides->>PersonalSettings: Reads Canvas node shortcuts setting
    PersonalSettings-->>UIOverrides: Returns shortcut overrides map
    UIOverrides->>UIOverrides: For each node tool, override kbd with custom shortcut or default
    UIOverrides-->>Canvas: Returns configured tools with applied shortcuts
    Canvas->>User: Renders canvas with custom node shortcuts active

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ENG-1105: zod schema for all the settings #664: Directly modifies the same personal settings schema and example files to add the "Canvas node shortcuts" field.
• ENG-775 - Add keyboard shortcut for base discourse tool #378: Modifies uiOverrides.tsx to wire shortcut bindings for canvas tools, establishing the same pattern for shortcut override application.
• add "secret" dev panel #33: Adds another settings tab to the personal settings dialog, extending the same Settings component infrastructure.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The PR title is incomplete and ends abruptly mid-phrase ('keyboard' appears to be cut off). While it relates to the changeset's intent of customizing keyboard shortcuts, the truncation makes it difficult to parse.	Complete the title to a full, grammatically correct sentence describing the feature, such as 'Enable ability to change discourse graph specific keyboard shortcuts' or similar.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/roam/src/components/settings/CanvasShortcutSettings.tsx (1)

8-8: Consider using UPPERCASE for the constant name.

Per coding guidelines, constants should use UPPERCASE naming convention.

💡 Suggested change

-const CANVAS_NODE_SHORTCUTS_KEY = "Canvas node shortcuts";
+const CANVAS_NODE_SHORTCUTS_KEY = "Canvas node shortcuts"; // Already uppercase, but could be more explicit

The constant name CANVAS_NODE_SHORTCUTS_KEY already uses uppercase, so this is compliant. No change needed.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/roam/src/components/settings/CanvasShortcutSettings.tsx` at line 8, The
reviewer suggested using UPPERCASE for the constant name, but the constant
CANVAS_NODE_SHORTCUTS_KEY in CanvasShortcutSettings.tsx is already UPPERCASE; no
code change is needed—leave CANVAS_NODE_SHORTCUTS_KEY as-is.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/roam/src/components/settings/CanvasShortcutSettings.tsx`:
- Line 8: The reviewer suggested using UPPERCASE for the constant name, but the
constant CANVAS_NODE_SHORTCUTS_KEY in CanvasShortcutSettings.tsx is already
UPPERCASE; no code change is needed—leave CANVAS_NODE_SHORTCUTS_KEY as-is.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: eb5a2020-f01b-486a-97e1-b7bfee584cb1

📥 Commits

Reviewing files that changed from the base of the PR and between 7128ea4 and c44d92b.

📒 Files selected for processing (5)

• apps/roam/src/components/canvas/uiOverrides.tsx
• apps/roam/src/components/settings/CanvasShortcutSettings.tsx
• apps/roam/src/components/settings/Settings.tsx
• apps/roam/src/components/settings/utils/zodSchema.example.ts
• apps/roam/src/components/settings/utils/zodSchema.ts