fix(chat): sidenav collapsed-mode polish — vertical icons, thread initials, right-click context menu#287
Merged
Merged
Conversation
…tials, right-click context menu
Three small fixes to the chat sidenav when in `collapsed` (56px) mode:
1. Top-bar icons stack vertically. The New-thread `[+]` and collapse/expand
chevron previously sat side-by-side inside a 56px column via
`justify-content: space-between`, producing awkward proportions. The
collapsed-mode rule now switches the top bar to `flex-direction: column`
with even gap.
2. Thread rows show a first-letter initial. In collapsed mode the title
label is hidden and there was nothing in its place — the strip looked
empty aside from the active-row highlight. Each row now renders a 28px
circular initial (uppercase, surrogate-pair-safe via `Array.from`),
hidden in expanded/drawer mode and revealed in collapsed mode. The row
button carries a `title` attribute so the full thread label appears as a
native tooltip on hover.
3. Right-click context menu on rows. The kebab is hidden in collapsed mode
(28px target in a 56px column was cramped). Right-clicking any thread
row now opens the same overflow menu anchored at the cursor — and
suppresses the OS context menu — in expanded, collapsed and drawer
modes alike. `chat-overflow-menu` gained an `anchorPos: {x, y}` input
that takes precedence over the element `anchor` when set; the
thread-list keeps the two anchor sources mutually exclusive via paired
signals.
Tests cover both the contextmenu open path and the no-adapter
preventDefault path, plus initial rendering and the empty-title "?"
fallback.
|
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 small fixes for the chat sidenav
collapsed(56px) mode.1. Top-bar icons stack vertically
The New-thread
[+]and the collapse/expand chevron sat side-by-side viajustify-content: space-betweeninside a 56px column, leaving awkward gaps. The collapsed-mode rule now switches the top bar toflex-direction: columnwith a 4px gap. The expanded/drawer presentation is unchanged.2. Thread rows show a first-letter initial
Previously the title text was hidden in collapsed mode and nothing took its place — the strip looked empty aside from the active-row highlight. Each row now renders a 28px circular initial (uppercase, surrogate-pair-safe via
Array.from), hidden in expanded/drawer mode and revealed in collapsed mode. The row button also carries atitleattribute so the full thread label appears as a native tooltip on hover.3. Right-click context menu on rows
The kebab is hidden in collapsed mode — a 28px target inside a 56px column was cramped. Right-clicking any thread row now opens the same overflow menu anchored at the cursor (and suppresses the OS context menu) in expanded, collapsed and drawer modes alike — a power-user convenience that also restores access to row actions in collapsed mode.
chat-overflow-menugained ananchorPos: {x, y}input that takes precedence over the elementanchorwhen set. The thread-list keeps the two anchor sources mutually exclusive via paired signals.Test plan
npx nx test chat— 618 tests pass (84 files), including 4 new tests covering the contextmenu open path, the no-adapter preventDefault path, initial rendering, and the empty-title?fallback.npx nx lint chat— passesnpx nx build chat— passesnpx nx build examples-chat-angular— passesnpm run generate-api-docs— regenerated (185 chat entries)