# Refactor Plan: SkillsTab.tsx

## Current State
- **File:** `src/components/game/tabs/SkillsTab.tsx`
- **Lines:** 434
- **Target:** ≤400 lines (reduce by ~34 lines)

## Proposed File Structure

### 1. `src/lib/game/utils.ts` (NEW, ≈20 lines)
**Contains:**
- `formatStudyTime` function

**Rationale:** Simple pure utility function, zero-risk extraction.

### 2. `src/components/game/tabs/SkillUpgradeDialog.tsx` (NEW, ≈80 lines)
**Contains:**
- `SkillUpgradeDialog` component (extracted from `renderUpgradeDialog`)
- Dialog UI and selection state handlers

**Rationale:** Isolates the upgrade dialog UI (~100 lines worth from parent), simplifies SkillsTab significantly. Uses callback props.

### 3. `src/components/game/SkillRow.tsx` (NEW, ≈100 lines)
**Contains:**
- `SkillRow` component for individual skill rows
- Level dots, buttons, study toggle, tier-up, milestone badges

**Rationale:** Encapsulates per-skill UI (~150 lines worth from parent), reusable, simplifies SkillsTab.

### 4. `src/lib/game/hooks/useSkillUpgradeSelection.ts` (NEW, ≈40 lines)
**Contains:**
- `useSkillUpgradeSelection` custom hook
- Selection state and mutation logic for milestone upgrades

**Rationale:** Encapsulates upgrade selection logic previously inline in SkillsTab.

### 5. `src/components/game/tabs/SkillsTab.tsx` (≈150 lines)
**Keeps:**
- Core `SkillsTab` component shell
- Category-level layout
- Main store hook calls
- Tab switching

**Rationale:** Maintains coordination role while delegating details to extracted components/hooks.

## Circular Import Risks

**MEDIUM RISK:**
- `SkillRow` needs access to many store selectors and actions. May accept callbacks as props to avoid direct store access (kept in parent).
- `SkillUpgradeDialog` needs data from store; will receive computed values as props.
- `useSkillUpgradeSelection` needs `SKILL_EVOLUTION_PATHS` and store commits - safe.

**MITIGATION:**
- Keep store interactions in `SkillsTab`, pass data down via props.
- Accept slight prop drilling vs. direct store access in extracted components for cleaner boundaries.

## Extraction Order

**1 → 4 → 3 → 2 → 5**

1. Create `utils.ts`, move `formatStudyTime`, update SkillsTab import.
2. Create `useSkillUpgradeSelection` hook, move selection logic, update SkillsTab.
3. Create `SkillRow`, move per-skill UI (pass callbacks from parent), update SkillsTab.
4. Create `SkillUpgradeDialog`, move dialog UI, update SkillsTab.
5. Delete old extracted sections from SkillsTab, verify ≤400 lines.