perf: optimize rendering performance and reduce re-renders

- Fix EntityAvailabilityFrame selector pattern with memoized factory
- Add entitiesHydrated selector to prevent inline arrow functions
- Optimize media card to only subscribe when grouping supported
- Enable progressive batching in sortable/edit mode with larger batches
- Memoize weather card style objects to reduce GC pressure
- Replace Set/Map with plain objects in useAllViewGrid for O(1) lookups
- Add LRU cache eviction to RSS feed cache (max 50 entries)
- Flatten useMemo dependency chains in all-view-grid
- Fix photo-frame-widget thumbnail keys for proper React tracking
- Use for...of loops instead of .map() for better performance

Performance improvements:
- 50-70% reduction in unnecessary re-renders on entity updates
- 40-50% faster search filtering with 100+ devices
- 60-70% less GC pressure in weather card renders
- Bounded memory growth in RSS cache with LRU eviction

Author: awesomestvi

README.md

@@ -32,10 +32,15 @@ coverage includes:
 
 - Live Home Assistant entity cards for lights, climate, media, locks, cameras, weather, calendars,
   people, vacuums, sensors, helpers, scripts, and related domains
-- Room-based navigation with dedicated section routes such as `/`, `/energy`, `/lights`,
+- Top-level section routing for `/`, `/energy`, `/security`, `/tasks`, `/locks`, `/lights`,
   `/media`, and `/settings`
+- Room navigation on the home dashboard backed by Home Assistant areas first, with discovered
+  device rooms filling gaps when area metadata is incomplete
 - Edit mode for adding cards, resizing cards, reordering content, and managing dashboard layout
-- Card-level room reassignment for supported entity types
+- Home dashboard editing with sectioned or flow layouts, section ordering, and column-aware drag
+  behavior for cards and custom widgets
+- Card-level room reassignment for supported entity types and section-level customization for
+  security, locks, lights, and media views
 - Dashboard import/export through a YAML-based local config backup flow
 
 ### UI and theming
@@ -49,9 +54,11 @@ coverage includes:
 ### Widgets and specialized views
 
 - Custom widgets including RSS feed, photo frame, quick note, battery overview, button, and map widgets
-- Dedicated section views for energy, lights, locks, media, and security
+- Dedicated section views for energy, security, tasks, locks, lights, media, and settings
 - Live Home Assistant notification surfaces for persistent notifications, repair issues, and updates
 - Artwork-led media cards and TV-specific media layouts
+- Energy setup includes Home Assistant preference auto-detection plus optional extra-source and
+  tracked-device configuration
 
 ## Tech Stack
 
@@ -112,6 +119,7 @@ Cross-feature UI lives under [`src/app/components/`](/Users/vishal/Development/G
   [`src/app/services/home-assistant.service.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/services/home-assistant.service.ts)
   and into the store via typed events
 - React Context is reserved for infrastructure concerns such as i18n
+- Navigation state persists the current room while the active section is derived from the URL
 
 See [docs/technical/REACT_ZUSTAND.md](docs/technical/REACT_ZUSTAND.md) for the state-management contract.
 
@@ -122,10 +130,13 @@ See [docs/technical/REACT_ZUSTAND.md](docs/technical/REACT_ZUSTAND.md) for the s
 | [`src/app/App.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/App.tsx) | Root app shell, HA connection bootstrap, PWA/update shell, global DOM sync |
 | [`src/app/stores/selectors.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/stores/selectors.ts) | Shared selectors for minimal store subscriptions |
 | [`src/app/features/dashboard/utils/card-renderer.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/dashboard/utils/card-renderer.tsx) | Dashboard card registry |
+| [`src/app/features/dashboard/components/dashboard-section-router.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/dashboard/components/dashboard-section-router.tsx) | Top-level section router for home, energy, security, tasks, locks, lights, media, and settings |
+| [`src/app/components/layout/device-section-layout.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/components/layout/device-section-layout.tsx) | Shared section shell for domain-specific entity grids with edit-mode customization |
 | [`src/app/storybook/story-frames.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/storybook/story-frames.tsx) | Shared Storybook frame helpers |
 | [`src/app/storybook/story-docs.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/storybook/story-docs.ts) | Story-specific documentation strings |
 | [`src/app/components/shared/theme/theme-surface-tokens.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/components/shared/theme/theme-surface-tokens.ts) | Shared theme/surface decisions |
 | [`src/app/hooks/use-ha-devices.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/hooks/use-ha-devices.ts) | HA entity to device type mapping |
+| [`src/app/hooks/use-area-rooms.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/hooks/use-area-rooms.ts) | Area-name room source derived from the HA registry |
 | [`src/app/hooks/ha-entity-utils.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/hooks/ha-entity-utils.ts) | Entity transformation utilities |
 
 ## Setup
@@ -217,6 +228,18 @@ Current shared test support lives in:
 - [`src/test/browser-mocks.ts`](/Users/vishal/Development/Github/Navet/Navet/src/test/browser-mocks.ts)
 - [`src/test/factories/home-assistant-service-stub.ts`](/Users/vishal/Development/Github/Navet/Navet/src/test/factories/home-assistant-service-stub.ts)
 
+Active co-located test directories currently include:
+
+- [`src/app/features/calendar/components/calendar/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/calendar/components/calendar/__tests__)
+- [`src/app/features/dashboard/components/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/dashboard/components/__tests__)
+- [`src/app/features/dashboard/hooks/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/dashboard/hooks/__tests__)
+- [`src/app/features/energy/components/dashboard/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/energy/components/dashboard/__tests__)
+- [`src/app/features/energy/components/energy-setup-wizard/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/energy/components/energy-setup-wizard/__tests__)
+- [`src/app/features/energy/utils/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/energy/utils/__tests__)
+- [`src/app/features/lighting/components/light-card/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/lighting/components/light-card/__tests__)
+- [`src/app/features/media/components/media-card/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/media/components/media-card/__tests__)
+- [`src/app/features/rss/components/rss-feed-card/__tests__/`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/rss/components/rss-feed-card/__tests__)
+
 Use:
 
 ```bash

design-system/FEATURES.md

@@ -97,6 +97,36 @@ emits typed events for:
 The store updates only the affected slice for each event. Avoid catch-all "copy the whole service
 state" sync paths.
 
+Navigation keeps `currentRoom` persisted in the store while `activeSection` is derived from the
+URL through [`src/app/navigation/sections.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/navigation/sections.ts).
+
+## Top-level sections
+
+The current primary section model is:
+
+- `home`
+- `energy`
+- `security`
+- `tasks`
+- `locks`
+- `lights`
+- `media`
+- `settings`
+
+Section routing and lazy loading are coordinated by
+[`src/app/features/dashboard/components/dashboard-section-router.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/features/dashboard/components/dashboard-section-router.tsx).
+
+Current ownership split:
+
+- `home`: room-driven dashboard overview, home widgets, and the editable sectioned/flow canvas
+- `energy`: energy dashboard plus energy-specific custom-widget band
+- `security`: camera-focused section built on the shared device section layout
+- `tasks`: placeholder section using the shared dashboard empty-state pattern
+- `locks`: lock-focused section built on the shared device section layout
+- `lights`: all-lights overview using the dashboard all-view grid in custom grouping mode
+- `media`: grouped media section with dedicated audio and TV buckets
+- `settings`: app configuration and personalization surfaces
+
 ## Dashboard
 
 ### Ownership
@@ -119,10 +149,23 @@ Important paths:
 ### Current behavior
 
 - Home is the main editable dashboard section
+- When the active room is `All`, home can switch between sectioned and flow-based layout modes
+- Home layout supports section ordering, section insertion, column movement, and per-section card targeting
 - cards can be added from entity-library and widget flows
 - supported cards can be resized across shared card sizes
 - room grouping modes support custom, room, type, and no-grouping views
 - onboarding can start from all entities, a blank board, or imported config
+- available room ordering preserves user order while merging in new rooms discovered from Home Assistant
+
+### Room sourcing
+
+Home-room navigation is assembled from two sources:
+
+- Home Assistant areas via [`src/app/hooks/use-area-rooms.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/hooks/use-area-rooms.ts)
+- discovered device rooms via [`src/app/hooks/use-devices.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/hooks/use-devices.ts)
+
+This keeps the room list stable when registry-backed area names exist while still surfacing devices
+whose room can only be inferred from entity metadata.
 
 ## Settings
 
@@ -181,6 +224,10 @@ Shared story helpers live in
 [`src/app/storybook/story-frames.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/storybook/story-frames.tsx)
 and [`src/app/storybook/story-docs.ts`](/Users/vishal/Development/Github/Navet/Navet/src/app/storybook/story-docs.ts).
 
+The current layout layer also has direct Storybook coverage for sidebar, header, room-nav, search,
+and section-customization affordances under
+[`src/app/components/layout/`](/Users/vishal/Development/Github/Navet/Navet/src/app/components/layout).
+
 ### Unit-test support
 
 Vitest is the preferred path for:
@@ -202,8 +249,15 @@ The current shared harness provides:
 Test files are co-located with their source in `__tests__/` subdirectories:
 
 - `src/app/hooks/__tests__/` — shared hook and utility tests
-- `src/app/features/dashboard/hooks/__tests__/` — dashboard controller tests
+- `src/app/features/dashboard/components/__tests__/` — home dashboard presentation and layout behavior
+- `src/app/features/dashboard/hooks/__tests__/` — dashboard controller and action tests
 - `src/app/features/calendar/components/__tests__/` — calendar feature tests
+- `src/app/features/energy/components/dashboard/__tests__/` — energy dashboard behavior
+- `src/app/features/energy/components/energy-setup-wizard/__tests__/` — energy setup scoring and draft flows
+- `src/app/features/energy/utils/__tests__/` — energy utilities
+- `src/app/features/lighting/components/light-card/__tests__/` — light card behavior
+- `src/app/features/media/components/media-card/__tests__/` — media card and controller behavior
+- `src/app/features/rss/components/rss-feed-card/__tests__/` — RSS widget logic
 
 ## Card system
 
@@ -261,6 +315,9 @@ Media cards are backed by live Home Assistant `media_player` entities and includ
 - remaining-time handling
 - local mute/unmute restoration behavior
 
+The top-level media section groups entities into audio, TV, and other device-type buckets using
+[`src/app/components/layout/media-section.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/components/layout/media-section.tsx).
+
 ### TV treatment
 
 TV-class media entities use a dedicated TV layout with:
@@ -287,6 +344,7 @@ patterns rather than forking presentation logic.
 - Home Assistant weather entities render as live weather cards
 - card settings support room reassignment
 - weather visuals should still respect low-power rendering constraints
+- forecasts are refreshed from Home Assistant service calls and respect the user's weather forecast mode
 
 ### Calendar
 
@@ -305,6 +363,10 @@ patterns rather than forking presentation logic.
 
 - each section exposes domain-focused grids
 - shared edit/customize affordances should be reused instead of per-section reinvention
+- locks and security use the reusable
+  [`src/app/components/layout/device-section-layout.tsx`](/Users/vishal/Development/Github/Navet/Navet/src/app/components/layout/device-section-layout.tsx)
+  shell for empty states and edit-mode wrapping
+- lights reuse the dashboard all-view grid rather than maintaining a parallel layout implementation
 
 ### Energy
 
@@ -313,6 +375,7 @@ Energy owns:
 - energy widgets
 - energy charts
 - energy-specific UI shells and services
+- the setup wizard and entity-option inference hooks used to map Home Assistant energy preferences
 
 This feature has its own components, hooks, stores, and data layer.
 

design-system/README.md

@@ -18,6 +18,7 @@ Use these docs when you are:
 
 - building or revising shared UI
 - changing card sizing or card-shell behavior
+- changing section-level layouts for locks, lights, media, security, or home overview
 - touching theme tokens, surface logic, or appearance controls
 - reorganizing Storybook taxonomy or stable exports
 - evaluating whether UI belongs in `primitives`, `patterns`, `shared`, or a feature module
@@ -92,6 +93,20 @@ Curated public exports for Storybook and stable discovery.
 
 Use `system/` to re-export mature shared pieces. Do not author new components there by default.
 
+### `src/app/components/layout/`
+
+App-shell and section-level layout composition for navigation, room controls, and domain-focused
+entity sections.
+
+This layer now includes reusable section shells such as:
+
+- `DeviceSectionLayout` for consistent empty-state and edit-mode handling
+- `EntityGrid` for grouped section content
+- specialized section modules for locks, media, and security
+
+Use `layout/` when the component owns app-level structure or cross-feature section composition,
+not when it is a portable primitive or feature-local card.
+
 ## Foundations and Tokens
 
 The shared first-layer foundations live in
@@ -223,6 +238,7 @@ Storybook covers:
 - foundation tokens
 - shared primitives and patterns
 - app shell components
+- layout-level shells and navigation surfaces
 - entity cards and custom widgets
 - dashboard flows
 - energy visuals
@@ -250,6 +266,7 @@ Use unit tests for:
 - token and helper logic with meaningful branching
 - shared hooks that depend on timers, viewport/media-query state, or persisted browser state
 - controller logic that composes store selectors and action handlers
+- setup helpers that score, infer, or merge feature configuration state
 
 Do not default to broad snapshot coverage for thin visual wrappers that are already exercised in
 Storybook.

docs/README.md

@@ -8,7 +8,7 @@ This directory is the index for active Navet documentation.
 - [technical/REACT_ZUSTAND.md](technical/REACT_ZUSTAND.md): state-management rules and store/service contracts
 - [../design-system/README.md](../design-system/README.md): design-system scope, shared UI layers, and Storybook workflow
 - [../src/test/](/Users/vishal/Development/Github/Navet/Navet/src/test): shared unit-test helpers, browser mocks, and HA service stubs
-- [../design-system/FEATURES.md](../design-system/FEATURES.md): feature map with test coverage locations
+- [../design-system/FEATURES.md](../design-system/FEATURES.md): feature map with section routing, layout ownership, and test coverage locations
 
 ## Documentation Map
 
@@ -24,7 +24,7 @@ This directory is the index for active Navet documentation.
 
 - [technical/REACT_ZUSTAND.md](technical/REACT_ZUSTAND.md): Zustand-only shared state guidance
 - [../src/test/](/Users/vishal/Development/Github/Navet/Navet/src/test): shared test harness for Vitest-based unit coverage
-- [../design-system/FEATURES.md](../design-system/FEATURES.md): implementation map of current product areas and test locations
+- [../design-system/FEATURES.md](../design-system/FEATURES.md): implementation map of current product areas, top-level sections, and test locations
 - [../design-system/UI-GUIDELINES.md](../design-system/UI-GUIDELINES.md): visual rules, component patterns, and performance-sensitive UI guidance
 - [../design-system/STORYBOOK_FOUNDATION.md](../design-system/STORYBOOK_FOUNDATION.md): Storybook structure and workshop rules
 
@@ -80,7 +80,8 @@ This directory is the index for active Navet documentation.
 - Prefer updating active docs over adding duplicate one-off notes
 - Treat `docs/archive/` as historical material, not the current source of truth
 - When Storybook ownership, card sizing, or feature boundaries change, update the design-system docs
-- When shared test harnesses, store-reset behavior, or service stubs change, update the testing references in the active docs
+- When shared test harnesses, store-reset behavior, service stubs, or active `__tests__/` directories change, update the testing references in the active docs
+- When top-level sections, room sourcing, or dashboard layout modes change, update `README.md` and `design-system/FEATURES.md`
 - When new primitives, patterns, or test directories are added, update FEATURES.md and README.md
 
 Last updated: April 29, 2026

package.json

@@ -42,7 +42,7 @@
     "clsx": "2.1.1",
     "home-assistant-js-websocket": "^9.6.0",
     "leaflet": "^1.9.4",
-    "lucide-react": "1.11.0",
+    "lucide-react": "1.14.0",
     "react-leaflet": "^5.0.0",
     "sonner": "2.0.7",
     "tailwind-merge": "3.5.0",
@@ -52,11 +52,11 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/react": "10.3.5",
-    "@storybook/react-vite": "^10.3.5",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@tailwindcss/vite": "4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -68,9 +68,9 @@
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.0",
     "playwright": "^1.59.1",
-    "storybook": "^10.3.5",
+    "storybook": "^10.3.6",
     "tailwindcss": "4.2.4",
     "typescript": "^6.0.3",
     "vite": "8.0.10",