feat(dashboard): implement smart widget collision and category-aware layout

Complete dashboard v2 improvements for better UX and visual consistency:

**1. Push-Aside Drag/Drop (dragDrop.js)**
- Replace swap/revert logic with intelligent reflow algorithm
- When widgets collide on drag, automatically push overlapping widgets down
- All affected widgets repositioned after reflow completes
- Eliminates widget overlap issues

**2. Unified Widget Styling (style.css)**
- Add consistent .rpg-widget container styling for all widgets
- Background: rgba(0,0,0,0.2) for visual separation
- Border-left: 3px highlight for category identification
- Box-shadow and border-radius for depth and polish
- Maintain individual widget decorative styles

**3. Logical Default Layout (defaultLayout.js)**
- Reorganize widgets into semantic clusters with clear comments:
  - USER CLUSTER (top): userInfo → userStats → userMood + userAttributes
  - SCENE CLUSTER (middle): calendar + weather → temp + clock → location
  - SOCIAL CLUSTER (bottom): presentCharacters
- userInfo widget now at top (y=0) as expected
- All positions use rem units for responsive scaling

**4. Category-Aware Auto-Layout (dashboardManager.js)**
- Implement sortWidgetsByCategory() with priority ordering:
  user → scene → social → inventory
- Within user category, specific ordering:
  userInfo → userStats → userMood → userAttributes
- Add preserveOrder option to gridEngine.autoLayout()
- Auto-arrange now uses logical grouping instead of random bin-packing

**5. Multi-Tab Auto-Distribution (dashboardManager.js)**
- Add estimateLayoutHeight() to detect when content exceeds threshold
- Implement distributeWidgetsByCategory() for automatic tab creation:
  - "Status" tab: user + scene widgets
  - "Social" tab: social widgets (if any)
  - "Inventory" tab: inventory widgets (if any)
- Each tab gets category-aware auto-layout
- 80rem height threshold for single-tab limit

**6. Widget Category Metadata (widgets/)**
- Add category field to all widget definitions:
  - userInfo, userStats, userMood, userAttributes: 'user'
  - calendar, weather, temperature, clock, location: 'scene'
  - presentCharacters: 'social'
  - inventory: 'inventory'

**7. Integration Improvements (dashboardIntegration.js)**
- Set default layout on initialization for reset functionality
- Add reset layout button to dashboard header
- Wire up reset button event handler

**8. Core State Management (index.js)**
- Add getInfoBoxData() and setInfoBoxData() to state API
- Ensure info box data persists across sessions

**Technical Details:**
- Rem units throughout for 1080p→4K→mobile responsive scaling
- Reflow algorithm leverages existing gridEngine collision detection
- Category-aware sorting preserves logical relationships
- Multi-tab distribution prevents single-page scroll fatigue
- All changes maintain backwards compatibility with existing layouts

Fixes dashboard issues after rem unit conversion introduced massive positioning bugs.
Users reported widgets overlapping on drag, visual inconsistency, and random auto-arrange behavior.

Related: Epic 2 (Dashboard v2), Phase 3.2
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 18:06:44 +11:00
parent aeb3ad1b9b
commit b3a86d4609
9 changed files with 434 additions and 138 deletions
@@ -191,6 +191,7 @@ export function registerCalendarWidget(registry, dependencies) {
name: 'Calendar',
icon: '📅',
description: 'Date, weekday, month, and year display',
category: 'scene',
minSize: { w: 1, h: 2 },
defaultSize: { w: 1, h: 2 },
requiresSchema: false,
@@ -274,6 +275,7 @@ function attachCalendarHandlers(container, dependencies) {
*/
export function registerWeatherWidget(registry, dependencies) {
registry.register('weather', {
category: 'scene',
name: 'Weather',
icon: '🌤️',
description: 'Weather emoji and forecast',
@@ -306,6 +308,7 @@ export function registerWeatherWidget(registry, dependencies) {
*/
export function registerTemperatureWidget(registry, dependencies) {
registry.register('temperature', {
category: 'scene',
name: 'Temperature',
icon: '🌡️',
description: 'Temperature display with thermometer',
@@ -345,6 +348,7 @@ export function registerTemperatureWidget(registry, dependencies) {
*/
export function registerClockWidget(registry, dependencies) {
registry.register('clock', {
category: 'scene',
name: 'Clock',
icon: '🕐',
description: 'Analog clock with time display',
@@ -393,6 +397,7 @@ export function registerClockWidget(registry, dependencies) {
*/
export function registerLocationWidget(registry, dependencies) {
registry.register('location', {
category: 'scene',
name: 'Location',
icon: '📍',
description: 'Map with location display',