code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Design pass: verify docs/theming on all frontend pages #44

New issue
Closed
opened 2026-04-22 13:28:19 +00:00 by PlasticDigits · 13 comments
PlasticDigits commented 2026-04-22 13:28:19 +00:00 (Migrated from gitlab.com)

Context (authoritative docs)

This pass verifies the Vite static frontend matches documented goals and patterns:

  • docs/frontend/design.md — static/IPFS deployability, wallet-native reads (indexer + RPC), no raw wei/WAD in product UI (AmountDisplay), human timestamps (UnixTimestampDisplay / formatUnixSec), bps as % (formatBpsAsPercent), no raw JSON fee blobs to users, clear chain indicator, no dark patterns, WarBow copy framed as adversarial PvP with rule explanations, accessibility baseline.
  • docs/frontend/timecurve-views.md — Simple · Arena · Protocol split, shared TimeCurveSubnav, single buy path / phase machine invariants, Simple layout contract (hero, countdown, buy card, ticker, “Want more?”).
  • docs/product/vision.md — transparent, agent-friendly, joy/participation-oriented UX; avoid opaque marketing.

Visual / theming baseline: frontend/src/index.css — “arcade” palette (greens, golds, hard shadows, panel gloss), RootLayout chrome (brand, nav, chain pill, wallet, footer with indexer + fee transparency).

Routing source: frontend/src/app/LaunchGate.tsx (post-launch index is / → TimeCurveSimplePage; optional /home → HomePage; pre-launch may show LaunchCountdownPage when VITE_LAUNCH_TIMESTAMP is set).

Global (applies to every page under RootLayout)

  • Typography & color: Readable contrast on index.css tokens; no stray inline colors that break the arcade system.
  • Navigation: All primary nav targets reachable; active state clear; brand + “TimeCurve live” badge consistent with product story.
  • Network / wallet: Chain name visible; wrong-network state obvious; connect flow discoverable; reduced-motion users get acceptable transitions (RootLayout + prefers-reduced-motion).
  • Data presentation: Token amounts use shared formatting; unix times not shown raw; bps/fee data human-readable; indexer/API errors don’t look like “broken” with no path to retry.
  • Trust / clarity: No dark patterns around fees, timers, or redemptions; external governance link behavior clear.
  • Footer: Indexer status + fee transparency panels match design language and don’t overflow small viewports.
  • Loading: Lazy route fallback (/art/loading-mascot.png + copy) is on-brand and accessible (aria-live as implemented).

LaunchCountdownPage (pre-launch only, full-screen; outside normal shell when gated)

  • Hero narrative matches launch positioning; countdown readable at a glance.
  • Mascot / art composition balanced (no clipping on mobile); logo and token art consistent.
  • If launch env missing in dev, document/test expectations separately—no confusing blank states.

HomePage at /home (and index / when LaunchGate uses HomePage — no VITE_LAUNCH_TIMESTAMP)

  • Hero imagery and cutouts support the “home” story; CTAs to TimeCurve and other surfaces are visually balanced.
  • Card grid / surfaceContent tiles match spec imagery and don’t look placeholder-heavy.
  • Mobile: stacked layout, touch targets, images don’t LCP-hammer without decoding/width/height discipline.

TimeCurveSimplePage at /timecurve (and post-launch default /)

  • PageHero: phase badge + lede match timecurve-views contract.
  • Countdown matches Arena mentally (single source of truth / wall-clock copy).
  • Buy card: min–max, slider, “You will get ≈ X CHARM”, CTA hierarchy; cooldown / disconnect / referral as secondary (not blocking primary CTA).
  • Activity ticker: last 3 buys; graceful indexer-down placeholder.
  • “Want more?” tiles: discoverability + live stat hints; links to Arena and Protocol.
  • No dense PvP/podium/feed on Simple (stays on Arena/Protocol per doc).

TimeCurvePage (Arena) at /timecurve/arena

  • Sub-nav: Simple / Arena / Protocol labels and active state.
  • WarBow framing: PvP, 2× rule, caps, guard/revenge/flag — copy matches design.md expectations.
  • Podiums, ladder, battle feed: readable; no raw contract integers in product-facing rows.
  • Mascot cutouts and panels feel cohesive with global theme (not visually “debug UI”).
  • Simulations / tx surfaces: el revert reasons or disabled states where appropriate (where implemented).

TimeCurveProtocolPage at /timecurve/protocol

  • Read-only operator tone; no write affordances.
  • All reads formatted per AmountDisplay / UnixTimestampDisplay / formatBpsAsPercent; no user-facing raw JSON for sinks (if any raw JSON exists, it must be dev-only or transformed).

RabbitTreasuryPage at /rabbit-treasury

  • UnderConstruction shell: on-brand, clear roadmap hint, imagery from card art consistent.
  • When fleshed out: epoch charts, faction standings, deposit/withdraw — reserve story honest per vision.md (no opaque yield marketing).

CollectionPage at /collection

  • Construction shell: NFT / collection theming; Leprechaun identity signal (per product docs) even if minimal.
  • Plan for gallery/filters/traits: agent-readable labels and hierarchy when implemented.

ReferralsPage at /referrals

  • UnderConstruction uses referrals card art; copy explains purpose without overpromising.

KumbayaPage at /kumbaya (ThirdPartyDexPage embed)

  • Framed DEX/iframe: title, context line, and external CTA match ecosystem voice.
  • Security copy: user understands third-party / external site boundary.
  • Empty or missing VITE_* DEX URL: clear configuration message (no blank iframe).
  • PageHero / hat-coin assets align with other surfaces.

SirPage at /sir (ThirdPartyDexPage embed)

  • Same checklist as Kumbaya: framing, security, config empty states, visual consistency with Sir card from surfaceContent.

Cross-page flows (smoke)

  • TimeCurveSubnav works from each of /timecurve, /timecurve/arena, /timecurve/protocol.
  • Post-launch: / → Simple; deep links to /home, secondary routes, and TimeCurve variants all render without layout break.
  • Favicon / OpenGraph (vite.config / index.html art paths) not broken in production build.

Out of scope for this issue

Implementation work is tracked separately; this issue is a review checklist against the docs above and current theming.

## Context (authoritative docs) This pass verifies the **Vite static frontend** matches documented goals and patterns: - [`docs/frontend/design.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/design.md) — static/IPFS deployability, wallet-native reads (indexer + RPC), **no raw wei/WAD in product UI** (`AmountDisplay`), **human timestamps** (`UnixTimestampDisplay` / `formatUnixSec`), **bps as %** (`formatBpsAsPercent`), **no raw JSON fee blobs** to users, clear **chain indicator**, no dark patterns, WarBow copy framed as **adversarial PvP** with rule explanations, accessibility baseline. - [`docs/frontend/timecurve-views.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/timecurve-views.md) — **Simple · Arena · Protocol** split, shared `TimeCurveSubnav`, single buy path / phase machine invariants, Simple layout contract (hero, countdown, buy card, ticker, “Want more?”). - [`docs/product/vision.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/product/vision.md) — **transparent**, **agent-friendly**, **joy/participation**-oriented UX; avoid opaque marketing. **Visual / theming baseline:** `frontend/src/index.css` — “arcade” palette (greens, golds, hard shadows, panel gloss), `RootLayout` chrome (brand, nav, chain pill, wallet, footer with indexer + fee transparency). **Routing source:** `frontend/src/app/LaunchGate.tsx` (post-launch index is `/` → `TimeCurveSimplePage`; optional `/home` → `HomePage`; pre-launch may show `LaunchCountdownPage` when `VITE_LAUNCH_TIMESTAMP` is set). --- ## Global (applies to every page under `RootLayout`) - [ ] **Typography & color:** Readable contrast on `index.css` tokens; no stray inline colors that break the arcade system. - [ ] **Navigation:** All primary nav targets reachable; active state clear; brand + “TimeCurve live” badge consistent with product story. - [ ] **Network / wallet:** Chain name visible; wrong-network state obvious; connect flow discoverable; reduced-motion users get acceptable transitions (`RootLayout` + `prefers-reduced-motion`). - [ ] **Data presentation:** Token amounts use shared formatting; unix times not shown raw; bps/fee data human-readable; indexer/API errors don’t look like “broken” with no path to retry. - [ ] **Trust / clarity:** No dark patterns around fees, timers, or redemptions; external governance link behavior clear. - [ ] **Footer:** Indexer status + fee transparency panels match design language and don’t overflow small viewports. - [ ] **Loading:** Lazy route fallback (`/art/loading-mascot.png` + copy) is on-brand and accessible (`aria-live` as implemented). --- ## `LaunchCountdownPage` (pre-launch only, full-screen; outside normal shell when gated) - [ ] Hero narrative matches launch positioning; countdown readable at a glance. - [ ] Mascot / art composition balanced (no clipping on mobile); logo and token art consistent. - [ ] If launch env missing in dev, document/test expectations separately—no confusing blank states. --- ## `HomePage` at `/home` (and index `/` when `LaunchGate` uses `HomePage` — no `VITE_LAUNCH_TIMESTAMP`) - [ ] Hero imagery and cutouts support the “home” story; CTAs to TimeCurve and other surfaces are visually balanced. - [ ] Card grid / `surfaceContent` tiles match spec imagery and don’t look placeholder-heavy. - [ ] Mobile: stacked layout, touch targets, images don’t LCP-hammer without `decoding`/`width`/`height` discipline. --- ## `TimeCurveSimplePage` at `/timecurve` (and post-launch default `/`) - [ ] `PageHero`: phase badge + lede match `timecurve-views` contract. - [ ] **Countdown** matches Arena mentally (single source of truth / wall-clock copy). - [ ] **Buy card:** min–max, slider, “You will get ≈ X CHARM”, CTA hierarchy; cooldown / disconnect / referral as secondary (not blocking primary CTA). - [ ] **Activity ticker:** last 3 buys; graceful indexer-down placeholder. - [ ] **“Want more?”** tiles: discoverability + live stat hints; links to Arena and Protocol. - [ ] **No** dense PvP/podium/feed on Simple (stays on Arena/Protocol per doc). ## `TimeCurvePage` (Arena) at `/timecurve/arena` - [ ] Sub-nav: Simple / Arena / Protocol labels and active state. - [ ] **WarBow** framing: PvP, 2× rule, caps, guard/revenge/flag — copy matches `design.md` expectations. - [ ] Podiums, ladder, battle feed: readable; no raw contract integers in product-facing rows. - [ ] Mascot cutouts and panels feel cohesive with global theme (not visually “debug UI”). - [ ] Simulations / tx surfaces: el revert reasons or disabled states where appropriate (where implemented). ## `TimeCurveProtocolPage` at `/timecurve/protocol` - [ ] Read-only operator tone; no write affordances. - [ ] All reads formatted per `AmountDisplay` / `UnixTimestampDisplay` / `formatBpsAsPercent`; **no** user-facing raw JSON for sinks (if any raw JSON exists, it must be dev-only or transformed). --- ## `RabbitTreasuryPage` at `/rabbit-treasury` - [ ] `UnderConstruction` shell: on-brand, clear roadmap hint, imagery from card art consistent. - [ ] When fleshed out: epoch charts, faction standings, deposit/withdraw — reserve story honest per `vision.md` (no opaque yield marketing). --- ## `CollectionPage` at `/collection` - [ ] Construction shell: NFT / collection theming; Leprechaun identity signal (per product docs) even if minimal. - [ ] Plan for gallery/filters/traits: agent-readable labels and hierarchy when implemented. --- ## `ReferralsPage` at `/referrals` - [ ] `UnderConstruction` uses referrals card art; copy explains purpose without overpromising. --- ## `KumbayaPage` at `/kumbaya` (`ThirdPartyDexPage` embed) - [ ] Framed DEX/iframe: title, context line, and external CTA match ecosystem voice. - [ ] **Security copy:** user understands third-party / external site boundary. - [ ] Empty or missing `VITE_*` DEX URL: clear configuration message (no blank iframe). - [ ] `PageHero` / `hat-coin` assets align with other surfaces. --- ## `SirPage` at `/sir` (`ThirdPartyDexPage` embed) - [ ] Same checklist as Kumbaya: framing, security, config empty states, visual consistency with Sir card from `surfaceContent`. --- ## Cross-page flows (smoke) - [ ] `TimeCurveSubnav` works from each of `/timecurve`, `/timecurve/arena`, `/timecurve/protocol`. - [ ] Post-launch: `/` → Simple; deep links to `/home`, secondary routes, and TimeCurve variants all render without layout break. - [ ] Favicon / OpenGraph (`vite.config` / `index.html` art paths) not broken in production build. --- ## Out of scope for this issue Implementation work is tracked separately; this issue is a **review checklist** against the docs above and current theming.
PlasticDigits commented 2026-04-22 15:06:56 +00:00 (Migrated from gitlab.com)

assigned to @PlasticDigits

assigned to @PlasticDigits
PlasticDigits commented 2026-04-23 13:43:58 +00:00 (Migrated from gitlab.com)

mentioned in commit 2bd58f4757

mentioned in commit 2bd58f4757d5828a6664c09fe90ad816ec798511
PlasticDigits commented 2026-04-23 13:44:05 +00:00 (Migrated from gitlab.com)

Issue #45 raster pack — ready for this design pass

All approved assets from #45 are now in-repo:

Notes for integration agents

  • Icons are PNG drafts; trace to SVG where the product spec calls for vector exports.
  • Transparent-target outputs were generated with #FF00FF chroma + local keying (see `scripts/replicate-art/generate_assets.py`); spot-check cutouts/icons for fringe if a screen shows magenta.
  • Reference anchors for generation were `style.png`, `token-logo.png`, and `sir-card.png` (Sir strip) in `frontend/public/art/`.

Pre-promotion drops stay under `frontend/public/art/pending_manual_review/` (mostly gitignored); the living checklist pointer is `pending_manual_review/ISSUE_45_CHECKLIST.md`.

## Issue #45 raster pack — ready for this design pass All **approved** assets from [#45](https://gitlab.com/PlasticDigits/yieldomega/-/issues/45) are now in-repo: - **Catalog (filename ↔ UX label, grouped by section):** [`frontend/public/art/issue45/README.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/issue45/README.md) (on \`main\`, commit \`2bd58f4\`) - **Binary paths:** same directory — \`frontend/public/art/issue45/issue45-*.{png,jpg}\` (52 rasters) **Notes for integration agents** - Icons are **PNG drafts**; trace to **SVG** where the product spec calls for vector exports. - **Transparent**-target outputs were generated with **#FF00FF** chroma + local keying (see \`scripts/replicate-art/generate_assets.py\`); spot-check cutouts/icons for fringe if a screen shows magenta. - **Reference anchors** for generation were \`style.png\`, \`token-logo.png\`, and \`sir-card.png\` (Sir strip) in \`frontend/public/art/\`. Pre-promotion drops stay under \`frontend/public/art/pending_manual_review/\` (mostly gitignored); the living checklist pointer is \`pending_manual_review/ISSUE_45_CHECKLIST.md\`.
PlasticDigits commented 2026-04-23 13:44:36 +00:00 (Migrated from gitlab.com)

Correction: the Sir-strip reference image path used in generation is frontend/public/sir.png (see DEFAULT_SIR_CARD_REF in generate_assets.py), not sir-card.png. Product card art in frontend/public/art/sir-card.png is separate.

**Correction:** the Sir-strip **reference image** path used in generation is `frontend/public/sir.png` (see `DEFAULT_SIR_CARD_REF` in `generate_assets.py`), not `sir-card.png`. Product card art in `frontend/public/art/sir-card.png` is separate.
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 1aca213266

mentioned in commit 1aca213266b4b8fa1e9f7370a88e9cd6cc8d6ac0
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 86066c8b7d

mentioned in commit 86066c8b7d5439f43e84aa50e227b795bf0d1952
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 54464a318d

mentioned in commit 54464a318d38b1ebf9861dcb2d473f14e3e19ffb
PlasticDigits commented 2026-04-24 05:11:53 +00:00 (Migrated from gitlab.com)

mentioned in issue #57

mentioned in issue #57
PlasticDigits commented 2026-04-24 05:12:19 +00:00 (Migrated from gitlab.com)

mentioned in issue #45

mentioned in issue #45
PlasticDigits commented 2026-04-24 05:13:27 +00:00 (Migrated from gitlab.com)

@brouie — design pass implementation landed in main at 1aca213 ("Merge branch 'feat/issues-44-45-design-pass' (issues #44 + #45)"). Leaving this issue open for your verification of the checklist below.

The issue #45 raster pack you flagged in your earlier note is now promoted into purpose-named folders under frontend/public/art/ and wired through the live UI as the implementation arm of this design pass.

What changed (high level)

  • Theming consistency. PageHero, PageBadge, IndexerStatusBar, TimeCurveSubnav now render the issue #45 status pictograms + scene backplates with a tuned white scrim so lede text stays readable over busy art (frontend/src/index.css).
  • Per-page wiring. HomePage, TimeCurve Simple/Arena/Protocol, LaunchCountdown, Rabbit Treasury, Collection, Kumbaya, Sir, error pages now use the issue #45 scenes, cutouts, and icon set instead of placeholders or reused Arena assets.
  • Custom cursors. .btn-primary / .btn-secondary use the issue #45 CTA cursor; .btn-secondary--critical uses the danger cursor; input[type="range"] uses grab/grabbing — all with native fallbacks per design.md a11y guidance.
  • Phase / status indirection. phaseBadge (Simple) and the Arena stateBadgeIconSrc derive their pictogram path from the same SaleSessionPhase value the timer/hero already uses, so no new "is the sale live?" branch was introduced (preserves issue #48 invariant + the WarBow #51 framing).
  • Docs + guardrails. docs/frontend/design.md documents the purpose-named layout; new docs/frontend/missing-art-assets.md enumerates slots the pack does not yet cover; .cursor/skills/yieldomega-guardrails/SKILL.md gained guardrail #12 so future agents update the consumer table in lock-step. Follow-up generation work tracked as #57.

How to verify

Run the local stack (scripts/start-local-anvil-stack.sh + cd frontend && npm run dev) and walk through the routes below, or spot-check via the production build (npm run build && npm run preview).

Global shell / RootLayout

  • Header: brand mark + "TimeCurve live" pill renders the green status-live pictogram (no missing-image icon).
  • Indexer status bar in footer shows status-indexer-{ok,bad} pictogram next to the line; "Fee router: …" / "Indexer: …" lines remain readable.
  • Lazy route fallback (/art/loading-mascot.png) still appears between routes; aria-live polite copy preserved.
  • Buttons: primary CTAs show the leprechaun arrow cursor; danger / critical actions show the spear cursor; range sliders show grab/grabbing on hover/active.

LaunchCountdownPage (gated build)

  • Set VITE_LAUNCH_TIMESTAMP in the future and reload /; the launch scene sits behind the countdown / mascot / lede (no z-index inversion that obscures text).
  • Mobile portrait: scene crops cleanly; hero copy not clipped.

HomePage at /home (and / when no VITE_LAUNCH_TIMESTAMP)

  • Hero <picture> swaps home-hero-mobile.jpg ↔ home-hero-desktop.jpg at the documented breakpoint.
  • Surface tiles in surfaceContent no longer feel placeholder-heavy (each tile has a coherent illustration).
  • Mobile: stacked layout, no LCP regression (images keep width/height/decoding).

TimeCurveSimplePage at /timecurve (and post-launch /)

  • PageHero shows phaseBadge pictogram matching the live phase (Loading / Pre-launch / Live / Timer expired / Sale ended) and the timecurve-simple scene backplate.
  • Buy card / countdown / activity ticker / "Want more?" tiles unchanged in behavior — only the scene + badge presentation evolved.
  • No PvP / podium widgets leaked onto Simple (the doc invariant).

TimeCurvePage (Arena) at /timecurve/arena

  • Arena hero uses bunny-podium-win mascot + timecurve-arena.jpg scene + stateBadgeIconSrc derived from the same saleActive/saleEnded/saleStartPending flags the page already used.
  • WarBow / podium / ladder copy unchanged from the #51 work — confirm "flag planted" hype still comes from warbowPendingFlag* onchain, not from indexer flag_planted.

TimeCurveProtocolPage at /timecurve/protocol

  • bunny-thinking mascot + timecurve-protocol.jpg neutral backdrop; no write affordances.
  • All reads still routed through AmountDisplay / UnixTimestampDisplay / formatBpsAsPercent.

TimeCurveSubnav (Simple / Arena / Protocol)

  • Each link shows its nav-{simple,arena,protocol}.png pictogram next to the label; active state visually distinct.
  • Test frontend/src/pages/timecurve/TimeCurveSubnav.test.tsx passes (already verified locally — accommodates the new <img> element).

RabbitTreasuryPage / CollectionPage / ReferralsPage / KumbayaPage / SirPage

  • Under-construction shells now use issue #45 scene + cutout per surface (Treasury → bunny-guarding, Collection → collection-gallery.jpg, etc.).
  • Kumbaya / Sir DEX framing unchanged; security copy + empty VITE_* URL state still clear.

Cross-page smoke

  • All sub-nav nav targets reachable; back/forward never leaves a stale scene mounted under the next page.
  • Favicon / OpenGraph (vite.config.ts imagePath) not broken in npm run build.
  • npm run -s test -- --run → 135 passing (added timeCurveSimplePhase iconSrc test + DOM-shape update for TimeCurveSubnav).

What is intentionally not in this PR

These slots are tracked separately in docs/frontend/missing-art-assets.md and the follow-up #57:

  • Default arcade pointer / disabled cursor / external-link cursor (today fall back to OS).
  • 24px-tight token glyphs and fee transparency icons.
  • Portrait wrong-network scene + sad-leprechaun indexer-down cutout.
  • OG square wiring + maskable PWA icons.
  • Filename typo: icons/status-prelanch.png will be renamed to status-prelaunch.png when #57's manifest regenerates that drop.

If anything in the checklist above does not match what you see in the live build, drop a note here and I'll iterate. Once you sign off, this issue can close.

— Cross-links: docs/frontend/design.md, docs/frontend/timecurve-views.md, frontend/public/art/README.md, .cursor/skills/yieldomega-guardrails/SKILL.md (guardrail #12).

@brouie — design pass implementation landed in `main` at `1aca213` ("Merge branch 'feat/issues-44-45-design-pass' (issues #44 + #45)"). Leaving this issue **open** for your verification of the checklist below. The issue [#45](https://gitlab.com/PlasticDigits/yieldomega/-/issues/45) raster pack you flagged in your earlier note is now promoted into purpose-named folders under [`frontend/public/art/`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/README.md) and wired through the live UI as the implementation arm of this design pass. ## What changed (high level) - **Theming consistency.** `PageHero`, `PageBadge`, `IndexerStatusBar`, `TimeCurveSubnav` now render the issue #45 status pictograms + scene backplates with a tuned white scrim so lede text stays readable over busy art (`frontend/src/index.css`). - **Per-page wiring.** HomePage, TimeCurve Simple/Arena/Protocol, LaunchCountdown, Rabbit Treasury, Collection, Kumbaya, Sir, error pages now use the issue #45 scenes, cutouts, and icon set instead of placeholders or reused Arena assets. - **Custom cursors.** `.btn-primary` / `.btn-secondary` use the issue #45 CTA cursor; `.btn-secondary--critical` uses the danger cursor; `input[type="range"]` uses grab/grabbing — all with native fallbacks per design.md a11y guidance. - **Phase / status indirection.** `phaseBadge` (Simple) and the Arena `stateBadgeIconSrc` derive their pictogram path from the same `SaleSessionPhase` value the timer/hero already uses, so no new "is the sale live?" branch was introduced (preserves issue #48 invariant + the WarBow #51 framing). - **Docs + guardrails.** `docs/frontend/design.md` documents the purpose-named layout; new `docs/frontend/missing-art-assets.md` enumerates slots the pack does not yet cover; `.cursor/skills/yieldomega-guardrails/SKILL.md` gained guardrail #12 so future agents update the consumer table in lock-step. Follow-up generation work tracked as **#57**. ## How to verify Run the local stack (`scripts/start-local-anvil-stack.sh` + `cd frontend && npm run dev`) and walk through the routes below, or spot-check via the production build (`npm run build && npm run preview`). ### Global shell / `RootLayout` - [ ] Header: brand mark + "TimeCurve live" pill renders the green `status-live` pictogram (no missing-image icon). - [ ] Indexer status bar in footer shows `status-indexer-{ok,bad}` pictogram next to the line; "Fee router: …" / "Indexer: …" lines remain readable. - [ ] Lazy route fallback (`/art/loading-mascot.png`) still appears between routes; `aria-live` polite copy preserved. - [ ] Buttons: primary CTAs show the leprechaun arrow cursor; danger / critical actions show the spear cursor; range sliders show grab/grabbing on hover/active. ### `LaunchCountdownPage` (gated build) - [ ] Set `VITE_LAUNCH_TIMESTAMP` in the future and reload `/`; the launch scene sits **behind** the countdown / mascot / lede (no z-index inversion that obscures text). - [ ] Mobile portrait: scene crops cleanly; hero copy not clipped. ### `HomePage` at `/home` (and `/` when no `VITE_LAUNCH_TIMESTAMP`) - [ ] Hero `<picture>` swaps `home-hero-mobile.jpg` ↔ `home-hero-desktop.jpg` at the documented breakpoint. - [ ] Surface tiles in `surfaceContent` no longer feel placeholder-heavy (each tile has a coherent illustration). - [ ] Mobile: stacked layout, no LCP regression (images keep `width`/`height`/`decoding`). ### `TimeCurveSimplePage` at `/timecurve` (and post-launch `/`) - [ ] `PageHero` shows `phaseBadge` pictogram matching the live phase (Loading / Pre-launch / Live / Timer expired / Sale ended) and the `timecurve-simple` scene backplate. - [ ] Buy card / countdown / activity ticker / "Want more?" tiles unchanged in behavior — only the scene + badge presentation evolved. - [ ] No PvP / podium widgets leaked onto Simple (the doc invariant). ### `TimeCurvePage` (Arena) at `/timecurve/arena` - [ ] Arena hero uses `bunny-podium-win` mascot + `timecurve-arena.jpg` scene + `stateBadgeIconSrc` derived from the same `saleActive`/`saleEnded`/`saleStartPending` flags the page already used. - [ ] WarBow / podium / ladder copy unchanged from the [#51](https://gitlab.com/PlasticDigits/yieldomega/-/issues/51) work — confirm "flag planted" hype still comes from `warbowPendingFlag*` onchain, not from indexer `flag_planted`. ### `TimeCurveProtocolPage` at `/timecurve/protocol` - [ ] `bunny-thinking` mascot + `timecurve-protocol.jpg` neutral backdrop; no write affordances. - [ ] All reads still routed through `AmountDisplay` / `UnixTimestampDisplay` / `formatBpsAsPercent`. ### `TimeCurveSubnav` (Simple / Arena / Protocol) - [ ] Each link shows its `nav-{simple,arena,protocol}.png` pictogram next to the label; active state visually distinct. - [ ] Test `frontend/src/pages/timecurve/TimeCurveSubnav.test.tsx` passes (already verified locally — accommodates the new `<img>` element). ### `RabbitTreasuryPage` / `CollectionPage` / `ReferralsPage` / `KumbayaPage` / `SirPage` - [ ] Under-construction shells now use issue #45 scene + cutout per surface (Treasury → `bunny-guarding`, Collection → `collection-gallery.jpg`, etc.). - [ ] Kumbaya / Sir DEX framing unchanged; security copy + empty `VITE_*` URL state still clear. ### Cross-page smoke - [ ] All sub-nav nav targets reachable; back/forward never leaves a stale scene mounted under the next page. - [ ] Favicon / OpenGraph (`vite.config.ts` `imagePath`) not broken in `npm run build`. - [ ] `npm run -s test -- --run` → 135 passing (added `timeCurveSimplePhase` iconSrc test + DOM-shape update for `TimeCurveSubnav`). ## What is intentionally not in this PR These slots are tracked separately in [`docs/frontend/missing-art-assets.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/missing-art-assets.md) and the follow-up [#57](https://gitlab.com/PlasticDigits/yieldomega/-/issues/57): - Default arcade pointer / disabled cursor / external-link cursor (today fall back to OS). - 24px-tight token glyphs and fee transparency icons. - Portrait wrong-network scene + sad-leprechaun indexer-down cutout. - OG square wiring + maskable PWA icons. - Filename typo: `icons/status-prelanch.png` will be renamed to `status-prelaunch.png` when #57's manifest regenerates that drop. If anything in the checklist above does not match what you see in the live build, drop a note here and I'll iterate. Once you sign off, this issue can close. — Cross-links: [`docs/frontend/design.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/design.md), [`docs/frontend/timecurve-views.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/timecurve-views.md), [`frontend/public/art/README.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/README.md), [`.cursor/skills/yieldomega-guardrails/SKILL.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/.cursor/skills/yieldomega-guardrails/SKILL.md) (guardrail #12).
PlasticDigits commented 2026-04-24 06:29:22 +00:00 (Migrated from gitlab.com)

mentioned in issue #60

mentioned in issue #60
PlasticDigits commented 2026-04-24 08:18:43 +00:00 (Migrated from gitlab.com)

mentioned in issue #62

mentioned in issue #62
PlasticDigits commented 2026-04-28 03:22:18 +00:00 (Migrated from gitlab.com)

Due to design changes, this checklist is out of date - closing.

Due to design changes, this checklist is out of date - closing.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-04-28 03:22:18 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega#44
No description provided.