feat(dashboard): add auto-layout button with smart widget packing

Implements intelligent auto-layout system that efficiently arranges widgets to maximize space usage while respecting panel width constraints.

**Key Features:**
- Smart packing algorithm that sorts by widget area and finds optimal positions
- Respects responsive column count (2-4 columns based on panel width)
- Prefers full-width widgets when possible to eliminate gaps
- Fallback to narrower widths for better vertical packing
- Maintains minimum widget sizes

**Implementation:**
- GridEngine.autoLayout() - Core packing algorithm with collision detection
- DashboardManager.autoLayoutWidgets() - High-level API that re-renders after layout
- Auto-Arrange button in dashboard header (uses fa-table-cells-large icon)
- Event handler wired to call autoLayoutWidgets with preferFullWidth=true

**Algorithm Strategy:**
1. Sort widgets by area (largest first) for efficient packing
2. For each widget, try full-width placement first
3. Find first available position using row-by-row scan
4. If position is too far down, try narrower widths
5. Mark cells as occupied to prevent overlaps

**Testing Notes:**
- Works with current responsive column system (2-4 columns)
- Respects minimum sizes and column constraints
- Re-renders all widgets after repositioning
- Auto-saves layout changes

Part of Epic 2: Dashboard Widget Library
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 14:00:00 +11:00
parent e32a008f0b
commit 122bb3194a
13 changed files with 668 additions and 87 deletions
+8 -2
View File
@@ -547,15 +547,21 @@ async function initUI() {
};
// Initialize dashboard
console.log('[RPG Companion] Current dashboard settings:', extensionSettings.dashboard);
const manager = await initializeDashboard(dashboardDependencies);
if (manager) {
console.log('[RPG Companion] Dashboard v2 initialized successfully');
console.log('[RPG Companion] Manager instance:', manager);
// Check if this is first time - create default layout
if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs) {
// Check if this is first time OR if dashboard is empty - create default layout
if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs || extensionSettings.dashboard.tabs.length === 0) {
console.log('[RPG Companion] Creating default dashboard layout...');
createDefaultLayout(manager);
} else {
console.log('[RPG Companion] Loading saved dashboard layout with', extensionSettings.dashboard.tabs.length, 'tabs');
// Apply the saved layout to the manager
manager.applyDashboardConfig(extensionSettings.dashboard);
}
} else {
console.warn('[RPG Companion] Dashboard initialization returned null, falling back to legacy rendering');