Mana-Loop/docs/task7/plan_page.md

Refactor Plan: page.tsx

Current State

• File: src/app/page.tsx
• Lines: 650
• Target: ≤400 lines (reduce by ~250 lines)

Proposed File Structure

1. src/components/game/tabs/PrestigeTab.tsx (NEW, ≈60 lines)

Contains:

• PrestigeTab component (extracted from renderGrimoireTab)
• Grimoire/Prestige tab UI

Rationale: Self-contained tab component; only depends on store, PRESTIGE_DEF, GUARDIANS.

2. src/app/page.tsx (≈300 lines)

Keeps:

• Main ManaLoopGame component shell
• Tabs definition and lazy loading
• Core game loop integration
• Most tab content (other tabs remain via lazy loading)

Rationale: Reduces main page by extracting only the Grimoire tab which is standalone.

Circular Import Risks

LOW RISK:

• PrestigeTab depends on store, PRESTIGE_DEF, GUARDIANS - all stable dependencies.
• No circular dependency with page.tsx.

MITIGATION:

• Import store and constants normally in new component.

Extraction Order

1 → 2

1. Create PrestigeTab.tsx, move renderGrimoireTab content, adapt to be standalone (receive store via hook internally), export component.
2. Update page.tsx: replace renderGrimoireTab call with <PrestigeTab />, remove extracted code.
3. Verify typecheck, verify ≤400 lines.

Notes

This addresses the main line bloat by only ~60 lines (renderGrimoireTab). To get page.tsx under 400 lines fully would require more extensive splitting (extracting each tab into separate route files, extracting sidebar, etc.). The plan here is conservative - if page.tsx is still >400 after extracting PrestigeTab, we can consider:

• Extracting StatsTab/LabTab content further
• Extracting activity log rendering
• Extracting action buttons But per phase instructions we must get ALL THREE target files under 400 lines, so we must be more aggressive if needed.