Redesign main/hamburger menu #99
Labels
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
Grandiras/Ponente#99
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
It's becoming too crowded and too hard to grasp. Draft and implement a new design. Also iterate on the design of the release notes and its advertisements.
🤖 On it — follow along in the action run; the reply will link the full session transcript.
📜 Live transcript — updating every ~5 minutes while the task runs.
Pushed as
claude/issue-99.What the menu is now
The header's right corner held three controls — a sparkle button for the release notes, an account chip that looked pressable and wasn't, and a hamburger — and the menu behind the third was two stacked pill blocks plus three differently-shaped full-width buttons in no particular order. The rule now is one door, one row shape, four groups.
.nav-menu-toggle). The chip is gone; the identity is said once, at the top of the menu it belongs to, with a role line for an admin (which is why the pages under it exist)..nav-menu-rowis the one shape for everything the menu does — Share, What's new, Install: icon, word, and whatever the row has to say on the right.ShareButtontakes it as itsCssClass, so one component is a square icon button in the card dialog and a row here..board-userany more; each control says what it looks like once, and the:not(…)specificity war the stylesheet kept warning about goes with it.On a phone it's the bottom sheet the board switcher already is — within reach of the thumb, dimmed backdrop, grab handle — and the admin pages fold the way they're folded into one flyout on a desktop. Before: 13 rows with Sign out below the fold. After: the whole menu fits on a 390×780 screen.
The release notes and their advertisement
One dot instead of two nudges. It stands for everything unseen in the menu — a release nobody has read about or the offer to install — and the row inside says which, with a "New" badge. The two halves are still marked seen at different moments, deliberately: opening the menu is seeing the install offer, and is not reading the release notes, so the dot can survive an open and still mean something.
The dialog is a timeline. Nine equally-weighted filled panels made the one entry a reader came for a tint away from the eight they'd read; now the newest is open at the top, the ones behind it sit on a rail, and everything older than the last few is behind one press — which takes focus back when it fires, or Escape would stop closing the dialog with the button gone.
Both locales and both themes are covered (German fits the menu; dark takes ink on the light brand fills, not white). A
2.7.0entry describing all of this went intoServices/Changelog.cs, and the affected sections ofCLAUDE.mdwere rewritten, including a new The account menu section.Verified
dotnet buildclean; 282 unit tests pass (translation parity, changelog copy rules included).mobile,boards,changelog,install,prefs,i18n,share,board,filterall pass — specs updated for the new selectors, includinginstall.spec.jsnow marking the release notes read so the shared dot is unambiguous, andmobile.spec.jsdismissing the sheet by clicking the dimmed board above it (there is no gutter beside a full-width sheet).mainin the same container: the same 9 calendar/boards tests fail identically, so they are environmental, not from this change.localhost:8090, before and after, on the same board.⏱ 58m 7s · 220 turns · tokens: 323.1k in / 112.6k out (+48805.3k cache-read)
📜 Full session transcript
→ Opened PR: #102