Refactoring Agent
03815f27ee
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 5m57s
67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
# Task 14: Fix AchievementsTab Nesting - Context Summary
|
|
|
|
## Current State (Problem)
|
|
|
|
### Redundant Nested Layers Found:
|
|
|
|
1. **Nested GameCards (Double Card Wrapper)**
|
|
- `AchievementsTab.tsx` wraps everything in a `<GameCard>` (lines 16-42)
|
|
- `AchievementsDisplay.tsx` ALSO wraps everything in a `<GameCard variant="default" className="w-full">` (line 63)
|
|
- This creates nested cards - a card inside a card - which is redundant and causes visual/structural issues
|
|
|
|
2. **Duplicate Headings**
|
|
- `AchievementsTab.tsx` has an `<h2>` heading "Achievements" with badge showing `{unlockedCount} unlocked` (lines 19-26)
|
|
- `AchievementsDisplay.tsx` has an `<h3>` heading "Achievements" with badge showing `{unlockedCount} / {totalCount}` (lines 64-72)
|
|
- Both components render their own heading - this is redundant
|
|
|
|
### File Analysis:
|
|
|
|
#### AchievementsTab.tsx Structure:
|
|
```
|
|
<div className="space-y-4">
|
|
<GameCard> ← OUTER CARD (should be removed)
|
|
<h2>Achievements</h2> ← OUTER HEADING (should be removed)
|
|
<AchievementsDisplay /> ← This component brings its own Card + Heading
|
|
</GameCard>
|
|
</div>
|
|
```
|
|
|
|
#### AchievementsDisplay.tsx Structure:
|
|
```
|
|
<GameCard variant="default"> ← INNER CARD (should stay)
|
|
<h3>Achievements</h3> ← INNER HEADING (should stay)
|
|
<ScrollArea>
|
|
{/* achievement categories */}
|
|
</ScrollArea>
|
|
</GameCard>
|
|
```
|
|
|
|
## Correct Structure (After Fix)
|
|
|
|
The `AchievementsTab` should NOT wrap `AchievementsDisplay` in a GameCard or provide its own heading. The correct structure is:
|
|
|
|
### AchievementsTab.tsx (Fixed):
|
|
```
|
|
<div className="space-y-4">
|
|
<AchievementsDisplay /> ← Only render the display component, no wrapping
|
|
</div>
|
|
```
|
|
|
|
### AchievementsDisplay.tsx (Unchanged):
|
|
```
|
|
<GameCard variant="default"> ← Single card wrapper
|
|
<h3>Achievements</h3> ← Single heading
|
|
<ScrollArea>
|
|
{/* achievement categories */}
|
|
</ScrollArea>
|
|
</GameCard>
|
|
```
|
|
|
|
## Summary of Changes Needed:
|
|
|
|
1. **Remove GameCard wrapper from AchievementsTab.tsx** - Let AchievementsDisplay handle the card
|
|
2. **Remove the h2 heading and badge from AchievementsTab.tsx** - Let AchievementsDisplay handle the heading
|
|
3. **Keep AchievementsDisplay.tsx as-is** - It already has the correct structure
|
|
|
|
This eliminates the double-nesting and duplicate headings issue.
|