Clear conditional listeners before setting up again

* Add Add entity to feature for external_app

* Update icon from plus to plusboxmultiple

* Apply suggestion on the name

* Add missing shouldHandleRequestSelectedEvent that caused duplicate

* WIP

* Rework the logic to match the agreed design

* Rename property

* Apply PR comments

* Apply prettier

* Merge MessageWithAnswer

* Apply PR comments

src/components/ha-area-picker.ts

@@ -87,6 +87,8 @@ export class HaAreaPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   public async open() {
@@ -375,6 +377,7 @@ export class HaAreaPicker extends LitElement {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
+        .addButtonLabel=${this.addButtonLabel}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-language-picker.ts

@@ -22,7 +22,6 @@ export const getLanguageOptions = (
 ): PickerComboBoxItem[] => {
   let options: PickerComboBoxItem[] = [];
 
-  const enLocale = { language: "en" } as FrontendLocaleData;
   if (nativeName) {
     const translations = translationMetadata.translations;
     options = languages.map((lang) => {
@@ -38,38 +37,18 @@ export const getLanguageOptions = (
           primary = lang;
         }
       }
-      let searchLabels = primary;
-      const browserLangName = formatLanguageCode(
-        lang,
-        locale || ({ language: navigator.language } as FrontendLocaleData)
-      );
-      if (browserLangName !== primary) {
-        searchLabels += `;${browserLangName}`;
-      }
-      const englishName = formatLanguageCode(lang, enLocale);
-      if (englishName !== primary && englishName !== browserLangName) {
-        searchLabels += `;${englishName}`;
-      }
       return {
         id: lang,
         primary,
-        search_labels: searchLabels.split(";"),
+        search_labels: [primary],
       };
     });
   } else if (locale) {
-    options = languages.map((lang) => {
-      const primary = formatLanguageCode(lang, locale);
-      let searchLabels = primary;
-      const englishName = formatLanguageCode(lang, enLocale);
-      if (englishName !== primary) {
-        searchLabels += `;${englishName}`;
-      }
-      return {
-        id: lang,
-        primary,
-        search_labels: searchLabels.split(";"),
-      };
-    });
+    options = languages.map((lang) => ({
+      id: lang,
+      primary: formatLanguageCode(lang, locale),
+      search_labels: [formatLanguageCode(lang, locale)],
+    }));
   }
 
   if (!noSort && locale) {

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -0,0 +1,152 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../components/ha-alert";
+import "../../components/ha-icon";
+import "../../components/ha-list-item";
+import "../../components/ha-spinner";
+import type {
+  ExternalEntityAddToActions,
+  ExternalEntityAddToAction,
+} from "../../external_app/external_messaging";
+import { showToast } from "../../util/toast";
+
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-add-to")
+export class HaMoreInfoAddTo extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId!: string;
+
+  @state() private _externalActions?: ExternalEntityAddToActions = {
+    actions: [],
+  };
+
+  @state() private _loading = true;
+
+  private async _loadExternalActions() {
+    if (this.hass.auth.external?.config.hasEntityAddTo) {
+      this._externalActions =
+        await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
+          {
+            type: "entity/add_to/get_actions",
+            payload: { entity_id: this.entityId },
+          }
+        );
+    }
+  }
+
+  private async _actionSelected(ev: CustomEvent) {
+    const action = (ev.currentTarget as any)
+      .action as ExternalEntityAddToAction;
+    if (!action.enabled) {
+      return;
+    }
+
+    try {
+      await this.hass.auth.external!.fireMessage({
+        type: "entity/add_to",
+        payload: {
+          entity_id: this.entityId,
+          app_payload: action.app_payload,
+        },
+      });
+    } catch (err: any) {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.dialogs.more_info_control.add_to.action_failed",
+          {
+            error: err.message || err,
+          }
+        ),
+      });
+    }
+  }
+
+  protected async firstUpdated() {
+    await this._loadExternalActions();
+    this._loading = false;
+  }
+
+  protected render() {
+    if (this._loading) {
+      return html`
+        <div class="loading">
+          <ha-spinner></ha-spinner>
+        </div>
+      `;
+    }
+
+    if (!this._externalActions?.actions.length) {
+      return html`
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            "ui.dialogs.more_info_control.add_to.no_actions"
+          )}
+        </ha-alert>
+      `;
+    }
+
+    return html`
+      <div class="actions-list">
+        ${this._externalActions.actions.map(
+          (action) => html`
+            <ha-list-item
+              graphic="icon"
+              .disabled=${!action.enabled}
+              .action=${action}
+              .twoline=${!!action.details}
+              @click=${this._actionSelected}
+            >
+              <span>${action.name}</span>
+              ${action.details
+                ? html`<span slot="secondary">${action.details}</span>`
+                : nothing}
+              <ha-icon slot="graphic" .icon=${action.mdi_icon}></ha-icon>
+            </ha-list-item>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+        var(--ha-space-6);
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--ha-space-8);
+    }
+
+    .actions-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    ha-list-item {
+      cursor: pointer;
+    }
+
+    ha-list-item[disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    ha-icon {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-add-to": HaMoreInfoAddTo;
+  }
+}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -8,6 +8,7 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
+  mdiPlusBoxMultipleOutline,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -60,6 +61,7 @@ import {
   computeShowLogBookComponent,
 } from "./const";
 import "./controls/more-info-default";
+import "./ha-more-info-add-to";
 import "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
 import "./ha-more-info-settings";
@@ -73,7 +75,7 @@ export interface MoreInfoDialogParams {
   data?: Record<string, any>;
 }
 
-type View = "info" | "history" | "settings" | "related";
+type View = "info" | "history" | "settings" | "related" | "add_to";
 
 interface ChildView {
   viewTag: string;
@@ -194,6 +196,10 @@ export class MoreInfoDialog extends LitElement {
     );
   }
 
+  private _shouldShowAddEntityTo(): boolean {
+    return !!this.hass.auth.external?.config.hasEntityAddTo;
+  }
+
   private _getDeviceId(): string | null {
     const entity = this.hass.entities[this._entityId!] as
       | EntityRegistryEntry
@@ -295,6 +301,11 @@ export class MoreInfoDialog extends LitElement {
     this._setView("related");
   }
 
+  private _goToAddEntityTo(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) return;
+    this._setView("add_to");
+  }
+
   private _breadcrumbClick(ev: Event) {
     ev.stopPropagation();
     this._setView("related");
@@ -521,6 +532,22 @@ export class MoreInfoDialog extends LitElement {
                             .path=${mdiInformationOutline}
                           ></ha-svg-icon>
                         </ha-list-item>
+                        ${this._shouldShowAddEntityTo()
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._goToAddEntityTo}
+                              >
+                                ${this.hass.localize(
+                                  "ui.dialogs.more_info_control.add_entity_to"
+                                )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${mdiPlusBoxMultipleOutline}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
                       </ha-button-menu>
                     `
                   : nothing}
@@ -613,7 +640,14 @@ export class MoreInfoDialog extends LitElement {
                                   : "entity"}
                               ></ha-related-items>
                             `
-                          : nothing
+                          : this._currView === "add_to"
+                            ? html`
+                                <ha-more-info-add-to
+                                  .hass=${this.hass}
+                                  .entityId=${entityId}
+                                ></ha-more-info-add-to>
+                              `
+                            : nothing
               )}
             </div>
           `

src/external_app/external_messaging.ts

@@ -36,6 +36,13 @@ interface EMOutgoingMessageConfigGet extends EMMessage {
   type: "config/get";
 }
 
+interface EMOutgoingMessageEntityAddToGetActions extends EMMessage {
+  type: "entity/add_to/get_actions";
+  payload: {
+    entity_id: string;
+  };
+}
+
 interface EMOutgoingMessageBarCodeScan extends EMMessage {
   type: "bar_code/scan";
   payload: {
@@ -75,6 +82,10 @@ interface EMOutgoingMessageWithAnswer {
     request: EMOutgoingMessageConfigGet;
     response: ExternalConfig;
   };
+  "entity/add_to/get_actions": {
+    request: EMOutgoingMessageEntityAddToGetActions;
+    response: ExternalEntityAddToActions;
+  };
 }
 
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
@@ -157,6 +168,14 @@ interface EMOutgoingMessageThreadStoreInPlatformKeychain extends EMMessage {
   };
 }
 
+interface EMOutgoingMessageAddEntityTo extends EMMessage {
+  type: "entity/add_to";
+  payload: {
+    entity_id: string;
+    app_payload: string; // Opaque string received from get_actions
+  };
+}
+
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -177,7 +196,8 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThemeUpdate
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
-  | EMOutgoingMessageImprovConfigureDevice;
+  | EMOutgoingMessageImprovConfigureDevice
+  | EMOutgoingMessageAddEntityTo;
 
 export interface EMIncomingMessageRestart {
   id: number;
@@ -305,6 +325,19 @@ export interface ExternalConfig {
   canSetupImprov?: boolean;
   downloadFileSupported?: boolean;
   appVersion?: string;
+  hasEntityAddTo?: boolean; // Supports "Add to" from more-info dialog, with action coming from external app
+}
+
+export interface ExternalEntityAddToAction {
+  enabled: boolean;
+  name: string; // Translated name of the action to be displayed in the UI
+  details?: string; // Optional translated details of the action to be displayed in the UI
+  mdi_icon: string; // MDI icon name to be displayed in the UI (e.g., "mdi:car")
+  app_payload: string; // Opaque string to be sent back when the action is selected
+}
+
+export interface ExternalEntityAddToActions {
+  actions: ExternalEntityAddToAction[];
 }
 
 export class ExternalMessaging {

src/mixins/conditional-listener-mixin.ts

@@ -0,0 +1,104 @@
+import type { ReactiveElement } from "lit";
+import { listenMediaQuery } from "../common/dom/media_query";
+import type { HomeAssistant } from "../types";
+import type { Condition } from "../panels/lovelace/common/validate-condition";
+import { checkConditionsMet } from "../panels/lovelace/common/validate-condition";
+
+type Constructor<T> = abstract new (...args: any[]) => T;
+
+/**
+ * Extract media queries from conditions recursively
+ */
+export function extractMediaQueries(conditions: Condition[]): string[] {
+  return conditions.reduce<string[]>((array, c) => {
+    if ("conditions" in c && c.conditions) {
+      array.push(...extractMediaQueries(c.conditions));
+    }
+    if (c.condition === "screen" && c.media_query) {
+      array.push(c.media_query);
+    }
+    return array;
+  }, []);
+}
+
+/**
+ * Helper to setup media query listeners for conditional visibility
+ */
+export function setupMediaQueryListeners(
+  conditions: Condition[],
+  hass: HomeAssistant,
+  addListener: (unsub: () => void) => void,
+  onUpdate: (conditionsMet: boolean) => void
+): void {
+  const mediaQueries = extractMediaQueries(conditions);
+
+  if (mediaQueries.length === 0) return;
+
+  // Optimization for single media query
+  const hasOnlyMediaQuery =
+    conditions.length === 1 &&
+    conditions[0].condition === "screen" &&
+    !!conditions[0].media_query;
+
+  mediaQueries.forEach((mediaQuery) => {
+    const unsub = listenMediaQuery(mediaQuery, (matches) => {
+      if (hasOnlyMediaQuery) {
+        onUpdate(matches);
+      } else {
+        const conditionsMet = checkConditionsMet(conditions, hass);
+        onUpdate(conditionsMet);
+      }
+    });
+    addListener(unsub);
+  });
+}
+
+/**
+ * Mixin to handle conditional listeners for visibility control
+ *
+ * Provides lifecycle management for listeners (media queries, time-based, state changes, etc.)
+ * that control conditional visibility of components.
+ *
+ * Usage:
+ * 1. Extend your component with ConditionalListenerMixin(ReactiveElement)
+ * 2. Override setupConditionalListeners() to setup your listeners
+ * 3. Use addConditionalListener() to register unsubscribe functions
+ * 4. Call clearConditionalListeners() and setupConditionalListeners() when config changes
+ *
+ * The mixin automatically:
+ * - Sets up listeners when component connects to DOM
+ * - Cleans up listeners when component disconnects from DOM
+ */
+export const ConditionalListenerMixin = <
+  T extends Constructor<ReactiveElement>,
+>(
+  superClass: T
+) => {
+  abstract class ConditionalListenerClass extends superClass {
+    private __listeners: (() => void)[] = [];
+
+    public connectedCallback() {
+      super.connectedCallback();
+      this.setupConditionalListeners();
+    }
+
+    public disconnectedCallback() {
+      super.disconnectedCallback();
+      this.clearConditionalListeners();
+    }
+
+    protected clearConditionalListeners(): void {
+      this.__listeners.forEach((unsub) => unsub());
+      this.__listeners = [];
+    }
+
+    protected addConditionalListener(unsubscribe: () => void): void {
+      this.__listeners.push(unsubscribe);
+    }
+
+    protected setupConditionalListeners(): void {
+      // Override in subclass
+    }
+  }
+  return ConditionalListenerClass;
+};

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -8,24 +8,24 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/chips/ha-chip-set";
 import "../../../components/chips/ha-input-chip";
 import "../../../components/ha-alert";
-import "../../../components/ha-button";
 import "../../../components/ha-aliases-editor";
+import "../../../components/ha-area-picker";
+import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-textfield";
-import "../../../components/ha-area-picker";
+import { updateAreaRegistryEntry } from "../../../data/area_registry";
 import type {
   FloorRegistryEntry,
   FloorRegistryEntryMutableParams,
 } from "../../../data/floor_registry";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
-import { updateAreaRegistryEntry } from "../../../data/area_registry";
+import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -168,11 +168,6 @@ class DialogFloorDetail extends LitElement {
               )}
             </h3>
 
-            <p class="description">
-              ${this.hass.localize(
-                "ui.panel.config.floors.editor.areas_description"
-              )}
-            </p>
             ${areas.length
               ? html`<ha-chip-set>
                   ${repeat(
@@ -197,13 +192,17 @@ class DialogFloorDetail extends LitElement {
                       </ha-input-chip>`
                   )}
                 </ha-chip-set>`
-              : nothing}
+              : html`<p class="description">
+                  ${this.hass.localize(
+                    "ui.panel.config.floors.editor.areas_description"
+                  )}
+                </p>`}
             <ha-area-picker
               no-add
               .hass=${this.hass}
               @value-changed=${this._addArea}
               .excludeAreas=${areas.map((a) => a.area_id)}
-              .label=${this.hass.localize(
+              .addButtonLabel=${this.hass.localize(
                 "ui.panel.config.floors.editor.add_area"
               )}
             ></ha-area-picker>

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -9,6 +9,7 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   FlowFromGridSourceEnergyPreference,
@@ -19,11 +20,7 @@ import {
   emptyFlowToGridSourceEnergyPreference,
   energyStatisticHelpUrl,
 } from "../../../../data/energy";
-import {
-  getDisplayUnit,
-  getStatisticMetadata,
-  isExternalStatistic,
-} from "../../../../data/recorder";
+import { isExternalStatistic } from "../../../../data/recorder";
 import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -47,8 +44,6 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _pickedDisplayUnit?: string | null;
-
   @state() private _energy_units?: string[];
 
   @state() private _error?: string;
@@ -81,11 +76,6 @@ export class DialogEnergyGridFlowSettings
           : "stat_energy_to"
       ];
 
-    this._pickedDisplayUnit = getDisplayUnit(
-      this.hass,
-      initialSourceId,
-      params.metadata
-    );
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
@@ -103,7 +93,6 @@ export class DialogEnergyGridFlowSettings
   public closeDialog() {
     this._params = undefined;
     this._source = undefined;
-    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -117,10 +106,6 @@ export class DialogEnergyGridFlowSettings
 
     const pickableUnit = this._energy_units?.join(", ") || "";
 
-    const unitPriceSensor = this._pickedDisplayUnit
-      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
-      : undefined;
-
     const unitPriceFixed = `${this.hass.config.currency}/kWh`;
 
     const externalSource =
@@ -246,9 +231,15 @@ export class DialogEnergyGridFlowSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${`${this.hass.localize(
+              .label=${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_entity_input`
-              )} ${unitPriceSensor ? ` (${unitPriceSensor})` : ""}`}
+              )}
+              .helper=${html`<ha-markdown
+                .content=${this.hass.localize(
+                  "ui.panel.config.energy.grid.flow_dialog.cost_entity_helper",
+                  { currency: this.hass.config.currency }
+                )}
+              ></ha-markdown>`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -341,16 +332,6 @@ export class DialogEnergyGridFlowSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (ev.detail.value) {
-      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
-      this._pickedDisplayUnit = getDisplayUnit(
-        this.hass,
-        ev.detail.value,
-        metadata[0]
-      );
-    } else {
-      this._pickedDisplayUnit = undefined;
-    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

src/panels/config/info/ha-config-info.ts

@@ -107,6 +107,8 @@ class HaConfigInfo extends LitElement {
     const customUiList: { name: string; url: string; version: string }[] =
       (window as any).CUSTOM_UI_LIST || [];
 
+    const isDark = this.hass.themes?.darkMode || false;
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -186,7 +188,7 @@ class HaConfigInfo extends LitElement {
                 : nothing}
             </ul>
           </ha-card>
-          <ha-card outlined class="ohf">
+          <ha-card outlined class="ohf ${isDark ? "dark" : ""}">
             <div>
               ${this.hass.localize("ui.panel.config.info.proud_part_of")}
             </div>
@@ -346,6 +348,10 @@ class HaConfigInfo extends LitElement {
           max-width: 250px;
         }
 
+        .ohf.dark img {
+          color-scheme: dark;
+        }
+
         .versions {
           display: flex;
           flex-direction: column;

src/panels/lovelace/badges/hui-badge.ts

@@ -2,14 +2,14 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { HomeAssistant } from "../../../types";
 import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
+import { checkConditionsMet } from "../common/validate-condition";
 import { createBadgeElement } from "../create-element/create-badge-element";
 import { createErrorBadgeConfig } from "../create-element/create-element-base";
 import type { LovelaceBadge } from "../types";
@@ -22,7 +22,7 @@ declare global {
 }
 
 @customElement("hui-badge")
-export class HuiBadge extends ReactiveElement {
+export class HuiBadge extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceBadgeConfig;
@@ -40,20 +40,16 @@ export class HuiBadge extends ReactiveElement {
 
   private _element?: LovelaceBadge;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -137,26 +133,17 @@ export class HuiBadge extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/cards/hui-card.ts

@@ -2,16 +2,16 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import { migrateLayoutToGridOptions } from "../common/compute-card-grid-size";
 import { computeCardSize } from "../common/compute-card-size";
-import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+import { checkConditionsMet } from "../common/validate-condition";
 import { tryCreateCardElement } from "../create-element/create-card-element";
 import { createErrorCardElement } from "../create-element/create-element-base";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
@@ -24,7 +24,7 @@ declare global {
 }
 
 @customElement("hui-card")
-export class HuiCard extends ReactiveElement {
+export class HuiCard extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceCardConfig;
@@ -44,20 +44,16 @@ export class HuiCard extends ReactiveElement {
 
   private _element?: LovelaceCard;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -251,26 +247,17 @@ export class HuiCard extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/common/validate-condition.ts

@@ -1,6 +1,4 @@
 import { ensureArray } from "../../../common/array/ensure-array";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
-import { listenMediaQuery } from "../../../common/dom/media_query";
 
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { UNKNOWN } from "../../../data/entity";
@@ -362,31 +360,3 @@ export function addEntityToCondition(
   }
   return condition;
 }
-
-export function extractMediaQueries(conditions: Condition[]): string[] {
-  return conditions.reduce<string[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractMediaQueries(c.conditions));
-    }
-    if (c.condition === "screen" && c.media_query) {
-      array.push(c.media_query);
-    }
-    return array;
-  }, []);
-}
-
-export function attachConditionMediaQueriesListeners(
-  conditions: Condition[],
-  onChange: (visibility: boolean) => void
-): MediaQueriesListener[] {
-  const mediaQueries = extractMediaQueries(conditions);
-
-  const listeners = mediaQueries.map((query) => {
-    const listener = listenMediaQuery(query, (matches) => {
-      onChange(matches);
-    });
-    return listener;
-  });
-
-  return listeners;
-}

src/panels/lovelace/components/hui-conditional-base.ts

@@ -1,16 +1,16 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
-import { deepEqual } from "../../../common/util/deep-equal";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import type { HuiCard } from "../cards/hui-card";
 import type { ConditionalCardConfig } from "../cards/types";
 import type { Condition } from "../common/validate-condition";
 import {
-  attachConditionMediaQueriesListeners,
   checkConditionsMet,
-  extractMediaQueries,
   validateConditionalConfig,
 } from "../common/validate-condition";
 import type { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
@@ -22,7 +22,9 @@ declare global {
 }
 
 @customElement("hui-conditional-base")
-export class HuiConditionalBase extends ReactiveElement {
+export class HuiConditionalBase extends ConditionalListenerMixin(
+  ReactiveElement
+) {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public preview = false;
@@ -31,10 +33,6 @@ export class HuiConditionalBase extends ReactiveElement {
 
   protected _element?: HuiCard | LovelaceRow;
 
-  private _listeners: MediaQueriesListener[] = [];
-
-  private _mediaQueries: string[] = [];
-
   protected createRenderRoot() {
     return this;
   }
@@ -63,21 +61,14 @@ export class HuiConditionalBase extends ReactiveElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
+  protected setupConditionalListeners() {
     if (!this._config || !this.hass) {
       return;
     }
@@ -85,27 +76,13 @@ export class HuiConditionalBase extends ReactiveElement {
     const supportedConditions = this._config.conditions.filter(
       (c) => "condition" in c
     ) as Condition[];
-    const mediaQueries = extractMediaQueries(supportedConditions);
 
-    if (deepEqual(mediaQueries, this._mediaQueries)) return;
-
-    this._clearMediaQueries();
-
-    const conditions = this._config.conditions;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      "condition" in conditions[0] &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
-
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       supportedConditions,
-      (matches) => {
-        if (hasOnlyMediaQuery) {
-          this.setVisibility(matches);
-          return;
-        }
-        this._updateVisibility();
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this.setVisibility(conditionsMet);
       }
     );
   }
@@ -119,7 +96,8 @@ export class HuiConditionalBase extends ReactiveElement {
       changed.has("hass") ||
       changed.has("preview")
     ) {
-      this._listenMediaQueries();
+      this.clearConditionalListeners();
+      this.setupConditionalListeners();
       this._updateVisibility();
     }
   }

src/panels/lovelace/heading-badges/hui-heading-badge.ts

@@ -2,13 +2,13 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
+import { checkConditionsMet } from "../common/validate-condition";
 import { createHeadingBadgeElement } from "../create-element/create-heading-badge-element";
 import type { LovelaceHeadingBadge } from "../types";
 import type { LovelaceHeadingBadgeConfig } from "./types";
@@ -21,7 +21,7 @@ declare global {
 }
 
 @customElement("hui-heading-badge")
-export class HuiHeadingBadge extends ReactiveElement {
+export class HuiHeadingBadge extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceHeadingBadgeConfig;
@@ -39,20 +39,16 @@ export class HuiHeadingBadge extends ReactiveElement {
 
   private _element?: LovelaceHeadingBadge;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -137,26 +133,17 @@ export class HuiHeadingBadge extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/sections/hui-section.ts

@@ -4,7 +4,6 @@ import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceSectionElement } from "../../../data/lovelace";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -14,12 +13,13 @@ import type {
 } from "../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../data/lovelace/config/section";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import "../cards/hui-card";
 import type { HuiCard } from "../cards/hui-card";
-import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+import { checkConditionsMet } from "../common/validate-condition";
 import { createSectionElement } from "../create-element/create-section-element";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
@@ -37,7 +37,7 @@ declare global {
 }
 
 @customElement("hui-section")
-export class HuiSection extends ReactiveElement {
+export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public config!: LovelaceSectionRawConfig;
@@ -59,8 +59,6 @@ export class HuiSection extends ReactiveElement {
 
   private _layoutElement?: LovelaceSectionElement;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   private _config: LovelaceSectionConfig | undefined;
 
   @storage({
@@ -114,14 +112,10 @@ export class HuiSection extends ReactiveElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this.hasUpdated) {
-      this._listenMediaQueries();
-    }
     this._updateElement();
   }
 
@@ -158,26 +152,17 @@ export class HuiSection extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this._config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this._config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this._config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      conditions[0].media_query != null;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this._config.visibility,
-      (matches) => {
-        this._updateElement(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateElement(conditionsMet);
       }
     );
   }
@@ -199,9 +184,6 @@ export class HuiSection extends ReactiveElement {
       type: sectionConfig.type || DEFAULT_SECTION_LAYOUT,
     };
     this._config = sectionConfig;
-    if (this.isConnected) {
-      this._listenMediaQueries();
-    }
 
     // Create a new layout element if necessary.
     let addLayoutElement = false;

src/translations/en.json

@@ -1434,6 +1434,7 @@
         "back_to_info": "Back to info",
         "info": "Information",
         "related": "Related",
+        "add_entity_to": "Add to",
         "history": "History",
         "aggregate": "5-minute aggregated",
         "logbook": "Activity",
@@ -1450,6 +1451,10 @@
           "last_action": "Last action",
           "last_triggered": "Last triggered"
         },
+        "add_to": {
+          "no_actions": "No actions available",
+          "action_failed": "Failed to perform the action {error}"
+        },
         "sun": {
           "azimuth": "Azimuth",
           "elevation": "Elevation",
@@ -3071,6 +3076,7 @@
             "remove_co2_signal": "Remove Electricity Maps integration",
             "add_co2_signal": "Add Electricity Maps integration",
             "flow_dialog": {
+              "cost_entity_helper": "Any sensor with a unit of `{currency}/(valid energy unit)` (e.g. `{currency}/Wh` or `{currency}/kWh`) may be used and will be automatically converted.",
               "from": {
                 "header": "Configure grid consumption",
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",