Mana-Loop/docs/task7/plan_skillstab.md

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.