feat(nav): Collapse TopBar action triggers to icons on mobile - #121044
Draft
priscilawebdev wants to merge 9 commits into
Draft
feat(nav): Collapse TopBar action triggers to icons on mobile#121044priscilawebdev wants to merge 9 commits into
priscilawebdev wants to merge 9 commits into
Conversation
github-actions
Bot
added
the
Scope: Frontend
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 06:46
9611973 to
ee20a5e
Compare
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 07:05
ee20a5e to
b10a291
Compare
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 07:20
b10a291 to
edea3ea
Compare
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 07:29
edea3ea to
f4ac5ee
Compare
The Ask Seer, Command Palette, and Feedback triggers in the TopBar were all styled with equal visual weight, competing for attention. This reorders and restyles them into a clearer hierarchy: - Ask Seer now renders first (leading) in the action group, immediately after the page-specific actions slot. - The Command Palette (Search) trigger only reveals its label and mod+k hotkey when there's room — it stays icon-only below that. - Ask Seer likewise drops its mod+/ hotkey once collapsed, keeping the two triggers consistent. - The default Feedback button drops to the `transparent` variant at the same point, so once the triggers collapse to icons it recedes instead of competing with Ask Seer and Search. All three share one width check, `useHasExpandedTopBarActions`, which resolves against the nearest query container (the app content stack) rather than the viewport — so opening the Seer Explorer sidebar collapses them the same way narrowing the window does.
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 07:38
f4ac5ee to
eacc645
Compare
The TopBar action triggers had two states, and the three consumers disagreed about what the collapsed one meant: search went icon-only, ask seer kept its label and only dropped the hotkey, and feedback was always icon-only and merely flipped variant. Replace the boolean with a three-state size resolved on the container axis at `xl` (768px) and `4xl` (1152px): - collapsed: icon only, search moves into the mobile navigation row - medium: icon + label - full: icon + label + hotkey (matches today) Search relocates rather than shrinking twice, so at the narrowest size it takes What's New's slot instead of growing the row. Broadcasts stay reachable through a What's New entry in the overflow menu, which also carries the unread indicator while that entry is present. The mobile navigation row is a sibling of `#main`, not a descendant, so `useResponsivePropValue` there had no query container and always resolved to `zero` — it would have rendered a search trigger the TopBar was also still showing between 800px and 991px. Lift `ContainerQueryProvider` above both trees so they read one breakpoint, and derive both render sites from a single predicate.
priscilawebdev
changed the title
Once the Search and Ask Seer triggers collapse, their label and keyboard shortcut are no longer visible anywhere — the buttons become unlabeled icons and the shortcut is undiscoverable. Give each a tooltip carrying exactly what the current size hides: the label and hotkey when icon-only, and just the hotkey for Ask Seer at the medium size where the label is still inline. At the full size both are already visible, so no tooltip is attached. The tooltip embeds a real `Hotkey`, so the glyphs stay platform-correct (⌘K on macOS, CtrlK elsewhere) rather than hardcoding either form.
At the collapsed size the TopBar showed three separate icon buttons in a row. Pair search with an overflow menu in a button bar instead, and fold Give Feedback into that menu. Search and Ask Seer keep their own buttons: search is the primary action, and Ask Seer's icon carries live state — the thinking loader and the unread indicator — that a menu item can't convey. The menu reads the feedback slot's `hasConsumers`, so a page that registers its own feedback trigger keeps it inline and does not also get a Give Feedback entry. With nothing left to offer the menu renders nothing, rather than showing a trigger that opens empty.
priscilawebdev
force-pushed
the
worktree-synchronous-hatching-canyon
branch
from
August 3, 2026 09:32
bfb5ce0 to
d9c0c77
Compare
The tooltip also appeared at the medium size, where the label is already inline and only the hotkey is hidden — showing a lone shortcut glyph next to a button that names itself. Attach it only when the trigger collapses to a bare icon, and always carry the full label plus the hotkey rather than just the missing part.
The search and actions outlets always rendered a flex item, empty or not. An empty item still takes a `gap` on each side, so the action row carried three gaps where one was visible — most obvious on mobile, where search relocates to the navigation row and Ask Seer ends up sitting next to feedback with all that dead space between them. Hide them when they have no consumers, matching what the breadcrumbs outlet above already does. This also reverts the overflow menu from d9c0c77: with Ask Seer kept inline, feedback was its only entry, and in the mobile row search moves out of the button bar — leaving it holding nothing but the 3-dots trigger, so the feedback button read as having become one.
The three-state size resolved against `#main`'s container width, which needed `ContainerQueryProvider` lifted above both the navigation and the content just so the mobile row and the TopBar could agree on whether search had moved. That was a lot of machinery for two visual states. The mobile layout is already exactly the case where the row is too tight for labels, and it is also where the mobile navigation row exists to host the relocated search trigger. So key off `layout` from `usePrimaryNavigation`, which sits above both trees: - mobile: bare icons, search renders in the mobile navigation row - sidebar: labels and hotkeys, as before Search can no longer appear twice because the row that hosts it only mounts in the layout where the TopBar drops it — no shared predicate needed. Reverts the provider lift, drops the intermediate label-without- hotkey state, and restores the viewport axis this used before.
priscilawebdev
changed the title
Member
Author
|
bugbot run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 39aee1e. Configure here.
| </Body> | ||
| </Fragment> | ||
| )); | ||
| }, |
Contributor
There was a problem hiding this comment.
Stale What's New modal content
Medium Severity
The help-menu What's New action passes isPending, unseenPostIds, and uniqueBroadcasts into openModal from the click-time closure. ModalStore keeps that renderer, so if the modal opens while broadcasts are still loading, WhatsNewContent never receives the completed query result and can remain on the loading state.
Reviewed by Cursor Bugbot for commit 39aee1e. Configure here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Top-bar actions now share a clearer responsive hierarchy: Ask Seer leads, Feedback recedes when actions collapse, and icon-only actions include their labels and shortcuts in tooltips. Empty action slots no longer leave extra spacing.
On mobile, Search moves into the navigation row and What’s New remains available from the overflow menu. Search relocation is deliberately tied to the viewport-based mobile navigation, not the page-frame container width; opening the Seer sidebar can narrow the page, but should not make Search jump into the top navigation.