Sort zones alphabetically with home first

The zone config page listed UI zones sorted and YAML zones after them in state order; the map overview sorted all zones by name. Both now show the home zone first and the rest alphabetically.
Show zone markers in the zone list
2026-09-07 11:58:45 +00:00 · 2026-09-07 12:30:58 +02:00 · 2026-09-07 12:30:58 +02:00 · 2026-09-07 12:30:58 +02:00
7 changed files with 224 additions and 114 deletions
@@ -127,11 +127,12 @@ export class HaLocationSelector extends LitElement {
              ? this.hass.config.longitude
              : value.longitude,
          radius: selector.location?.radius ? value?.radius || 1000 : undefined,
-          radius_color: zoneRadiusColor,
+          radius_color: selector.location?.color || zoneRadiusColor,
          icon:
-            selector.location?.icon || selector.location?.radius
+            selector.location?.icon ||
+            (selector.location?.radius
              ? "mdi:map-marker-radius"
-              : "mdi:map-marker",
+              : "mdi:map-marker"),
          location_editable: true,
          radius_editable:
            !!selector.location?.radius && !selector.location?.radius_readonly,
@@ -368,6 +368,8 @@ export interface LocationSelector {
    radius?: boolean;
    radius_readonly?: boolean;
    icon?: string;
+    /** Marker and radius color; defaults to the theme's zone color */
+    color?: string;
  } | null;
 }

@@ -12,14 +12,21 @@ import { DirtyStateProviderMixin } from "../../../mixins/dirty-state-provider-mi
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { HomeZoneDetailDialogParams } from "./show-dialog-home-zone-detail";
+import {
+  HOME_ZONE_ENTITY_ID,
+  zoneColor,
+} from "../../../common/map/entity-map-colors";

-const SCHEMA = [
-  {
-    name: "location",
-    required: true,
-    selector: { location: { radius: true } },
-  },
-];
+const SCHEMA = memoizeOne(
+  (icon: string, color: string) =>
+    [
+      {
+        name: "location",
+        required: true,
+        selector: { location: { radius: true, icon, color } },
+      },
+    ] as const
+);

@customElement("dialog-home-zone-detail")
 class DialogHomeZoneDetail extends DirtyStateProviderMixin<HomeZoneMutableParams>()(
@@ -81,7 +88,11 @@ class DialogHomeZoneDetail extends DirtyStateProviderMixin<HomeZoneMutableParams
        <ha-form
          autofocus
          .hass=${this.hass}
-          .schema=${SCHEMA}
+          .schema=${SCHEMA(
+            this.hass.states[HOME_ZONE_ENTITY_ID]?.attributes.icon ||
+              "mdi:home",
+            zoneColor(HOME_ZONE_ENTITY_ID, false, getComputedStyle(this))
+          )}
          .data=${this._formData(this._data)}
          .error=${this._error}
          .computeLabel=${this._computeLabel}
@@ -15,6 +15,7 @@ import { DirtyStateProviderMixin } from "../../../mixins/dirty-state-provider-mi
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
+import { zoneColor } from "../../../common/map/entity-map-colors";

@customElement("dialog-zone-detail")
 class DialogZoneDetail extends DirtyStateProviderMixin<ZoneMutableParams>()(
@@ -105,7 +106,16 @@ class DialogZoneDetail extends DirtyStateProviderMixin<ZoneMutableParams>()(
        <ha-form
          autofocus
          .hass=${this.hass}
-          .schema=${this._schema(this._data.icon)}
+          .schema=${this._schema(
+            this._data.icon,
+            this._params?.entityId
+              ? zoneColor(
+                  this._params.entityId,
+                  !!this._data.passive,
+                  getComputedStyle(this)
+                )
+              : undefined
+          )}
          .data=${this._formData(this._data)}
          .error=${this._error}
          .computeLabel=${this._computeLabel}
@@ -153,7 +163,7 @@ class DialogZoneDetail extends DirtyStateProviderMixin<ZoneMutableParams>()(
  }

  private _schema = memoizeOne(
-    (icon?: string) =>
+    (icon?: string, color?: string) =>
      [
        {
          name: "name",
@@ -172,7 +182,7 @@ class DialogZoneDetail extends DirtyStateProviderMixin<ZoneMutableParams>()(
        {
          name: "location",
          required: true,
-          selector: { location: { radius: true, icon } },
+          selector: { location: { radius: true, icon, color } },
        },
        { name: "passive_note", type: "constant" },
        { name: "passive", selector: { boolean: {} } },
@@ -3,6 +3,7 @@ import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@@ -24,9 +25,14 @@ import type {
 import { saveCoreConfig } from "../../../data/core";
 import { subscribeEntityRegistry } from "../../../data/entity/entity_registry";
 import {
+  HOME_ZONE_ENTITY_ID,
  subscribeEntityMapColors,
  zoneColor,
 } from "../../../common/map/entity-map-colors";
+import {
+  contrastingZoneContent,
+  zoneInitials,
+} from "../../../common/map/zone-marker";
 import type {
  HomeZoneMutableParams,
  Zone,
@@ -79,6 +85,151 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
  // Bumped when entity map colors change to recompute the memoized locations
  @state() private _colorVersion = 0;

+  // Home first, then alphabetical, for UI and YAML zones alike
+  private _sortedItems = memoizeOne(
+    (
+      storageItems: Zone[],
+      stateItems: HassEntity[],
+      language: string
+    ): ({ entry: Zone } | { stateObject: HassEntity })[] => {
+      const items = [
+        ...storageItems.map((entry) => ({
+          entry,
+          name: entry.name,
+          home: false,
+        })),
+        ...stateItems.map((stateObject) => ({
+          stateObject,
+          name: stateObject.attributes.friendly_name || stateObject.entity_id,
+          home: stateObject.entity_id === HOME_ZONE_ENTITY_ID,
+        })),
+      ];
+      return items.sort((a, b) =>
+        a.home !== b.home
+          ? a.home
+            ? -1
+            : 1
+          : stringCompare(a.name, b.name, language)
+      );
+    }
+  );
+
+  private _renderStorageItem(entry: Zone) {
+    const hass = this.hass;
+    return html`
+      <ha-list-item
+        .entry=${entry}
+        .id=${this.narrow ? entry.id : ""}
+        graphic="avatar"
+        .hasMeta=${!this.narrow}
+        @request-selected=${this._itemClicked}
+        .value=${entry.id}
+        ?selected=${this._activeEntry === entry.id}
+      >
+        ${this._renderZoneGraphic(
+          this._zoneEntityIds[entry.id] ?? `zone.${entry.id}`,
+          !!entry.passive,
+          entry.icon,
+          entry.name
+        )}
+        ${entry.name}
+        ${
+          !this.narrow
+            ? html`
+                <div slot="meta">
+                  <ha-icon-button
+                    .id=${entry.id}
+                    .entry=${entry}
+                    @click=${this._openEditEntry}
+                    .path=${mdiPencil}
+                    .label=${hass.localize("ui.common.edit_item", {
+                      name: entry.name,
+                    })}
+                  ></ha-icon-button>
+                </div>
+              `
+            : ""
+        }
+      </ha-list-item>
+    `;
+  }
+
+  private _renderStateItem(stateObject: HassEntity) {
+    const hass = this.hass;
+    return html`
+      <ha-list-item
+        graphic="avatar"
+        .id=${this.narrow ? stateObject.entity_id : ""}
+        .hasMeta=${!this.narrow || stateObject.entity_id !== "zone.home"}
+        .value=${stateObject.entity_id}
+        @request-selected=${this._stateItemClicked}
+        ?selected=${this._activeEntry === stateObject.entity_id}
+        .noEdit=${stateObject.entity_id !== "zone.home" || !this._canEditCore}
+      >
+        ${this._renderZoneGraphic(
+          stateObject.entity_id,
+          !!stateObject.attributes.passive,
+          stateObject.attributes.icon,
+          stateObject.attributes.friendly_name || stateObject.entity_id
+        )}
+        ${stateObject.attributes.friendly_name || stateObject.entity_id}
+        ${
+          this.narrow &&
+          stateObject.entity_id === "zone.home" &&
+          !this._canEditCore
+            ? nothing
+            : html`<ha-icon-button
+                  .id="zone-${slugify(stateObject.entity_id)}"
+                  .entityId=${stateObject.entity_id}
+                  .noEdit=${
+                    stateObject.entity_id !== "zone.home" || !this._canEditCore
+                  }
+                  .path=${
+                    stateObject.entity_id === "zone.home" && this._canEditCore
+                      ? mdiPencil
+                      : mdiPencilOff
+                  }
+                  .label=${hass.localize("ui.common.edit_item", {
+                    name: hass.config.location_name,
+                  })}
+                  @click=${this._editHomeZone}
+                  slot="meta"
+                ></ha-icon-button>
+                <ha-tooltip
+                  .for="zone-${slugify(stateObject.entity_id)}"
+                  placement="left"
+                  .disabled=${stateObject.entity_id === "zone.home"}
+                  hoist
+                >
+                  ${hass.localize("ui.panel.config.zone.configured_in_yaml")}
+                </ha-tooltip>`
+        }
+      </ha-list-item>
+    `;
+  }
+
+  // The zone as it looks on the map: its color, with its icon or initials
+  private _renderZoneGraphic(
+    entityId: string,
+    passive: boolean,
+    icon: string | undefined,
+    name: string
+  ) {
+    const color = zoneColor(entityId, passive, getComputedStyle(this));
+    return html`
+      <div
+        slot="graphic"
+        class="zone-avatar"
+        style=${styleMap({
+          background: color,
+          color: contrastingZoneContent(color),
+        })}
+      >
+        ${icon ? html`<ha-icon .icon=${icon}></ha-icon>` : zoneInitials(name)}
+      </div>
+    `;
+  }
+
  private _getZones = memoizeOne(
    (
      storageItems: Zone[],
@@ -165,102 +316,14 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
          `
        : html`
            <ha-list>
-              ${this._storageItems.map(
-                (entry) => html`
-                  <ha-list-item
-                    .entry=${entry}
-                    .id=${this.narrow ? entry.id : ""}
-                    graphic="icon"
-                    .hasMeta=${!this.narrow}
-                    @request-selected=${this._itemClicked}
-                    .value=${entry.id}
-                    ?selected=${this._activeEntry === entry.id}
-                  >
-                    <ha-icon .icon=${entry.icon} slot="graphic"></ha-icon>
-                    ${entry.name}
-                    ${
-                      !this.narrow
-                        ? html`
-                            <div slot="meta">
-                              <ha-icon-button
-                                .id=${entry.id}
-                                .entry=${entry}
-                                @click=${this._openEditEntry}
-                                .path=${mdiPencil}
-                                .label=${hass.localize("ui.common.edit_item", {
-                                  name: entry.name,
-                                })}
-                              ></ha-icon-button>
-                            </div>
-                          `
-                        : ""
-                    }
-                  </ha-list-item>
-                `
-              )}
-              ${this._stateItems.map(
-                (stateObject) => html`
-                  <ha-list-item
-                    graphic="icon"
-                    .id=${this.narrow ? stateObject.entity_id : ""}
-                    .hasMeta=${
-                      !this.narrow || stateObject.entity_id !== "zone.home"
-                    }
-                    .value=${stateObject.entity_id}
-                    @request-selected=${this._stateItemClicked}
-                    ?selected=${this._activeEntry === stateObject.entity_id}
-                    .noEdit=${
-                      stateObject.entity_id !== "zone.home" ||
-                      !this._canEditCore
-                    }
-                  >
-                    <ha-icon
-                      .icon=${stateObject.attributes.icon}
-                      slot="graphic"
-                    >
-                    </ha-icon>
-
-                    ${
-                      stateObject.attributes.friendly_name ||
-                      stateObject.entity_id
-                    }
-                    ${
-                      this.narrow &&
-                      stateObject.entity_id === "zone.home" &&
-                      !this._canEditCore
-                        ? nothing
-                        : html`<ha-icon-button
-                              .id="zone-${slugify(stateObject.entity_id)}"
-                              .entityId=${stateObject.entity_id}
-                              .noEdit=${
-                                stateObject.entity_id !== "zone.home" ||
-                                !this._canEditCore
-                              }
-                              .path=${
-                                stateObject.entity_id === "zone.home" &&
-                                this._canEditCore
-                                  ? mdiPencil
-                                  : mdiPencilOff
-                              }
-                              .label=${hass.localize("ui.common.edit_item", {
-                                name: hass.config.location_name,
-                              })}
-                              @click=${this._editHomeZone}
-                              slot="meta"
-                            ></ha-icon-button>
-                            <ha-tooltip
-                              .for="zone-${slugify(stateObject.entity_id)}"
-                              placement="left"
-                              .disabled=${stateObject.entity_id === "zone.home"}
-                              hoist
-                            >
-                              ${hass.localize(
-                                "ui.panel.config.zone.configured_in_yaml"
-                              )}
-                            </ha-tooltip>`
-                    }
-                  </ha-list-item>
-                `
+              ${this._sortedItems(
+                this._storageItems,
+                this._stateItems,
+                hass.locale.language
+              ).map((item) =>
+                "entry" in item
+                  ? this._renderStorageItem(item.entry)
+                  : this._renderStateItem(item.stateObject)
              )}
            </ha-list>
          `;
@@ -576,6 +639,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
  private async _openDialog(entry?: Zone) {
    showZoneDetailDialog(this, {
      entry,
+      entityId: entry ? this._zoneEntityIds[entry.id] : undefined,
      createEntry: (values) => this._createEntry(values),
      updateEntry: entry
        ? (values) => this._updateEntry(entry, values, true)
@@ -603,6 +667,19 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
    ha-icon-button:not([disabled]) {
      color: var(--secondary-text-color);
    }
+    .zone-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--ha-font-weight-medium);
+    }
+    .zone-avatar ha-icon {
+      color: inherit;
+      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    }
    ha-icon-button {
      --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
    }
@@ -3,6 +3,8 @@ import type { Zone, ZoneMutableParams } from "../../../data/zone";

 export interface ZoneDetailDialogParams {
  entry?: Zone;
+  /** The zone's entity, when it exists, for its map color */
+  entityId?: string;
  createEntry: (values: ZoneMutableParams) => Promise<unknown>;
  updateEntry?: (updates: Partial<ZoneMutableParams>) => Promise<unknown>;
  removeEntry?: () => Promise<boolean>;
@@ -180,12 +180,19 @@ export class HuiMapOverview extends LitElement {
          stateObj.attributes.latitude !== undefined &&
          stateObj.attributes.longitude !== undefined
      )
-      .sort((a, b) =>
-        computeStateName(a).localeCompare(
+      .sort((a, b) => {
+        // Home first
+        if (
+          (a.entity_id === HOME_ZONE_ENTITY_ID) !==
+          (b.entity_id === HOME_ZONE_ENTITY_ID)
+        ) {
+          return a.entity_id === HOME_ZONE_ENTITY_ID ? -1 : 1;
+        }
+        return computeStateName(a).localeCompare(
          computeStateName(b),
          this._i18n.locale.language
-        )
-      );
+        );
+      });
  }

  protected shouldUpdate(changedProps: PropertyValues): boolean {