Mana-Loop/docs/task5/subtask_14_context.md

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.