Skip to content

web: Claude Desktop design system and app shell - #70

Merged
Rust-KVM merged 8 commits into
devfrom
claude/project-thread-ukb172
Oct 18, 2026
Merged

web: Claude Desktop design system and app shell#70
Rust-KVM merged 8 commits into
devfrom
claude/project-thread-ukb172

Conversation

@Rust-KVM

@Rust-KVM Rust-KVM commented Oct 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Summary

Web UI redesign on the Claude Desktop layout and design system. Builds on #69 (merged).

Before: one floating toolbar with symbol glyphs (⚙ ⏻ ✕) and blur over the video. Dark theme only, English only, video stretched with object-fit: fill, settings as a long side drawer.

After:

  • Sidebar: 52px icon rail. Hovering peeks the 256px sidebar over the content; clicking the logo pins it and pushes the content. It holds navigation and connection status only.
  • Titlebar: 48px, resolution/fps chip, grouped actions (LEDs | mouse, quality, audio | Ctrl+Alt+Del, OCR | focus, fullscreen). No destructive action.
  • Settings: a centered modal like Claude Desktop: search and pages (通用, 视频, 键盘与鼠标, 虚拟媒体, 网络, 访问与安全, 硬件, 系统) on the left, the page's sections on the right. Theme (system/light/dark) and language live on 通用, reboot (with confirm) on 系统. Choices are segmented controls; every control updates at once and rolls back with a toast if the device refuses.
  • Video: always mounted stage, object-fit: contain; absolute pointer maps through the letterboxed picture.
  • Language: every string is a zh/en pair; one language at a time, Chinese default.
  • Keyboard: keys go to the host except in text fields, the terminal, dialogs and keyboard-focused chrome; Esc closes dialogs.
  • Focus mode: hides the chrome; a top handle peeks the titlebar.

How

  • style/tokens.css holds every color, size, radius, shadow and motion value; other stylesheets use only these variables.
  • src/ui components (Icon, Button, IconButton, Field, Callout), src/shell (Sidebar, Titlebar), src/i18n.rs, src/theme.rs, src/settings_nav.rs.
  • util::fire_revert for optimistic updates; util::report_error writes the toast.
  • docs/design-system.md is the rule book; AGENTS.md lists the new modules.

Testing

  • cargo +nightly fmt --all and wasm32 clippy -D warnings in crates/rkvm-web; trunk build in CI
  • Backend unchanged; CI runs clippy, test and deny
  • Deployed to the RK3588 device (192.168.1.6) after each round; headless Chrome checks of layout, sidebar peek/pin, settings dialog, selection states and Esc, with no input sent to the controlled host
  • Owner tested in the browser and approved

Checklist

  • No #[allow(...)] suppressions and no new unwrap() / expect() in production paths
  • Hot paths stay zero-copy (no backend change)
  • Shared protocol types live in rkvm-proto (none added)
  • RPC method set unchanged
  • Module tree changed → AGENTS.md updated

🤖 Generated with Claude Code

https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1

@claude
web: Claude Desktop design system and app shell
387312c 
Adds a token-based design system and rebuilds the page frame in the
Claude Desktop layout:

- style/tokens.css holds every color, type size, radius, shadow and
  motion value from the Claude Desktop Figma kit, light and dark. An
  inline boot script applies the saved or OS theme before first paint.
- src/ui: Icon (own 20px line glyphs), Button, IconButton, Field,
  Callout. src/shell: 52px sidebar rail that expands as an overlay, and
  a 48px titlebar with the remote-desktop actions.
- The video stays mounted in a stage; setup, sign-in and connect are
  cards over it. Errors become a toast; focus mode hides the chrome and
  peeks the titlebar from a top handle. No blur over the video.
- Video uses object-fit: contain; absolute pointer positions map through
  the letterboxed picture (hid::content_rect).
- zh/en switch (Chinese by default) for the shell; settings sheet,
  terminal and OCR dialog restyled onto the tokens.
- docs/design-system.md is the rule book for later UI work.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@github-actions github-actions Bot added documentation Improvements or additions to documentation rkvm-web Leptos / WASM frontend labels Oct 18, 2026
claude added 7 commits October 18, 2026 09:28
@claude
web: fix empty selects and sidebar blocked by the settings scrim
d163e4c 
Selects bound with prop:value got their value before Leptos inserted the
options, so the browser kept selectedIndex -1 and showed an empty box
(keyboard layout, log level, TLS mode and others). Each option now
carries prop:selected instead, which holds no matter when the options
arrive.

The settings and OCR scrims covered the sidebar, so the first click on
theme, language or nav only closed the sheet. The scrims now start right
of the rail and the sidebar sits above them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
web: one language at a time, and fix focus mode collapsing the stage
3813567 
Focus mode hid the sidebar but kept the two-column grid, so the main
column auto-placed into the 0px track and the whole stage collapsed into
the top-left corner. The focus grid is now a single track.

Settings, advanced settings, connection errors, REST errors and status
messages now follow the zh/en switch, so the UI is never half Chinese
and half English. Option labels (keyboard layouts, extensions) carry
both languages; network, virtual-media and ATX status are stored as
device data and described at render time so they switch live. Code
without a reactive owner uses i18n::tr.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
web: translate the settings close button's accessible name
e848863 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
web: ergonomics pass on the shell
116cc97 
Sidebar pushes the content instead of covering the titlebar chip (overlay
only below 720px). Theme and language become segmented controls that show
the current choice. Reboot moves from the titlebar corner to a labeled,
confirmed row in the sidebar footer. Titlebar actions are grouped and focus
mode gets a glyph unlike fullscreen. Keys stay in the page inside sheets,
dialogs and keyboard-focused chrome; Esc closes the settings sheet and the
OCR dialog; clicking the video takes focus. 44px targets on touch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
web: hover-peek sidebar and settings dialog
b03a7c4 
The sidebar rail peeks the full sidebar over the content on hover and hides
it when the pointer leaves; clicking the logo pins it open (pushing the
content). Settings becomes a centered modal like Claude Desktop: search and
page list on the left, the page's sections on the right, closed by Esc, the
close button or the backdrop; full screen on narrow windows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
web: preferences and reboot move into settings; fix selected states
f7cf483 
Theme (system/light/dark), language and reboot move from the sidebar into
the settings dialog (General and System pages); the sidebar keeps only
navigation and connection status. Selected segments stayed hidden while
hovered because a generic button hover rule outranked the selected style;
choices are now a shared segmented control with hover, press, focus and
disabled states, and switches gain the same. Settings update at once and
roll back with a toast if the device refuses the change. Removes the dead
sidebar preference styles, unused icons, Danger button styles and an
unused keyframe.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@claude
Merge dev into claude/project-thread-ukb172
181e428 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EtYBDrZbatHFGiL5uUvyY1
@Rust-KVM
Rust-KVM marked this pull request as ready for review October 18, 2026 14:58
@Rust-KVM
Rust-KVM merged commit d35ff77 into dev Oct 18, 2026
13 checks passed
@Rust-KVM
Rust-KVM deleted the claude/project-thread-ukb172 branch October 18, 2026 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation rkvm-web Leptos / WASM frontend

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Rust-KVM @claude