refine login view with reusable widgets and improved pairing UX

andrielfr commented

2026-03-01 04:31:35 -03:00

Member

summary:

introduce PairingCell and PairStep reusable widget templates, replacing hardcoded inline labels for the pairing code and instruction text
rework the QR code expiration bar: wrap in a Revealer with swing-down animation, invert progress to count down (full → empty), and use saturating_sub for safer timeout arithmetic
polish the login layout: replace the single separator with an "OR" divider, add numbered pairing steps, auto-prepend + to phone input, auto-focus the entry on init, and retry phone number pairing on transient errors instead of showing a dialog

changes:
new widgets:

PairingCell (src/widgets/pairing_cell.rs) — styled card displaying a single pairing code character, with dynamic accent/success CSS class switching on pair completion
PairStep (src/widgets/pair_step.rs) — numbered instruction row with an accent circle badge and markup-enabled label

login view (src/components/login.rs)

replaced 8 hardcoded gtk::Label blocks with dynamically created PairingCell widgets managed via pairing_box and pairing_cells fields
added three PairStep instructions: open WhatsApp, navigate to device linking, scan QR code
progress bar moved out of the QR overlay into its own Revealer (swing-down, 350ms)
phone number validation: auto-prepend +, properly reset formatted number when input becomes invalid
error handling: silently retry pairing on phone number errors instead of popping an alert dialog
stack children use add_named[Some(...)] instead of add_child + set_name
submit button validates phone number before dispatching (moved guard from click handler into command handler)

application (src/application.rs)

pair success delay increased from 1s to 2s
minimum window height bumped to 380

summary: - introduce PairingCell and PairStep reusable widget templates, replacing hardcoded inline labels for the pairing code and instruction text - rework the QR code expiration bar: wrap in a Revealer with swing-down animation, invert progress to count down (full → empty), and use saturating_sub for safer timeout arithmetic - polish the login layout: replace the single separator with an "OR" divider, add numbered pairing steps, auto-prepend + to phone input, auto-focus the entry on init, and retry phone number pairing on transient errors instead of showing a dialog changes: new widgets: - PairingCell (src/widgets/pairing_cell.rs) — styled card displaying a single pairing code character, with dynamic accent/success CSS class switching on pair completion - PairStep (src/widgets/pair_step.rs) — numbered instruction row with an accent circle badge and markup-enabled label login view (src/components/login.rs) - replaced 8 hardcoded gtk::Label blocks with dynamically created PairingCell widgets managed via pairing_box and pairing_cells fields - added three PairStep instructions: open WhatsApp, navigate to device linking, scan QR code - progress bar moved out of the QR overlay into its own Revealer (swing-down, 350ms) - phone number validation: auto-prepend +, properly reset formatted number when input becomes invalid - error handling: silently retry pairing on phone number errors instead of popping an alert dialog - stack children use add_named[Some(...)] instead of add_child + set_name - submit button validates phone number before dispatching (moved guard from click handler into command handler) application (src/application.rs) - pair success delay increased from 1s to 2s - minimum window height bumped to 380

andrielfr added 6 commits

2026-03-01 04:31:35 -03:00

feat: add PairingCell widget template 96eec0fc31

refactor: refine login view with PairingCell widget and improve pairing flow 3ab2252346

feat: increase pair success delay to 2 seconds 617b418183

feat: add PairStep widget with numbered pairing instructions 50d76a4ef0

refactor: polish login view separator, pairing cells, and phone number validation d5696081bd

- replaced single separator with OR divider between two separator lines
- used add_named instead of add_child + set_name for stack children
- added auto-focus on phone number entry at init
- auto-prepend + to phone input and improved invalid number state reset
- clear pairing box cells before re-populating
- fixed pairing cell sizing with explicit dimensions instead of inline CSS
- bumped minimum window height to 380

refactor: improve QR code expiration bar with countdown and reveal animation

CI / Rustfmt (pull_request) Has been cancelled

Details

CI / Flatpak (pull_request) Has been cancelled

Details

53e28f4dda

- wrap the progress bar in a Revealer with a swing-down transition instead of toggling visibility directly.
- invert the progress fraction to count down from full to empty, and use saturating_sub for safer timeout
arithmetic.

andrielfr

2026-03-01 04:32:01 -03:00

added the
bug

enhancement
labels
requested review from alisson

andrielfr self-assigned this

2026-03-01 04:32:16 -03:00

andrielfr commented

2026-03-01 04:33:43 -03:00

Author

Member

known bug: when the session is expired, it's supposed to reset the session automagically when pairing with phone number, it works partially, because it can request the pair code from the whatsapp api, but after typing its pair code, the phone can't pair, it enters in an infinite looping of "Connecting" and nothing happens

CI / Rustfmt (pull_request) Has been cancelled

Details

CI / Flatpak (pull_request) Has been cancelled

Details

This pull request has changes conflicting with the target branch.

src/components/login.rs

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin refactor/refine-login-view:refactor/refine-login-view

git switch refactor/refine-login-view

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

Rows
Columns

refine login view with reusable widgets and improved pairing UX #5

Checkout

Merge