🐛 fix(ui): harden dashboard layout against unknown widgets and unnecessary re-renders

- Filter unknown widget IDs in createDefaultLayoutForBreakpoint instead of crashing
- Memoize responsive layouts so unchanged breakpoints preserve referential identity

Author: s-b-e-n-s-o-n

ui/src/views/dashboard/dashboardWidgetLayout.ts

@@ -83,6 +83,11 @@ const DEFAULT_LAYOUT: WidgetLayoutItem[] = [
 
 const DEFAULT_LAYOUT_BY_ID = new Map(DEFAULT_LAYOUT.map((item) => [item.i, item] as const));
 
+function getDefaultLayoutItem(widgetId: string): WidgetLayoutItem | null {
+  const item = DEFAULT_LAYOUT_BY_ID.get(widgetId as DashboardWidgetId);
+  return item ? { ...item } : null;
+}
+
 function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
@@ -160,19 +165,26 @@ export function createDefaultLayoutForBreakpoint(
 ): WidgetLayoutItem[] {
   if (!isSingleColumnBreakpoint(breakpoint)) {
     return applyConstraints(
-      order.map((id) => ({ ...DEFAULT_LAYOUT_BY_ID.get(id)! })),
+      order
+        .map((id) => getDefaultLayoutItem(id))
+        .filter((item): item is WidgetLayoutItem => item !== null),
       breakpoint,
     );
   }
 
   let nextY = 0;
   return applyConstraints(
-    order.map((id) => {
-      const fallback = DEFAULT_LAYOUT_BY_ID.get(id)!;
-      const item: WidgetLayoutItem = { i: id, x: 0, y: nextY, w: 1, h: fallback.h };
-      nextY += item.h;
-      return item;
-    }),
+    order
+      .map((id) => {
+        const fallback = getDefaultLayoutItem(id);
+        if (!fallback) {
+          return null;
+        }
+        const item: WidgetLayoutItem = { i: id, x: 0, y: nextY, w: 1, h: fallback.h };
+        nextY += item.h;
+        return item;
+      })
+      .filter((item): item is WidgetLayoutItem => item !== null),
     breakpoint,
   );
 }

ui/src/views/dashboard/useDashboardWidgetOrder.ts

@@ -82,14 +82,67 @@ function cloneLayout(layout: readonly WidgetLayoutItem[]): WidgetLayoutItem[] {
   return layout.map(cloneLayoutItem);
 }
 
-function cloneResponsiveLayouts(layouts: ResponsiveWidgetLayouts): ResponsiveWidgetLayouts {
-  const result: ResponsiveWidgetLayouts = {};
-  for (const breakpoint of RESPONSIVE_BREAKPOINTS) {
-    if (layouts[breakpoint]?.length) {
-      result[breakpoint] = cloneLayout(layouts[breakpoint]!);
-    }
+function layoutItemsEqual(left: WidgetLayoutItem, right: WidgetLayoutItem): boolean {
+  return (
+    left.i === right.i &&
+    left.x === right.x &&
+    left.y === right.y &&
+    left.w === right.w &&
+    left.h === right.h &&
+    left.minW === right.minW &&
+    left.minH === right.minH &&
+    left.maxW === right.maxW &&
+    left.maxH === right.maxH
+  );
+}
+
+function layoutsShallowEqual(
+  left: readonly WidgetLayoutItem[] | undefined,
+  right: readonly WidgetLayoutItem[] | undefined,
+): boolean {
+  if (left === right) {
+    return true;
   }
-  return result;
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+  return left.every((item, index) => layoutItemsEqual(item, right[index]!));
+}
+
+function createResponsiveLayoutsMemo() {
+  let previousResult: ResponsiveWidgetLayouts = {};
+
+  return (layouts: ResponsiveWidgetLayouts): ResponsiveWidgetLayouts => {
+    let changed = false;
+    const nextResult: ResponsiveWidgetLayouts = {};
+
+    for (const breakpoint of RESPONSIVE_BREAKPOINTS) {
+      const source = layouts[breakpoint];
+      const previous = previousResult[breakpoint];
+
+      if (!source?.length) {
+        if (previous?.length) {
+          changed = true;
+        }
+        continue;
+      }
+
+      if (layoutsShallowEqual(source, previous)) {
+        nextResult[breakpoint] = previous;
+        continue;
+      }
+
+      nextResult[breakpoint] = cloneLayout(source);
+      changed = true;
+    }
+
+    if (!changed) {
+      return previousResult;
+    }
+
+    previousResult = nextResult;
+    return previousResult;
+  };
 }
 
 function stripLayout(layout: readonly WidgetLayoutItem[]): PersistedLayoutItem[] {
@@ -248,6 +301,7 @@ export function moveWidget(
 }
 
 export function useDashboardWidgetOrder() {
+  const getResponsiveLayouts = createResponsiveLayoutsMemo();
   const widgetOrder = ref<DashboardWidgetId[]>(
     sanitizeWidgetOrder(preferences.dashboard.widgetOrder),
   );
@@ -259,7 +313,7 @@ export function useDashboardWidgetOrder() {
         createLayoutFromOrder(widgetOrder.value, currentBreakpoint.value),
     ),
   );
-  const responsiveLayouts = computed(() => cloneResponsiveLayouts(layoutsByBreakpoint.value));
+  const responsiveLayouts = computed(() => getResponsiveLayouts(layoutsByBreakpoint.value));
   const gridInstanceKey = ref(0);
   const hiddenWidgets = ref<DashboardWidgetId[]>(
     sanitizeHiddenWidgets(preferences.dashboard.hiddenWidgets),

ui/tests/views/dashboard/dashboardWidgetLayout.spec.ts

@@ -159,5 +159,27 @@ describe('dashboardWidgetLayout', () => {
       expect(layout.every((item) => item.x === 0)).toBe(true);
       expect(layout.every((item) => item.w === 1)).toBe(true);
     });
+
+    test('ignores unknown widget ids on multi-column breakpoints', () => {
+      const layout = createDefaultLayoutForBreakpoint(
+        [...DASHBOARD_WIDGET_IDS, 'unknown-widget' as any],
+        'lg',
+      );
+
+      expect(layout).toHaveLength(DASHBOARD_WIDGET_IDS.length);
+      expect(layout.map((item) => item.i)).toEqual(DASHBOARD_WIDGET_IDS);
+    });
+
+    test('ignores unknown widget ids on single-column breakpoints', () => {
+      const layout = createDefaultLayoutForBreakpoint(
+        ['stat-containers', 'unknown-widget' as any, 'recent-updates'],
+        'sm',
+      );
+
+      expect(layout.map((item) => item.i)).toEqual(['stat-containers', 'recent-updates']);
+      expect(layout.map((item) => item.y)).toEqual([0, 3]);
+      expect(layout.every((item) => item.x === 0)).toBe(true);
+      expect(layout.every((item) => item.w === 1)).toBe(true);
+    });
   });
 });

ui/tests/views/dashboard/useDashboardWidgetOrder.spec.ts

@@ -357,6 +357,36 @@ describe('useDashboardWidgetOrder', () => {
     vi.useRealTimers();
   });
 
+  it('reuses unchanged breakpoint layouts in responsiveLayouts when persisting current breakpoint changes', async () => {
+    vi.useFakeTimers();
+    const mobileLayout = DASHBOARD_WIDGET_IDS.map((id, index) => ({
+      i: id,
+      x: 0,
+      y: index,
+      w: 1,
+      h: 1,
+    }));
+    preferences.dashboard.gridLayouts.sm = mobileLayout;
+
+    const { state } = await mountWidgetOrderComposable();
+    const beforeSm = state.responsiveLayouts.value.sm;
+    const beforeLg = state.responsiveLayouts.value.lg;
+
+    const updated = state.layout.value.map((item) => ({ ...item }));
+    updated[0] = { ...updated[0], x: 99 };
+    state.layout.value = updated;
+    await nextTick();
+
+    vi.advanceTimersByTime(300);
+    await nextTick();
+
+    expect(state.responsiveLayouts.value.sm).toBe(beforeSm);
+    expect(state.responsiveLayouts.value.lg).not.toBe(beforeLg);
+    expect(state.responsiveLayouts.value.lg?.[0].x).toBe(99);
+
+    vi.useRealTimers();
+  });
+
   it('flushes pending layout persistence when the composable is disposed before debounce fires', async () => {
     vi.useFakeTimers();
     const { state, wrapper } = await mountWidgetOrderComposable();