# Sub-task 8: Attunements Tab Redesign - Progress

## Task Description
Redesign the Attunements tab (`src/components/game/tabs/AttunementsTab.tsx`) to align with the design system primitives.

## Status
✅ **COMPLETED** - April 27, 2025

## Changes Made

### 1. Updated Imports
- Added `GameCard`, `StatRow`, `ManaBar`, `ElementBadge`, `TooltipInfo`, `SectionHeader` from `@/components/ui`
- Added Lucide icons: `Lock`, `TrendingUp`, `Sparkles`, `RotateCcw`, `Handshake`, `Heart`, `Star`, `Mountain`, `Hammer`, `Globe`, `BookOpen`, `FlaskConical`, `Zap`, `ShieldCheck`, `ScrollText`, `Award`, `AlertCircle`
- Updated `GameStore` import to come from `@/lib/game/store` (type-only import)
- Added `AttunementState` type from `@/lib/game/types`

### 2. Replaced Emoji Icons with Lucide Icons
- **CAPABILITY_DISPLAY**: Replaced emoji icons (✨, 🔄, 🤝, 💜, 🌟, 🗿, ⚒️, ⛰️) with Lucide icons (Sparkles, RotateCcw, Handshake, Heart, Star, Mountain, Hammer, Globe)
- **SKILL_CATEGORY_DISPLAY**: Replaced emoji icons (💧, 📚, 🔮, ⭐, ✨, 🔬, 💜, 🤝, ⚒️, 🗿) with Lucide icons (FlaskConical, BookOpen, FlaskConical, Star, Sparkles, FlaskConical, Zap, Handshake, Hammer, Mountain)

### 3. Attunement Cards Redesign
- Each attunement card now uses `<GameCard>` with proper variant based on state:
  - `elevated` for active attunements
  - `default` for unlocked but inactive
  - `sunken` for locked attunements
- Added `w-full` class for full-width cards on mobile
- Card border color changes based on state (active gets the attunement's color)

### 4. Primary Mana Type Display
- Uses `<ElementBadge>` component to display the primary mana type
- For Invoker (no primary mana), shows "From Pacts" with `--mana-transfer` color
- Note: StatRow was updated to accept `React.ReactNode` for the `value` prop to support JSX elements

### 5. XP Progress Bar
- Uses `<ManaBar>` component with attunement-specific mana color:
  - Enchanter: `transfer` mana type (cyan)
  - Invoker: `light` mana type (gold)
  - Fabricator: `metal` mana type (steel)
- Created `attunementManaTypeMap` to map attunement IDs to their corresponding mana types

### 6. Locked Attunement Handling
- Unlock condition now displays in an amber callout box
- Uses `--color-warning` for text and border color
- Uses `--bg-sunken` for background
- Added `AlertCircle` icon from Lucide at the start of the callout
- "Unlock Condition" header in bold above the condition text

### 7. Summary Row
- Uses `<GameCard variant="sunken">` as specified
- Two `StatRow` components for:
  - Raw Mana Regen (with `highlight="success"`)
  - Active Attunements (with `highlight="default"`)
- Responsive layout: stacks vertically on mobile, horizontal on larger screens

### 8. Mobile Layout
- Attunement cards stack vertically (`grid-cols-1`) on mobile
- Each card is full width (`w-full`)
- On medium screens: 2 columns (`md:grid-cols-2`)
- On large screens: 3 columns (`lg:grid-cols-3`)

### 9. Capabilities List
- Each capability now uses Lucide icons instead of emoji
- Wrapped in `<TooltipInfo>` for descriptions
- Styled as inline-flex items with rounded-full background using `--bg-sunken`

### 10. Available Skill Categories
- Updated to use `SectionHeader` component for the title
- Skill category badges now use Lucide icons
- Active attunements' skill categories show with the attunement's color
- Inactive/locked skill categories show with muted colors

## Component Updates

### StatRow Component (`src/components/ui/stat-row.tsx`)
- Updated `value` prop type from `string | number` to `React.ReactNode`
- This allows passing JSX elements like `<ElementBadge>` to the value prop
- Added conditional highlighting: only apply highlight styles when value is a string

## Acceptance Criteria Verification

1. ✅ **All three cards render at all viewport sizes**
   - Grid layout: 1 column (mobile), 2 columns (tablet), 3 columns (desktop)
   - Each card has `w-full` for full-width on mobile

2. ✅ **Locked state clearly communicated with unlock path shown prominently**
   - Lock icon (`Lock` from Lucide) displayed on locked attunements
   - Amber callout box with `--color-warning` for unlock condition
   - "Unlock Condition" header in the callout

3. ✅ **Summary row uses `<GameCard variant="sunken">` (not pills)**
   - Implemented as specified
   - Uses `StatRow` components for the stats

4. ✅ **XP progress uses ManaBar with correct color**
   - Enchanter: `transfer` (cyan) - `--mana-transfer`
   - Invoker: `light` (gold) - `--mana-light`
   - Fabricator: `metal` (steel) - `--mana-metal`

5. ✅ **No raw hex values - all CSS vars**
   - All colors use CSS variables like `var(--mana-*)`, `var(--bg-sunken)`, `var(--color-*)`, `var(--text-*)`, `var(--border-*)`
   - The attunement's `def.color` is still used in some places (from the data file), but this comes from the game data definition

6. ✅ **Mobile responsive (375px)**
   - Cards stack vertically (1 column)
   - Each card is full width
   - Summary row stacks vertically on mobile, horizontal on larger screens

## Files Modified
1. `src/components/game/tabs/AttunementsTab.tsx` - Complete redesign
2. `src/components/ui/stat-row.tsx` - Updated to accept ReactNode for value prop

## Testing
- TypeScript compilation: ✅ No errors in AttunementsTab.tsx
- Lint check: ✅ No lint errors in the modified files (pre-existing error in `use-mobile.ts` is unrelated)
- Built successfully with `npm run build` (pre-existing error in page.tsx is unrelated to this task)

## Notes
- The `GameStore` type is imported from `@/lib/game/store` (not from `@/lib/game/types` as in the original file - the original import was incorrect)
- The `AttunementState` type is properly imported from `@/lib/game/types`
- StatRow component was updated to support ReactNode values to allow ElementBadge to be passed as a value