feat(mobile): phone shell, step 4 (reading drawer, app bridge), tabs and chips, three phone fixes

[tsahimatsliah]

Step 4 of the phone shell plan (Storybook, Mobile UX / 10. The build): 4.1 the reading drawer and 4.2 the bridge behaviours. Steps 0 to 3 are on main (#6765, #6767, #6801, #6813, #6826, #6852, #6855).

The native half is dailydotdev/ios claude/reading-drawer. Every message here is silent until a wrapper registers its handler, so the mobile web and today's app builds are unchanged.

4.1 The reading drawer (chapter 6b)

Inside the app, Read keeps the member on the post. The app opens the article behind the web view, and the post page sinks into a drawer at the bottom, as X does.

• Built on scroll. The drawer is the post page itself, under a see-through band. Its four heights (bar, card, post, full) are scroll positions, so pulling the drawer up is scrolling the post.
• The capsule stays where it stands. Close, the domain with the page menu (back, forward, copy link, open in browser) and reload ride 10px above the drawer.
• Reading folds the drawer. Reading down the article folds the title line away; a nudge up brings it back. A tap on the title or on the dimmed article moves between card and post.
• Back closes the drawer before it leaves the post. The drawer owns one history entry, so this covers the top bar's back, Android back and Escape. The router never sees that entry.
• Touches above the drawer go to the article, except over our own sheets, menus, dialogs and toasts.
• Opt-out. "Open links in the app" in Appearance is a client-only flag, shown only inside an app that supports reading. When off, Read opens the link as before.

4.2 Bridge behaviours (chapter 8)

• Haptics: a light impact on a tab change, an upvote and a bookmark, and a success one when the streak goes up. iOS uses the handler; the Android app uses navigator.vibrate.
• Pull to refresh: the wrappers call window.dailyNative.refresh(), which refetches what is on screen and answers when done, instead of reloading the page.
• Status bar: light over a cover page.
• Reduce Transparency: the floating material turns solid. The app mirrors the setting as a class; browsers answer the media query.
• Android back contract: window.dailyNative.back() closes the drawer or the top sheet first and reports whether it used the press. nav-state tells the wrapper where the page is. Android has no bridge yet; DailyAndroid is the contract it will implement.

useBookmarkPost gained three type fixes the strict check asks for once the file is touched. They change no behaviour.

Measuring it

Chapter 6b's metric is the share of article opens that end with a reaction or a return to the post.

• open reading drawer fires when Read opens the drawer.
• close reading drawer fires when it closes, with duration_ms (the time on the article) and closed_by: close, back, link or leave.
• Every event the post page logs while the drawer is open carries reading_drawer: true, so an upvote, bookmark or comment made while reading can be told apart from one made on the post.

The domain capsule above the drawer now takes the domain's width instead of filling the row.

Also in this PR: three small phone fixes

These were separate PRs (#6897, #6898, #6902), folded in so there is one web PR to review.

• Read no longer throws. A Read click from a post page threw an uncaught reading 'pages' error when a cached feed had never loaded; those feeds are skipped (useOnPostClick, with a spec).
• Back after saving an edit. Saving a post edited from its own post page now steps back to that post, instead of leaving the history as post, post (posts/[id]/edit.tsx, previousShellPath in shellNav, with a spec).
• New squad explains itself on phones. The one-line explanation is back under the top bar on /squads/new; the title and the illustration stay desktop-only.

Also in this PR: tabs and chips on every phone row

Tabs switch to content that is different altogether; chips narrow the list the page already holds (Storybook chapter 4h). Phones only; tablet and desktop keep their navbars and buttons (checked at 768 and 1280px).

• Tabs (ShellRow + Segments): a 48px row with a hairline, 15px labels, bold when lit and medium otherwise. Every label reserves its bold width, so lighting a tab never moves the row (label positions measured identical before and after a switch). A 32 × 3px bar slides to the tapped tab. Equal widths while every tab fits, scroll otherwise.
• Tab with more choices: the lit tab shows a 12px chevron after its label (hung in the tab's padding, so nothing moves); a tap on the lit tab opens its sheet. Happening now's sheet holds its channels; For you's and each custom feed's sheet holds the order (Recommended, By date, when sorting is on) and Feed settings, with the You drawer's filter icon.
• Home row: no filter icon or sort menu any more (Feed settings stays in the You drawer). The plus for a new custom feed is a plain borderless button (38px target) pinned at the row's right; the tabs scroll under it and fade over their last 24px.
• Chips (ShellRow kind={ShellRowKind.Chips} + Chips): the Small button's shape, 32px with 10px corners, 14px medium, in a 48px row. Notifications and the Squads directory.
• Rows that drew their own buttons on phones now follow the rule: Messages (Chats, Requests) and Tools are tabs, Achievements' filters are chips.

Verified

• The iOS simulator, with the app built from claude/reading-drawer against this branch:
  • Read from the button and from the image;
  • the card, the fold while reading down and the unfold on a nudge up;
  • the title tap to the post and the tap on the dimmed article back to the card;
  • a drag down settling on the card, and pulling up past the top to the post page with its top bar;
  • Read again sinking the post back down;
  • the top bar's back and the close button both returning to the post as it was;
  • the page menu and its close.
• Pull to refresh: the app called the web layer and got true back, with no page reload.
• Not seen yet: haptics (the simulator has no Taptic Engine) and the Android side (there is no Android wrapper build).
• Specs for the bridge messages with a fake handler, and for the drawer with a fake bridge: opens instead of following the link, shows the reported page, back closes it first, and Read stays a plain link without the bridge.
• Strict type check on changed files, the webapp type check, shared 525 suites and webapp 82 suites all pass.

🤖 Generated with Claude Code

Preview domain

https://claude-mobile-step4.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
daily-webapp	Ready	Preview	Oct 16, 2026 7:40am UTC
storybook	Ready	Preview	Oct 16, 2026 7:40am UTC