Skip to content

feat(apps): add mobile phone home-screen "Apps" tab#4

Merged
MichaelTaylor3d merged 1 commit into
mainfrom
feat/apps-home-screen-tab-51
Jul 5, 2026
Merged

feat(apps): add mobile phone home-screen "Apps" tab#4
MichaelTaylor3d merged 1 commit into
mainfrom
feat/apps-home-screen-tab-51

Conversation

@MichaelTaylor3d

Copy link
Copy Markdown
Contributor

Summary

Adds a top-level Apps tab that renders the curated dApp catalog as a phone-home-screen icon grid — rounded app icons + short name labels, tap an icon to open the dApp directly (a small "i" affordance opens the existing detail page). Mobile shows the icons in a comfortable, tap-friendly grid that reads like a real phone home screen; desktop scales the same grid up, clustered/centered rather than stretched full-width. A labelled Store/Apps view-tabs nav switches between the existing store shelf and the new tab; both are real routed pages (/ and /apps), so /apps stays crawlable, bookmarkable, and shareable.

Reuses the existing catalog data + AppIcon component unmodified (no new metadata model) — see blast radius below for why AppIcon itself was left untouched. /apps gets its own prerendered SEO head (title/canonical/OG/Twitter), a CloudFront viewer-request rewrite rule, a sitemap.xml + llms.txt entry, a PWA manifest shortcut, and a check-dist audit entry, mirroring the existing per-app-page contract. i18n keys added across all 14 locales.

Closes DIG-Network/dig_ecosystem#51.

Blast radius (gitnexus, §2.0)

  • impact(AppIcon, upstream)CRITICAL, 9 impacted symbols across 7 execution flows / 4 modules (Store, Detail, Catalog, Components) — this is why AppTile reuses AppIcon completely unmodified and only re-skins it via CSS descendant selectors (.app-tile-icon-frame .app-icon), never touching the component itself.
  • impact(parseRoute, upstream) → LOW, 0 impacted (pure classifier, additive new "apps" route kind).
  • impact(App, upstream) → LOW, 1 impacted (its own entry point) — the new /apps branch is additive to the existing route switch.
  • New files (AppTile, ViewTabs, AppsHomeScreen) have no prior callers — zero regression surface on existing views, confirmed by the full existing test suite staying green.

Changes

  • src/lib/route.ts — new "apps" route kind (/apps), additive to the existing union.
  • src/components/AppTile.tsx, src/components/ViewTabs.tsx, src/features/apps/AppsHomeScreen.tsx — new components (tested, typed, i18n'd, a11y-labelled).
  • src/App.tsx — wires ViewTabs above the home/apps views; page-title effect covers /apps.
  • src/styles.css — phone-home-screen grid (auto-fit fixed-width tracks so a handful of icons cluster instead of stretching), rounder "squircle" icon framing, tab pill styling, mobile breakpoints.
  • scripts/prerender-apps.mjs / scripts/check-dist.mjs / scripts/build-catalog.mjs/apps gets its own prerendered SEO head, sitemap entry, llms.txt entry, and dist audit.
  • terraform/cloudfront-function.js — rewrites /apps/apps/index.html (same pattern as /app/<slug>).
  • public/site.webmanifest — Apps PWA shortcut.
  • src/i18n/messages/*.ts (all 14 locales) — new copy for the tabs + Apps page.
  • SPEC.md / README.md — document the new route + presentation.
  • tests/a11y/apps.spec.ts — new Playwright a11y/interaction suite (axe WCAG 2.2 AA, keyboard operability, tab switching, dark+light theme).

Test plan

  • npm run lint — 0 errors (4 pre-existing unrelated warnings)
  • npx tsc --noEmit — clean
  • npm run test:coverage — 190/190 unit tests pass, 99.65% line coverage
  • npm run build — clean build + prerender + check-dist audit passes
  • npm run test:a11y (Playwright, desktop + mobile projects) — 60/60 pass, axe-clean on /apps in dark AND light theme, keyboard operability verified
  • Manually screenshotted /apps at mobile 390 and desktop 1280 — phone-home-screen read confirmed at mobile width, graceful desktop scale-up, no overflow, comfortable tap targets, consistent section spacing

Version bump

0.2.00.3.0 (minor) — new user-facing capability (feat:), fully backwards compatible with the existing store/detail views and catalog format.

Add a top-level Apps tab that renders the curated dApp catalog as a
phone-home-screen icon grid — rounded app icons + name labels, tap an
icon to open the dApp directly (a small "i" affordance opens the
existing detail page). Mobile shows a 4-across grid that reads like a
real phone home screen; desktop scales the same grid up, clustered and
centered rather than stretched. A labelled Store/Apps view-tabs nav
switches between the existing store grid and the new tab, both routed
via a real page (/apps) so it stays crawlable and bookmarkable.

Reuses the existing catalog + AppIcon (unmodified, per its high
call-graph fan-out) — no new metadata model. /apps gets its own
prerendered SEO head (title/canonical/OG), a CloudFront rewrite rule,
a sitemap.xml + llms.txt entry, and a check-dist audit, mirroring the
existing per-app page contract. i18n keys added across all 14 locales.
@MichaelTaylor3d MichaelTaylor3d merged commit ca3edd2 into main Jul 5, 2026
5 of 6 checks passed
@MichaelTaylor3d MichaelTaylor3d deleted the feat/apps-home-screen-tab-51 branch July 5, 2026 02:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant