Skip to content

Share one dialog shell across main-window dialogs - #899

Merged
enaboapps merged 3 commits into
mainfrom
889-dialog-shell
Sep 25, 2026
Merged

enaboapps merged 3 commits into
mainfrom
889-dialog-shell

Conversation

@enaboapps

@enaboapps enaboapps commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

Closes #889. Stacked on #898, tracked in #891.

What changed

  • Setup, pairing, profile, confirmation, switch practice and capture dialogs share one surface, a 16px radius, 28px padding (20px under 480px) and one shadow. Headers use one title size. Footers share a divider and spacing, and their spacer pushes the main actions to the end.
  • The setup guide was fixed at up to 900px tall, so short steps floated in empty space. It now sizes to its step, with a 480px minimum so it doesn't jump between steps, up to the window height. Only the middle scrolls.
  • The setup guide's label is sentence case instead of an uppercase eyebrow, and the step rail is thicker.
  • Each pairing request is a card. The verification code is set large on its own surface for comparison, and Reject and Accept sit at the end.
  • Opening a dialog fades and rises over 160ms. prefers-reduced-motion turns this off, along with the capture pulse and button transitions.
  • Dialog containers show a focus ring only for keyboard focus. Focus trapping, inert backgrounds and the capture dialog's key swallowing are unchanged.

Validation

On this head:

  • npm run lint passed
  • npm test passed: 238 Vitest tests and 5 Node tests
  • npm run build passed
  • cargo fmt --check, cargo clippy --all-targets -D warnings and cargo test passed (566 tests, 1 ignored). No Rust changes in this stack.
  • Rendered the setup guide, profile editor, pairing request and removal confirmation in headless Chrome at 920px and 620px, light and dark. Pairing and confirmation used a mocked Tauri bridge.

Review follow-up

An independent review of this layer's head raised these points, now addressed:

  • Long device names without spaces wrap in the pairing card instead of running under the code. A comment records why the entrance animation must never leave a transform on the setup guide: the capture dialog renders inside it.

🤖 Generated with Claude Code

Rebase validation (2026-09-25)

Rebased onto current main (7fb8fce, including #881) in stack order. git range-diff shows every commit in this PR is patch-equivalent to its previous head, and the intended parent remains its PR base. On the final stack tip (40c75cc), Node 24.19.0 lint, tests and build passed; Rust 1.97.1 format check, Clippy and tests passed. An independent review of the updated PR heads found no actionable findings. CI is rerunning on each new head.

OwenMcGirr and others added 2 commits September 25, 2026 12:49
Setup, pairing, profile, confirmation, practice and capture dialogs now
share one surface, radius, padding and shadow, with matching header and
footer spacing. The setup guide sizes to its step up to the window
instead of a fixed 900px, with a sentence-case label and a thicker step
rail. Pairing requests are cards with the code set large for comparison.
Opening a dialog is a short fade and rise that reduced motion skips, and
dialogs show a focus ring only for keyboard focus.

Closes #889

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
A device name without spaces ran under the verification code; it now
wraps within its column. A note on the entrance animation records why it
must never leave a transform on the setup guide.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 11:49
@enaboapps
enaboapps marked this pull request as draft September 25, 2026 11:50
Base automatically changed from 888-mobile-layout to main September 25, 2026 15:28
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 15:28
@enaboapps
enaboapps merged commit 2b76de6 into main Sep 25, 2026
6 checks passed
@enaboapps
enaboapps deleted the 889-dialog-shell branch September 25, 2026 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Share one dialog shell across main-window dialogs

2 participants