Skip to content

ref(cmdk) improve nesting structure#113152

Open
JonasBa wants to merge 10 commits intomasterfrom
jb/cmdk/nesting-improvement
Open

ref(cmdk) improve nesting structure#113152
JonasBa wants to merge 10 commits intomasterfrom
jb/cmdk/nesting-improvement

Conversation

@JonasBa
Copy link
Copy Markdown
Member

@JonasBa JonasBa commented Apr 16, 2026

Updates the grouping traversal so that it groups all actions under its top level nodes (previously each child group would end up as a top level match) and flattens the list of links to those nodes (mimics what we had initially).

I initially removed similar behavior because the CMDK interaction model wasn't clear to me, but I've now brought it back with what I believe is a good set of improvements. With this change, the top level groups persist, and the flattened list of actions is a small detail that helps educate the user on where the sub-sections live. I've modified the UI to use the muted color for the parent sections so that the visual anchoring and the area where the user's focus will be on is the sub section titles. I believe this achieves the best of both world, but I'm open to feedback.

CleanShot 2026-04-16 at 11 17 28@2x CleanShot 2026-04-16 at 11 17 18@2x

JonasBa and others added 3 commits April 16, 2026 10:22
When searching from the root view, items nested inside a group now surface
under the root ancestor as section header, with the intermediate group
name prepended as a muted prefix (e.g. "Explore → Profiles" under
"Go to..."). The prefix is rendered in muted text with an IconArrow
separator rather than a plain ASCII arrow.

The prefix path is computed inline during flattenActions via an ancestor
walk and stored in a Map<itemKey, string[]> returned alongside the flat
list, so no new fields are added to CMDKFlatItem. makeMenuItemFromAction
looks up the map at render time and injects the prefix.

Also fixes two duplicate-section-header bugs that could occur when a
nested group sorted ahead of its root ancestor: the matched-children
filter now excludes already-seen children, and the non-nested section
path now checks usedSectionHeaders before emitting a header.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove the intermediate 'Search Results' node under Help and move its
resource prop directly onto the Help CMDKAction. CMDKAction now supports
static JSX children alongside a resource prop — resource results are
auto-rendered as depth-1 children of their parent, so they register in
the collection without triggering the nested-prefix injection.

Previously help search hits appeared under a 'Search Results' sub-group,
which caused them to show a 'Search Results →' prefix in global search.
Now they surface flat under 'Help' alongside the static links.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
Section headers keep size="sm" as before. Action item labels and
prefix segments now use the default text size.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 16, 2026
The flat sort across all collected nodes could interleave results from
different root sections. For example, searching 'profiles' caused the Help
section (with a high-scoring async result) to sort between Explore and
Project Settings, both of which belong to Go to.... Project Settings items
then appeared after the Help section with no visible section header,
making them look disconnected.

Fix: sort with the root section's best descendant score as the primary key
so all nodes from the same top-level section cluster together. Root-level
leaf nodes retain their previous undefined-score treatment (DFS order)
to preserve existing ranking behaviour for standalone actions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
See all items in nested search results now receive the same prefix label
as their sibling actions (e.g. 'Explore → See all' instead of bare 'See all').

The :see-more key is added to prefixMap with the intermediatePath alongside
the existing :source-label hint, which is unaffected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
JonasBa and others added 3 commits April 16, 2026 11:05
Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
Drop the icon from makeSeeMoreAction directly instead of overriding
leadingItems in makeMenuItemFromAction.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
project.name is not unique within an organization, causing duplicate
labels. project.slug is guaranteed unique and matches what is already
used in the navigation URL.

Co-Authored-By: Claude Sonnet 4.6 <noreply@example.com>
key={project.id}
display={{
label: project.name,
label: project.slug,
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is org-unique, so its a better value to display

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@JonasBa JonasBa marked this pull request as ready for review April 16, 2026 09:21
@JonasBa JonasBa requested a review from a team as a code owner April 16, 2026 09:21
Comment thread static/app/components/commandPalette/ui/cmdk.tsx
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants