UI: interactive back-swipe (left-band, snapshot backdrop)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 41s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 57s

Replace the 24px edge-swipe with a router-level interactive back gesture: a
rightward drag in the left ~38% band tracks the finger while a cheap themed
backdrop parallaxes in, and on release commits the back-navigation (past ~40%
of the width or a rightward flick) or snaps back. The live parent mounts only
on commit, which suppresses that one route slide for a seamless hand-off.

Pure decision logic (shouldArm/lockAxis/decideCommit + the per-gesture
controller) lives in lib/backswipe.ts with unit tests; the DOM wiring, hit-test
and settle animation in lib/backswipe.svelte.ts. The gesture yields to native
vertical scroll, skips the rack / draggable pending tiles / text inputs / the
board while zoomed-in, and is disabled inside Telegram (native BackButton owns
it). parentPath in App.svelte is now the single source for both the Telegram
button and the swipe.

Tests: backswipe unit (13) + e2e (3; Chromium+WebKit: commit, zoomed-in skip,
vertical scroll). Docs: UI_DESIGN.md Back bullet.
This commit is contained in:
Ilia Denisov
2026-06-11 16:41:36 +02:00
parent 7b85f4bd68
commit 6d263ff7c6
7 changed files with 624 additions and 34 deletions
+11 -1
View File
@@ -22,7 +22,17 @@ Login uses `Screen`.
## Navigation
- **Back**: a thin, compact `<` drawn from two rotated CSS borders (`Header.svelte`
`.chev`) — lighter than a glyph.
`.chev`) — lighter than a glyph. Outside Telegram a screen also returns with an
**interactive back-swipe** (`lib/backswipe.ts` pure logic + `lib/backswipe.svelte.ts`
wiring, rendered by `App.svelte`): a rightward drag begun in the **left ~38 % band**
(touch/pen only) tracks the finger — the current pane slides right while a cheap themed
**backdrop** parallaxes in under a lightening scrim — and on release the screen the swipe
ends toward wins (commit past ~40 % of the width or a rightward flick, otherwise snap
back). The live parent mounts only on commit, which suppresses that one route slide so the
hand-off is seamless. The gesture yields to native **vertical scroll** on a vertical move
and skips the rack, a draggable pending tile, text inputs and the board **while zoomed-in**
(so it never fights the board pan); it stays disabled inside Telegram, whose native
BackButton owns this.
- **No hamburger**: navigation is entirely bottom tab bars (the former `Menu.svelte`
dropdown is gone — it fought the Telegram-fullscreen layout, where it had to be re-centred).
Destinations beyond the lobby live behind **hub screens** reached from a tab: a ⚙️