Visual redesign: dark-only theme, vector icons, animated board - #1
Merged
Merged
Conversation
A ground-up visual refresh of the board: - Dark-only theme (RequestedThemeVariant=Dark) on a blue-tinted near-black elevation ramp, with Fluent control overrides (inputs, tooltips, corner radius) to match. - Link states read at a glance: a colored 3px state bar on each card plus tinted state chips (managed=accent, unsaved=amber, manual=neutral, protected=violet) instead of white-on-solid badges. - Vector StreamGeometry icons replace emoji and text-glyph buttons: lock/unlock protect toggles, close, search, speaker, and per-kind palette tiles (app waveform / capture mic / monitor headphones). - Basic motion: hover transitions on cards and palette items, a card entrance fade/slide, and a pulsing accent glow on the drop target while dragging. - Toolbar rebuilt: logo mark, status pill, search field with icon, monitors ToggleSwitch. Columns get header icon, card-count chip and a dashed empty-state drop zone. - Fixes the text overlap bugs: ScrollViewers now disable horizontal scrolling (the default Hidden visibility measured content at infinite width, pushing buttons out of cards and letting titles run under actions), and titles/chips/actions live in separate grid cells so trimming always engages. - Friendlier display names: titles lead with the app name / device description, raw node names move to the subtitle (identity and matching untouched). - New --screenshot switch renders the board headlessly (Skia) over the design graph and writes the PNGs under docs/screenshots/, which are included for review. Build, 65 unit tests, --smoke and --smoke-ui all pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jac4PWhnEzh7j5f5NaafJ1
A help button (?) at the toolbar's right edge opens a flyout explaining what the Managed / Unsaved / Manual / Protected chips mean, using the same tinted chips as the cards, plus a note on what removing a card does. Captured as docs/screenshots/board-help.png by the --screenshot tool (now taken before the drag-over shot so its border transition can't linger into the frame). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jac4PWhnEzh7j5f5NaafJ1
SimplyJustJessie
pushed a commit
that referenced
this pull request
Aug 24, 2026
…tle bar' (#1) from claude/ui-icons-single-row-titlebar into main Reviewed-on: https://git.bussy.cloud/jessie/AutoRoute/pulls/1
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.
A ground-up visual refresh of the board — darker, calmer, and it fixes the text-overlap bugs that made the old UI look broken.
Before → After
Before (dark variant of the old theme — note the titles running under the Protect buttons, badges colliding with actions, truncated column headers):
After — default view:
After — every Link state at a glance (Managed = accent, Manual = neutral, Unsaved = amber with Save/Keep, Protected = violet lock):
After — the circled ? in the toolbar opens a legend explaining what each state means:
After — drop target lit up while dragging a Source over a column (the glow pulses in the live app):
What changed
Visual system
RequestedThemeVariant="Dark"): a blue-tinted near-black elevation ramp (window → panel → column → card → hover), one accent (periwinkle#7C9AFF), and Fluent control overrides so inputs, tooltips and corner radii match.?button in the toolbar opens a flyout defining Managed / Unsaved / Manual / Protected with the same tinted chips, plus a note on what removing a card does.alsa_input.usb-Logitech_…) moves to the subtitle. Matching/identity is untouched — this is presentation only.Motion (subtle, no flash)
Bug fixes surfaced by the redesign
ScrollViewerdefaults horizontal scrollbar visibility toHidden, which measures content at infinite width — so long titles pushed buttons out of the cards and ran under actions. Both list ScrollViewers now disable horizontal scrolling, and titles/chips/actions live in separate grid cells so trimming always engages.Tooling
--screenshot [dir]switch renders the board headlessly (Skia) over the deterministic design graph and writes the PNGs — that's how the shots above were produced, reproducible on any machine with no display.Verification
dotnet buildclean (0 warnings), all 65 unit tests pass--smoke(viewmodel flows) and--smoke-ui(headless render, incl. "no binding/resource errors") both PASS🤖 Generated with Claude Code
https://claude.ai/code/session_01Jac4PWhnEzh7j5f5NaafJ1