refactor(cleanup): reduce dashboard and formatting duplication

Author: awesomestvi

scripts/clean-root-artifacts.mjs

@@ -1,20 +1,63 @@
-import { rm } from 'node:fs/promises';
+import { readdir, rm } from 'node:fs/promises';
 import path from 'node:path';
 
 const cwd = process.cwd();
 const removeAll = process.argv.includes('--all');
 
-const rootArtifacts = ['.DS_Store', '.vite', 'build-storybook.log', 'dist', 'storybook-static'];
+const ignoredDirectories = new Set(['.git', 'node_modules']);
+const rootArtifacts = [
+  '.DS_Store',
+  '.vite',
+  'build-storybook.log',
+  'debug-storybook.log',
+  'dist',
+  'storybook-static',
+];
 const cacheArtifacts = ['.cache/vite', '.cache/storybook-static'];
 
 const targets = removeAll ? [...rootArtifacts, ...cacheArtifacts] : rootArtifacts;
 
-for (const target of targets) {
+async function removeTarget(target) {
   const absolutePath = path.join(cwd, target);
   try {
-    await rm(absolutePath, { recursive: true, force: true });
+    await rm(absolutePath, { recursive: true });
     console.log(`removed ${target}`);
-  } catch {
+  } catch (error) {
+    if (error?.code === 'ENOENT') {
+      return;
+    }
+
     // Keep cleanup best-effort and idempotent.
   }
 }
+
+async function removeOsArtifacts(directory) {
+  let entries;
+  try {
+    entries = await readdir(directory, { withFileTypes: true });
+  } catch {
+    return;
+  }
+
+  for (const entry of entries) {
+    const absolutePath = path.join(directory, entry.name);
+    const relativePath = path.relative(cwd, absolutePath);
+
+    if (entry.isDirectory()) {
+      if (!ignoredDirectories.has(entry.name)) {
+        await removeOsArtifacts(absolutePath);
+      }
+      continue;
+    }
+
+    if (entry.isFile() && entry.name === '.DS_Store') {
+      await removeTarget(relativePath);
+    }
+  }
+}
+
+for (const target of targets) {
+  await removeTarget(target);
+}
+
+await removeOsArtifacts(cwd);

src/app/features/dashboard/components/custom-card-action.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
 import { getStoryDocsDescription } from '@/app/storybook/story-docs';
-import { buildCustomCard, CustomWidgetStoryFrame } from '../stories/custom-card-story-helpers';
+import { buildCustomCard, CustomWidgetStoryFrame } from '@/app/storybook/story-frames';
 
 type ActionStoryArgs = {
   size: Extract<CardSize, 'tiny' | 'extra-small' | 'small'>;

src/app/features/dashboard/components/custom-card-battery-overview.stories.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
 import { homeAssistantStore } from '@/app/stores/home-assistant-store';
 import { getStoryDocsDescription } from '@/app/storybook/story-docs';
-import { buildCustomCard, CustomWidgetStoryFrame } from '../stories/custom-card-story-helpers';
+import { buildCustomCard, CustomWidgetStoryFrame } from '@/app/storybook/story-frames';
 
 const sampleBatteryEntities: HassEntities = {
   'sensor.front_door_sensor_battery': {

src/app/features/dashboard/components/custom-card-map.stories.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
 import { homeAssistantStore } from '@/app/stores/home-assistant-store';
 import { getStoryDocsDescription } from '@/app/storybook/story-docs';
-import { buildCustomCard, CustomWidgetStoryFrame } from '../stories/custom-card-story-helpers';
+import { buildCustomCard, CustomWidgetStoryFrame } from '@/app/storybook/story-frames';
 
 const sampleTrackerEntities: HassEntities = {
   'person.alice': {

src/app/features/dashboard/components/custom-card-photo-frame.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
 import { getStoryDocsDescription } from '@/app/storybook/story-docs';
-import { buildCustomCard, CustomWidgetStoryFrame } from '../stories/custom-card-story-helpers';
+import { buildCustomCard, CustomWidgetStoryFrame } from '@/app/storybook/story-frames';
 
 type PhotoStoryArgs = {
   size: CardSize;

src/app/features/dashboard/components/custom-card-quick-note.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import type { CardSize } from '@/app/components/shared/card-size-selector';
 import { getStoryDocsDescription } from '@/app/storybook/story-docs';
-import { buildCustomCard, CustomWidgetStoryFrame } from '../stories/custom-card-story-helpers';
+import { buildCustomCard, CustomWidgetStoryFrame } from '@/app/storybook/story-frames';
 
 type QuickNoteStoryArgs = {
   size: Extract<CardSize, 'small' | 'medium' | 'large'>;

src/app/features/dashboard/hooks/use-card-zones.ts

@@ -1,28 +1,20 @@
-import { useCallback, useEffect, useState } from 'react';
-import { STORAGE_KEYS } from '@/app/constants/storage-keys';
-import { storage } from '@/app/utils/storage';
+import { useCallback } from 'react';
+import { useCardZonesStore } from '../stores/card-zones-store';
 import type { ZoneName } from '../zones/zone-types';
 
 /**
- * Reads and writes per-card zone overrides from localStorage.
- * Follows the same pattern as useCardOrdering.
- *
  * Zone overrides are stored separately from card records so that
  * auto-discovered HA entity cards (which live only in the HA store)
  * can also have explicit zone assignments.
  */
 export function useCardZones() {
-  const [cardZones, setCardZones] = useState<Record<string, ZoneName>>(() =>
-    storage.get<Record<string, ZoneName>>(STORAGE_KEYS.cardZones, {})
-  );
-
-  const updateCardZone = useCallback((id: string, zone: ZoneName) => {
-    setCardZones((prev) => ({ ...prev, [id]: zone }));
-  }, []);
+  const cardZones = useCardZonesStore((state) => state.cardZones);
+  const updateStoredCardZone = useCardZonesStore((state) => state.updateCardZone);
 
-  useEffect(() => {
-    storage.set(STORAGE_KEYS.cardZones, cardZones);
-  }, [cardZones]);
+  const updateCardZone = useCallback(
+    (id: string, zone: ZoneName) => updateStoredCardZone(id, zone),
+    [updateStoredCardZone]
+  );
 
   return { cardZones, updateCardZone };
 }

src/app/features/dashboard/index.ts

@@ -1,14 +1,16 @@
 export type { AllViewGrouping } from './all-view-grid';
 export { DashboardCardItem } from './components/dashboard-card-item';
 export { DashboardHeroSection } from './components/dashboard-hero-section';
+export { WidgetCard } from './components/widget-card';
 export { useDashboardWidgetRoomOptions } from './components/widgets/use-widget-room-options';
 export { getDashboardWidgetSurfaceTokens } from './components/widgets/widget-surface-tokens';
 export { DashboardPage } from './page';
 export { DashboardLayout } from './shell';
 export {
+  type CustomCard,
   ENERGY_WIDGET_ROOM,
   HOME_WIDGET_ROOM,
   useCustomCardsStore,
 } from './stores/custom-cards-store';
 export { useDashboardEntitiesStore } from './stores/dashboard-entities-store';
-export { renderCard } from './utils/card-renderer';
+export { DASHBOARD_CARD_TYPES, renderCard } from './utils/card-renderer';

src/app/features/dashboard/stores/__tests__/card-zones-store.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { STORAGE_KEYS } from '@/app/constants/storage-keys';
+import { useCardZonesStore } from '../card-zones-store';
+
+describe('useCardZonesStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useCardZonesStore.setState(useCardZonesStore.getInitialState(), true);
+  });
+
+  it('updates and persists card zone assignments', () => {
+    useCardZonesStore.getState().updateCardZone('light.kitchen', 'actions');
+
+    expect(useCardZonesStore.getState().cardZones).toEqual({
+      'light.kitchen': 'actions',
+    });
+    expect(localStorage.getItem(STORAGE_KEYS.cardZones)).toContain('light.kitchen');
+  });
+
+  it('hydrates legacy raw records and drops invalid zones', async () => {
+    localStorage.setItem(
+      STORAGE_KEYS.cardZones,
+      JSON.stringify({
+        'weather.home': 'hero',
+        'sensor.power': 'analytics',
+        'button.bad': 'invalid',
+        nested: { zone: 'status' },
+      })
+    );
+
+    await useCardZonesStore.persist.rehydrate();
+
+    expect(useCardZonesStore.getState().cardZones).toEqual({
+      'weather.home': 'hero',
+      'sensor.power': 'analytics',
+    });
+  });
+
+  it('hydrates persisted Zustand records and drops non-string ids', async () => {
+    localStorage.setItem(
+      STORAGE_KEYS.cardZones,
+      JSON.stringify({
+        state: {
+          cardZones: {
+            'vacuum.downstairs': 'status',
+            'media.living_room': 'hero',
+            'light.invalid': 'left',
+          },
+        },
+        version: 0,
+      })
+    );
+
+    await useCardZonesStore.persist.rehydrate();
+
+    expect(useCardZonesStore.getState().cardZones).toEqual({
+      'vacuum.downstairs': 'status',
+      'media.living_room': 'hero',
+    });
+  });
+});

src/app/features/dashboard/stores/card-zones-store.ts

@@ -0,0 +1,96 @@
+import { create } from 'zustand';
+import { type PersistStorage, persist } from 'zustand/middleware';
+import { STORAGE_KEYS } from '@/app/constants/storage-keys';
+import { ZONE_ORDERED, type ZoneName } from '../zones/zone-types';
+
+interface CardZonesStore {
+  cardZones: Record<string, ZoneName>;
+  updateCardZone: (id: string, zone: ZoneName) => void;
+}
+
+type PersistedCardZonesState = Pick<CardZonesStore, 'cardZones'>;
+
+const VALID_ZONES = new Set<ZoneName>(ZONE_ORDERED);
+
+const cardZonesStorage: PersistStorage<PersistedCardZonesState> = {
+  getItem: (name) => {
+    const item = localStorage.getItem(name);
+    if (!item) {
+      return null;
+    }
+
+    try {
+      const parsed = JSON.parse(item) as unknown;
+
+      if (parsed && typeof parsed === 'object' && 'state' in parsed) {
+        return parsed as { state: PersistedCardZonesState; version?: number };
+      }
+
+      return {
+        state: {
+          cardZones: normalizeCardZones(parsed),
+        },
+        version: 0,
+      };
+    } catch {
+      return null;
+    }
+  },
+  setItem: (name, value) => {
+    localStorage.setItem(name, JSON.stringify(value));
+  },
+  removeItem: (name) => {
+    localStorage.removeItem(name);
+  },
+};
+
+function normalizeCardZones(value: unknown): Record<string, ZoneName> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {};
+  }
+
+  return Object.fromEntries(
+    Object.entries(value).filter(
+      (entry): entry is [string, ZoneName] =>
+        typeof entry[0] === 'string' &&
+        typeof entry[1] === 'string' &&
+        VALID_ZONES.has(entry[1] as ZoneName)
+    )
+  );
+}
+
+function getPersistedCardZones(value: unknown): Record<string, ZoneName> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {};
+  }
+
+  if ('cardZones' in value) {
+    return normalizeCardZones((value as { cardZones?: unknown }).cardZones);
+  }
+
+  return normalizeCardZones(value);
+}
+
+export const useCardZonesStore = create<CardZonesStore>()(
+  persist(
+    (set) => ({
+      cardZones: {},
+      updateCardZone: (id, zone) =>
+        set((state) => ({
+          cardZones: {
+            ...state.cardZones,
+            [id]: zone,
+          },
+        })),
+    }),
+    {
+      name: STORAGE_KEYS.cardZones,
+      storage: cardZonesStorage,
+      partialize: (state) => ({ cardZones: state.cardZones }),
+      merge: (persisted, current) => ({
+        ...current,
+        cardZones: getPersistedCardZones(persisted),
+      }),
+    }
+  )
+);