Update the size and behavior of added widgets

2026-06-16 09:48:18 -07:00
parent baaf162df9
commit fb70d37d71
2 changed files with 31 additions and 10 deletions
@@ -45,13 +45,34 @@ export const useDashboardStore = create((set, get) => ({
        }

        const dimensions = registryEntry.allowedSizes[sizeKey];
+        const widgets = get().widgets;

+        // Default to spawning on the far left on a new row
+        let startX = 0;
+        let startY = Infinity;
+
+        if (widgets.length > 0) {
+            // 1. Find the lowest 'y' value (the start of the bottom row)
+            const bottomRowY = Math.max(...widgets.map(w => w.y));
+
+            // 2. Grab all the widgets that are sitting on that exact row
+            const bottomRowWidgets = widgets.filter(w => w.y === bottomRowY);
+
+            // 3. Find the right-most edge of those widgets (x position + width)
+            const rightmostEdge = Math.max(...bottomRowWidgets.map(w => w.x + w.w));
+
+            // 4. If the right-most edge PLUS the new widget's width fits in 12 columns...
+            if (rightmostEdge + dimensions.w <= 12) {
+                startX = rightmostEdge; // ...tuck it right next to the last widget!
+                startY = bottomRowY;    // ...and keep it on the same row.
+            }
+        }
        const newWidget = {
            id: uuid(),
            type: widgetId,
            size: sizeKey,
-            x: 0,
-            y: Infinity,     // RGL's auto-packer drops this exactly into the first available slot at the bottom
+            x: startX,
+            y: startY,
            w: dimensions.w,
            h: dimensions.h
        };