feat(apps): add mobile phone home-screen "Apps" tab#4
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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/appsstays crawlable, bookmarkable, and shareable.Reuses the existing catalog data +
AppIconcomponent unmodified (no new metadata model) — see blast radius below for whyAppIconitself was left untouched./appsgets its own prerendered SEO head (title/canonical/OG/Twitter), a CloudFront viewer-request rewrite rule, asitemap.xml+llms.txtentry, a PWA manifest shortcut, and acheck-distaudit 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 whyAppTilereusesAppIconcompletely 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/appsbranch is additive to the existing route switch.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— wiresViewTabsabove the home/apps views; page-title effect covers/apps.src/styles.css— phone-home-screen grid (auto-fitfixed-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—/appsgets 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— cleannpm run test:coverage— 190/190 unit tests pass, 99.65% line coveragenpm run build— clean build + prerender +check-distaudit passesnpm run test:a11y(Playwright, desktop + mobile projects) — 60/60 pass, axe-clean on/appsin dark AND light theme, keyboard operability verified/appsat mobile 390 and desktop 1280 — phone-home-screen read confirmed at mobile width, graceful desktop scale-up, no overflow, comfortable tap targets, consistent section spacingVersion bump
0.2.0→0.3.0(minor) — new user-facing capability (feat:), fully backwards compatible with the existing store/detail views and catalog format.