From 5658edfba8f506abb27ba2a8c51a76dd0daa5559 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Apr 2026 02:34:04 +0000
Subject: [PATCH] Match summary editor rows to dashboard order with icon,
 color, and toggle on right

Each summary row now shows its colored icon and title matching the
dashboard appearance, with the toggle switch moved to the right side.
Order matches the dashboard: light, climate, security, media players,
weather, energy, persons.

https://claude.ai/code/session_01AqgbQULH5vfETibiba5RXH
---
 src/panels/home/dialogs/dialog-edit-home.ts | 53 +++++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/panels/home/dialogs/dialog-edit-home.ts b/src/panels/home/dialogs/dialog-edit-home.ts
index f195f5e008..0775ad91e8 100644
--- a/src/panels/home/dialogs/dialog-edit-home.ts
+++ b/src/panels/home/dialogs/dialog-edit-home.ts
@@ -1,24 +1,50 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-dialog";
+import "../../../components/ha-icon";
 import "../../../components/ha-switch";
 import type { HomeFrontendSystemData } from "../../../data/frontend";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import {
-  HOME_SUMMARIES,
   getSummaryLabel,
+  HOME_SUMMARIES_ICONS,
   type HomeSummary,
 } from "../../../panels/lovelace/strategies/home/helpers/home-summaries";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { EditHomeDialogParams } from "./show-dialog-edit-home";
 
-const ALL_SUMMARY_KEYS = [...HOME_SUMMARIES, "weather"] as const;
+interface SummaryInfo {
+  key: string;
+  icon: string;
+  color: string;
+}
+
+// Ordered to match dashboard rendering order
+const SUMMARY_ITEMS: SummaryInfo[] = [
+  { key: "light", icon: HOME_SUMMARIES_ICONS.light, color: "amber" },
+  { key: "climate", icon: HOME_SUMMARIES_ICONS.climate, color: "deep-orange" },
+  {
+    key: "security",
+    icon: HOME_SUMMARIES_ICONS.security,
+    color: "blue-grey",
+  },
+  {
+    key: "media_players",
+    icon: HOME_SUMMARIES_ICONS.media_players,
+    color: "blue",
+  },
+  { key: "weather", icon: "mdi:weather-partly-cloudy", color: "teal" },
+  { key: "energy", icon: HOME_SUMMARIES_ICONS.energy, color: "amber" },
+  { key: "persons", icon: HOME_SUMMARIES_ICONS.persons, color: "green" },
+];
 
 @customElement("dialog-edit-home")
 export class DialogEditHome
@@ -96,16 +122,21 @@ export class DialogEditHome
           ${this.hass.localize("ui.panel.home.editor.summaries_description")}
         </p>
         <div class="summary-toggles">
-          ${ALL_SUMMARY_KEYS.map((key) => {
-            const label = this._getSummaryLabel(key);
+          ${SUMMARY_ITEMS.map((item) => {
+            const label = this._getSummaryLabel(item.key);
+            const color = computeCssColor(item.color);
             return html`
               <label class="summary-toggle">
+                <ha-icon
+                  .icon=${item.icon}
+                  style=${styleMap({ "--mdc-icon-size": "24px", color })}
+                ></ha-icon>
+                <span class="summary-label">${label}</span>
                 <ha-switch
-                  .checked=${!hiddenSummaries.has(key)}
-                  .summary=${key}
+                  .checked=${!hiddenSummaries.has(item.key)}
+                  .summary=${item.key}
                   @change=${this._summaryToggleChanged}
                 ></ha-switch>
-                <span>${label}</span>
               </label>
             `;
           })}
@@ -227,17 +258,21 @@ export class DialogEditHome
       .summary-toggles {
         display: flex;
         flex-direction: column;
-        gap: var(--ha-space-2);
       }
 
       .summary-toggle {
         display: flex;
         align-items: center;
         gap: var(--ha-space-3);
-        padding: var(--ha-space-1) 0;
+        padding: var(--ha-space-2) 0;
         cursor: pointer;
       }
 
+      .summary-label {
+        flex: 1;
+        font-size: 14px;
+      }
+
       ha-entities-picker {
         display: block;
       }