Skip to content

webui: toolbar polish (banner placement, transient errors, wrapping, fullscreen, OCR copy) - #47

Merged
Rust-KVM merged 1 commit into
devfrom
claude/webui-toolbar-ux
Oct 11, 2026
Merged

Rust-KVM merged 1 commit into
devfrom
claude/webui-toolbar-ux

Conversation

@Rust-KVM

Copy link
Copy Markdown
Owner

Requested by 4c · project thread

Summary

Before: the no-password banner overlapped the open toolbar; toolbar errors stayed forever; on narrow screens the toolbar was clipped; the quality −/+ buttons kept sending requests at 10%/100%; the fullscreen button could only enter fullscreen and failed silently; OCR results had no copy button.

After:

  • With the toolbar open, the no-password banner moves to the bottom of the screen.
  • Toolbar errors disappear after 6 seconds or on click; errors on the Connect card stay.
  • The toolbar wraps on narrow screens instead of being cut off.
  • Quality buttons are disabled at the limits and values snap to 10% steps.
  • ⛶ toggles fullscreen on and off, and shows a message if the browser blocks it.
  • The OCR panel has a Copy button, with a textarea + execCommand("copy") fallback because the device is usually opened over plain http where the Clipboard API is missing.

How

  • util.rs: toggle_fullscreen() and copy_text() call the browser APIs through Reflect and await the returned promises so rejections become messages.
  • app.rs: error auto-clear effect keyed on the message text; quality rounding and early return; banner gets class:low when the toolbar is open.
  • index.html: toolbar flex-wrap, disabled button style, .tb-err:empty hidden, .nopw-banner.low.
  • Cargo.toml: adds the Navigator and Node web-sys features.

Testing

  • cargo +nightly fmt --all (CI)
  • cargo +nightly clippy --workspace --release --all-targets -- -D warnings (CI)
  • cargo +nightly test --workspace (CI)
  • Frontend touched: trunk build --locked and wasm32 clippy in crates/rkvm-web (CI)
  • Tested on an RK3588 device: a build merging all five round-2 branches was deployed to the NanoPC-T6; / returns 200, 4K60 video plays, startup log has no WARN/ERROR.

Checklist

  • No #[allow(...)] suppressions and no new unwrap() / expect() in production paths
  • Hot paths stay zero-copy; periodic loops use MissedTickBehavior::Delay
  • Shared protocol types live in rkvm-proto
  • RPC method set changed → not applicable
  • Module tree or build invariants changed → not applicable

Round 2 of the web UI retest fixes (minor issues). The five round-2 branches merge onto dev together without conflicts.

🤖 Generated with Claude Code

https://claude.ai/code/session_01PbdzY6PfT28goR4BhqdsXR


Generated by Claude Code

- The open toolbar covered the no-password banner; move the banner to
  the bottom while the toolbar is open.
- Toolbar errors stayed until the next reconnect; clear each after six
  seconds (or on click), show the full text on hover, and hide the empty
  slot. Errors on the Connect card are unchanged.
- On narrow windows the toolbar overflowed both edges; cap its width
  and let it wrap, with button labels kept on one line.
- Quality +/- no longer send a request when already at the limit, and
  are disabled there.
- Fullscreen now toggles, and a browser refusal is shown instead of an
  unhandled promise rejection.
- The OCR result has a Copy button, with an execCommand fallback since
  the Clipboard API is unavailable over plain http.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions github-actions Bot added the rkvm-web Leptos / WASM frontend label Oct 11, 2026
@Rust-KVM Rust-KVM self-assigned this Oct 11, 2026
@Rust-KVM
Rust-KVM merged commit afa37d4 into dev Oct 11, 2026
13 checks passed
@Rust-KVM
Rust-KVM deleted the claude/webui-toolbar-ux branch October 12, 2026 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

rkvm-web Leptos / WASM frontend

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants