3.2 KiB
3.2 KiB
Plan — web client
From architecture/web-client.md and quality/web-client.md.
Toolchain & skeleton (done during api-design)
- devenv: trunk, wasm-bindgen-cli, binaryen, wasm32 target;
build-web/serve-webscripts (RUSTFLAGS cleared for rust-lld). - crabidy-core on wasm: tonic codegen-only (workspace tonic
default-features=false, members re-enable),
build_transport(false), native-only config gated. Verify:cargo check -p crabidy-core --target wasm32-unknown-unknown. - cbd-web crate: Trunk.toml (+ dev proxy), index.html, style.css
skeleton,
state.rs(pane logic ports + tests),keymap.rs(TUI bindings port + tests),rpc.rs(gRPC-web client + basic auth header), app shell. Verify: wasm check + native tests +trunk build --release. - crabidy-server:
web-uifeature (default on), build.rs staging (dist or placeholder),web.rsstatic fallback (+tests), serve() on one axum router: auth → grpc-web → service, assets public. Verify: check with/without feature, tests.
Implementation
- Stream task: connect
GetUpdateStreamon startup, apply updates to signals (queue, mods, play state, volume, mute, position, capture board), reconnect with capped backoff +connectedsignal. Gate: parity/stream. - Library pane: listing from
LibraryPanestate, click = select, double-click/l= dive, breadcrumb/h= ascend, marks, capability badges (%/[e]/[d]equivalents), skipped red. Library cache honoringis_cacheable. Gate: parity/semantics. - Queue pane: track list with current highlight + resolving indicator, select/play/remove/clear/save, insert-here from library selection. Gate: parity.
- Transport bar: play/pause, prev/next, restart, stop-aware
play state, volume slider + mute, shuffle/repeat toggles,
progress gauge from
TrackPosition. Gate: parity. - Dialogs: name input (create/rename/save-queue/capture with
slow-warning label), capture-delete y/N (red), help overlay
(
?), login form onUNAUTHENTICATED(localStorage-backed). All modal: keys bypass the keymap. Gate: parity + security. - Keyboard wiring: global keydown listener →
keymap::lookup→ actions; input elements exempt (typing in dialogs). Gate: parity. - Capture progress lines: board fed by stream, rendered at the library pane bottom, errors red, linger semantics from state.rs. Gate: parity.
- CSS: full styling — layout grid, pane focus ring, selection
bar, accent
--accent(crab orange-red) with color-mix derivations, light/dark via light-dark() + persisted toggle, phone breakpoint. Gate: styling. - README + docs: cbd-web/README.md (build, dev loop, config), root README (web UI section, feature flag, build-web), update architecture doc if the implementation deviates. Gate: build.
- Verification: full workspace tests + clippy (native and
wasm) + fmt + markdownlint; live smoke test: server with bundle
→ browser fetch of
/, gRPC-web call, TUI gRPC call, auth denial over gRPC-web. Tickquality/web-client.md; writeplan/summary.mdsection; commit.