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:
@@ -22,6 +22,7 @@ import { registerUserStatsWidget } from './widgets/userStatsWidget.js';
|
||||
import { registerUserMoodWidget } from './widgets/userMoodWidget.js';
|
||||
import { registerUserAttributesWidget } from './widgets/userAttributesWidget.js';
|
||||
import { registerCalendarWidget, registerWeatherWidget, registerTemperatureWidget, registerClockWidget, registerLocationWidget, registerRecentEventsWidget } from './widgets/infoBoxWidgets.js';
|
||||
import { registerSceneInfoWidget } from './widgets/sceneInfoWidget.js';
|
||||
import { registerPresentCharactersWidget } from './widgets/presentCharactersWidget.js';
|
||||
import { registerInventoryWidget } from './widgets/inventoryWidget.js';
|
||||
import { registerQuestsWidget } from './widgets/questsWidget.js';
|
||||
@@ -223,6 +224,7 @@ function registerAllWidgets(registry, dependencies) {
|
||||
registerClockWidget(registry, dependencies);
|
||||
registerLocationWidget(registry, dependencies);
|
||||
registerRecentEventsWidget(registry, dependencies);
|
||||
registerSceneInfoWidget(registry, dependencies); // Combined multi-view widget
|
||||
|
||||
// Social widgets
|
||||
registerPresentCharactersWidget(registry, dependencies);
|
||||
|
||||
Reference in New Issue
Block a user