fix(deck): show card modal paging arrows and traverse whole deck#63
Conversation
The detail modal's Prev/Next controls never appeared. `hasSiblings` read the ordered-cards ref during render, but ref writes from the sync effect don't re-render the modal. On the dynamic(ssr:false) owner path the list mounts after the provider, so the modal kept reading an empty ref. The fix: - Track the ordered-list length as reactive state (orderedCount) in DeckPreviewProvider; gate the arrows on it instead of the ref read so the modal re-renders when the list populates. The ref still backs cycle. - Include sorted sideboard + considering cards in the paging list so paging walks the whole deck (commander -> mainboard -> sideboard -> considering); those rows were clickable but previously excluded. - Add integration tests covering arrow visibility, sorted wrap-around paging, the async-mounted list path, and considering-zone cards.
|
Warning Review limit reached
More reviews will be available in 43 minutes and 45 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR extends deck preview paging to include sideboard and considering card zones. It computes these new zone-specific card lists in ChangesDeck preview paging with sideboard and considering
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/_components/deck/deck-detail-sheet.test.tsx`:
- Around line 245-247: The Suspense fallback currently renders a zero-height
<div> which violates the rule requiring reserved layout space; update the
Suspense fallback that wraps LazyList so the fallback element (the <div> inside
the Suspense) uses an explicit pixel height (for example by adding a Tailwind
class like h-[20px] or an inline style height: '20px') to reserve space while
loading; locate the Suspense that renders <LazyList /> in
deck-detail-sheet.test.tsx and modify its fallback element to include the
explicit height.
- Around line 14-19: The tests mock for "`@/app/_actions/deck/categories`" is
missing moveCategoryCards which DecklistDnd imports—add moveCategoryCards:
vi.fn() to the vi.mock(...) object to avoid import/runtime errors; also update
the Suspense fallback in deck-detail-sheet.test.tsx (the
fallback={<div>loading</div>} used by Suspense) to reserve layout space by
giving it a fixed height, e.g. change to fallback={<div
className="h-[20px]">loading</div>} so the test layout remains stable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 88ecb8e2-0158-4c5a-b74e-a4faf07d025b
📒 Files selected for processing (4)
app/_components/builder/decklist-dnd.tsxapp/_components/builder/decklist.tsxapp/_components/deck/deck-detail-sheet.test.tsxapp/_components/deck/deck-preview-pane.tsx
DecklistDnd imports moveCategoryCards from the categories actions, but the deck-detail-sheet test mock omitted it, leaving the binding undefined and risking a runtime error if a DnD move fired. Changes: - Add moveCategoryCards to the categories vi.mock - Give the lazy-list Suspense fallback an explicit h-[20px] to satisfy the reserved-layout-space convention
1 participant
The detail modal's Prev/Next controls never appeared.
hasSiblingsread the ordered-cards ref during render, but ref writes from the sync effect don't re-render the modal. On the dynamic(ssr:false) owner path the list mounts after the provider, so the modal kept reading an empty ref.The fix:
Description
Fixes: #
Checklist
pnpm test) and lint is cleanrevalidate/dynamic/unstable_cache— used'use cache'+cacheLife/cacheTag<Link>imported fromapp/_components/link.tsx, notnext/linkScreenshots / notes
Summary by CodeRabbit
Release Notes
New Features
Tests