perf(dashboard): defer drag writes to dragEnd, add layout containment

- Replace per-dragOver store writes with local ref+state in useDashboardDnd:
  snapshots cardOrders on dragStart, updates local state only during drag,
  commits a single moveCard on dragEnd — eliminates cascading re-renders and
  localStorage writes on every drag event
- Thread handleDragStart and activeCardOrders through the controller so
  SortableContext renders from local drag state during a drag, store state
  when idle
- Add contain:layout_style to DashboardCardItem in view mode to reduce
  cross-card style recalculation during scroll

Author: awesomestvi

design-system/FEATURES.md

@@ -494,6 +494,10 @@ Theme system uses CSS custom properties defined in `/src/styles/theme.css`:
 - CSS variables for dynamic color changes
 - Memoized components prevent unnecessary re-renders
 
+### Dashboard Drag & Drop
+- Drag reordering uses local state during the drag — the global store is written only once on drop, eliminating per-event re-renders and localStorage writes
+- `contain: layout style` on card wrappers reduces cross-card style recalculation during scroll
+
 ### Navigation
 - Section-based code splitting (future enhancement)
 - Lazy loading of section components

docs/DOCKER_HOME_ASSISTANT_ADDON.md

@@ -150,6 +150,7 @@ The current dashboard build includes a few runtime-focused optimizations:
 - Deferred rendering for offscreen room groups in the All view
 - Zustand-backed search result state to reduce context fan-out
 - Stable device-map reuse to avoid rerendering unchanged cards
+- Drag reordering uses local state during a drag; the global store is written once on drop, eliminating per-event re-renders and localStorage writes
 - Onboarding-based dashboard visibility with add/remove entity curation
 - Local dashboard config YAML export/import for layout and preference backup, including first-run import from onboarding
 - Configurable entity card interaction styles with a live preview in Settings

src/app/features/dashboard/components/dashboard-card-item.tsx

@@ -89,7 +89,9 @@ export const DashboardCardItem = memo(function DashboardCardItem({
   );
 
   if (!isEditMode) {
-    return <div className={`h-full relative ${spanClass}`}>{cardContent}</div>;
+    return (
+      <div className={`relative h-full [contain:layout_style] ${spanClass}`}>{cardContent}</div>
+    );
   }
 
   return (

src/app/features/dashboard/components/dashboard-section-router.tsx

@@ -44,6 +44,7 @@ export function DashboardSectionRouter({ controller }: DashboardSectionRouterPro
     handleDeleteCard,
     handleDragEnd,
     handleDragOver,
+    handleDragStart,
     handleRemoveEntity,
     handleUpdateCard,
     hiddenEntityIds,
@@ -228,6 +229,7 @@ export function DashboardSectionRouter({ controller }: DashboardSectionRouterPro
     <DndContext
       sensors={sensors}
       collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
       onDragOver={handleDragOver}
       onDragEnd={handleDragEnd}
     >

src/app/features/dashboard/hooks/use-dashboard-controller.ts

@@ -1,4 +1,4 @@
-import type { DragEndEvent, DragOverEvent, useSensors } from '@dnd-kit/core';
+import type { DragEndEvent, DragOverEvent, DragStartEvent, useSensors } from '@dnd-kit/core';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
@@ -52,6 +52,7 @@ export type DashboardController = OnboardingController &
     handleDeleteCard: (cardId: string) => void;
     handleDragEnd: (_event: DragEndEvent) => void;
     handleDragOver: (event: DragOverEvent) => void;
+    handleDragStart: (event: DragStartEvent) => void;
     handleRemoveEntity: (entityId: string) => void;
     handleUpdateCard: (cardId: string, data: Record<string, unknown>) => void;
     hiddenEntityIds: string[];
@@ -118,11 +119,12 @@ export function useDashboardController(): DashboardController {
     hiddenEntityIds,
     roomOrder,
   });
-  const { handleDragEnd, handleDragOver, sensors } = useDashboardDnd({
-    cardOrders,
-    getCardRoom,
-    moveCard,
-  });
+  const { activeCardOrders, handleDragEnd, handleDragOver, handleDragStart, sensors } =
+    useDashboardDnd({
+      cardOrders,
+      getCardRoom,
+      moveCard,
+    });
 
   const dialogs = useDashboardDialogs();
   const onboarding = useOnboardingController({ allEntityIds, changeRoom });
@@ -175,7 +177,7 @@ export function useDashboardController(): DashboardController {
     allEntityIds,
     allViewGrouping,
     availableDeviceMap,
-    cardOrders,
+    cardOrders: activeCardOrders,
     cardSizes,
     changeRoom,
     customCards,
@@ -187,6 +189,7 @@ export function useDashboardController(): DashboardController {
     handleDeleteCard,
     handleDragEnd,
     handleDragOver,
+    handleDragStart,
     handleRemoveEntity,
     handleUpdateCard,
     hiddenEntityIds,

src/app/features/dashboard/hooks/use-dashboard-dnd.ts

@@ -1,11 +1,12 @@
 import {
   type DragEndEvent,
   type DragOverEvent,
+  type DragStartEvent,
   PointerSensor,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { useCallback } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 interface UseDashboardDndParams {
   cardOrders: Record<string, string[]>;
@@ -22,6 +23,29 @@ export function useDashboardDnd({ cardOrders, getCardRoom, moveCard }: UseDashbo
     })
   );
 
+  // Local drag-phase state — updated on every dragOver without touching the global store.
+  // Only the final position is committed to the store on dragEnd (one write per drop).
+  const dragOrdersRef = useRef<Record<string, string[]> | null>(null);
+  const activeIdRef = useRef<string | null>(null);
+  const activeRoomRef = useRef<string | null>(null);
+  const [dragOrders, setDragOrders] = useState<Record<string, string[]> | null>(null);
+
+  // During an active drag, render from the local copy; otherwise from the store.
+  const activeCardOrders = dragOrders ?? cardOrders;
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const activeId = event.active.id as string;
+      const room = getCardRoom(activeId);
+      const snapshot = { ...cardOrders };
+      activeIdRef.current = activeId;
+      activeRoomRef.current = room;
+      dragOrdersRef.current = snapshot;
+      setDragOrders(snapshot);
+    },
+    [cardOrders, getCardRoom]
+  );
+
   const handleDragOver = useCallback(
     (event: DragOverEvent) => {
       const { active, over } = event;
@@ -33,26 +57,56 @@ export function useDashboardDnd({ cardOrders, getCardRoom, moveCard }: UseDashbo
       const activeId = active.id as string;
       const overId = over.id as string;
       const room = getCardRoom(activeId);
+
       if (!room || room !== getCardRoom(overId)) {
         return;
       }
 
-      const roomCardIds = cardOrders[room] || [];
+      const current = dragOrdersRef.current ?? cardOrders;
+      const roomCardIds = [...(current[room] || [])];
       const oldIndex = roomCardIds.indexOf(activeId);
       const newIndex = roomCardIds.indexOf(overId);
 
-      if (oldIndex !== -1 && newIndex !== -1) {
-        moveCard(room, oldIndex, newIndex);
+      if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) {
+        return;
       }
+
+      roomCardIds.splice(oldIndex, 1);
+      roomCardIds.splice(newIndex, 0, activeId);
+      const updated = { ...current, [room]: roomCardIds };
+      dragOrdersRef.current = updated;
+      setDragOrders(updated);
     },
-    [cardOrders, getCardRoom, moveCard]
+    [cardOrders, getCardRoom]
   );
 
-  const handleDragEnd = useCallback((_event: DragEndEvent) => {}, []);
+  const handleDragEnd = useCallback(
+    (_event: DragEndEvent) => {
+      const activeId = activeIdRef.current;
+      const room = activeRoomRef.current;
+
+      if (activeId && room && dragOrdersRef.current) {
+        const originalIndex = cardOrders[room]?.indexOf(activeId) ?? -1;
+        const finalIndex = dragOrdersRef.current[room]?.indexOf(activeId) ?? -1;
+
+        if (originalIndex !== -1 && finalIndex !== -1 && originalIndex !== finalIndex) {
+          moveCard(room, originalIndex, finalIndex);
+        }
+      }
+
+      activeIdRef.current = null;
+      activeRoomRef.current = null;
+      dragOrdersRef.current = null;
+      setDragOrders(null);
+    },
+    [cardOrders, moveCard]
+  );
 
   return {
+    activeCardOrders,
     handleDragEnd,
     handleDragOver,
+    handleDragStart,
     sensors,
   };
 }