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

andrielfr added 1 commit

2026-03-07 04:43:57 -03:00

refactor: redesign login view with stacked page navigation 04bd55cf3e

- remove country-emoji dependency and related UI elements
- add new icons: qr-code, phonelink, phonelink-setup, phone-right-facing
- refactor login page structure from bottom page to main stack
- switch phone number input from gtk::Entry to adw::EntryRow
- add dedicated LoginPhoneNumberView enum for phone number states
- add session reset tracking with Arc<AtomicBool> for expiration timer
- add PairStep::new() constructor and expose main_box for reuse
- add navigation links between QR code and phone number entry flows
- improve UI with adw::PreferencesGroup, adw::ButtonRow components

andrielfr added 2 commits

2026-03-08 00:27:11 -03:00

refactor: improve login view with fast_qr and refine UI components 9ddd07dca1

- replace image and qrcode crates with glycin and fast_qr for QR generation
- migrate to Arc<AtomicBool> for shared state across ChatList and Login
- redesign login view with simplified QR layout and improved transitions
- add startup auto-focus on phone number entry
- remove per-session reset flag; rely on direct emit instead
- introduce dedicated _login_view.scss with custom QR styling

style: run cargo fmt --all 985d05a1c4

alisson force-pushed refactor/refine-login-view from 985d05a1c4 to 1a08592ff4

2026-03-08 16:33:13 -03:00

Compare

alisson added 1 commit

2026-03-08 17:28:06 -03:00