Home nav redesign: defaults capsule — one row at every panel width - #23
Merged
Conversation
kateebonner
force-pushed
the
kate/nav-defaults-capsule
branch
10 times, most recently
from
July 15, 2026 02:47
e3899c1 to
2bbce69
Compare
… width
The chrome strip put six unrelated things at one altitude (identity, app
settings, a chat default, a solve default, navigation, page editing) and
relied on accidental flex-wrap: at ~500px the wrapped solver row painted
UNDER the dashboard cards; at 360px solver/sessions/customize were
unreachable. Design walked part-by-part with Kate (artifact:
claude.ai/code/artifact/9d64bc98-4109-4f19-a8b9-47c49b9a6529); her calls:
- DEFAULTS CAPSULE (new amicode-defaults-capsule.tsx): model + solver
consolidate into one compact control — face reads the current pair
("Auto · Piccolo ▾"), popover holds the full model select (the existing
AmicodeDefaultModel, unchanged: global pin + VS Code-setting mirror)
and a solver radio pair sharing solver-toggle.tsx persistence. With the
⚡ HP solver on, the face wears the bolt + accent border — the PRO
funnel stays visible at every width. Click-outside + Escape dismiss.
- Settings gear moves to the FAR RIGHT (identity left, actions right).
- "customize" has NO standing button anywhere (second-round rethink):
editing is initiated from the card in hand. Hover/focus any widget →
a ⋯ appears in its corner (host-side above the sandboxed frame, like
the edit-mode pill); its menu carries direct actions (move up/down,
configure, remove) plus "Add widget…" and "Arrange dashboard…", which
open the existing full edit mode (scrim, control pills, add-back
tray, Done). All menu actions reuse the grid's existing operations.
- The bar is now brand | capsule · sessions · gear ≈ 350px worst case:
ONE row from 360px to full-screen. The only responsive rule left is
the wordmark fading below 400px (amicode.css).
The show-only AmicodeSolverToggle strip is no longer mounted (component
and its exports stay; the capsule reuses loadSolverMode/saveSolverMode).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
kateebonner
force-pushed
the
kate/nav-defaults-capsule
branch
from
July 15, 2026 03:17
2bbce69 to
e603a49
Compare
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.
What
Part-by-part redesign of the home chrome strip, decided with Kate on the interactive proposal (artifact
9d64bc98) and iterated live in the installed extension. The old strip was six things at one altitude wrapped by accident — at ~500px the wrapped solver row painted under the dashboard cards; at 360px solver/sessions/customize were unreachable.The fresh bar: brand | defaults capsule · sessions · settings — ≈350px worst case, one row from 360px to full-screen. The only responsive rule is the wordmark fading below 400px.
amicode-defaults-capsule.tsx): model + solver in one compact control. Face shows the current pair (Auto · Piccolo ▾); popover holds the full model select (existingAmicodeDefaultModel, unchanged semantics: global pin + VS Code-setting mirror) and a solver radio pair onsolver-toggle.tsx's persistence. HP mode puts an accent border on the face — the PRO funnel survives every width. No emoji, no marketing caption (Kate: tacky); the PRO pill carries the tier. Click-outside + Escape dismiss.⋯appears in its corner (host-side above the sandboxed frame, same layering trick as the edit-mode pill); its menu carries direct actions (move up/down, configure, remove) plus Arrange dashboard… which opens the existing full edit mode (scrim, control pills, add-back tray, Done). Every menu action reuses the grid's existing operations — no new state machinery.media/ui/atoms/pill.tsin the amicode repo): fully-round, 1pxcurrentColorborder, 10%currentColortint background, colored text carrying state, 600 weight / 0.5px tracking,line-height: 1with 4px/7px padding (Kate-tuned live). Applied to the sessions count badge and the PRO tier pill.Verification
bun turbo typecheck(app+ui) clean;bun testui 221 / app 388, 0 faillocal 2bbce6947= this branch tip🤖 Generated with Claude Code