Skip to content

feat(command-menu): show keyboard shortcuts in command menu#3005

Merged
charlesvien merged 14 commits into
mainfrom
posthog-code/command-menu-shortcuts
Jul 2, 2026
Merged

feat(command-menu): show keyboard shortcuts in command menu#3005
charlesvien merged 14 commits into
mainfrom
posthog-code/command-menu-shortcuts

Conversation

@MattPua

@MattPua MattPua commented Jun 29, 2026

Copy link
Copy Markdown
Member

Summary

  • Adds right-aligned keyboard shortcut hints to command menu items
  • Adds Go back / Go forward navigation actions
  • Reorders sections: Actions before Navigation

Danger level: 1/5


Created with PostHog Code

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit e327ae6.

@greptile-apps

greptile-apps Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "feat(command-menu): show keyboard shortc..." | Re-trigger Greptile

Comment thread packages/ui/src/features/command/CommandMenu.tsx Outdated
@MattPua MattPua changed the title Show keyboard shortcuts in command menu feat: Show keyboard shortcuts in command menu Jun 29, 2026
@MattPua MattPua marked this pull request as ready for review June 29, 2026 21:01
@greptile-apps

greptile-apps Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Reviews (2): Last reviewed commit: "fix(command-menu): right-align shortcuts..." | Re-trigger Greptile

@charlesvien charlesvien left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is quite nice, can you add a tad bit spacing between each key tho similarly to how we have it in the "CMD+," shortcut menu?

MattPua added 7 commits June 30, 2026 10:56
Generated-By: PostHog Code
Task-Id: 98391aef-093c-485d-a01e-ce8dc7f407e9
Generated-By: PostHog Code
Task-Id: 98391aef-093c-485d-a01e-ce8dc7f407e9
Generated-By: PostHog Code
Task-Id: 98391aef-093c-485d-a01e-ce8dc7f407e9
Generated-By: PostHog Code
Task-Id: fcb4960f-501b-4784-aab9-c264bebe1755
Re-applies Greptile's P2 suggestion (positional, static list) on top of the
clipping fix, which had reverted it to the formatted-string key.

Generated-By: PostHog Code
Task-Id: 98391aef-093c-485d-a01e-ce8dc7f407e9
Biome's required `noArrayIndexKey` check rejects `key={i}`, which conflicts
with the earlier Greptile suggestion. The formatted part is a safe key here:
a shortcut never yields duplicate formatted parts (no repeated modifiers).

Generated-By: PostHog Code
Task-Id: 98391aef-093c-485d-a01e-ce8dc7f407e9
Match the keyboard shortcuts sheet, which renders key parts with a gap-1
(4px) between them, by giving the command menu's KbdGroup an explicit
gap-1 so the keys aren't cramped together.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
@MattPua MattPua force-pushed the posthog-code/command-menu-shortcuts branch from e90cd4f to de50fcd Compare June 30, 2026 14:56
MattPua added 3 commits June 30, 2026 11:05
The quill KbdGroup wrapper wasn't honoring the gap-1 utility, so the
shortcut keys still rendered flush against each other. Drop KbdGroup and
render the Kbd keycaps directly in a flex container with gap-1, matching
the spacing in the keyboard shortcuts sheet.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
Surface history navigation in the command menu's Navigation section with
"Go back" and "Go forward" entries, wired to the existing
goBackInHistory / goForwardInHistory router bridge and showing their
GO_BACK (mod+[) and GO_FORWARD (mod+]) shortcuts right-aligned. Adds the
two new action types to CommandMenuAction for analytics.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
Bump the flex gap between Kbd keycaps from gap-1 to gap-2 so the spacing
between keys (e.g. ⌘ and [) is clearly visible.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
@MattPua

MattPua commented Jun 30, 2026

Copy link
Copy Markdown
Member Author

@charlesvien
CleanShot 2026-06-30 at 11 17 46@2x

MattPua added 3 commits June 30, 2026 11:15
Biome's formatter wants the @phosphor-icons/react import on one line
since it fits within the print width. Fixes the failing quality check.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
Reorder the Navigation section to Home → Settings → Go back → Go forward
so the history actions sit beneath Settings.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
Swap the section order so Actions appears first, followed by Navigation.

Generated-By: PostHog Code
Task-Id: 85b2e7d0-e251-47ac-81bf-217751cd480a
@MattPua MattPua requested a review from charlesvien June 30, 2026 15:18
@MattPua MattPua changed the title feat: Show keyboard shortcuts in command menu feat(command-menu): add Developer section with reload window and show log folder Jun 30, 2026
@MattPua MattPua force-pushed the posthog-code/command-menu-shortcuts branch from f5691b8 to 844aef4 Compare June 30, 2026 15:57
@MattPua MattPua force-pushed the posthog-code/command-menu-shortcuts branch from 844aef4 to cf81f7e Compare June 30, 2026 16:00
@MattPua MattPua changed the title feat(command-menu): add Developer section with reload window and show log folder feat(command-menu): show keyboard shortcuts in command menu Jun 30, 2026
@MattPua MattPua requested a review from jonathanlab July 1, 2026 13:21
@charlesvien charlesvien merged commit 5852d23 into main Jul 2, 2026
23 checks passed
@charlesvien charlesvien deleted the posthog-code/command-menu-shortcuts branch July 2, 2026 00:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants