refactor(ui): rebuild the web UI around the mobile app language

[rabble]

Summary

• rebuild the shared app shell for a mobile/tablet-first web experience, including app-style header, bottom navigation, longer-lived mobile shell breakpoints, and shared page primitives
• migrate the core route families and creator/settings surfaces onto the new layout system with section-level navigation and denser mobile-friendly surfaces
• refresh the long-tail marketing/support pages so they inherit the new visual language instead of falling back to the old container-based styling
• define the app/marketing primitive CSS used by the migrated JSX and keep the mobile marketing header from overflowing

Related issue

Closes #497

Verification

• npm run test
• npx vitest run tests/brand/app-primitives-css.test.ts src/components/AppFooter.test.tsx
• Playwright screenshot smoke at phone/tablet widths:
  • /authenticity at 390x844
  • /proofmode at 820x1180
  • /u/not-a-real-user-for-pr-191 at 390x844
  • /video/not-a-real-video-for-pr-191 at 820x1180

Notes

• Branch was rebased onto current origin/main; the previous dirty/unmergeable state is resolved.
• The PR remains a GitHub draft until the author is ready to request review.

[cloudflare-workers-and-pages]

Deploying divine-web with    Cloudflare Pages

Latest commit:	59deee0
Status:	✅  Deploy successful!
Preview URL:	https://f26a36bb.divine-web.pages.dev
Branch Preview URL:	https://mobile-css-design-update-to.divine-web.pages.dev

View logs

[github-actions]

🚀 Preview Deployment

Last updated: 2026-07-23T00:02:14.212Z

Property	Value
Preview URL	https://5e325986.divine-web-fm8.pages.dev
Commit	59deee0
Branch	mobile_css_design_update_to_figma
Workflow run	#960

[rabble]

Self-review note: title marks this as [DRAFT], but the PR is not marked draft on GitHub, and the branch is unmergeable against current main. Please either convert it to a GitHub draft or update/resolve conflicts before requesting review.

[rabble]

Review note:

Blocking before this is ready for review:

The new layout primitives use semantic classes that are not defined in the PR. src/components/AppPage.tsx:30-31 renders app-page / app-page__inner, src/components/AppPage.tsx:50-58 uses app-page__header, app-eyebrow, app-title, app-subtitle, and src/components/AppSectionNav.tsx:22-30 uses app-chip-row, app-chip, app-chip-active. I checked the PR head CSS (src/index.css and src/styles/brand-utilities.css) and found no definitions for these classes, and neither CSS file is changed in the PR. Pages migrated to these primitives will render mostly unstyled beyond the small Tailwind max-width wrappers.

CI is green, but this broad UI draft still needs the missing styles plus mobile/tablet visual QA before it is reviewable.

[rabble]

Blocking before this is ready for review:

The new layout primitives use semantic classes that are not defined in the PR. src/components/AppPage.tsx:30-31 renders app-page / app-page__inner, src/components/AppPage.tsx:50-58 uses app-page__header, app-eyebrow, app-title, app-subtitle, and src/components/AppSectionNav.tsx:22-30 uses app-chip-row, app-chip, app-chip-active. I checked the PR head CSS (src/index.css and src/styles/brand-utilities.css) and found no definitions for these classes, and neither CSS file is changed in the PR. Pages migrated to these primitives will render mostly unstyled beyond the small Tailwind max-width wrappers.

CI is green, but this broad UI draft still needs the missing styles plus mobile/tablet visual QA before it is reviewable.

[rabble]

Codex PR status review — 2026-07-07

Status: Draft / needs work

What I checked:

• GitHub checks: all reported checks green (5)
• Merge state: DIRTY; review decision: REVIEW_REQUIRED; draft: yes
• Review threads: 0 unresolved; review states seen: COMMENTED
• Local baseline: npm run test on current main passed today (typecheck, eslint, Vitest 182 files / 1209 tests, production build).

Result:
Checks are green and no unresolved review threads remain, but this is still a draft and the branch is DIRTY. UI redesign work still needs visual QA before merge readiness.

(Posted by Codex on behalf of @rabble.)

[NotThatKindOfDrLiz]

@rabble I took over the draft branch and pushed the cleanup in 59deee0.

What changed:

• rebased the branch onto current origin/main, clearing the previous dirty/unmergeable state
• defined the missing marketing-*, app-surface*, app-tab-list, and --app-header-height primitives used by the migrated JSX
• strengthened tests/brand/app-primitives-css.test.ts so referenced app-* / marketing-* class names in source must have CSS definitions
• fixed the mobile marketing header overflow found during viewport QA by hiding long nav links on phone widths and keeping logo + CTA visible
• linked tracking issue refactor(ui): finish mobile-first web UI refactor #497 via Closes #497

Verification:

• npm run test locally: pass
• targeted npx vitest run tests/brand/app-primitives-css.test.ts src/components/AppFooter.test.tsx: pass
• Playwright screenshot smoke: /authenticity 390x844, /proofmode 820x1180, /u/not-a-real-user-for-pr-191 390x844, /video/not-a-real-video-for-pr-191 820x1180
• GitHub checks: CI, preview deploy, Semantic PR, Cloudflare Pages, CLA all green

Please review the takeover changes and mark the PR ready / merge when you are comfortable. I left it as a draft.

[NotThatKindOfDrLiz]

Approved after takeover. The undefined primitive regressions are fixed, the branch is rebased on current main, linked issue #497 is in place, local verification passed, and GitHub checks are green. PR remains draft for @rabble to review the takeover changes and mark ready when appropriate.

[rabble]

Review pass complete. Of the three UI drafts (#190, #191, #511) this is the strongest: small, clean, mergeable, recently rebased, brand-safe (no uppercase/gradient/lucide violations), with a primitives CSS test and screenshot verification.

One decision needed before this can land — sequencing:

• This rebuilds the shared shell/breakpoints/page primitives, the same territory as #190 (BottomNav/AppLayout) and partially moot if #511 showcase mode ships (it removes the web homepage feed this restyles).
• MarketingHeader.tsx is also touched by #511 — that's the source of #511's current merge conflicts.

Recommend: decide landing order explicitly. If #511 wins, this PR should rebase onto it and scope down to the app surfaces showcase mode keeps. If full mode survives, land this first as the base and close #190.

[rabble]

Clearing the stale review request on jalcine — no longer an active contributor on Divine. This PR is still a draft, so per the review runbook I'm not re-requesting a team; request @divinevideo/reviewers when you mark it ready. Note it already carries an approval from @NotThatKindOfDrLiz, and the branch hasn't moved since March.

[rabble]

Correcting my comment above: I could not actually remove the review request. GitHub rejects it with 422 Could not add requested reviewers to pull request on both the REST DELETE /pulls/{n}/requested_reviewers path and the GraphQL requestReviews(union: false) path.

Diagnosed it — it's not a permissions problem:

• Removing a different, non-requested collaborator from this same PR returns 200. Endpoint reachable, draft status isn't the blocker.
• Setting the reviewer set to a non-empty value succeeds.
• Only the call that would leave the PR with zero requested reviewers fails.

So the request can't be cleared without either putting someone else in that slot or changing the PR's state. Since this is a draft and the review runbook says not to request review on drafts, I'm not going to substitute a reviewer unilaterally. @rabble — your call between marking it ready (normal @divinevideo/reviewers flow then applies), naming a replacement reviewer, or closing this branch, which hasn't moved since March.

[rabble]

Review — refactor(ui): rebuild the web UI around the mobile app language

Feedback only; I haven't touched the branch (it's a draft, and the review runbook keeps drafts read-only).

Method: test-merged origin/mobile_css_design_update_to_figma into current main and ran the full CI gate on the merged result. The branch is fresher than the PR date suggests — rebased 2026-07-22 onto 38da5ffd, 3 commits ahead / 19 behind. It merges cleanly, tsc -p tsconfig.app.json is clean, and eslint reports 0 errors.

Blocking: brand guardrail fails

tests/brand/no-divine-miscasing.test.ts fails on the merged result — 237/238 files pass, this is the one:

src/pages/UniversalUserPage.tsx:415: diVine

description="We could not resolve this identifier into a diVine profile."

Confirmed introduced by this branch (it's a + line against main). Divine is the only shipped casing per AGENTS.md. One-word fix, but CI stays red until it lands.

New user-facing copy bypasses i18n

The PR adds hardcoded English through AppPageHeader:

File	Strings
HashtagDiscoveryPage.tsx	"Conversation clusters", "Hashtags", "Follow live topics, niches, and recurring community memes."
ListsPage.tsx	"Collect and curate", "Build collections, follow community curation, and move between creator workflows faster."
UniversalUserPage.tsx	"Profile lookup", "Finding user", "User not found", "Redirecting", + two descriptions

The locale-parity test only checks that the 20 locale files agree with en; it can't see hardcoded JSX, so this passes CI and ships English to every locale. UniversalUserPage is the sharpest case — the new header copy sits directly above t('universalUserPage.userNotFound'), so the same screen is half-translated.

Copy reads corporate

Against docs/brand/TONE_OF_VOICE.md (Candid Simplicity, "casual-direct, never corporate"), "Conversation clusters" and "move between creator workflows faster" are the wrong register. Compare the house examples: "Nothing looping yet. Go find your people." Worth a pass before these get keys.

The new guardrail test has a gap

Nice to see tests/brand/app-primitives-css.test.ts added alongside the primitives. One weakness: it validates with

!brandUtilitiesCss.includes(`.${className}`)

a substring check, so .app-page is satisfied by the presence of .app-page__inner alone. A word-boundary match (new RegExp(\.${className}\b)) would close it. Also, getReferencedPrimitiveClasses only scans lines literally containing className, so a class composed in a variable or split across lines by cn() is invisible to it.

Smaller

• AppPage.tsx, AppSectionNav.tsx, CreatorSectionNav.tsx, DiscoverySectionNav.tsx have no ABOUTME: header. 69 of 114 components carry one, so it's a convention rather than a rule — flagging since these are new shared primitives.
• .app-eyebrow correctly avoids text-transform: uppercase and sets letter-spacing: 0, which is the right call against the no-all-caps rule. Worth a comment in the CSS so nobody "fixes" it into an uppercase eyebrow later.

What's good

AppPage/AppPageHeader are cleanly typed, the width map is a sensible constraint, and moving pages onto shared primitives removes a lot of ad-hoc container mx-auto wrappers. Shipping a CSS guardrail test with new CSS primitives is the right instinct.

Summary: the miscasing is the only hard blocker; the i18n gap is the one I'd most want fixed before this reaches users, since it's the difference between the refactor being locale-neutral and it quietly regressing 19 locales' worth of surface area.