UI polish: chat sidebar, app shell, composer, window chrome + 2 fixes by senamakel · Pull Request #5840 · tinyhumansai/openhuman

senamakel · 2026-08-29T18:05:35Z

Summary

Chat sidebar polish: thread pills fill the rail, the pane opts out of the app-wide reserved scrollbar track, and the 20px "new conversation" header icon becomes an outlined pill row matching the thread rows.
App shell polish: nav rows drop 36px → 32px to match the thread pills, the sidebar footer (connection indicator + version) is removed, the Feedback icon becomes a search icon that opens the ⌘K palette through the command registry, and a separator sits between the nav and the projected sidebar region.
macOS window chrome: trafficLightPosition moves the traffic lights onto the header icon row, and a new set_titlebar_for_sidebar Tauri command syncs title-bar style and NSWindow.setTitleVisibility to the sidebar's collapsed state.
Composer: focus is carried by the border alone, with a constant drop shadow that continuously orbits (motion-reduce:animate-none); send buttons pinned to bg-primary-500 for dark-mode contrast.
Theming: new lib/theme/chrome.ts derives surface-chrome / line-chrome from a theme's canvas so custom and preset themes tint the window frame; new tokens.coverage.test.ts drift guard; the dotted-background feature is deleted app-wide.
Two bug fixes: FeedbackStatusBadge no longer crashes the feedback page on an unknown status, and the Feedback page moves onto the standard SettingsPanel template.

Problem

Several small things on the chat surface and the app shell did not hold up under use:

Sidebar rail. Thread pills sat inside a horizontal gutter and used per-row margins, so a margin landed after the last row and padded the scroll floor unevenly. The pane also inherited the app-wide ::-webkit-scrollbar rules, which reserve a permanent 10px track on macOS/Linux WebKit where the platform would otherwise draw an overlay bar. The "new conversation" affordance was a 20px header icon — the smallest hit target in the sidebar.
Composer contrast. --primary resolves to primary-400 in dark mode; against white --content-inverted that measured ~2.4:1 on the send buttons.
Window frame. surface-chrome / line-chrome were fixed neutrals, so a custom or preset theme left the window frame untinted regardless of its canvas.
Token drift. 2 of 61 tokens in styles/tokens.css were unreachable from the Theme Studio registry, with nothing to catch it.
FeedbackStatusBadge crash. FeedbackStatus is a compile-time union over server JSON that nothing validates at the boundary. A status outside the union made the style lookup return undefined, and style.pill then threw undefined is not an object, taking down the whole feedback page.
Feedback page layout. It lived at pages/Feedback.tsx outside the settings template and had lost the p-4 gutter that SettingsTabbedPage's -mx-4 full-bleed divider is computed against.

Solution

Chat sidebar / thread list (app/src/features/conversations/threadList/ThreadList.tsx)

Horizontal gutter removed; gap-0.5 on the column replaces per-row margins, so no margin trails the last row.
The pane sets scrollbar-width to opt out of the app-wide ::-webkit-scrollbar rules, giving macOS/Linux WebKit a native overlay bar. scrollbar-gutter: stable both-edges stays for Windows/Chromium, where bars are still laid out in flow.
The new-conversation affordance is an outlined pill row matching the thread rows; the section header moved with it. It is a real <button> rather than the div[role=button] the thread rows must use — those nest action buttons and cannot legally nest a button.

App shell (AppSidebar, SidebarNav, SidebarHeader, TwoPaneNav)

The nav/projected-region separator is hidden with opacity-0 rather than unmounted on /chat, because its my-2.5 is the only gap between the two lists.
Nav rows 36px → 32px; sidebar footer removed; settings sidebar top padding removed.
The search icon dispatches through the command registry, so the button and the ⌘K shortcut are literally the same action rather than two code paths.

macOS window chrome

trafficLightPosition in app/src-tauri/tauri.conf.json moves the OS chrome onto the header icon row, rather than moving the app's own icons to chase it.
set_titlebar_for_sidebar syncs title-bar style and NSWindow.setTitleVisibility to the sidebar's collapsed state. It exists as a command because there is no runtime setter for title_hidden in tao/tauri.

Composer (app/src/components/assistant-ui/thread.tsx, app/src/index.css)

Focus is carried by the border alone; the drop shadow is constant and orbits via a composerShadowOrbit keyframe animation, disabled under motion-reduce.
Send buttons pinned to bg-primary-500, fixing the ~2.4:1 measurement above.

Theming

app/src/lib/theme/chrome.ts derives surface-chrome / line-chrome from a theme's canvas. All 8 presets gained explicit surface-chrome; the 4 canvas gradients were replaced with solid colours.
tokens.coverage.test.ts parses styles/tokens.css and asserts every token is reachable from the Theme Studio registry. It was written against the 2 unreachable tokens and is mutation-checked.

Bug fixes

Both FeedbackStatusBadge lookups are now total, with a neutral fallback that renders the raw value — the failure mode for an unmodelled server status is a plain badge, not a blank page. 4 regression tests, mutation-checked.
The Feedback page moved to components/settings/panels/FeedbackPanel.tsx and uses SettingsPanel, restoring the gutter the divider is computed against. That move brought the file under lint:ui-tokens for the first time, which failed on four dark:bg-white/* overrides: the count pill now uses bg-content-muted/10 (matching FeedbackStatusBadge's pill in the same feature), and the other three dark: overrides are dropped — surface-subtle/surface-muted are already 38 against dark --surface 23.

Submission Checklist

Tests added or updated (happy path + at least one failure / edge case) per Testing Strategy — 4 FeedbackStatusBadge regression tests (including the unmodelled-status failure path) and the tokens.coverage.test.ts drift guard; both mutation-checked.
Diff coverage ≥ 80% — changed lines (Vitest + cargo-llvm-cov merged via diff-cover) meet the gate enforced by .github/workflows/ci-lite.yml. 1562 tests across 148 files pass locally; the CI gate is authoritative.
Coverage matrix updated — N/A: UI polish plus two bug fixes; no feature rows added, removed or renamed.
All affected feature IDs from the matrix are listed in the PR description under ## Related — N/A: no matrix feature IDs affected.
No new external network dependencies introduced (mock backend used per Testing Strategy)
Manual smoke checklist updated if this touches release-cut surfaces (docs/RELEASE-MANUAL-SMOKE.md) — N/A: no change to a release-cut surface; the macOS traffic-light and title-bar behaviour is visual and covered by the existing desktop smoke pass.
Linked issue closed via Closes #NNN in the ## Related section — N/A: no tracking issue; user-directed polish pass.

Impact

Desktop only. The trafficLightPosition change and set_titlebar_for_sidebar are macOS-specific; other platforms are unaffected by them. The sidebar scrollbar change is deliberately split by platform: overlay bars on macOS/Linux WebKit, scrollbar-gutter: stable both-edges retained on Windows/Chromium.
Accessibility. The send-button contrast fix takes dark mode from ~2.4:1 to the primary-500 value. The composer's orbiting shadow honours motion-reduce. The new-conversation affordance grew from a 20px icon to a full pill row.
Migration. Persisted custom themes may carry a dead backdrop.dots property from the removed dotted-background feature; it is inert and no migration was written.
Security / performance: none.

Closes: N/A
Follow-up PR(s)/TODOs:
- chat.conversationsHeading is now an unused i18n key across all 14 locales, left in place deliberately rather than removed in this pass.
- Persisted custom themes may carry a dead backdrop.dots property; no migration was written.
- Every other variant="default" button shares the dark-mode primary-400 contrast issue; only the send buttons were addressed here.

AI Authored PR Metadata (required for Codex/Linear PRs)

Linear Issue

Key: N/A
URL: N/A

Commit & Branch

Branch: ui-polish
Commit SHA: 2cf44d5c8ab3b84e8a0b00e26684d7e63e3d383c

Validation Run

pnpm --filter openhuman-app format:check — Prettier clean
pnpm typecheck — clean
Focused tests: full Vitest suite — 1562 tests across 148 files pass. Also pnpm lint (0 errors), pnpm lint:ui-tokens, pnpm i18n:check, pnpm i18n:english:check.
Rust fmt/check (if changed): N/A — no root-crate Rust change.
Tauri fmt/check (if changed): set_titlebar_for_sidebar added to the shell; cargo fmt clean.

Validation Blocked

command: N/A
error: N/A
impact: N/A

Behavior Changes

Intended behavior change: chat sidebar, app shell, composer and macOS window chrome are restyled; the dotted-background feature and the sidebar footer are removed; the Feedback page moves under Settings; FeedbackStatusBadge no longer throws on an unmodelled status.
User-visible effect: a tighter sidebar rail with a larger new-conversation target, native overlay scrollbars on macOS/Linux, theme-tinted window chrome, a legible send button in dark mode, and a feedback page that renders instead of crashing when the server returns a status the client does not model.

Parity Contract

Legacy behavior preserved: scrollbar-gutter: stable both-edges is retained on Windows/Chromium where scrollbars occupy layout flow; the thread rows stay div[role=button] because they nest action buttons; the ⌘K palette keeps its existing behaviour — the new search button dispatches the same registered command.
Guard/fallback/dispatch parity checks: both FeedbackStatusBadge style lookups are total, falling back to a neutral style that renders the raw status value; tokens.coverage.test.ts guards token-registry reachability against future drift.

Duplicate / Superseded PR Handling

Duplicate PR(s): none
Canonical PR: this one
Resolution: N/A