feat(cmdk): Add new command palette component #101551
Conversation
github-actions
bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![seer-by-sentry[bot]](https://avatars.githubusercontent.com/in/801464?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #101551 +/- ##
========================================
Coverage 80.97% 80.97%
========================================
Files 8706 8706
Lines 386878 386876 -2
Branches 24519 24519
========================================
- Hits 313281 313280 -1
+ Misses 73246 73245 -1
Partials 351 351 |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| z-index: 2; | ||
| `; | ||
|
|
||
| const SearchInputContainer = styled('div')` |
There was a problem hiding this comment.
Nit: Could this just be our <Flex> component? <Flex position="relative" align="center" padding="0" width="100%">
| ); | ||
| } | ||
|
|
||
| const IconWrap = styled('div')` |
There was a problem hiding this comment.
Similar nit to earlier: <Flex> likely should work here
There was a problem hiding this comment.
I've added this at /static/images/missing.png - I can remove ours and replace usage of this SVG if that's the best practice
There was a problem hiding this comment.
Similar comment, think this is a general 404 / missing illustration and probably doesn't need to be a specific command-palette-* image.
Also would love this to be run through svgomg to optimize!
| const GlobalActionSection = { | ||
| HELP: t('Help'), | ||
| ADD: t('Add'), | ||
| NAVIGATE: t('Go to…'), |
There was a problem hiding this comment.
Similar comment, think this is a general 404 / missing illustration and probably doesn't need to be a specific command-palette-* image.
Also would love this to be run through svgomg to optimize!
|
|
||
| useCommandPaletteActions([ | ||
| ...navigateActions, | ||
| // Add (create new entitty) |
There was a problem hiding this comment.
typo but this comment doesn't really add anything
| // Add (create new entitty) |
| OTHER: t('Actions'), | ||
| }; | ||
|
|
||
| function useNavigationActions() { |
There was a problem hiding this comment.
Any chance these can be pulled from the nav context? I imagine these could get out of sync pretty quickly.
| ]; | ||
| } | ||
|
|
||
| function useNavigationToggleCollapsed() { |
There was a problem hiding this comment.
This hook should maybe live next to useNavContext?
3 participants
Let's improve the command palette! This is a pared down and cleaned up version of the hackweek project. Sorry for the large diff - I tried to get it as small as I could without making too much work for mystelf.
Summary of changes:
cmd-k-superchargedis disabled/components/commandPalette/*This is how the action registration works:
CommandPaletteProviderwhich keeps track of all registered actionsuseCommandPaletteActions()to register actions. These will be unregistered when the component unmounts.childrenactions which are displayed when you select a parent action (such as "change color theme")You can test this on the
sentry-testorsentry-sdksorgs, where the flag is already enabled.CleanShot.2025-10-15.at.12.18.15.mp4