 Lucas 'Paperboy' Rose-Winters
|
e031643cd5
|
feat(dashboard): implement column-aware defaultSize for optimal 3-4 col widget layout
PROBLEM:
- Reset/auto-layout placed userInfo at 1x1, mood at [1,0] blocking expansion
- Expansion pass couldn't grow userInfo to 2x1 because mood already occupied column 1
- Result: 1x1 userInfo, 1x1 mood, empty space at [2,0] in 3-col layout
ROOT CAUSE:
- Static defaultSize 1x1 → placement happens first
- Expansion happens second, but mood blocks userInfo horizontal growth
SOLUTION - Column-aware defaultSize:
1. userInfoWidget.js: defaultSize now function of columns
- Mobile (≤2 col): { w: 1, h: 1 } (compact, mood beside it)
- Desktop (3-4 col): { w: 2, h: 1 } (starts at target size)
2. dashboardManager.js: resetWidgetSizesToDefault() supports function defaultSize
- Calls defaultSize(columns) if function, otherwise uses static object
- Same pattern as maxAutoSize support
3. widgetRegistry.js: Updated validation to accept function defaultSize
- Skip validation for functions (can't validate until runtime)
4. dashboardManager.js: Reordered userWidgetOrder
- mood(2) before stats(3) so mood sits beside userInfo in top row
RESULT (3-4 columns):
- userInfo starts at 2x1, placed at [0,0]
- mood placed at [2,0] (beside 2-wide userInfo)
- stats placed at [0,1] and expands to 3x? (full width below)
- No expansion blocking, no wasted space
MOBILE FIXES (from previous commits):
- Stats widget: padding-bottom 0.5rem (was 0.3rem, prevent Arousal clipping)
- Refresh button: Show with Dashboard v2 (#rpg-dashboard-container selector)
- Mood text: 0.6rem font-size (improve readability)
AFFECTED:
- userInfoWidget.js: defaultSize + maxAutoSize column-aware functions
- dashboardManager.js: resetWidgetSizesToDefault, userWidgetOrder
- widgetRegistry.js: Validation allows function defaultSize
- userStatsWidget.js: maxAutoSize column-aware (previous commit)
- style.css: Stats padding fix 0.5rem
|
2025-10-24 18:55:38 +11:00 |
|
|
Lucas 'Paperboy' Rose-Winters
|
1f4ec963a2
|
feat(dashboard): implement widget registry system (Task 1.2)
Implement WidgetRegistry class for managing widget types:
- Central registry using Map for O(1) lookups
- Complete widget definition interface with JSDoc types
- register() - Add new widget types with validation
- get() - Retrieve widget definitions by type
- getAvailable() - Filter widgets by schema requirement
- unregister() - Remove widget types
- Additional utility methods: has(), count(), clear(), getStats()
Widget Definition Structure:
- name, icon, description - Display metadata
- minSize, defaultSize - Grid sizing constraints
- requiresSchema - Schema dependency flag
- render() - Rendering function
- Optional lifecycle hooks: getConfig, onConfigChange, onRemove, onResize
Features:
- Validates all required fields on registration
- Prevents duplicate registrations (with warning)
- Filters schema-dependent widgets when no schema active
- Binds lifecycle functions to maintain context
- Comprehensive error handling and logging
Test Suite:
- Interactive test harness with 6 test scenarios
- Tests registration, retrieval, filtering, unregistration
- Visual verification of widget rendering
- Live registry statistics
Acceptance Criteria Met:
✓ Can register/retrieve widgets from registry
✓ Widget definitions include all required metadata
✓ Can filter widgets by schema requirement
✓ All methods tested and verified
Epic 1, Task 1.2 Complete (2-3 day estimate, <5 min actual)
|
2025-10-23 09:12:39 +11:00 |
|