feat(chat,examples-chat): sidenav polish — header trim, dark mode contrast, mobile drawer#276
Merged
Conversation
…trast, mobile drawer Three fixes identified during visual review of #272: 1. Sidenav header trim. The expanded sidenav previously stacked three full-width rows (New chat, Search, Collapse) which felt heavy. Introduce a new .chat-sidenav__topbar row that hosts the New chat and Collapse/Expand buttons as icon-only controls with space-between, and keep the Search button as the sole full-width row in .chat-sidenav__actions. Labels on topbar buttons are hidden in every mode (display: none scoped to .chat-sidenav__topbar) so the topbar stays icon-only in expanded mode and centers in collapsed mode. 2. GenUI dark mode contrast. examples/chat/angular sets a dark body background via styles.css but never opted the chat lib into dark tokens, so --ngaf-chat-text stayed at rgb(28, 28, 28) and headings inside <chat> (including A2UI surface titles) inherited near-black on a dark background. Setting data-ngaf-chat-theme="dark" on <html> activates the dark token block at libs/chat/src/lib/styles/chat.css so text becomes rgb(245, 245, 245) and headings are legible. 3. Mobile drawer fixes. Drawer mode incorrectly applied position: relative to the host (originally added in #272 to avoid reserving space when closed), which caused the host to stretch to its parent's full width and made the inner .chat-sidenav fill the entire viewport. The host is now position: fixed top/left/bottom with width set from --ngaf-chat-sidenav-width-drawer (280px), and the inner wrapper handles the translate-X open/close transition. A new icon-only Close (X) button is rendered in the topbar exclusively in drawer mode (aria-label "Close conversations"), wired to emit openChange(false). The dark-mode fix from item 2 also resolves the drawer rendering in light mode. Tests: - libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts: 5 new specs covering the topbar structure, search-row isolation, and the drawer-mode Close button.
|
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
Three fixes identified during visual review of #272.
1. Sidenav header trim (libs/chat)
The expanded sidenav previously stacked three full-width rows (New chat, Search, Collapse) which felt heavy. A new
.chat-sidenav__topbarrow hosts the New chat and Collapse/Expand buttons as icon-only controls withjustify-content: space-between. The Search button becomes the sole full-width row in.chat-sidenav__actions. Topbar labels are hidden in every mode so the topbar stays icon-only in expanded mode and centers in collapsed mode.2. GenUI dark mode contrast (examples/chat/angular)
Root cause:
examples/chat/angular/src/styles.csssets a dark body background but never opted the chat lib into dark tokens.--ngaf-chat-textstayed atrgb(28, 28, 28), and headings inside<chat>(including A2UI surface titles) inherited near-black on a dark background.Fix: set
data-ngaf-chat-theme="dark"on<html>inindex.html. That activates the dark token block atlibs/chat/src/lib/styles/chat.css:166-182so text becomesrgb(245, 245, 245).3. Mobile drawer fixes (libs/chat)
Root cause: drawer mode applied
position: relativeto the host (originally added in #272 to avoid reserving space when closed), which caused the host to stretch to its parent's full width and made the inner.chat-sidenavfill the entire viewport. The scrim was hidden behind the full-width drawer.Fix:
position: fixed; top: 0; left: 0; bottom: 0; width: var(--ngaf-chat-sidenav-width-drawer)(280px), with the inner wrapper handling thetranslateXopen/close transition.aria-label="Close conversations"), wired to emitopenChange(false).Test plan
npx nx test chat --testFile chat-sidenav.component.spec.ts(26 specs pass, 5 new)npx nx build chatnpx nx lint chatnpx nx build examples-chat-angularnpm run generate-api-docs