feat(ui): add ⌘+K command palette for quick nav and actions#2159
feat(ui): add ⌘+K command palette for quick nav and actions#2159
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
bed7157 to
9fb8bf3
Compare
|
I love it, super clean and useful! 🥳 |
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
3b1e01b to
e280565
Compare
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
e280565 to
10fbdc8
Compare
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
10fbdc8 to
15a4d07
Compare
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
15a4d07 to
f2b53bf
Compare
serhalp
changed the title
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
2 times, most recently
from
6777ee1 to
823c9cf
Compare
serhalp
force-pushed
the
serhalp/cmdk-palette
branch
from
823c9cf to
2667fda
Compare
There was a problem hiding this comment.
When interacting with settings, I don’t think the modal should close after applying one. Often, I might want to try out a few options before settling on one or it also could be disorienting if a setting is not what you wanted and you have to navigate back to where you were. I realize this might not seem conventional though (e.g. Raycast, GitHub close the modal after the command). Curious to hear what others think. Maybe for power users who’d use this feature, closing it would align with their expectations. It seems overwhelming conventional to close after applying the setting, so ignore me.
Similar to Alex’s comment, some feedback, especially for screen readers would be great after running a command. I think if the modal stayed open, that would be sufficient visually (so no real necessity for a toast), but for screen readers feedback in a live region would be helpful (I’m not sure if you tried to do this as I see commits that make me think it was implemented, but I’m not hearing anything which could be due to the modal closing or maybe the live region being inert—I haven’t looked into the code specifically).
Trying to collapse them was causing more problems than it solved.
D'oh, good catch, thanks! I broke this when I added the "Search for $query" fallback item. I should've made this a separate palette command entirely.
🤦🏼 wow I broke a lot of things at the last minute before putting this up for review, oof.
🙏🏼 yes let's iterate on this please.
Damn, another good catch.
Good catch! Fixed in 3e2e8a5. We should refactor that. |
🤔 https://github.com/user-attachments/assets/85c7527f-0030-404f-8d2d-6f4db5e18a00
fixed in 2c673632 |
|
@knowler I think I've got all the 32393942 palette commands triggering appropriate SR announcements now 🙏🏼 |
| name="accent-color" | ||
| class="sr-only" | ||
| :value="color.id" | ||
| :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')" |
There was a problem hiding this comment.
Looks like still broken for a bit
Should show sky on first visit
Have you pushed all the changes or is it some specific case on mine side only?
Let me know if you need more context about the [first point in previous comment](https://github.com//pull/2159#issuecomment-4148167952) - there are two scrolls and the second one scrolls to nowhere.
|
| async function doLoad(name: string) { | ||
| try { | ||
| const allVersions = await fetchAllPackageVersions(name) | ||
| if (requestToken !== loadToken || toValue(packageName) !== name) return |
There was a problem hiding this comment.
It seems better to abort the request instead of checking requestToken, but this can probably also be done in the next iteration
I'm not sure about need for requestToken. Probably if commandPalette now again with the same package as before (package-a -> package-b -> package-a) - we can continue with versions from the first request.
Also just noticed that above (if (pendingLoad) return pendingLoad) - if user changed the package and they have an active request from the previous one - you will never call doLoad for the current package
There was a problem hiding this comment.
Oh, I see that you clean data on package change. I have a feeling that this logic might not work the way you intended, can you double check please?
Like if I called ensure loaded on package A, then went to package B, the logic will continue with previous ensure loaded or even if I will rerun it will stop on if (pendingLoad) return pendingLoad - then [after ensureloaded()] I will receive empty versions because they were cleaned on package change and never updated (hope I compiled everything correctly in my head)
5 participants
🔗 Linked issue
closes #81
supersedes stale #470
🧭 Context
npmx already exposes a ton of useful capabilities (with way more to come), but they require quite a bit of precise clicking around. We always imagined npmx as a power tool for power users. The command palette is a familiar solution to provide discoverable, fast, efficient, repeatable access to an app's capabilities.
📚 Description
This PR adds a command palette with access to every page, every action, and every capability of npmx.
It can be opened from anywhere in the app by pressing ⌘+K on macOS / Ctrl+K on Windows/Linux, or by clicking the new "quick actions" nav item in the header.
The palette includes a set of "global" commands and a composable allowing a page or component to register specific commands that should be made available when that page/component is visible.
The palette supports multi-step flows, such as "change language" → languages are listed.
I should've maybe kept this PR small and added more commands later, but... oops, I believe I covered every single page and capability:
All commands
Global commands (always available)
Package context
All pages with a package context also include:
Package page
Package code page
Package diff page
Compare page
Profile page
There are two behaviours worth calling out separately:
Search for "<query>". Selecting this submits a search for the user's query.The palette has full keyboard navigation support and screen reader support.
Screenshots
New header nav item (desktop)
Global commands (desktop)
Global commands — logged in via atproto (desktop)
Global commands (mobile, light)
Languages (desktop)
Accent colors (desktop)
Background shades (desktop, light)
New header nav item (desktop, non-homepage)
Package page commands (desktop)
Package page - input is valid semver (desktop)
Package code page (desktop)
Package diff page (desktop)
Compare page (desktop)
Profile page (desktop)
"Search for" fallback command (desktop)
Future work
rand hitting Enter to open the package's repo right away). We should probably do this eventually.