Feed browser: Mobile immersive feed #4

2026-10-20T08:21:48-06:00

calcazar commented

2026-10-20 08:21:48 -06:00

Milestone branch for Feed browser: Mobile immersive feed. Later tasks of the milestone add commits here.

xrdwb17xu: Full-screen snap feed with post slide variants

At 760px and below (AppShell measures .app, same breakpoint as the container query), the feed renders MobileFeed: a reel with scroll-snap-type: y mandatory, slides with scroll-snap-stop: always, each exactly the viewport height. Side panels are hidden at that width.
Image/video slides: media edge to edge, top and bottom fades, author and three-line text in white. Text-only slides: 31px serif quote with a crimson opening mark, author at the bottom.
The slide on screen gets is-cur (content rises, media 104% to 100%). Tracked with an IntersectionObserver and exposed via FeedView onCurrentChange for the dock task.
Last slide is a loading skeleton while another page can load (hasMore), holding the existing paging sentinel. Same posts, delete and paging as desktop; no new fetch paths.
The own-post menu and delete confirm are extracted to PostMenu and reused on slides with a frosted button.
One wheel step or swipe moves exactly one slide (Chromium sends short gestures back to the start slide otherwise).
New tokens for white and fades over media in globals.css; styles in src/styles/mobile.css.

Verified: typecheck, lint, vitest (235 tests), next build. Playwright on /dev/feed at 390x844, dark and light, with and without is_mobile/has_touch: all slide heights 844, wheel and touch steps go 0 to 1 to 2, own-post menu and confirm open, paging appends pages. 1440 and 820 still show the desktop and tablet grids.

CRM task: xrdwb17xu

Milestone branch for **Feed browser: Mobile immersive feed**. Later tasks of the milestone add commits here. ## xrdwb17xu: Full-screen snap feed with post slide variants - At 760px and below (AppShell measures `.app`, same breakpoint as the container query), the feed renders `MobileFeed`: a reel with `scroll-snap-type: y mandatory`, slides with `scroll-snap-stop: always`, each exactly the viewport height. Side panels are hidden at that width. - Image/video slides: media edge to edge, top and bottom fades, author and three-line text in white. Text-only slides: 31px serif quote with a crimson opening mark, author at the bottom. - The slide on screen gets `is-cur` (content rises, media 104% to 100%). Tracked with an IntersectionObserver and exposed via `FeedView` `onCurrentChange` for the dock task. - Last slide is a loading skeleton while another page can load (`hasMore`), holding the existing paging sentinel. Same posts, delete and paging as desktop; no new fetch paths. - The own-post menu and delete confirm are extracted to `PostMenu` and reused on slides with a frosted button. - One wheel step or swipe moves exactly one slide (Chromium sends short gestures back to the start slide otherwise). - New tokens for white and fades over media in `globals.css`; styles in `src/styles/mobile.css`. **Verified:** typecheck, lint, vitest (235 tests), `next build`. Playwright on `/dev/feed` at 390x844, dark and light, with and without is_mobile/has_touch: all slide heights 844, wheel and touch steps go 0 to 1 to 2, own-post menu and confirm open, paging appends pages. 1440 and 820 still show the desktop and tablet grids. CRM task: xrdwb17xu

calcazar added 1 commit 2026-10-20 08:21:48 -06:00

xrdwb17xu: Add the full-screen snap feed with media and quote slides on phones bf5e0ed475

calcazar added 1 commit 2026-10-20 08:24:47 -06:00

xrdwb17xu: Hide native video controls until play and move the author aside while a slide video plays adcd0cfd96

calcazar added 1 commit 2026-10-20 08:26:56 -06:00

v272vjg35: Swipe through a post's media on mobile slides b97dddfc4c

calcazar added 1 commit 2026-10-20 08:31:05 -06:00

rznb9xaih: Add double-tap to like and the featured experts slide to the phone feed bbd84f38a0

calcazar added 1 commit 2026-10-20 08:37:39 -06:00

qdpqut37t: Add the frosted bottom dock that likes and comments on the post on screen c94da3accd

calcazar added 1 commit 2026-10-20 08:42:34 -06:00

3syisgbyq: Add a reusable bottom sheet with the comments and composer sheets on the phone feed f4f3ae28fc