Polish discover v0.1: mobile UX, per-section retry, and client caching

[badjoke-lab]

Motivation

• Stabilize mobile layouts (380/480/767) and remove horizontal scroll while keeping existing styling and section order.
• Surface additive limited-state messaging per section without replacing empty/error states.
• Harden per-section fetching with retry UX, abort/ignore stale responses, and short-lived client caching to reduce unnecessary network churn.

Description

• Added shared discover primitives in components/discover/sections/shared.tsx: a short-lived in-memory cache (60s), enhanced fetchDiscover with cacheKey/ttl/signal/force, consistent skeleton sizing, LimitedDataNote with optional details disclosure, and time helpers (formatTimeLabel/formatTimeTitle).
• Activity Feed: per-tab cache key (activity:<tab>:<limit>), abort controller for stale requests, ARIA tab semantics and keyboard navigation, truncation/line-clamp fixes, retry button disabled state + 300ms debounce, and additive limited note rendering. (see ActivityFeedSection.tsx).
• Stories: abort controllers for auto/monthly, tab-specific cache keys (stories:auto, stories:monthly), retry debounce and disabled state per tab, modal accessibility (focus trap, ESC, close aria-label), keyboard tab switching, and truncation/clamping on mobile cards. (see StoriesSection.tsx).
• Featured Cities: contained carousel to avoid page-level horizontal scroll, snap-mandatory sizing (~1.2 cards visible), encoded map params, consistent skeleton height, and retry debouncing. (see FeaturedCitiesSection.tsx).
• Asset Explorer: separate list vs panel fetch lifecycles, panel abort handling, cache keys (assets:list, assets:panel:<asset>), pill truncation and max-width control, separate retry flows for list and panel, and additive limited note. (see AssetExplorerSection.tsx).
• Trending & Verification Hub: section-level caching for trending, row truncation to avoid overflow, larger tap targets for verification accordion on mobile, and preserved section content/order. (see TrendingCountriesSection.tsx, VerificationHubSection.tsx).

Testing

• Ran lint with npm run lint and verified no new lint errors introduced; warnings unchanged from baseline (passed).
• Built production artifacts with npm run build and observed a successful build (pages compiled and static generation completed).
• Executed npm run test:stats; most unit checks passed but the suite failed in CI environment due to an unrelated module resolution issue in generated .tmp-tests (alias import in test harness) not caused by discover changes.
• Launched the dev server and captured screenshots at multiple viewports using Playwright (screenshots produced): artifacts/discover-380.png, artifacts/discover-480.png, artifacts/discover-768.png, artifacts/discover-1280.png to validate no horizontal page scroll and layout stability on 380/480.
• Automated retry/button state, aborts, and cache behavior validated locally by exercising tabs and rapid retry clicks to confirm disabled retry state and no duplicate network storms.

---

Codex Task

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
cryptopaymap-v2	Building	Preview, Comment	Feb 25, 2026 3:22pm