Repository navigation
Redesign the main window and settings panel - #4
Merged
Merged
Conversation
- One type scale (12/14/16/20/24/28/48) and three weights; nothing below 12 px or above SemiBold - Spacing on the 8/4 px grid; L1 panels with 1 px subtle borders, no shadows - One accent hue for primary actions; Stop becomes a quiet button while the status block shows the live state - Bigger status block with a state icon, readable from arm's length - Status checks: icon shapes per state, problem rows tinted, state word kept for screen readers - Refresh, settings and copy become square icon buttons with tooltips and shortcuts (F5, Ctrl+,) - Settings open as a slide-over: status stays visible, Esc or the scrim closes it, focus is trapped and restored, fields have bound labels and helper text, errors show on blur and clear on edit - Device empty state gets a Start server button; device list is a framed list with hairlines and a selected state - Verb-first button labels (Start server, Copy error details, Reset to defaults, Restore adapter) - Serve anyway uses a named confirmation with a red Serve anyway button and Cancel as default - Smoke test also screenshots the settings slide-over Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017zksaWP7jAxjNu15h1UNgX
Trim the status block and step padding so field laptops at 1366x768 show nearly the whole chain without scrolling. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017zksaWP7jAxjNu15h1UNgX
Restyle with the design-taste skill (direction: one motif). The status LED is the one shape, used at every scale: a giant light cropped at the edge of the status field, a light on each check (an unlit ring before it runs, no step numbers), the link lights on adapters and devices, and round buttons. - Embed Figtree (text) and League Spartan (status line, device IP), both OFL - Five sizes (13/16/20/40/64); tabular figures instead of monospace for IPs and MACs - Faceplate palette: dark ground, surfaces a tone step up, no borders or shadows; status colours are the only hues and the primary button is solid ink - Flat pill buttons with hover/press tint and an ink focus ring - Banners are whole fields of the state colour with a status light Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017zksaWP7jAxjNu15h1UNgX
A fixed 999 corner radius rendered as an ellipse in WPF; bind the radius to half the actual height instead. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017zksaWP7jAxjNu15h1UNgX
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
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.
Requested by Simon · project thread
What changes for the user
Before: mixed font sizes and weights, a green Start and a blue Open WebUI competing for attention, settings replacing the device panel, text buttons for refresh and settings, numbered status checks with CHECK/PROBLEM words colliding with the scrollbar.
After: a rack-faceplate look built around one shape, the status LED. A giant light in the state's colour is cropped at the edge of the status field next to a large status line; each check has a light (an unlit ring before it runs); buttons are flat pills, with the primary action in solid ink. Settings open as a slide-over with the status still visible behind it. Fonts (Figtree and League Spartan) are embedded so every laptop looks the same.
How
UI files only:
App.xaml(type scale, pill buttons, field styles),Theme.cs(faceplate palette: tone steps, no borders or shadows),MainWindow.xamland code-behind (layout, slide-over focus handling, blur validation), converters (icon glyphs, issue tint, pill radius), embedded OFL fonts, small presentation changes in the view models (button text, close/validate commands, a named confirmation for "Serve anyway"), the elevation prompt, and--open-settingsso the smoke test also screenshots the slide-over. No DHCP, adapter or networking code changes.Design rules from the VectorLab UX skills (labels, forms, verbs, empty states, keyboard, surfaces, reduced motion) and the design-taste skill (one motif, five sizes, no thin rules, no monospace for figures, no step numbers).
Testing
🤖 Generated with Claude Code
https://claude.ai/code/session_017zksaWP7jAxjNu15h1UNgX