Color the ESPHome setup audio capability in Sendspin red

Use the Sendspin mark and check badges in the ESPHome setup wizard
The audio row and banner show the Sendspin mark instead of a music note, and configured serial ports and the connected Z-Wave network show the check badge used for completed rows instead of a Configured chip.
2026-10-23 14:14:36 +00:00 · 2026-10-23 17:09:52 +03:00 · 2026-10-23 16:38:59 +03:00 · 2026-10-23 15:04:11 +03:00
14 changed files with 140 additions and 119 deletions
@@ -114,8 +114,7 @@ export const automationsLinkFromUrl = (
      "ha-filter-devices": filter(values("device")),
      "ha-filter-entities": filter(values("entity")),
      "ha-filter-labels": filter(values("label")),
-      // The category filter picks one category
-      "ha-filter-categories": filter(values("category").slice(0, 1)),
+      "ha-filter-categories": filter(values("category")),
      "ha-filter-voice-assistants": filter(values("assistants")),
      "ha-filter-blueprints": filter(values("blueprint")),
    },
@@ -107,8 +107,7 @@ export const scenesLinkFromUrl = (
      "ha-filter-devices": filter(values("device")),
      "ha-filter-entities": filter(values("entity")),
      "ha-filter-labels": filter(values("label")),
-      // The category filter picks one category
-      "ha-filter-categories": filter(values("category").slice(0, 1)),
+      "ha-filter-categories": filter(values("category")),
      "ha-filter-voice-assistants": filter(values("assistants")),
    },
  };
@@ -109,8 +109,7 @@ export const scriptsLinkFromUrl = (
      "ha-filter-devices": filter(values("device")),
      "ha-filter-entities": filter(values("entity")),
      "ha-filter-labels": filter(values("label")),
-      // The category filter picks one category
-      "ha-filter-categories": filter(values("category").slice(0, 1)),
+      "ha-filter-categories": filter(values("category")),
      "ha-filter-voice-assistants": filter(values("assistants")),
      "ha-filter-blueprints": filter(values("blueprint")),
    },
@@ -1,4 +1,3 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import {
  mdiDelete,
  mdiDotsVertical,
@@ -12,6 +11,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { createRef, ref } from "lit/directives/ref";
+import { repeat } from "lit/directives/repeat";
 import {
  FilterPanelController,
  filterPanelStyles,
@@ -35,8 +35,9 @@ import type { HaDropdownSelectEvent } from "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
-import "./ha-list";
 import "./ha-list-item";
+import "./item/ha-list-item-option";
+import "./list/ha-list-selectable";

@customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -94,47 +95,44 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
        this._panel.showContent
          ? html`
              <div class="content" ${ref(this._content)}>
-                <ha-list
-                  @selected=${this._categorySelected}
+                <ha-list-selectable
                  class="ha-scrollbar"
-                  activatable
+                  multi
+                  aria-label=${this.hass.localize(
+                    "ui.panel.config.category.caption"
+                  )}
+                  @ha-list-item-selected=${this._categoryAdded}
+                  @ha-list-item-deselected=${this._categoryRemoved}
                >
-                  ${
-                    this._categories.length > 0
-                      ? html`<ha-list-item
-                          .selected=${!this.value?.length}
-                          .activated=${!this.value?.length}
-                          >${this.hass.localize(
-                            "ui.panel.config.category.filter.show_all"
-                          )}</ha-list-item
-                        >`
-                      : nothing
-                  }
-                  ${this._categories.map(
+                  ${repeat(
+                    this._categories,
+                    (category) => category.category_id,
                    (category) =>
-                      html`<ha-list-item
+                      html`<ha-list-item-option
+                        appearance="checkbox"
+                        selection-position="end"
                        .value=${category.category_id}
-                        .selected=${this.value?.includes(category.category_id)}
-                        .activated=${this.value?.includes(category.category_id)}
-                        graphic="icon"
-                        hasMeta
+                        .selected=${
+                          this.value?.includes(category.category_id) ?? false
+                        }
                      >
                        ${
                          category.icon
                            ? html`<ha-icon
-                                slot="graphic"
+                                slot="start"
                                .icon=${category.icon}
                              ></ha-icon>`
                            : html`<ha-svg-icon
                                .path=${mdiTag}
-                                slot="graphic"
+                                slot="start"
                              ></ha-svg-icon>`
                        }
-                        ${category.name}
+                        <span slot="headline">${category.name}</span>
                        <ha-dropdown
                          @click=${stopPropagation}
+                          @keydown=${this._handleMenuKeydown}
                          @wa-select=${this._handleAction}
-                          slot="meta"
+                          slot="end"
                          .categoryId=${category.category_id}
                        >
                          <ha-icon-button
@@ -161,9 +159,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                            )}
                          </ha-dropdown-item>
                        </ha-dropdown>
-                      </ha-list-item>`
+                      </ha-list-item-option>`
                  )}
-                </ha-list>
+                </ha-list-selectable>
                <ha-list-item graphic="icon" @click=${this._addCategory}>
                  <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
                  ${this.hass.localize("ui.panel.config.category.editor.add")}
@@ -213,10 +211,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    }
    try {
      await deleteCategoryRegistryEntry(this.hass, this.scope!, id);
-      fireEvent(this, "data-table-filter-changed", {
-        value: [],
-        items: undefined,
-      });
+
+      if (this.value?.includes(id)) {
+        this._setValue(this.value.filter((categoryId) => categoryId !== id));
+      }
    } catch (err: any) {
      alert(`Failed to delete: ${err.message}`);
    }
@@ -237,25 +235,39 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    this.expanded = ev.detail.expanded;
  }

-  private async _categorySelected(ev: CustomEvent<SelectedDetail<number>>) {
-    if (!ev.detail.index) {
-      fireEvent(this, "data-table-filter-changed", {
-        value: [],
-        items: undefined,
-      });
-      this.value = [];
-      return;
+  // The list toggles the focused row on Enter and Space, which would pick the
+  // category instead of opening its menu.
+  private _handleMenuKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
    }
-    const index = ev.detail.index - 1;
+  }

-    const val = this._categories![index]?.category_id;
-    if (!val) {
+  private _categoryAdded(ev: CustomEvent<number>) {
+    const categoryId = this._categories[ev.detail]?.category_id;
+
+    if (!categoryId || this.value?.includes(categoryId)) {
      return;
    }
-    this.value = [val];
+
+    this._setValue([...(this.value || []), categoryId]);
+  }
+
+  private _categoryRemoved(ev: CustomEvent<number>) {
+    const categoryId = this._categories[ev.detail]?.category_id;
+
+    if (!categoryId) {
+      return;
+    }
+
+    this._setValue((this.value || []).filter((id) => id !== categoryId));
+  }
+
+  private _setValue(value: string[]) {
+    this.value = value;

    fireEvent(this, "data-table-filter-changed", {
-      value: this.value,
+      value: value.length ? value : undefined,
      items: undefined,
    });
  }
@@ -298,13 +310,22 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          padding: 0px 2px;
          color: var(--text-primary-color);
        }
-        ha-list {
+        /* The list scrolls through its own container, not through the host. */
+        ha-list-selectable {
+          display: flex;
          flex: 1;
          min-height: 0;
-          --mdc-list-item-meta-size: auto;
-          --mdc-list-side-padding-right: var(--ha-space-1);
-          --mdc-list-side-padding-left: var(--ha-space-4);
-          --ha-icon-button-size: 36px;
+        }
+        ha-list-selectable::part(base) {
+          flex: 1;
+          min-height: 0;
+        }
+        /* Keeps a row with its menu button as tall as the other filters. */
+        ha-list-item-option {
+          --ha-row-item-padding-block: var(--ha-space-2);
+        }
+        ha-list-item-option ha-icon-button {
+          --ha-icon-button-size: 32px;
        }
        ha-list-item {
          --mdc-list-item-graphic-margin: var(--ha-space-4);
@@ -1,11 +1,7 @@
-import {
-  mdiAccessPoint,
-  mdiBluetooth,
-  mdiMusic,
-  mdiSwapHorizontal,
-} from "@mdi/js";
+import { mdiAccessPoint, mdiBluetooth, mdiSwapHorizontal } from "@mdi/js";
 import { computeDomain } from "../common/entity/compute_domain";
 import type { LocalizeKeys } from "../common/translations/localize";
+import { mdiSendspin } from "../resources/sendspin-logo-svg";
 import type { ConfigEntry } from "./config_entries";
 import type { DataEntryFlowProgress } from "./data_entry_flow";
 import type {
@@ -55,17 +51,19 @@ export const CAPABILITY_ORDER: ESPHomeCapabilityId[] = [
  "serial",
 ];

-/** Theme colors for each setup capability. */
+const SENDSPIN_RED = "#e25c4c";
+
+/** Colors for each setup capability. */
 export const ESPHOME_CAPABILITY_ACCENTS: Record<ESPHomeCapabilityId, string> = {
  bluetooth: "var(--blue-color)",
-  audio: "var(--light-green-color)",
+  audio: SENDSPIN_RED,
  connectivity: "var(--cyan-color)",
  serial: "var(--deep-purple-color)",
 };

 export const ESPHOME_CAPABILITY_ICONS: Record<ESPHomeCapabilityId, string> = {
  bluetooth: mdiBluetooth,
-  audio: mdiMusic,
+  audio: mdiSendspin,
  connectivity: mdiAccessPoint,
  serial: mdiSwapHorizontal,
 };
@@ -398,14 +398,16 @@ class DialogESPHomeDeviceSetup extends DialogMixin<ESPHomeDeviceSetupDialogParam
    if (status !== "completed") {
      return nothing;
    }
+    return this._checkBadge(
+      this._i18n!.localize(
+        "ui.panel.config.devices.esphome.setup_status_completed"
+      )
+    );
+  }
+
+  private _checkBadge(label: string) {
    return html`
-      <span
-        class="status-badge completed"
-        role="img"
-        aria-label=${this._i18n!.localize(
-          "ui.panel.config.devices.esphome.setup_status_completed"
-        )}
-      >
+      <span class="status-badge completed" role="img" aria-label=${label}>
        <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
      </span>
    `;
@@ -507,7 +509,7 @@ class DialogESPHomeDeviceSetup extends DialogMixin<ESPHomeDeviceSetupDialogParam
    return html`
      <div
        class="protect"
-        style="--capability-accent: ${ESPHOME_CAPABILITY_ACCENTS.audio}"
+        style="--capability-accent: var(--light-green-color)"
      >
        <span class="icon-chip">
          <ha-svg-icon .path=${mdiShieldLock}></ha-svg-icon>
@@ -624,11 +626,9 @@ class DialogESPHomeDeviceSetup extends DialogMixin<ESPHomeDeviceSetupDialogParam
            <span class="port-text">
              <span class="port-name">${entry.title}</span>
            </span>
-            <span class="chip active">
-              ${localize(
-                "ui.panel.config.devices.esphome.setup_zwave_configured"
-              )}
-            </span>
+            ${this._checkBadge(
+              localize("ui.panel.config.devices.esphome.setup_zwave_configured")
+            )}
          </li>
        </ul>
      `;
@@ -748,13 +748,11 @@ class DialogESPHomeDeviceSetup extends DialogMixin<ESPHomeDeviceSetupDialogParam
                        </span>
                      `
                    : usage.consumers.length
-                      ? html`
-                          <span class="chip active">
-                            ${localize(
-                              "ui.panel.config.devices.esphome.setup_serial_configured"
-                            )}
-                          </span>
-                        `
+                      ? this._checkBadge(
+                          localize(
+                            "ui.panel.config.devices.esphome.setup_serial_configured"
+                          )
+                        )
                      : html`
                          <ha-button size="s" @click=${this._setupSerialPort}>
                            ${localize(
@@ -1404,10 +1402,6 @@ class DialogESPHomeDeviceSetup extends DialogMixin<ESPHomeDeviceSetupDialogParam
          background: var(--ha-color-fill-neutral-normal-resting);
          color: var(--primary-text-color);
        }
-        .chip.active {
-          background: var(--success-color);
-          color: var(--ha-color-on-success-loud);
-        }
        .ma-offer {
          display: flex;
          flex-direction: column;
@@ -980,13 +980,17 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
        // the filters below only expose the selected options (as filter.value);
        // applying the filter must be done here
      } else if (isFilterUsed(key, filter, "ha-filter-categories")) {
-        // category filter only allows a single selected option
-        filteredEntityIds = filteredEntityIds.filter(
-          (entityId) =>
-            filter.value![0] ===
-            this._entityReg.find((reg) => reg.entity_id === entityId)
-              ?.categories.automation
-        );
+        filteredEntityIds = filteredEntityIds.filter((entityId) => {
+          const category = this._entityReg.find(
+            (reg) => reg.entity_id === entityId
+          )?.categories.automation;
+
+          return (
+            category !== undefined &&
+            Array.isArray(filter.value) &&
+            filter.value.includes(category)
+          );
+        });
      } else if (isFilterUsed(key, filter, "ha-filter-labels")) {
        filteredEntityIds = filteredEntityIds.filter((entityId) =>
          this._entityReg
@@ -830,13 +830,17 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
        // the filters below only expose the selected options (as filter.value);
        // applying the filter must be done here
      } else if (isFilterUsed(key, filter, "ha-filter-categories")) {
-        // category filter only allows a single selected option
-        filteredEntityIds = filteredEntityIds.filter(
-          (entityId) =>
-            filter.value![0] ===
-            this._entityReg.find((reg) => reg.entity_id === entityId)
-              ?.categories.scene
-        );
+        filteredEntityIds = filteredEntityIds.filter((entityId) => {
+          const category = this._entityReg.find(
+            (reg) => reg.entity_id === entityId
+          )?.categories.scene;
+
+          return (
+            category !== undefined &&
+            Array.isArray(filter.value) &&
+            filter.value.includes(category)
+          );
+        });
      } else if (isFilterUsed(key, filter, "ha-filter-labels")) {
        filteredEntityIds = filteredEntityIds.filter((entityId) =>
          this._entityReg
@@ -783,13 +783,17 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
        // the filters below only expose the selected options (as filter.value);
        // applying the filter must be done here
      } else if (isFilterUsed(key, filter, "ha-filter-categories")) {
-        // category filter only allows a single selected option
-        filteredEntityIds = filteredEntityIds.filter(
-          (entityId) =>
-            filter.value![0] ===
-            this._entityReg.find((reg) => reg.entity_id === entityId)
-              ?.categories.script
-        );
+        filteredEntityIds = filteredEntityIds.filter((entityId) => {
+          const category = this._entityReg.find(
+            (reg) => reg.entity_id === entityId
+          )?.categories.script;
+
+          return (
+            category !== undefined &&
+            Array.isArray(filter.value) &&
+            filter.value.includes(category)
+          );
+        });
      } else if (isFilterUsed(key, filter, "ha-filter-labels")) {
        filteredEntityIds = filteredEntityIds.filter((entityId) =>
          this._entityReg
@@ -0,0 +1,2 @@
+export const mdiSendspin =
+  "M9.44 13.751C9.323 13.868 9.133 13.86 9.022 13.737C8.038 12.647 7.5 11.251 7.5 9.772C7.5 8.192 8.115 6.704 9.234 5.587C11.469 3.352 15.061 3.282 17.382 5.376C17.505 5.487 17.513 5.678 17.396 5.795L16.855 6.336C16.748 6.443 16.576 6.45 16.466 6.35C15.2 5.221 13.408 4.862 11.668 5.514C11.659 5.517 11.648 5.522 11.639 5.526C9.863 6.336 8.835 7.976 8.835 9.772C8.835 10.907 9.246 11.98 9.995 12.819C10.095 12.932 10.088 13.102 9.981 13.208L9.44 13.749V13.751ZM10.911 11.836C10.185 10.956 9.96 9.748 10.388 8.572C10.393 8.561 10.398 8.549 10.402 8.538C11.363 6.386 13.899 5.962 15.482 7.266C15.613 7.374 15.621 7.572 15.502 7.69L14.958 8.234C14.856 8.336 14.695 8.344 14.58 8.256C13.832 7.683 12.753 7.739 12.069 8.423C11.709 8.783 11.51 9.263 11.51 9.774C11.51 10.198 11.648 10.602 11.902 10.933C11.99 11.049 11.984 11.21 11.881 11.313L11.338 11.856C11.218 11.976 11.021 11.967 10.913 11.836H10.911ZM3.939 19.252C3.822 19.369 3.631 19.361 3.52 19.238C2.506 18.115 2 16.694 2 15.275C2 13.855 2.506 12.435 3.52 11.312C3.631 11.189 3.822 11.181 3.939 11.298L4.203 11.562L4.48 11.839C4.586 11.945 4.594 12.116 4.494 12.228C3.722 13.094 3.336 14.185 3.336 15.276C3.336 16.367 3.722 17.459 4.494 18.325C4.594 18.437 4.585 18.607 4.48 18.714L4.203 18.99L3.939 19.255V19.252ZM5.834 17.357C5.716 17.475 5.518 17.469 5.412 17.34C4.931 16.76 4.67 16.038 4.67 15.275C4.67 14.512 4.931 13.79 5.412 13.21C5.518 13.08 5.716 13.074 5.834 13.193L6.378 13.737C6.481 13.84 6.488 14.001 6.399 14.117C6.146 14.448 6.007 14.852 6.007 15.276C6.007 15.7 6.146 16.105 6.399 16.436C6.488 16.551 6.481 16.712 6.378 16.816L5.834 17.36V17.357ZM20.48 12.69C20.369 12.813 20.178 12.821 20.061 12.704L19.797 12.439L19.52 12.163C19.414 12.056 19.406 11.886 19.506 11.774C20.278 10.907 20.664 9.816 20.664 8.725C20.664 7.634 20.278 6.543 19.506 5.677C19.406 5.564 19.415 5.394 19.52 5.288L19.797 5.011L20.061 4.747C20.178 4.63 20.369 4.637 20.48 4.76C21.494 5.883 22 7.303 22 8.724C22 10.145 21.494 11.564 20.48 12.687V12.69ZM18.168 10.809L17.623 10.265C17.52 10.161 17.514 10 17.602 9.885C17.856 9.553 17.994 9.149 17.994 8.725C17.994 8.301 17.856 7.897 17.602 7.566C17.514 7.45 17.52 7.289 17.623 7.186L18.168 6.642C18.286 6.523 18.484 6.529 18.59 6.658C19.07 7.239 19.332 7.961 19.332 8.724C19.332 9.487 19.07 10.208 18.59 10.789C18.484 10.918 18.286 10.924 18.168 10.806V10.809ZM10.583 20.144C9.162 20.144 7.743 19.638 6.62 18.624C6.497 18.513 6.489 18.322 6.606 18.205L7.147 17.664C7.253 17.557 7.424 17.55 7.536 17.65C9.334 19.252 12.101 19.192 13.824 17.468C15.548 15.744 15.608 12.977 14.007 11.179C13.906 11.067 13.916 10.897 14.02 10.79L14.561 10.249C14.678 10.132 14.87 10.14 14.981 10.263C17.075 12.584 17.005 16.177 14.77 18.413C13.616 19.566 12.1 20.144 10.585 20.144H10.583ZM10.583 17.472C9.849 17.472 9.117 17.226 8.519 16.734C8.39 16.627 8.383 16.43 8.501 16.311L9.045 15.767C9.147 15.665 9.308 15.658 9.423 15.746C10.171 16.319 11.25 16.264 11.934 15.579C12.618 14.895 12.674 13.816 12.101 13.068C12.013 12.953 12.021 12.792 12.122 12.69L12.666 12.146C12.785 12.027 12.983 12.033 13.089 12.164C14.14 13.438 14.071 15.333 12.879 16.524C12.247 17.156 11.414 17.474 10.583 17.474V17.472Z";
@@ -3482,9 +3482,6 @@
            "unknown_error": "An unknown error happened when saving the category",
            "confirm_delete": "Delete category?",
            "confirm_delete_text": "This will delete the category and unassign everything that is currently assigned to it."
-          },
-          "filter": {
-            "show_all": "Show all"
          }
        },
        "labels": {
@@ -65,9 +65,9 @@ describe("automations query params", () => {
    ).toBe(automationsFilterQueryString({}));
  });

-  it("keeps one category, as the category filter picks one", () => {
+  it("keeps every category", () => {
    expect(
      automationsLinkFromUrl("?category=a,b")?.filters["ha-filter-categories"]
-    ).toEqual(filter(["a"]));
+    ).toEqual(filter(["a", "b"]));
  });
 });
@@ -61,9 +61,9 @@ describe("scenes query params", () => {
    );
  });

-  it("keeps one category, as the category filter picks one", () => {
+  it("keeps every category", () => {
    expect(
      scenesLinkFromUrl("?category=a,b")?.filters["ha-filter-categories"]
-    ).toEqual(filter(["a"]));
+    ).toEqual(filter(["a", "b"]));
  });
 });
@@ -65,9 +65,9 @@ describe("scripts query params", () => {
    );
  });

-  it("keeps one category, as the category filter picks one", () => {
+  it("keeps every category", () => {
    expect(
      scriptsLinkFromUrl("?category=a,b")?.filters["ha-filter-categories"]
-    ).toEqual(filter(["a"]));
+    ).toEqual(filter(["a", "b"]));
  });
 });