Add mobile More navigation

[Asherlc]

Summary

• add a first-class responsive web More destination for account settings, Breathwork, and Cycle tracking
• expose the same accessible destination on native mobile from every tab header while preserving the existing five-tab hierarchy
• cover both platforms with test-first navigation/page contracts and Storybook stories

Validation

• pnpm test — 948 files passed, 2 skipped; 14,666 tests passed, 21 skipped
• pnpm tsc --noEmit
• pnpm --dir packages/server typecheck
• pnpm --dir packages/web typecheck
• pnpm --dir packages/mobile typecheck
• pnpm lint:sandbox
• focused web tests — 8 passed
• focused mobile tests — 9 passed

pnpm lint:analytics-sql could not complete locally because dbt's ClickHouse connection to 127.0.0.1:8123 was refused. This PR does not touch analytics; CI will run that gate with its service dependency.

Fixes #2185

Summary by Sourcery

Introduce a shared More destination on web and mobile that aggregates secondary tools like account settings, Breathwork, and Cycle tracking, and wire it into each platform’s primary navigation.

New Features:

• Add a More screen to the mobile app that links to account settings, Breathwork, and Cycle tracking with accessible native navigation.
• Add a More page and /more route to the web app that surfaces account settings, Breathwork, and Cycle tracking as named destinations.
• Expose a More entry in the web header navigation and mobile header actions so the new destination is reachable from all primary tabs and responsive layouts.

Enhancements:

• Extend mobile and web navigation tests plus Storybook stories to cover the new More destinations and their links.
• Document the test-driven plan and design for the new mobile More navigation behavior.

---

Summary by cubic

Adds a first-class More destination on web and native mobile to unify access to Account & settings, Breathwork, and Cycle tracking while keeping the five-tab layout (Fixes #2185). Also records a CI incident note about cancelled exact-head workflows.

• New Features

  • Web: added /more route and MorePage with accessible links to Settings, Breathwork, and Cycle; added “More” to AppHeader navigation.
  • Mobile: added global “More” header action next to Alerts; replaced Today-only Settings shortcut; added more screen with accessible links.
  • Tests: added focused unit tests for web header/page and native tab header/screen.
  • Stories: added Storybook stories for web MorePage and mobile MoreScreen, and ensured More links are visible.
  • Routing: used existing @tanstack/react-router and expo-router without new navigation dependencies.

• Bug Fixes

  • Tests: stabilized mobile link queries by using exact labels instead of dynamic regex.

^{Written for commit dc73050. Summary will update on new commits.}

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Warning

Review limit reached

@Asherlc, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 18 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 384ad988-83e9-4ae7-b676-4deed03f63ee

📥 Commits

Reviewing files that changed from the base of the PR and between a11b457 and dc73050.

📒 Files selected for processing (16)

• docs/production-incident-baseline.md
• docs/superpowers/plans/2026-07-29-mobile-more-navigation.md
• packages/mobile/app/(tabs)/_layout.test.tsx
• packages/mobile/app/(tabs)/_layout.tsx
• packages/mobile/app/_layout.tsx
• packages/mobile/app/more.stories.tsx
• packages/mobile/app/more.test.tsx
• packages/mobile/app/more.tsx
• packages/web/src/components/AppHeader.stories.tsx
• packages/web/src/components/AppHeader.test.tsx
• packages/web/src/components/AppHeader.tsx
• packages/web/src/pages/MorePage.stories.tsx
• packages/web/src/pages/MorePage.test.tsx
• packages/web/src/pages/MorePage.tsx
• packages/web/src/routeTree.gen.ts
• packages/web/src/routes/more.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sourcery-ai]

Sorry @Asherlc, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[sourcery-ai]

Reviewer's Guide

Implements a shared "More" destination on web and mobile by adding a new /more route and page, wiring it into existing navigation (including mobile tab headers), and covering it with focused tests, Storybook stories, and documentation of the TDD plan.

Sequence diagram for mobile More navigation from tab header

sequenceDiagram
  actor User
  participant MobileApp
  participant TabHeader
  participant ExpoRouter
  participant MoreScreen

  User->>TabHeader: tap More button (accessibilityLabel More)
  TabHeader->>ExpoRouter: push("/more")
  ExpoRouter->>MobileApp: navigate to route /more
  MobileApp->>MoreScreen: render MoreScreen

  User->>MoreScreen: tap destination link
  alt Account_and_settings
    MoreScreen->>ExpoRouter: push("/settings")
  else Breathwork
    MoreScreen->>ExpoRouter: push("/breathwork")
  else Cycle_tracking
    MoreScreen->>ExpoRouter: push("/cycle")
  end

Loading

File-Level Changes

Change	Details	Files
Add a global More entry point to mobile navigation and register the native More screen.	Replace the tab layout headerRight to render a shared headerActions component that includes Alerts and a More icon button routing to /more from every tab header. Remove the Today-only Settings shortcut from the index tab header in favor of the global More action. Register a new Stack.Screen named "more" in the root app stack with an appropriate title. Create the MoreScreen React Native component exposing three Pressable destinations for Settings, Breathwork, and Cycle tracking with accessible link semantics and styling. Add unit tests to verify the global header More button pushes /more and that each MoreScreen destination navigates to the correct route. Add a Storybook story for the mobile More screen with a fullscreen background wrapper.	packages/mobile/app/(tabs)/_layout.tsx packages/mobile/app/(tabs)/_layout.test.tsx packages/mobile/app/_layout.tsx packages/mobile/app/more.tsx packages/mobile/app/more.test.tsx packages/mobile/app/more.stories.tsx
Introduce a web More page at /more and integrate it into primary navigation with routing, tests, and Storybook coverage.	Add a More nav item pointing to /more in the main AppHeader navigation and ensure it appears in the responsive menu. Update the AppHeader test to assert the presence of More links in the mobile navigation menu and validate they link to /more. Create a MorePage component that uses PageLayout and renders three TanStack Router Links to /settings, /breathwork, and /cycle with descriptive text and semantic markup. Add a unit test for MorePage that verifies the heading and that each destination link renders with the expected href. Create a Storybook story for MorePage using an in-memory TanStack Router setup with stub routes for the three destinations. Add a file route definition for /more and regenerate the TanStack routeTree to register the new route in type-safe route maps.	packages/web/src/components/AppHeader.tsx packages/web/src/components/AppHeader.test.tsx packages/web/src/components/AppHeader.stories.tsx packages/web/src/pages/MorePage.tsx packages/web/src/pages/MorePage.test.tsx packages/web/src/pages/MorePage.stories.tsx packages/web/src/routes/more.tsx packages/web/src/routeTree.gen.ts
Document the TDD plan and design rationale for the new More navigation.	Add a superpowers plan document describing goals, behavior, scope, design choices, test strategy, file structure, and task checklist for implementing the shared More destination on web and mobile.	docs/superpowers/plans/2026-07-29-mobile-more-navigation.md

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#2185	On responsive web, add a primary navigation entry for a "More" destination that links to a /more page exposing Settings/account, Breathwork, and Cycle tracking as clearly labeled links.	✅
#2185	On native mobile, provide a consistent global "More" entry (without changing the five-tab hierarchy) that routes to a /more screen exposing Settings/account, Breathwork, and Cycle tracking with appropriate navigation and accessibility semantics.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

Mobile Preview

Scan to open on device:

Channel	pr-2300
Deep Link	dofek://preview/pr-2300
Commit	766a915

To test on device:

1. Build and install the preview client: PREVIEW_CHANNEL=pr-2300 pnpm expo prebuild --clean -p ios
2. Or tap deep link on an existing preview build: dofek://preview/pr-2300

Each PR gets its own channel. Build a preview client with PREVIEW_CHANNEL=pr-{N} to test.

[github-actions]

Storybook previews for 766a915d are ready:

• Web Storybook
• Mobile Storybook

This comment updates automatically on each PR push.

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.

[qodo-code-review]

PR Summary by Qodo

Add shared “More” destination to web and mobile navigation

✨ Enhancement 🧪 Tests 📝 Documentation 🕐 40+ Minutes

AI Description

• Add a first-class /more destination on web with accessible links to key secondary tools.
• Add a global “More” header action on mobile tabs plus a new More screen.
• Lock navigation + accessibility contracts with unit tests and Storybook stories.

Diagram

graph TD
  WebHeader["Web AppHeader"] --> WebRoute["Web route /more"] --> WebMore["Web MorePage"] --> Dest["Destinations: Settings/Breathwork/Cycle"]
  MobHeader["Mobile Tabs header"] --> MobMore["Mobile MoreScreen"] --> Dest

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Add a 6th “More” bottom tab on mobile

• ➕ Very discoverable; consistent with common mobile navigation patterns
• ➕ Avoids adding header actions
• ➖ Violates the existing five-tab domain hierarchy requirement
• ➖ Consumes a primary slot for a secondary destination bucket

2. Use a modal/bottom-sheet More menu on mobile (no new route)

• ➕ Fast access without additional screen in the router
• ➕ Keeps users in-context without navigation transitions
• ➖ Harder to deep-link/share and test via route contracts
• ➖ More work to ensure accessibility semantics are consistent

3. Create a shared cross-platform navigation metadata package

• ➕ Single source of truth for destination labels/routes
• ➕ Reduces duplication if many shared destinations are added later
• ➖ Adds abstraction overhead for just three links
• ➖ Router contracts differ (TanStack vs Expo), reducing reuse value

Recommendation: Current approach is the best fit: a dedicated /more destination on both platforms plus a global mobile header action preserves the five-tab structure, enables deep linking, and keeps the implementation lightweight. A shared navigation package or a modal menu would add complexity without clear payoff for only three destinations.

Files changed (15) +506 / -16

Enhancement (6) +216 / -16

_layout.tsxMobile tabs: add global “More” header action beside Alerts +17/-16

Mobile tabs: add global “More” header action beside Alerts

• Replaces the headerRight implementation with a shared header action container that always renders Alerts and a new More button. Removes the Today-only Settings shortcut to keep navigation consistent across tabs.

packages/mobile/app/(tabs)/_layout.tsx

_layout.tsxRegister “more” screen in the mobile Stack with title +6/-0

Register “more” screen in the mobile Stack with title

• Adds a Stack.Screen entry for the new more route. Ensures the screen has a proper navigation title (“More”).

packages/mobile/app/_layout.tsx

more.tsxAdd native More screen with three destination links +132/-0

Add native More screen with three destination links

• Creates a new MoreScreen listing Account & settings, Breathwork, and Cycle tracking. Uses accessible Pressables (role=link) and pushes via Expo Router, with icons hidden from screen readers.

packages/mobile/app/more.tsx

AppHeader.tsxWeb header: add “More” to primary navigation items +1/-0

Web header: add “More” to primary navigation items

• Adds a new nav item entry pointing to /more. This makes the destination visible in responsive navigation alongside existing sections.

packages/web/src/components/AppHeader.tsx

MorePage.tsxAdd web MorePage listing account/settings, breathwork, and cycle links +54/-0

Add web MorePage listing account/settings, breathwork, and cycle links

• Introduces a MorePage built on the shared PageLayout component. Renders an accessible nav list of three destinations with consistent titles and descriptions.

packages/web/src/pages/MorePage.tsx

more.tsxAdd TanStack file route for /more +6/-0

Add TanStack file route for /more

• Creates the /more file route and wires it to render MorePage. Enables direct routing and linking to the new destination.

packages/web/src/routes/more.tsx

Tests (4) +107 / -0

_layout.test.tsxTest: require global “More” header action to navigate to /more +8/-0

Test: require global “More” header action to navigate to /more

• Extends the tab layout unit test to assert a “More” button exists in the global header area. Verifies it routes via router.push("/more").

packages/mobile/app/(tabs)/_layout.test.tsx

more.test.tsxTest: More screen links are accessible and push correct routes +48/-0

Test: More screen links are accessible and push correct routes

• Adds unit tests asserting each destination is exposed via role="link" and a descriptive accessibilityLabel. Verifies each link pushes to the expected Expo Router path (/settings, /breathwork, /cycle).

packages/mobile/app/more.test.tsx

AppHeader.test.tsxTest: responsive nav menu includes “More” linking to /more +7/-0

Test: responsive nav menu includes “More” linking to /more

• Updates the AppHeader unit test to open the nav menu and assert the presence of “More” links. Verifies both instances point at /more.

packages/web/src/components/AppHeader.test.tsx

MorePage.test.tsxTest: MorePage exposes three named destination links +44/-0

Test: MorePage exposes three named destination links

• Adds a unit test that verifies the More page renders a heading and three links. Confirms each link points to the correct path (/settings, /breathwork, /cycle) using a mocked Link.

packages/web/src/pages/MorePage.test.tsx

Documentation (4) +162 / -0

2026-07-29-mobile-more-navigation.mdDocument TDD plan for cross-platform More navigation +88/-0

Document TDD plan for cross-platform More navigation

• Adds a test-first implementation plan for introducing a More destination on responsive web and native mobile. Defines scope, chosen design, test strategy, and concrete file/task breakdown for issue #2185.

docs/superpowers/plans/2026-07-29-mobile-more-navigation.md

more.stories.tsxStorybook: add mobile More screen story +25/-0

Storybook: add mobile More screen story

• Introduces a React Native Storybook entry for the More screen. Wraps the story in a full-screen background consistent with the app theme.

packages/mobile/app/more.stories.tsx

AppHeader.stories.tsxStorybook: include /more in AppHeader route fixtures +1/-0

Storybook: include /more in AppHeader route fixtures

• Adds /more to the list of storyPaths used by AppHeader stories. Enables previewing header behavior when the More route is active.

packages/web/src/components/AppHeader.stories.tsx

MorePage.stories.tsxStorybook: add routed MorePage story using TanStack memory history +48/-0

Storybook: add routed MorePage story using TanStack memory history

• Creates a Storybook story that mounts MorePage within a minimal TanStack Router setup. Stubs destination routes so link rendering can be reviewed in-context.

packages/web/src/pages/MorePage.stories.tsx

Other (1) +21 / -0

routeTree.gen.tsRegenerate TanStack route tree to include /more +21/-0

Regenerate TanStack route tree to include /more

• Updates the generated route tree to import and register the new more route. Extends route type mappings and rootRouteChildren to include /more.

packages/web/src/routeTree.gen.ts

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (1) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 186 rules

✅ Skills: fix-provider, write-tests, cloudflare

1. Uncited router behavior claim ✓ Resolved 📘 Rule violation § Compliance

Description

The new plan document states a behavior claim about TanStack Router and Expo Router having different
route contracts without an adjacent primary-source citation. This violates the documentation
requirement to cite third-party behavior claims, weakening auditability of the guidance.

Code

docs/superpowers/plans/2026-07-29-mobile-more-navigation.md[28]

+- Keep each platform's static route metadata local because TanStack Router and Expo Router use different route contracts; three labels do not justify a shared domain abstraction.

Relevance

●●● Strong

Docs compliance: team repeatedly accepts adding adjacent primary-source links for third‑party
behavior claims.

PR-#2052
PR-#2291
PR-#2047

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

PR Compliance ID 1505719 requires added/modified sentences in docs/ that describe third-party
behavior to include an adjacent primary-source link; line 28 makes such a claim without including a
citation on that line or immediately adjacent.

Rule 1505719: Cite third-party behavior claims in docs with primary sources
docs/superpowers/plans/2026-07-29-mobile-more-navigation.md[28-28]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
A sentence in a `docs/` file makes a third-party behavior claim (about TanStack Router vs Expo Router route contracts) without an adjacent primary-source citation.

## Issue Context
Compliance requires that third-party behavior claims in `docs/` include an adjacent hyperlink to an official/primary source.

## Fix Focus Areas
- docs/superpowers/plans/2026-07-29-mobile-more-navigation.md[28-28]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Blank Storybook destinations ✓ Resolved 🐞 Bug ⚙ Maintainability

Description

In MorePage.stories.tsx, the /settings, /breathwork, and /cycle routes are registered with
component: () => null, so clicking any destination link from the More page navigates to a route
that renders nothing and leaves the Storybook canvas empty. This affects reviewers validating the
new More destination via Storybook (Storybook-only impact, not production routing).

Code

packages/web/src/pages/MorePage.stories.tsx[R19-24]

+  const destinationRoutes = ["/settings", "/breathwork", "/cycle"].map((path) =>
+    createRoute({
+      getParentRoute: () => rootRoute,
+      path,
+      component: () => null,
+    }),

Relevance

●●● Strong

Direct precedent: accepted fixing Storybook router harness routes that rendered null and blanked the
canvas on navigation.

PR-#1958

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The story’s router explicitly registers the destination paths with a null component, while the
More page renders links to those same paths; navigating via those links will therefore render
nothing in the story.

packages/web/src/pages/MorePage.stories.tsx[12-31]
packages/web/src/pages/MorePage.tsx[4-52]
PR-#1958

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`packages/web/src/pages/MorePage.stories.tsx` defines `/settings`, `/breathwork`, and `/cycle` as routes whose `component` returns `null`. Since `MorePage` links navigate to those paths, clicking any destination in Storybook navigates to a blank screen.

## Issue Context
This is a Storybook router-harness issue (memory router). Production routes for these paths can still be fine; the story fixture is what becomes blank.

## Fix Focus Areas
- packages/web/src/pages/MorePage.stories.tsx[19-25]

## How to fix
Replace `component: () => null` for the destination routes with lightweight placeholder components (e.g., a small page that shows the destination name and a link back to `/more`), or render a shared stub layout so navigation never results in an empty canvas.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. routeTree.gen.ts adds as any 📘 Rule violation ≡ Correctness

Description

The generated MoreRoute entry introduces an as any cast, which weakens type safety and violates
the project’s prohibition on unsafe casts/any usage. This can mask real type errors in route
definitions and downstream navigation code.

Code

packages/web/src/routeTree.gen.ts[R125-129]

+const MoreRoute = MoreRouteImport.update({
+  id: '/more',
+  path: '/more',
+  getParentRoute: () => rootRouteImport,
+} as any)

Relevance

●● Moderate

Unclear if team changes generated routeTree output; file already contains other as any blocks, no
close precedent found.

PR-#2209

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The compliance checklist forbids introducing as any/any in changed TypeScript code. The PR adds
a new MoreRoute block that ends with } as any), which is a direct violation.

Rule 773514: Avoid unsafe as casts in TypeScript; prefer type narrowing
Rule 773537: Disallow use of the any type in TypeScript
packages/web/src/routeTree.gen.ts[125-129]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The PR introduces a new `as any` cast in the generated TanStack route tree, which violates the rules forbidding `as any` / `any` usage.

## Issue Context
The new `/more` route addition generated a new `MoreRoute` definition that ends with `} as any)`. If the generator cannot avoid this, the route-tree generation approach should be adjusted so adding new routes does not introduce additional `any` casts.

## Fix Focus Areas
- packages/web/src/routeTree.gen.ts[125-129]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.

[codereviewbot-ai]

🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews.