v0.9 Phase 5: CollectibleRow + ItemExpandPanel restyle by jacuzzicoding · Pull Request #70 · jacuzzicoding/animalcrossingwebapp

jacuzzicoding · 2026-05-03T23:40:32Z

Implements Phase 5 of the v0.9.0-beta plan (docs/v0.9-plan.md § Phase 5) — restyles the collectible row and inline expand panel to the Curator design and wires the data-row-id + highlight pulse used by Phase 6/8 jump-to.

What changed

CollectibleRow rebuilt to the v0.9 design:
- Category-tinted monogram glyph (Fraunces initials, 32×32, 1.5px border). Donated → fills glyph with chip color and inverts text.
- Donated rows: ● accent checkmark + line-through name with --border-strong decoration.
- Meta line (Inter 12) with · separators: habitat (fish), part (fossils), shadow (sea), italic basedOn (art), tabular bells ✦.
- Leaving soon / New this month pills using current-month wrap logic (Dec→Jan handled), suppressed when donated.
- Active-hours pill (sea creatures only) + animated chevron (0.18s rotation).
- Stamps data-row-id={item.id} on outer div; accepts highlighted, currentMonth, hemisphere props; adds .ac-row-pulse when highlighted.
ItemExpandPanel rebuilt as two-column grid (1fr 240px, padded so left column aligns with row text after the glyph). Left: 12-cell MonthGrid with current-month inset ring. Right: bells / shadow / active-hours / notes / donate button. Donate now lives only in the panel.
MonthGrid re-skinned to .ac-monthgrid / .ac-monthcell with current-month support.
Highlight + scroll wiring (Decision 10) — ACCanvas owns highlightId state plus an effect that, on change, expands the matching row, runs scrollIntoView({ behavior: 'smooth', block: 'center' }) on the next frame, then clears state after the 1.4s pulse so re-jumping retriggers. Phase 6/8 callers will wire to the setter.
Phase 5 CSS appended to src/index.css (.ac-row*, .ac-glyph, .ac-pill*, .ac-expand*, .ac-monthgrid / .ac-monthcell + states, .ac-stat*, .ac-note, .ac-donate-btn*, @keyframes ac-row-pulse, 980px collapse).
Category list now wraps rows in a single .ac-list rounded card with internal dividers (replaces the free-floating bordered rows + space-y-3).

Decisions

highlightId lives in ACCanvas, not App. Plan/spec says "App owns highlightId," but every Phase 5 caller (HomeTab in Phase 6, GlobalSearchDropdown in Phase 8, the category list itself) is rendered inside ACCanvas, so keeping the state local to ACCanvas is simpler. Promoting later is cheap if a caller ever lives above the router outlet.
Donate / undonate is panel-only. The design's row no longer has its own donate button. The row's onToggle prop is kept (optional) for back-compat with GlobalSearchResults, which Phase 8 replaces.
Time pill is sea-only. Our Fish/BugItem types use hours: number[], not a formatted time: string. Wiring fish/bug active-hours rendering needs a formatter — out of scope for Phase 5; revisit in v0.9.x alongside hours rendering.
Shadow size shown for sea creatures only, not fish — Fish has no shadow field. Issue Shadow size not displayed in any UI (fish + sea creatures) #59 partially addressed for sea creatures via the new stats stack; stays open for fish-specific data work.

Phase 4 follow-ups noticed (not fixed here)

The Phase 4 CHANGELOG section sits after Phase 5 in the file because of the prepend pattern; the existing Phase 1/2/3 entries are also out of strict chronological order. Worth a doc tidy when v0.9 lands.
GlobalSearchResults still uses the old per-row donate toggle pattern via the onToggle prop. Left intact since Phase 8 replaces this component wholesale.

Test plan

npm run build — ✅ passes (tsc + Vite build clean).
npm test — ✅ 59/59 passing.
npm run lint — ✅ clean (auto-fix applied a Prettier wrap).
Manual verification of the dev preview is recommended once Vercel posts the URL — focus on: glyph + meta render across all 5 categories, leaving/new pill logic at month boundary, expand panel two-column layout, month grid current-month ring.

🤖 Generated with Claude Code

Rebuilds the collectible row and inline expand panel to match the v0.9 Curator design (monogram glyph, meta line with separators, leaving/new pills, two-column expand with month grid + stats stack). Wires data-row-id and a highlightId pulse for the upcoming Phase 6/8 jump-to. Per-row donate toggle moves into the expand panel (matches the spec). MonthGrid re-skinned to .ac-monthgrid; category list wraps in .ac-list. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel · 2026-05-03T23:40:36Z

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

Project	Deployment	Actions	Updated (UTC)
animalcrossingwebapp	Ready	Preview, Comment	May 4, 2026 0:32am

jacuzzicoding · 2026-05-03T23:42:59Z

@codex[agent] Could you review this PR?

Codex · 2026-05-03T23:44:11Z

@codex[agent] Could you review this PR?

Checked development CI (latest run success) and this branch’s latest run is currently in-progress. Locally verified npm install, npm run lint, npm test, and npm run build are green on commit bcaa211.

chatgpt-codex-connector · 2026-05-03T23:44:20Z

To use Codex here, create a Codex account and connect to github.

Copilot

Pull request overview

Implements v0.9 Phase 5 UI restyle for the category item list: rebuilds CollectibleRow and the inline ItemExpandPanel to match the Curator design, updates MonthGrid styling/current-month highlighting, and introduces data-row-id + highlight/scroll scaffolding in ACCanvas for future jump-to flows.

Changes:

Rebuilds CollectibleRow markup (glyph/metadata/pills/chevron) and appends a new Phase 5 CSS block for rows, pills, expand panel, and month grid.
Re-skins MonthGrid to CSS-driven .ac-monthgrid/.ac-monthcell with optional current-month ring.
Refactors ItemExpandPanel into a two-column stats + availability layout; adds highlightId effect in ACCanvas for scroll/pulse.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/index.css	Adds Phase 5 styles for rows, pills, expand panel, and month grid (but missing `.ac-list`/`.ac-expand-section` rules).
src/components/shared/MonthGrid.tsx	Switches from Tailwind/inline styles to `.ac-monthgrid`/`.ac-monthcell` and adds `current` support.
src/components/ItemExpandPanel.tsx	Rebuilds panel layout and stats rendering; now uses MonthGrid current-month highlighting.
src/components/CollectibleRow.tsx	Rebuilds row UI with glyph initials, meta bits, month pills, and `data-row-id` stamp for jump-to.
src/components/ACCanvas.tsx	Wraps rows in `.ac-list`, adds `highlightId` state/effect, and threads highlighting/currentMonth into rows/panels.
CHANGELOG.md	Documents Phase 5 additions/decisions (currently references CSS selectors not actually present).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+          <div className="ac-row-name">
+            <span>{name}</span>
+            {checked && (
+              <span className="ac-row-checkmark" aria-label="donated">


+  const notes = itemNotes(item, category);
+  const cm = currentMonth ?? new Date().getMonth() + 1;
+  const shadow = isSeaCreature(item) ? item.shadow : undefined;
+  const time = isSeaCreature(item) ? item.time : undefined;


A bare <span> with aria-label is ignored by screen readers. Adding role="img" lets the implicit name surface for assistive tech. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ItemExpandPanel already renders sea-creature time in its own 'active hours' stat. Returning it from itemNotes caused the same string to appear twice in the row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…e expand panel - Add the missing .ac-list rule referenced by ACCanvas (single rounded surface; rows still divided by .ac-row border-bottom). - Add :focus-visible outline on .ac-row-main so keyboard users see focus. - Remove .ac-expand border-top — .ac-row already draws the seam, the pair was rendering as a 2px line. - When months are absent (fossils, art), collapse .ac-expand to a single column instead of leaving the side panel orphaned beside an empty 240px slot. - Add a minimal .ac-expand-section rule so the wrapper has a defined min-width inside the grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

jacuzzicoding · 2026-05-03T23:57:28Z

Addressed Copilot review comments 1, 2, 3, 5, 6, 8, 9 in commits b75b1f1, 52870f7, 9fc865c. Skipped #4 (nitpick) and #7 (resolved by #8 fix — visual check passes).

Bug: all items counted as spring in seasonal analytics #1 role="img" added to donated checkmark span (CollectibleRow.tsx)
feat(analytics): add Vercel Analytics integration #2 itemNotes no longer returns sea-creature time (utils.ts) — ItemExpandPanel already renders it as 'active hours'
feat(v0.5): add error banner and error state UI #3 / feat(v0.5): add Vitest test suite for store and utils #5 .ac-list rule added (rounded card surface, rows still divided by .ac-row border-bottom); .ac-expand-section is used in markup so a minimal rule was added
feat: add months availability data to fish and bug JSONs #6 .ac-expand collapses to a single column when months is empty (fossils, art) via .ac-expand-no-months modifier
fix(v0.6.1): restore source files deleted by bad v0.6.0 merge #8 border-top removed from .ac-expand — .ac-row border-bottom handles the seam, fixes the 2px doubled line
chore: merge development into main (v0.6.1 hotfix) #9 :focus-visible outline added to .ac-row-main so keyboard users get a focus indicator

npm run build, npm test (59/59), and npm run lint all green.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+
+function metaBits(
+  item: AnyItem,
+  category: CategoryId,


+  const time = isSeaCreature(item) ? item.time : undefined;
+


+  /** Kept for back-compat with callers; toggling now happens from inside the expand panel. */
+  onToggle?: () => void;


+  const shadow = isSeaCreature(item) ? item.shadow : undefined;
+  const time = isSeaCreature(item) ? item.time : undefined;


 ): string | undefined {
-  if (category === 'sea_creatures' || isSeaCreature(item))
-    return (item as SeaCreature).time;
+  if (category === 'sea_creatures' || isSeaCreature(item)) return undefined;


…prop Round 1 made itemNotes() return undefined for sea creatures, which broke DetailModal's notes block (it calls itemNotes(item) for the global-search detail view). Restore itemNotes' "give me the notes string for this item" contract — return time for sea creatures — and push the duplicate-render suppression into ItemExpandPanel where the duplicate actually exists (time is already rendered as the "active hours" stat). Also drop the dead onToggle prop from CollectibleRow and the GlobalSearchResults passthrough. Bea confirmed "click into modal is fine for now" — no inline donation toggle from global search. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

jacuzzicoding · 2026-05-04T00:32:11Z

Round 2 addressed:

feat(v0.5): add Vitest test suite for store and utils #5 — DetailModal sea creature time preserved. Restored itemNotes()'s contract (returns time for sea creatures); pushed the duplicate-render suppression into ItemExpandPanel where the dupe actually existed (time is already rendered as the 'active hours' stat).
feat(v0.5): add error banner and error state UI #3 — Dead onToggle prop removed from CollectibleRow, GlobalSearchResults, and the ACCanvas passthrough.

Skipped:

Bug: all items counted as spring in seasonal analytics #1 — Cosmetic (unused category param).
feat(analytics): add Vercel Analytics integration #2 / feat: add CSV export for donation data #4 — Bea confirmed showing the time pill on bug rows is desired behavior, not a regression. The isSeaCreature type-guard is technically misnamed since it now matches more than just sea creatures, but user-facing behavior is fine; rename deferred to tech debt.

Copilot AI review requested due to automatic review settings May 3, 2026 23:40

Copilot started reviewing on behalf of jacuzzicoding May 3, 2026 23:41 View session

Codex started work on behalf of jacuzzicoding May 3, 2026 23:43 View session

Repository owner deleted a comment from chatgpt-codex-connector Bot May 3, 2026

Codex finished work on behalf of jacuzzicoding May 3, 2026 23:44

Copilot AI reviewed May 3, 2026

View reviewed changes

jacuzzicoding and others added 3 commits May 3, 2026 19:56

fix(a11y): announce donated marker via role="img"

b75b1f1

A bare <span> with aria-label is ignored by screen readers. Adding role="img" lets the implicit name surface for assistive tech. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview May 3, 2026 23:57 View deployment

jacuzzicoding requested a review from Copilot May 4, 2026 00:08

Copilot started reviewing on behalf of jacuzzicoding May 4, 2026 00:09 View session

Copilot AI reviewed May 4, 2026

View reviewed changes

vercel Bot deployed to Preview May 4, 2026 00:32 View deployment

jacuzzicoding merged commit ff5ca29 into development May 4, 2026
3 checks passed

jacuzzicoding mentioned this pull request May 4, 2026

release: v0.9.0-beta #84

Merged

6 tasks

jacuzzicoding deleted the feature/v09-phase-5-rows branch May 4, 2026 23:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v0.9 Phase 5: CollectibleRow + ItemExpandPanel restyle#70

v0.9 Phase 5: CollectibleRow + ItemExpandPanel restyle#70
jacuzzicoding merged 5 commits into
developmentfrom
feature/v09-phase-5-rows

jacuzzicoding commented May 3, 2026

Uh oh!

vercel Bot commented May 3, 2026 •

edited

Loading

Uh oh!

jacuzzicoding commented May 3, 2026

Uh oh!

Codex AI commented May 3, 2026

Uh oh!

chatgpt-codex-connector Bot commented May 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jacuzzicoding commented May 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

jacuzzicoding commented May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		/** Kept for back-compat with callers; toggling now happens from inside the expand panel. */
		onToggle?: () => void;

		const shadow = isSeaCreature(item) ? item.shadow : undefined;
		const time = isSeaCreature(item) ? item.time : undefined;

Conversation

jacuzzicoding commented May 3, 2026

What changed

Decisions

Phase 4 follow-ups noticed (not fixed here)

Test plan

Uh oh!

vercel Bot commented May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jacuzzicoding commented May 3, 2026

Uh oh!

Codex AI commented May 3, 2026

Uh oh!

chatgpt-codex-connector Bot commented May 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jacuzzicoding commented May 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

jacuzzicoding commented May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented May 3, 2026 •

edited

Loading