feat(chat-sidenav): polish — icon rail collapsed, footer slots, primary/secondary CTA pills#399
Merged
Conversation
Reworks minimized state into an icon rail, adds footer slot pair (sidenavFooterLeft + sidenavFooterRight), promotes New chat to a primary-CTA pill matching chat-input button family, tones New project down to a muted secondary pill, relocates the expand toggle into the footer's right slot. Demo footer-right gets a theme switcher. Sub-project A of a two-part polish pass; sub-project B (chat-surface) ships separately. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
7 tasks: footer slots + toggle relocation, footer/toggle CSS, New chat primary CTA pill, New project secondary pill, demo theme switcher into right slot, collapsed-mode polish, build verify + PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…se toggle Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…on-only buttons Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two CSS bugs caught in live verification: 1. The generic .chat-sidenav__action rule is defined AFTER the .chat-sidenav__action--new pill rule, and they have equal specificity (one class each) — so the generic transparent background + 8px radius + 8px-12px padding was winning the cascade and stomping the pill style. Fixed by adding a higher-specificity .chat-sidenav__action.chat-sidenav__action--new block AFTER the generic rule that re-asserts the pill properties. 2. .chat-sidenav__footer-right needed margin-left: auto so the right-side container pushes to the right edge of the footer when the left container is empty (justify-content: space-between has no effect with only one flex child). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Sub-project A of a two-part demo UX polish pass (user reviewed
demo.cacheplane.ai/embedand flagged sidenav usability issues; sub-project B follows for chat-surface tweaks).titleattribute.[sidenavFooterLeft]+[sidenavFooterRight]. Theme switcher lives in the right slot (consumer-provided by the canonical demo). Expand/collapse toggle moves from the topbar into the right slot's last child (lib-rendered).--ngaf-chat-primarytoken, biggest button in sidenav, rounded 9999px, matches the chat-input send button family).[sidenavAccount]slot kept for back-compat (visually folded into footer-right via:has()CSS).Files changed
libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts— template: new footer with slot pair, expand toggle moved into footer, topbar collapse button removedlibs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts— 5 new vitest cases; updated existing tests that referenced removed selectorslibs/chat/src/lib/styles/chat-sidenav.styles.ts— footer + toggle CSS, New chat primary-pill rules, collapsed-mode polish (hide non-essential sections, icon-only buttons), specificity fix for action--newlibs/chat/src/lib/styles/chat-project-list.styles.ts— New project secondary-pill stylinglibs/chat/src/lib/primitives/chat-project-list/chat-project-list.component.spec.ts— 1 new vitest case for the secondary-pill CSSexamples/chat/angular/src/app/shell/demo-shell.component.{ts,css}— theme-switcher button projected into[sidenavFooterRight]Test plan
.chat-sidenav__action--collapseselectornpx nx build chat+npx nx build examples-chat-angularboth succeedhttp://localhost:4200/embed:Known follow-up (out of scope, not a blocker)
The "+ New project" button is rendered inside
<chat-project-list>which is hidden in collapsed mode. As a result, collapsed mode does not show a "+ New project" icon — only New chat, Search, theme, and expand. New chat being the bigger CTA, projects being organizational (less frequent), this is defensible for v1. If you want the New project icon visible in collapsed mode, the architectural fix is to hoist the button to the top-level sidenav template (alongside New chat). Flagging as a follow-up.Sub-project B (next PR)
Spec:
docs/superpowers/specs/2026-05-17-sidenav-polish-design.mdPlan:
docs/superpowers/plans/2026-05-17-sidenav-polish.md🤖 Generated with Claude Code