feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s

- Implemented complete design system with 40+ CSS custom properties
- Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo)
- Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug
- Added toast notification system (GameToast) with success/warning/error/info types
- Added confirmation dialogs for destructive actions
- Removed all dev artifacts and component name labels
- Added empty states to all tabs
- Replaced emoji icons with Lucide React icons
- Added enchantPower placeholder to StatsTab and EquipmentTab
- Mobile audit passed at 375px viewport
- Build passes with 0 errors, lint passes with 0 errors

Sub-tasks completed:
- ST1: Design System Implementation
- ST2: Global Layout & Header
- ST3: Left Panel (Mana Display & Action Area)
- ST4: Skills Tab
- ST5: Spire Tab & Spire Mode UI
- ST6: Stats Tab
- ST7: Equipment & Crafting Tabs
- ST8: Attunements Tab
- ST9: Remaining Tabs
- ST10: Toast System & Confirmation Dialogs

Documentation: 15+ files in docs/task4/
This commit is contained in:
Refactoring Agent
2026-04-28 11:38:45 +02:00
parent 3c29c1c834
commit 47c71e6f54
61 changed files with 6892 additions and 1842 deletions
+35
View File
@@ -0,0 +1,35 @@
# Sub-task 5: Enhance SpireTab Component
## Scope
Refactor the `SpireTab` component to use the new design system primitives for spire climbing UI.
### Key Deliverables:
1. Update `SpireTab` to use `GameCard`, `SectionHeader`, `ManaBar` primitives
2. Apply proper cast bar animation (300ms ease-out)
3. Style floor display with appropriate visual treatment
4. Ensure combat log uses consistent styling
## Acceptance Criteria
1. Floor display uses `GameCard` with appropriate variant
2. Cast bar uses `ManaBar` primitive with proper animation (300ms ease-out)
3. Enemy HP bar uses `ManaBar` with appropriate color
4. Section headers use `SectionHeader` primitive
5. No raw hex values - all colors use CSS variables
6. Spire combat cast bar animates smoothly
## Dependencies
- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)
## Status
🟡 **PENDING** - Waiting for ST1 completion
## Notes
- Component location: `src/components/game/tabs/SpireTab.tsx`
- Has both normal mode and simple mode (SpireMode)
- Shows current floor, enemy HP, cast progress
- Floor element display should use `ElementBadge` primitive