apps/ui: align sidebar with new design mock#3137
Merged
youknowriad merged 3 commits intotrunkfrom Apr 19, 2026
Merged
Conversation
Flesh out the apps/ui sidebar to match the new design: - Add a Chat / Settings / Skills nav list between header and projects - Project sections show a dimmed domain subtitle under the name - Session rows include a relative timestamp and a thin left-bar on the active session; only the MRU (or active-session's) project is expanded by default, and users can toggle the rest - User menu swaps the generic user icon for a real Gravatar resolved from the account email, falling back to the Studio profile icons - Widen the sidebar, double the gutter, and add a right border to separate it from the main area Also extract shared bits: clsx for className joins, lib/icons.tsx for inline SVG icons (removes a duplicate drawer icon), lib/format-relative-time for the timestamp formatter, and a standalone Gravatar component. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Collaborator
📊 Performance Test ResultsComparing eaa3549 vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
…arButton
Route the three sidebar row shapes (nav items, project title, session
link) through @wordpress/ui's Button primitive — nav/session use
render={<Link/>} so routing still owns active state, project title stays
a plain onClick button. Factors the shared "neutralize the DS preset"
CSS (no center-align, no min-width, no border, no hover fill) into a
thin SidebarButton wrapper so consumers only supply their own
dimensions and active state.
Along the way:
- index.css focus-visible + icon-scale overrides now cover <a> too,
for Button rendered as Link.
- Session active left-bar moved from ::before to ::after to avoid
colliding with Button's loading-spinner ::before.
- Nav active state drops the grey fill to match the session pattern.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Route the user-menu trigger and the logged-out "Log in" fallback through SidebarButton, matching the rest of the sidebar. Removes the per-site variant/tone/size preset props and the now-redundant justify-content / min-width / gap overrides in user-menu.module.css. - Wrap SidebarButton in forwardRef so Base UI's Menu.Trigger can attach its internal ref to the underlying button element (without this the username span wasn't toggling the menu on click). - Move the hover/active/focus background reset onto SidebarButton's base .root rule. Unlayered CSS beats @wordpress/ui's layered :is(:hover, :active, :focus) rule at any state, so we no longer need per-state selectors and the lingering grey-fill after a mouse click is gone. - Audit sweep on the rest of the CSS: drop rules that duplicated Button defaults (.projectToggle padding / font-weight, .sessionLink position: relative) and the redundant .sessionLinkActive:hover / .itemActive:hover grouping. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
2 participants
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.
Related issues
How AI was used in this PR
Built interactively via Claude Code against a supplied design mock, iterating on spacing, colors, indent, active-state styling, and component extraction until the sidebar matched the target. Verified with
npm run typecheckandvite build; the user confirmed visual correctness screenshot-by-screenshot in Electron. Two bugs I would have missed without the user: theopacitytrick on the user-menu row was fading the Gravatar image, and the sessionsessionTimewas getting its opacity bumped on hover/active (user wanted it always dim).Proposed Changes
SidebarNavwith Chat / Settings / Skills. Chat links to/dashboard; the two others are placeholders until routes exist.…/+row actions stay visible. Session rows get a relative-time column and a thin left bar on the active row.<Gravatar>resolved fromsha256(email.toLowerCase())with the Studio profile icons as fallback. Dimming is now color-based (fg-content-neutral-weakon text/icon only), so the Gravatar image isn't faded.md→xl), right border added, extra breathing room between nav and project list.clsxas a direct dep and switched class concatenations to it; extractedcomponents/gravatar,lib/format-relative-time.ts, andlib/icons.tsx(also removes a duplicateddrawerIconliteral between sidebar-header and sidebar-layout).Testing Instructions
npm run start:new) while signed in to Wordpress.com. Confirm:++ collapse toggle, aligned past the macOS traffic lights./dashboardor a session route; Settings and Skills render as dim inert rows.profile-icon.png, dark usesprofile-icon-black.png).Pre-merge Checklist
npm run typecheckclean;vite buildclean.)🤖 Generated with Claude Code