feat(dashboard): implement smart widget scaling and improved auto-layout

- Add resetWidgetSizesToDefault() to reset all widgets to default sizes before auto-arrange/reset
- Implement continuous expansion algorithm that fills available space up to maxAutoSize limits
- Add visible height detection to prevent widgets expanding beyond viewport (no forced scroll)
- Update all widget defaultSize and maxAutoSize for optimal 1x1 compact layouts
  - Info widgets (calendar, weather, temp, clock): 1x1 default, 1x2 max
  - Location: 2x2 max (was 3x3)
  - Characters: 3x5 max, moved to 'scene' category (eliminates Social tab)
  - User Info: 2x1 max (prevents expansion)
  - User Mood: 1x1 default and max (compact top-right placement)
  - User Attributes: 3x5 max (fills bottom space)
  - User Stats: 3x3 max
- Fix CSS scaling for 1x1 widgets
  - Replace viewport-based units with fixed rem values
  - Reduce icon/graphic sizes to fit with visible text
  - Add explicit gaps and padding for consistent spacing
  - Set line-height: 1 to prevent text overflow
- Reorganize default layout
  - Status tab: User Info (2x1) + Mood (1x1 top right) + Stats + Attributes
  - Scene tab: Info widgets (1x1) + Location + Characters (all on one tab)
  - Inventory tab: Full inventory widget

Auto-arrange and reset now properly size widgets to defaults and expand to fill
available space without exceeding visible area.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 22:08:04 +11:00
parent f61e6390fb
commit 3dd7b017a6
10 changed files with 146 additions and 74 deletions
+37
View File
@@ -1183,6 +1183,15 @@ export class DashboardManager {
await this.persistence.resetToDefault(this.defaultLayout);
this.applyDashboardConfig(this.defaultLayout);
// Reset all widgets to default sizes
const allWidgets = [];
this.dashboard.tabs.forEach(tab => {
if (tab.widgets && tab.widgets.length > 0) {
allWidgets.push(...tab.widgets);
}
});
this.resetWidgetSizesToDefault(allWidgets);
// Auto-layout each tab to prevent overlap (default positions may have changed)
this.dashboard.tabs.forEach(tab => {
if (tab.widgets && tab.widgets.length > 0) {
@@ -1212,6 +1221,28 @@ export class DashboardManager {
this.defaultLayout = layout;
}
/**
* Reset all widgets to their default sizes
* @param {Array} widgets - Widgets to reset
*/
resetWidgetSizesToDefault(widgets) {
let resetCount = 0;
widgets.forEach(widget => {
const definition = this.registry.get(widget.type);
if (definition && definition.defaultSize) {
const oldSize = `${widget.w}x${widget.h}`;
widget.w = definition.defaultSize.w;
widget.h = definition.defaultSize.h;
const newSize = `${widget.w}x${widget.h}`;
if (oldSize !== newSize) {
console.log(`[DashboardManager] Reset ${widget.type} from ${oldSize} to ${newSize}`);
resetCount++;
}
}
});
console.log(`[DashboardManager] Reset ${resetCount} widgets to default sizes`);
}
/**
* Auto-layout widgets on current tab to efficiently use all available space
*
@@ -1221,6 +1252,7 @@ export class DashboardManager {
*
* @param {Object} options - Layout options
* @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
* @param {boolean} [options.resetSizes=true] - Reset widgets to default sizes before layout
*/
autoLayoutWidgets(options = {}) {
console.log('[DashboardManager] Auto-layout widgets requested');
@@ -1241,6 +1273,11 @@ export class DashboardManager {
console.log(`[DashboardManager] Total widgets to layout: ${allWidgets.length}`);
// Reset widget sizes to defaults (unless explicitly disabled)
if (options.resetSizes !== false) {
this.resetWidgetSizesToDefault(allWidgets);
}
// Smart category-aware sorting BEFORE auto-layout
const widgetsToLayout = this.sortWidgetsByCategory(allWidgets);