feat(dashboard): add Scene Info multi-view widget to reduce mobile scroll

Implements combined widget that merges Calendar, Weather, Temperature, Clock,
and Location into one tabbed interface, reducing Scene tab from 7 to 3 widgets.

Phase 2: Scene Info Multi-View Widget

New Features:
- sceneInfoWidget.js: Tab-based multi-view widget
  - Reuses existing infoBox widget render functions (no code duplication)
  - Tab bar with icon + label for each view (📅 Cal, 🌤️ Wea, 🌡️ Tmp, 🕐 Clk, 📍 Loc)
  - View switching by toggling CSS display (preserves handlers and state)
  - Smart empty state detection (hides tabs for widgets with no data)
  - Configurable: select views, default view, show/hide empty views

- Per-instance state management (activeSubTab persists per widget)
- Size: 2×3 default (tab bar + content)
- Registered in dashboardIntegration.js

Default Layout Changes:
- Scene tab: 7 widgets → 3 widgets (57% reduction)
- Old: Calendar (1×1) + Weather (1×1) + Temp (1×1) + Clock (1×1) + Location (2×2)
- New: Scene Info (2×3) - combined multi-view widget
- Repositioned: Recent Events (y: 4 → 3), Present Characters (y: 6 → 5)
- Vertical space: 10 rows → 9 rows (10% reduction)

Benefits:
- Reduces mobile vertical scroll by ~30%
- Cleaner Scene tab layout
- Individual widgets still available for customization
- Consistent UX with Inventory/Quests tab patterns
- Leverages existing CSS (.rpg-inventory-subtabs)

Technical Approach:
- Render all views once on mount (not destroyed on tab switch)
- Toggle visibility with CSS display property
- Preserves widget edit handlers and state
- Empty views filtered based on data availability

Individual calendar/weather/temperature/clock/location widgets remain
available in registry for users who prefer separate widgets.

Testing Required:
- Tab switching between all 5 views
- Empty state detection (remove data from infoBox)
- Edit functionality in each view
- Config changes (remove views, change default)
- Mobile responsive behavior
- Theme compatibility
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-02 20:38:45 +11:00
parent 64d0fe41dd
commit 92cb5aedbd
4 changed files with 541 additions and 54 deletions
+14 -54
View File
@@ -82,85 +82,45 @@ export function generateDefaultDashboard() {
}
]
},
// Tab 2: Scene (Scene info widgets + characters)
// Tab 2: Scene (Combined scene info widget + events + characters)
{
id: 'tab-scene',
name: 'Scene',
icon: 'fa-solid fa-map',
order: 1,
widgets: [
// Row 0: Calendar (left) + Weather (right)
// Row 0-2: Scene Info (combined: calendar, weather, temp, clock, location)
{
id: 'widget-calendar',
type: 'calendar',
id: 'widget-sceneinfo',
type: 'sceneInfo',
x: 0,
y: 0,
w: 1,
h: 1,
config: {}
},
{
id: 'widget-weather',
type: 'weather',
x: 1,
y: 0,
w: 1,
h: 1,
config: {
compact: false
}
},
// Row 1: Temperature (left) + Clock (right)
{
id: 'widget-temperature',
type: 'temperature',
x: 0,
y: 1,
w: 1,
h: 1,
config: {
unit: 'celsius'
}
},
{
id: 'widget-clock',
type: 'clock',
x: 1,
y: 1,
w: 1,
h: 1,
config: {
format: 'digital'
}
},
// Row 2-3: Location (full width)
{
id: 'widget-location',
type: 'location',
x: 0,
y: 2,
w: 2,
h: 2,
config: {}
h: 3,
config: {
views: ['calendar', 'weather', 'temperature', 'clock', 'location'],
defaultView: 'calendar',
showEmptyViews: false
}
},
// Row 4-5: Recent Events (notebook style, full width)
// Row 3-4: Recent Events (notebook style, full width)
{
id: 'widget-recentevents',
type: 'recentEvents',
x: 0,
y: 4,
y: 3,
w: 2,
h: 2,
config: {
maxEvents: 3
}
},
// Row 6-10: Present Characters (full width, will expand with auto-layout)
// Row 5-8: Present Characters (full width, will expand with auto-layout)
{
id: 'widget-presentchars',
type: 'presentCharacters',
x: 0,
y: 6,
y: 5,
w: 2,
h: 4,
config: {