Refactoring Agent
03815f27ee
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 5m57s
65 lines
2.5 KiB
Markdown
65 lines
2.5 KiB
Markdown
# 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. |