feat(v0.9): Phase 7 — CategoryTab sectioning

[jacuzzicoding]

Summary

Phase 7 of the v0.9.0-beta UI revamp — rebuild the category pages (fish, bugs, fossils, art, sea creatures) on top of the row primitives that landed in Phase 5.

The flat A–Z list is replaced by four ordered sections, each with an eyebrow header + count:

1. Leaving this month (warn-toned)
2. Available now (accent-toned)
3. Out of season (muted)
4. Already donated (muted)

Empty groups are hidden, so non-seasonal categories (fossils, art) collapse cleanly to Available now + Already donated. Donated items always go to Already donated regardless of season. December→January wrap is handled (next = currentMonth === 12 ? 1 : currentMonth + 1).

A new CategoryTab component owns the page header (Fraunces 44 <em>{donated}</em> of {total} {category} + X% complete + month note), per-tab search bar, sectioning, and expandedId (one row open at a time per tab). It reacts to highlightId by opening the matching row before ACCanvas's existing scroll-to effect fires, so jumps from Home shelves land on a pre-expanded row that then pulses.

Decisions

• Per-tab search lives inside CategoryTab so filtering recomputes the section grouping without re-flowing the page header. The header always reflects the full category total — narrowing the list shouldn't make progress look smaller than it is.
• Art still uses the existing DetailModal bottom-sheet. The plan's "row click toggles inline expand" applies to fish/bugs/fossils; art was on a different pattern in v0.8 and the v0.9 design preserves it. CategoryTab routes art clicks back up to ACCanvas via onItemSelect and renders no inline panel.
• ItemExpandPanel continues to render as a sibling of CollectibleRow inside .ac-list — the row primitives are locked from Phase 5 and the existing .ac-row-pulse keyframe + divider CSS depend on that arrangement.
• CategoryProgress retained for now. It's no longer referenced from ACCanvas, but the plan calls for retiring it during Phase 9's stats rebuild. Deleting it now would require touching that scope.

Test plan

• npm run build passes (zero TS errors)
• npm test passes (63/63)
• npm run lint clean
• Dev preview manual checks (Bea):
  • Each category tab shows the new header + sectioned groups for ACGCN/ACWW/ACCF/ACNL/ACNH
  • Donated items always live in "Already donated" — toggling moves the row across sections
  • In December, items only available in Dec land in "Leaving this month" (Jan-wrap)
  • Per-tab search filters across all sections and the empty-state shows when the query has no matches
  • Clicking a Home shelf card jumps to the right tab + opens + pulses the row
  • Fossils + Art tabs render only Available now / Already donated groups (no month note in header)

Closes Phase 7 of docs/v0.9-plan.md.

🤖 Generated with Claude Code

[vercel]

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:56am

[Copilot]

Pull request overview

Implements Phase 7 of the v0.9 UI revamp by moving category pages (fish/bugs/fossils/art/sea creatures) onto a new CategoryTab component that sections items into seasonally-aware groups and adds a new category header presentation.

Changes:

• Added CategoryTab to own category-page header UI, per-tab search UI, section grouping (Leaving / Available / Out of season / Already donated), and per-tab inline row expansion state.
• Refactored ACCanvas to delegate category rendering to CategoryTab while keeping existing highlight scroll/pulse behavior and art modal behavior.
• Appended Phase 7 styling for the new header and grouped sections, and updated docs/changelog to mark Phase 7 complete.

Reviewed changes

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

Show a summary per file

File	Description
src/index.css	Adds layout + typography styles for the new category header and section group headers/counts.
src/components/CategoryTab.tsx	New component implementing section grouping, per-tab search UI, and per-tab expandedId handling (with highlightId expansion for non-art).
src/components/ACCanvas.tsx	Replaces inline category list render with CategoryTab and removes now-unneeded local expansion/filtering logic.
docs/v0.9-plan.md	Marks Phase 7 as complete.
CLAUDE.md	Updates component inventory to include CategoryTab.
CHANGELOG.md	Documents Phase 7 additions/removals/decisions for v0.9.0-beta.

---

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

[jacuzzicoding]

Surfaced during review — filed #74 for follow-up (missing art.json for ACWW + ACCF).