feat(mobile): swipe between Recent and My Space

[martinezharo]

On the touch layout, the tab pill was the only way to change what the feed shows — and it sits at the top of the screen, the one place a thumb cannot comfortably reach. A horizontal drag anywhere across the list now moves between Recent and My Space. The buttons keep working exactly as before.

How it behaves

• The gesture follows the finger instead of waiting for the release: the pill sits between the two tabs as the drag crosses, and the list gives way with a damped offset.
• Resistance at the ends. Dragging past the first or last tab damps to ~6% of the finger's travel, so the ends feel like ends rather than dead pixels.
• Distance or velocity commits. Past 28% of the panel's width, or faster than 0.4 px/ms — so a short confident flick works as well as a long deliberate drag. Anything less springs back.
• Vertical drags are untouched. The surface keeps touch-action: pan-y, so the browser scrolls the list natively and cancels our pointer; the recogniser locks to whichever axis the finger commits to first, with ties going to the scroll.
• A swipe that starts on a card doesn't open it. The click the browser fires for that pointer is swallowed once.

How it's built

Nothing goes through React state. Both the pill's position (--tab-progress, a fractional tab index) and the list's offset (--tab-shift, px) are CSS custom properties written straight to the DOM on every pointer move — the same approach AsideResizeHandle already takes for the aside's width — because a render per frame would re-render every card in the feed to move a pill. They're inherited from a shared ancestor, so the switcher and the list read the same two numbers without knowing about each other.

React still owns their resting values, so pressing a tab animates through the very same property a swipe drives: FeedTabs no longer positions its pill from active at all. One animation, two ways to ask for it — they can't drift.

• src/lib/tabSwipe.ts — the maths (axis detection, progress, damping, commit thresholds), the two custom properties, and the shared transition. Pure and framework-free.
• src/hooks/useSwipeTabs.ts — the pointer-event recogniser, generic over a list of tab ids.
• src/components/MobileHome/{FeedTabs,MobileHome}.tsx — wiring.

Tests

• src/__tests__/tabSwipe.test.ts — 20 unit tests over the gesture maths: the axis slop and its tie-break, progress clamping at the ends, edge resistance and the follow cap, and each way a release can or cannot commit (distance, velocity, sub-slop noise, degenerate widths).
• e2e/mobile.spec.ts — 8 Playwright tests at 390×844: swiping both ways, the pill tracking mid-drag (asserted on the live custom property), a short swipe springing back, a short flick committing, the end of the range holding, a vertical drag scrolling instead, a swipe off a card not opening it, and the tab buttons still working on their own.

Full suite green locally: 192 unit tests, 16 e2e tests, plus typecheck, lint and build.

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	klipcode	2f9017a	Commit Preview URL Branch Preview URL	Aug 20 2026, 09:28 PM