feat(home): v0.9 Phase 6 — rebuilt HomeTab + ProgressMeter#72
Merged
Conversation
Adds segmented ProgressMeter (4 or 5 segments by gameId), rebuilt HomeTab with hero stat + month strip + leaving-soon / just-arrived shelves + latest donations card, and useJumpToRow hook wiring shelf/recent cards into ACCanvas's scroll-to + pulse highlight effect. Honors Locked Decisions 4 (sea in ProgressMeter for ACNL/ACNH) and 10 (scrollIntoView + .ac-row-pulse on jump). No version bump. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Phase 6 of the v0.9 UI revamp: rebuilds HomeTab and introduces a new segmented ProgressMeter, plus wiring for “jump to row + highlight” using ACCanvas’s existing highlightId scroll/pulse effect.
Changes:
- Add
ProgressMetercomponent (4–5 segments depending on game) withsegmentsForGamehelper + unit tests. - Rebuild
HomeTablayout (hero, month strip, leaving/arrived shelves, latest donations) and hook up shelf/recent clicks to navigate + highlight a target row. - Introduce
useJumpToRowhook and plumbgameId/hemisphere/setHighlightIdthroughACCanvas→HomeTab.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.css | Adds Phase 6 styles for ProgressMeter + rebuilt Home UI. |
| src/hooks/useJumpToRow.ts | New hook to navigate to a category and set highlightId on next frame. |
| src/components/progressMeterUtils.ts | Adds segmentsForGame helper for 4 vs 5 segment selection. |
| src/components/ProgressMeter.tsx | New segmented progress UI driven by segmentsForGame. |
| src/components/ProgressMeter.test.ts | Unit tests covering segmentsForGame behavior across games. |
| src/components/HomeTab.tsx | Full HomeTab rewrite + shelves/recent rows wired to jumpTo. |
| src/components/ACCanvas.tsx | Passes gameId, hemisphere, and setHighlightId into HomeTab. |
| docs/v0.9-plan.md | Marks Phase 6 complete. |
| CLAUDE.md | Updates repo structure notes to include new Phase 6 files. |
| CHANGELOG.md | Documents Phase 6 additions and decisions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| key={cat} | ||
| className="ac-meter-seg" | ||
| aria-label={`${label}: ${done} of ${total} donated`} |
Comment on lines
+212
to
+221
| const showSeasonalUI = seasonalCats.length > 0; | ||
|
|
||
| return ( | ||
| <div className="space-y-4"> | ||
| {/* Hero: Available this month */} | ||
| <div | ||
| className="rounded-[16px] border overflow-hidden" | ||
| style={{ borderColor: '#E7DAC4', backgroundColor: '#FFFDF6' }} | ||
| > | ||
| <div className="ac-home"> | ||
| {/* Hero */} | ||
| <section className="ac-hero"> | ||
| <div className="ac-eyebrow ac-eyebrow-accent"> | ||
| {showSeasonalUI ? `Available in ${monthName}` : `Your museum`} | ||
| </div> | ||
| {showSeasonalUI ? ( |
Comment on lines
+123
to
+158
| const avail: ShelfItem[] = []; | ||
| const leaving: ShelfItem[] = []; | ||
| const arrived: ShelfItem[] = []; | ||
|
|
||
| for (const cat of seasonalCats) { | ||
| const items = (data[cat] as AnyItem[]) ?? []; | ||
| for (const item of items) { | ||
| if (!item.months?.includes(currentMonth)) continue; | ||
| if (donated[item.id]) continue; | ||
| out.push({ | ||
| const months = itemMonths(item, cat, hemisphere); | ||
| if (!months || !months.includes(currentMonth)) continue; | ||
| const isDonated = !!donated[item.id]; | ||
| const entry: ShelfItem = { | ||
| id: item.id, | ||
| name: displayName(item, category), | ||
| category, | ||
| leavingSoon: !item.months.includes(nextMonth), | ||
| }); | ||
| name: displayName(item, cat), | ||
| category: cat, | ||
| months, | ||
| bells: | ||
| 'value' in item | ||
| ? ((item as FishType | BugItem | SeaCreature).value ?? null) | ||
| : null, | ||
| }; | ||
| avail.push(entry); | ||
| if (isDonated) continue; | ||
| if (!months.includes(nextMonth)) leaving.push(entry); | ||
| else if (!months.includes(lastMonth)) arrived.push(entry); | ||
| } | ||
| } | ||
|
|
||
| const stillNeededCount = avail.filter(a => !donated[a.id]).length; | ||
|
|
||
| const sortByName = (a: ShelfItem, b: ShelfItem) => | ||
| a.name.localeCompare(b.name); | ||
| leaving.sort(sortByName); | ||
| arrived.sort(sortByName); | ||
|
|
||
| void avail; | ||
| return { |
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
Phase 6 of the v0.9.0-beta UI revamp. Rebuilds the HomeTab and ships the new
ProgressMetercomponent, then wires Home shelf cards and the latest-donations row into the scroll-to + highlight effect that ACCanvas added in Phase 5.ProgressMeter(src/components/ProgressMeter.tsx) — segmented donation bar. 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (adds sea) for ACNL/ACNH. Each segment uses its category-tinted Meadow chip token and exposes a per-segmentaria-labellike "Fish: 12 of 40 donated". Pure helpersegmentsForGameextracted toprogressMeterUtils.tsand unit-tested.HomeTabrebuilt — hero stat with italic Fraunces accent number ("X creatures still to donate this month") + warn-italic aside ("N leaving soon"); ProgressMeter directly underneath; 12-cell month strip with current-month highlight; "Leaving end of {month}" warn-toned shelf; "Just arrived" accent shelf; latest-donations card. Shelf cards and recent rows firejumpTo(category, id)→ navigate + sethighlightIdso ACCanvas's existing effect scrolls the target row into view and adds.ac-row-pulse.useJumpToRowhook — reusable navigate + setHighlightId helper. Will also be used byGlobalSearchDropdownin Phase 8.Side benefit: ACNH home screen now correctly shows available fish/bugs for the current month — old HomeTab had a bug where the empty-state message showed for ACNH regardless of actual availability. Closes #71.
Decisions honored
ProgressMetersegment for ACNL/ACNH and as a 3rd seasonal shelf source. Identical gating to sidebar nav.highlightId→ effect callsscrollIntoView({ behavior: 'smooth', block: 'center' })and the.ac-row-pulsekeyframe plays for 1.4s. The hook clearshighlightIdtonullfirst so re-jumping to the same id retriggers the pulse.--accent,--warn,--chip-*etc.); no Tailwind design tokens, no Varela Round.Notable tradeoffs:
Test plan
npm run build— passes, zero TS errorsnpm test— 63 tests pass, including 4 new tests forsegmentsForGame(ACGCN 4-seg, ACWW art-omitted, ACNH 5-seg, ACNL 5-seg drops sea when totals are 0)npm run lint— clean (0 warnings, max-warnings 0)Screenshots
Bea to add.
Closes #71
🤖 Generated with Claude Code