20230605.0 (#16787)

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -44,7 +44,10 @@ class HassioAddonDocumentationDashboard extends LitElement {
             : ""}
           <div class="card-content">
             ${this._content
-              ? html`<ha-markdown .content=${this._content}></ha-markdown>`
+              ? html`<ha-markdown
+                  .content=${this._content}
+                  lazy-images
+                ></ha-markdown>`
               : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
           </div>
         </ha-card>

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -659,6 +659,7 @@ class HassioAddonInfo extends LitElement {
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
+                  lazy-images
                 ></ha-markdown>
               </div>
             </ha-card>

package.json

@@ -48,7 +48,7 @@
     "@fullcalendar/list": "6.1.8",
     "@fullcalendar/timegrid": "6.1.8",
     "@lezer/highlight": "1.1.6",
-    "@lit-labs/context": "0.3.1",
+    "@lit-labs/context": "0.3.2",
     "@lit-labs/motion": "1.0.3",
     "@lit-labs/virtualizer": "2.0.2",
     "@lrnwebcomponents/simple-tooltip": "7.0.0",
@@ -118,7 +118,7 @@
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
-    "lit": "2.7.4",
+    "lit": "2.7.5",
     "marked": "4.3.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
@@ -156,13 +156,13 @@
     "@babel/preset-typescript": "7.21.5",
     "@koa/cors": "4.0.0",
     "@octokit/auth-oauth-device": "4.0.4",
-    "@octokit/plugin-retry": "4.1.3",
+    "@octokit/plugin-retry": "4.1.5",
     "@octokit/rest": "19.0.11",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.0",
     "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.0.2",
+    "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
     "@types/babel__plugin-transform-runtime": "7.9.2",
     "@types/chromecast-caf-receiver": "6.0.9",
@@ -180,8 +180,8 @@
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.5",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/eslint-plugin": "5.59.8",
-    "@typescript-eslint/parser": "5.59.7",
+    "@typescript-eslint/parser": "5.59.8",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230601.1"
+version      = "20230605.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/integrations/protocolIntegrationPicked.ts

@@ -17,7 +17,7 @@ export const protocolIntegrationPicked = async (
   element: HTMLElement,
   hass: HomeAssistant,
   domain: string,
-  options?: { brand?: string; domain?: string }
+  options?: { brand?: string; domain?: string; config_entry?: string }
 ) => {
   if (options?.domain) {
     const localize = await hass.loadBackendTranslation("title", options.domain);
@@ -32,11 +32,16 @@ export const protocolIntegrationPicked = async (
   }
 
   if (domain === "zwave_js") {
-    const entries = await getConfigEntries(hass, {
+    const entries = options?.config_entry
-      domain,
+      ? undefined
-    });
+      : await getConfigEntries(hass, {
+          domain,
+        });
 
-    if (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
+    if (
+      !isComponentLoaded(hass, "zwave_js") ||
+      (!options?.config_entry && !entries?.length)
+    ) {
       // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
         title: hass.localize(
@@ -71,14 +76,19 @@ export const protocolIntegrationPicked = async (
     }
 
     showZWaveJSAddNodeDialog(element, {
-      entry_id: entries[0].entry_id,
+      entry_id: options?.config_entry || entries![0].entry_id,
     });
   } else if (domain === "zha") {
-    const entries = await getConfigEntries(hass, {
+    const entries = options?.config_entry
-      domain,
+      ? undefined
-    });
+      : await getConfigEntries(hass, {
+          domain,
+        });
 
-    if (!isComponentLoaded(hass, "zha") || !entries.length) {
+    if (
+      !isComponentLoaded(hass, "zha") ||
+      (!options?.config_entry && !entries?.length)
+    ) {
       // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
         title: hass.localize(
@@ -117,10 +127,15 @@ export const protocolIntegrationPicked = async (
 
     navigate("/config/zha/add");
   } else if (domain === "matter") {
-    const entries = await getConfigEntries(hass, {
+    const entries = options?.config_entry
-      domain,
+      ? undefined
-    });
+      : await getConfigEntries(hass, {
-    if (!isComponentLoaded(hass, domain) || !entries.length) {
+          domain,
+        });
+    if (
+      !isComponentLoaded(hass, domain) ||
+      (!options?.config_entry && !entries?.length)
+    ) {
       // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
         title: hass.localize(

src/components/ha-hs-color-picker.ts

@@ -176,7 +176,7 @@ class HaHsColorPicker extends LitElement {
     super.updated(changedProps);
     if (
       changedProps.has("colorBrightness") ||
-      changedProps.has("vw") ||
+      changedProps.has("wv") ||
       changedProps.has("ww") ||
       changedProps.has("cw") ||
       changedProps.has("minKelvin") ||

src/components/ha-markdown-element.ts

@@ -11,6 +11,9 @@ class HaMarkdownElement extends ReactiveElement {
 
   @property({ type: Boolean }) public breaks = false;
 
+  @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
+    false;
+
   protected createRenderRoot() {
     return this;
   }
@@ -58,6 +61,9 @@ class HaMarkdownElement extends ReactiveElement {
 
         // Fire a resize event when images loaded to notify content resized
       } else if (node instanceof HTMLImageElement) {
+        if (this.lazyImages) {
+          node.loading = "lazy";
+        }
         node.addEventListener("load", this._resize);
       }
     }

src/components/ha-markdown.ts

@@ -15,6 +15,9 @@ export class HaMarkdown extends LitElement {
 
   @property({ type: Boolean }) public breaks = false;
 
+  @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
+    false;
+
   protected render() {
     if (!this.content) {
       return nothing;
@@ -24,6 +27,7 @@ export class HaMarkdown extends LitElement {
       .content=${this.content}
       .allowSvg=${this.allowSvg}
       .breaks=${this.breaks}
+      .lazyImages=${this.lazyImages}
     ></ha-markdown-element>`;
   }
 

src/components/ha-selector/ha-selector-device.ts

@@ -77,7 +77,9 @@ export class HaDeviceSelector extends LitElement {
           .label=${this.label}
           .helper=${this.helper}
           .deviceFilter=${this._filterDevices}
-          .entityFilter=${this._filterEntities}
+          .entityFilter=${this.selector.device?.entity
+            ? this._filterEntities
+            : undefined}
           .disabled=${this.disabled}
           .required=${this.required}
           allow-custom-entity
@@ -92,7 +94,9 @@ export class HaDeviceSelector extends LitElement {
         .value=${this.value}
         .helper=${this.helper}
         .deviceFilter=${this._filterDevices}
-        .entityFilter=${this._filterEntities}
+        .entityFilter=${this.selector.device?.entity
+          ? this._filterEntities
+          : undefined}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-devices-picker>
@@ -115,14 +119,10 @@ export class HaDeviceSelector extends LitElement {
     );
   };
 
-  private _filterEntities = (entity: HassEntity): boolean => {
+  private _filterEntities = (entity: HassEntity): boolean =>
-    if (!this.selector.device?.entity) {
+    ensureArray(this.selector.device!.entity).some((filter) =>
-      return true;
-    }
-    return ensureArray(this.selector.device.entity).some((filter) =>
       filterSelectorEntities(filter, entity, this._entitySources)
     );
-  };
 }
 
 declare global {

src/data/light.ts

@@ -58,6 +58,10 @@ export const lightSupportsBrightness = (entity: LightEntity) =>
     modesSupportingBrightness.includes(mode)
   ) || false;
 
+export const lightSupportsFavoriteColors = (entity: LightEntity) =>
+  lightSupportsColor(entity) ||
+  lightSupportsColorMode(entity, LightColorMode.COLOR_TEMP);
+
 export const getLightCurrentModeRgbColor = (
   entity: LightEntity
 ): number[] | undefined =>

src/data/zha.ts

@@ -169,9 +169,16 @@ export interface ZHANetworkBackup {
   node_info: ZHANetworkBackupNodeInfo;
 }
 
+export interface ZHADeviceSettings {
+  path: string;
+  baudrate?: number;
+  flow_control?: string;
+}
+
 export interface ZHANetworkSettings {
   settings: ZHANetworkBackup;
   radio_type: "ezsp" | "znp" | "deconz" | "zigate" | "xbee";
+  device: ZHADeviceSettings;
 }
 
 export interface ZHANetworkBackupAndMetadata {

src/dialogs/more-info/components/lights/light-color-picker.ts

@@ -603,6 +603,7 @@ class LightColorPicker extends LitElement {
         input[type="color"] {
           appearance: none;
           -webkit-appearance: none;
+          -moz-appearance: none;
           border: none;
           outline: none;
           display: block;
@@ -628,6 +629,10 @@ class LightColorPicker extends LitElement {
           background: none;
         }
 
+        input[type="color"]::-moz-color-swatch {
+          display: none;
+        }
+
         input[type="color"]::-webkit-color-swatch {
           border: none;
         }

src/dialogs/more-info/const.ts

@@ -34,6 +34,8 @@ export const DOMAINS_WITH_MORE_INFO = [
   "configurator",
   "counter",
   "cover",
+  "date",
+  "datetime",
   "fan",
   "group",
   "humidifier",
@@ -49,6 +51,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "siren",
   "sun",
   "switch",
+  "time",
   "timer",
   "update",
   "vacuum",

src/dialogs/more-info/controls/more-info-date.ts

@@ -0,0 +1,51 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateValue } from "../../../data/date";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-date")
+class MoreInfoDate extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    return html`
+      <ha-date-input
+        .locale=${this.hass.locale}
+        .value=${this.stateObj.state}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._dateChanged}
+      >
+      </ha-date-input>
+    `;
+  }
+
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+    setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-date": MoreInfoDate;
+  }
+}

src/dialogs/more-info/controls/more-info-datetime.ts

@@ -0,0 +1,80 @@
+import { format } from "date-fns";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateTimeValue } from "../../../data/datetime";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-datetime")
+class MoreInfoDatetime extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    const dateObj = new Date(this.stateObj.state);
+    const time = format(dateObj, "HH:mm:ss");
+    const date = format(dateObj, "yyyy-MM-dd");
+
+    return html`<ha-date-input
+        .locale=${this.hass.locale}
+        .value=${date}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._dateChanged}
+      >
+      </ha-date-input>
+      <ha-time-input
+        .value=${time}
+        .locale=${this.hass.locale}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._timeChanged}
+        @click=${this._stopEventPropagation}
+      ></ha-time-input>`;
+  }
+
+  private _stopEventPropagation(ev: Event): void {
+    ev.stopPropagation();
+  }
+
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+    const dateObj = new Date(this.stateObj!.state);
+    const newTime = ev.detail.value.split(":").map(Number);
+    dateObj.setHours(newTime[0], newTime[1], newTime[2]);
+
+    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+  }
+
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+    const dateObj = new Date(this.stateObj!.state);
+    const newDate = ev.detail.value.split("-").map(Number);
+    dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
+
+    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      ha-date-input + ha-time-input {
+        margin-left: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-datetime": MoreInfoDatetime;
+  }
+}

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -22,37 +22,32 @@ class MoreInfoInputDatetime extends LitElement {
     }
 
     return html`
-        ${
+      ${this.stateObj.attributes.has_date
-          this.stateObj.attributes.has_date
+        ? html`
-            ? html`
+            <ha-date-input
-                <ha-date-input
+              .locale=${this.hass.locale}
-                  .locale=${this.hass.locale}
+              .value=${stateToIsoDateString(this.stateObj)}
-                  .value=${stateToIsoDateString(this.stateObj)}
+              .disabled=${isUnavailableState(this.stateObj.state)}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
+              @value-changed=${this._dateChanged}
-                  @value-changed=${this._dateChanged}
+            >
-                >
+            </ha-date-input>
-                </ha-date-input>
+          `
-              `
+        : ``}
-            : ``
+      ${this.stateObj.attributes.has_time
-        }
+        ? html`
-        ${
+            <ha-time-input
-          this.stateObj.attributes.has_time
+              .value=${this.stateObj.state === UNKNOWN
-            ? html`
+                ? ""
-                <ha-time-input
+                : this.stateObj.attributes.has_date
-                  .value=${this.stateObj.state === UNKNOWN
+                ? this.stateObj.state.split(" ")[1]
-                    ? ""
+                : this.stateObj.state}
-                    : this.stateObj.attributes.has_date
+              .locale=${this.hass.locale}
-                    ? this.stateObj.state.split(" ")[1]
+              .disabled=${isUnavailableState(this.stateObj.state)}
-                    : this.stateObj.state}
+              @value-changed=${this._timeChanged}
-                  .locale=${this.hass.locale}
+              @click=${this._stopEventPropagation}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
+            ></ha-time-input>
-                  @value-changed=${this._timeChanged}
+          `
-                  @click=${this._stopEventPropagation}
+        : ``}
-                ></ha-time-input>
-              `
-            : ``
-        }
-      </hui-generic-entity-row>
     `;
   }
 

src/dialogs/more-info/controls/more-info-light.ts

@@ -37,6 +37,7 @@ import {
   lightSupportsBrightness,
   lightSupportsColor,
   lightSupportsColorMode,
+  lightSupportsFavoriteColors,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
@@ -206,7 +207,9 @@ class MoreInfoLight extends LitElement {
                     `
                   : nothing}
               </div>
-              ${this.entry && (this.editMode || hasFavoriteColors)
+              ${this.entry &&
+              lightSupportsFavoriteColors(this.stateObj) &&
+              (this.editMode || hasFavoriteColors)
                 ? html`
                     <ha-more-info-light-favorite-colors
                       .hass=${this.hass}

src/dialogs/more-info/controls/more-info-time.ts

@@ -0,0 +1,55 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { isUnavailableState } from "../../../data/entity";
+import { setTimeValue } from "../../../data/time";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-time")
+class MoreInfoTime extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    return html`
+      <ha-time-input
+        .value=${this.stateObj.state}
+        .locale=${this.hass.locale}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._timeChanged}
+        @click=${this._stopEventPropagation}
+      ></ha-time-input>
+    `;
+  }
+
+  private _stopEventPropagation(ev: Event): void {
+    ev.stopPropagation();
+  }
+
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+    setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-time": MoreInfoTime;
+  }
+}

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

@@ -32,6 +32,7 @@ import {
   ExtEntityRegistryEntry,
   getExtendedEntityRegistryEntry,
 } from "../../data/entity_registry";
+import { lightSupportsFavoriteColors } from "../../data/light";
 import { SearchableDomains } from "../../data/search";
 import { haStyleDialog } from "../../resources/styles";
 import "../../state-summary/state-card-content";
@@ -359,7 +360,10 @@ export class MoreInfoDialog extends LitElement {
                               </ha-list-item>
                             `
                           : nothing}
-                        ${this._entry && domain === "light"
+                        ${this._entry &&
+                        stateObj &&
+                        domain === "light" &&
+                        lightSupportsFavoriteColors(stateObj)
                           ? html`
                               <ha-list-item
                                 graphic="icon"

src/dialogs/more-info/state_more_info_control.ts

@@ -13,6 +13,8 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   configurator: () => import("./controls/more-info-configurator"),
   counter: () => import("./controls/more-info-counter"),
   cover: () => import("./controls/more-info-cover"),
+  date: () => import("./controls/more-info-date"),
+  datetime: () => import("./controls/more-info-datetime"),
   fan: () => import("./controls/more-info-fan"),
   group: () => import("./controls/more-info-group"),
   humidifier: () => import("./controls/more-info-humidifier"),
@@ -27,6 +29,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   siren: () => import("./controls/more-info-siren"),
   sun: () => import("./controls/more-info-sun"),
   switch: () => import("./controls/more-info-switch"),
+  time: () => import("./controls/more-info-time"),
   timer: () => import("./controls/more-info-timer"),
   update: () => import("./controls/more-info-update"),
   vacuum: () => import("./controls/more-info-vacuum"),

src/dialogs/notifications/notification-drawer.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import "../../components/ha-icon-button-prev";
@@ -13,6 +13,7 @@ import { HomeAssistant } from "../../types";
 import "./notification-item";
 import "../../components/ha-header-bar";
 import "../../components/ha-drawer";
+import type { HaDrawer } from "../../components/ha-drawer";
 
 @customElement("notification-drawer")
 export class HuiNotificationDrawer extends LitElement {
@@ -22,6 +23,8 @@ export class HuiNotificationDrawer extends LitElement {
 
   @state() private _open = false;
 
+  @query("ha-drawer") private _drawer?: HaDrawer;
+
   private _unsubNotifications?: UnsubscribeFunc;
 
   connectedCallback() {
@@ -53,12 +56,14 @@ export class HuiNotificationDrawer extends LitElement {
   }
 
   closeDialog = () => {
+    if (this._drawer) {
+      this._drawer.open = false;
+    }
     if (this._unsubNotifications) {
       this._unsubNotifications();
       this._unsubNotifications = undefined;
     }
     this._notifications = [];
-    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   };
 
@@ -87,11 +92,7 @@ export class HuiNotificationDrawer extends LitElement {
     });
 
     return html`
-      <ha-drawer
+      <ha-drawer type="modal" open @MDCDrawer:closed=${this._dialogClosed}>
-        type="modal"
-        .open=${this._open}
-        @MDCDrawer:closed=${this._closeDrawer}
-      >
         <ha-header-bar>
           <div slot="title">
             ${this.hass.localize("ui.notification_drawer.title")}
@@ -99,7 +100,7 @@ export class HuiNotificationDrawer extends LitElement {
           <ha-icon-button-prev
             slot="actionItems"
             .hass=${this.hass}
-            @click=${this._closeDrawer}
+            @click=${this.closeDialog}
             .label=${this.hass.localize("ui.notification_drawer.close")}
           >
           </ha-icon-button-prev>
@@ -132,9 +133,9 @@ export class HuiNotificationDrawer extends LitElement {
     `;
   }
 
-  private _closeDrawer(ev) {
+  private _dialogClosed(ev: Event) {
     ev.stopPropagation();
-    this.closeDialog();
+    this._open = false;
   }
 
   private _dismissAll() {

src/onboarding/onboarding-core-config.ts

@@ -128,9 +128,9 @@ class OnboardingCoreConfig extends LitElement {
       </div>
 
       <div class="row">
-        <ha-country-picker 
+        <ha-country-picker
           class="flex"
-          .language=${this.hass.locale.language} 
+          .language=${this.hass.locale.language}
           .label=${
             this.hass.localize(
               "ui.panel.config.core.section.core.core_config.country"
@@ -335,12 +335,12 @@ class OnboardingCoreConfig extends LitElement {
     ]
   );
 
-  private _handleValueChanged(ev) {
+  private _handleValueChanged(ev: ValueChangedEvent<string>) {
-    const target = ev.currentTarget;
+    const target = ev.currentTarget as HTMLElement;
     this[`_${target.getAttribute("name")}`] = ev.detail.value;
   }
 
-  private _handleChange(ev: ValueChangedEvent<string>) {
+  private _handleChange(ev: Event) {
     const target = ev.currentTarget as HaTextField;
     this[`_${target.name}`] = target.value;
   }

src/panels/config/core/ha-config-section-general.ts

@@ -27,7 +27,8 @@ import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HaTextField } from "../../../components/ha-textfield";
 
 @customElement("ha-config-section-general")
 class HaConfigSectionGeneral extends LitElement {
@@ -301,13 +302,13 @@ class HaConfigSectionGeneral extends LitElement {
     this._updateUnits = true;
   }
 
-  private _handleValueChanged(ev) {
+  private _handleValueChanged(ev: ValueChangedEvent<string>) {
-    const target = ev.currentTarget;
+    const target = ev.currentTarget as HTMLElement;
-    this[`_${target.name}`] = ev.detail.value;
+    this[`_${target.getAttribute("name")}`] = ev.detail.value;
   }
 
-  private _handleChange(ev) {
+  private _handleChange(ev: Event) {
-    const target = ev.currentTarget;
+    const target = ev.currentTarget as HaTextField;
     this[`_${target.name}`] = target.value;
   }
 

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1,11 +1,15 @@
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js";
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import {
+  protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -39,8 +43,6 @@ import { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
-import { showMatterAddDeviceDialog } from "../integrations/integration-panels/matter/show-dialog-add-matter-device";
-import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 
 interface DeviceRowData extends DeviceRegistryEntry {
@@ -186,6 +188,8 @@ export class HaConfigDeviceDashboard extends LitElement {
 
       let filterConfigEntry: ConfigEntry | undefined;
 
+      const filteredDomains = new Set<string>();
+
       filters.forEach((value, key) => {
         if (key === "config_entry") {
           outputDevices = outputDevices.filter((device) =>
@@ -193,6 +197,9 @@ export class HaConfigDeviceDashboard extends LitElement {
           );
           startLength = outputDevices.length;
           filterConfigEntry = entries.find((entry) => entry.entry_id === value);
+          if (filterConfigEntry) {
+            filteredDomains.add(filterConfigEntry.domain);
+          }
         }
         if (key === "domain") {
           const entryIds = entries
@@ -202,6 +209,7 @@ export class HaConfigDeviceDashboard extends LitElement {
             device.config_entries.some((entryId) => entryIds.includes(entryId))
           );
           startLength = outputDevices.length;
+          filteredDomains.add(value);
         }
       });
 
@@ -251,6 +259,7 @@ export class HaConfigDeviceDashboard extends LitElement {
       return {
         devicesOutput: outputDevices,
         filteredConfigEntry: filterConfigEntry,
+        filteredDomains,
       };
     }
   );
@@ -546,25 +555,25 @@ export class HaConfigDeviceDashboard extends LitElement {
   }
 
   private _addDevice() {
-    const { filteredConfigEntry } = this._devicesAndFilterDomains(
+    const { filteredConfigEntry, filteredDomains } =
-      this.devices,
+      this._devicesAndFilterDomains(
-      this.entries,
+        this.devices,
-      this.entities,
+        this.entries,
-      this.areas,
+        this.entities,
-      this._searchParms,
+        this.areas,
-      this._showDisabled,
+        this._searchParms,
-      this.hass.localize
+        this._showDisabled,
-    );
+        this.hass.localize
-    if (filteredConfigEntry?.domain === "zha") {
+      );
-      navigate(`/config/zha/add`);
+    if (
-      return;
+      filteredDomains.size === 1 &&
-    }
+      (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
-    if (filteredConfigEntry?.domain === "zwave_js") {
+        [...filteredDomains][0]
-      this._showZJSAddDeviceDialog(filteredConfigEntry);
+      )
-      return;
+    ) {
-    }
+      protocolIntegrationPicked(this, this.hass, [...filteredDomains][0], {
-    if (filteredConfigEntry?.domain === "matter") {
+        config_entry: filteredConfigEntry?.entry_id,
-      showMatterAddDeviceDialog(this);
+      });
       return;
     }
     showAddIntegrationDialog(this, {
@@ -572,12 +581,6 @@ export class HaConfigDeviceDashboard extends LitElement {
     });
   }
 
-  private _showZJSAddDeviceDialog(filteredConfigEntry: ConfigEntry) {
-    showZWaveJSAddNodeDialog(this, {
-      entry_id: filteredConfigEntry!.entry_id,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       css`

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

@@ -67,6 +67,11 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
+import {
+  protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
+} from "../../../common/integrations/protocolIntegrationPicked";
+import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 
 export interface StateEntity
   extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@@ -348,7 +353,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         ? entities.concat(stateEntities)
         : entities;
 
-      const filteredDomains: string[] = [];
+      let filteredConfigEntry: ConfigEntry | undefined;
+      const filteredDomains = new Set<string>();
 
       filters.forEach((value, key) => {
         if (key === "config_entry") {
@@ -373,7 +379,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           const configEntry = entries.find((entry) => entry.entry_id === value);
 
           if (configEntry) {
-            filteredDomains.push(configEntry.domain);
+            filteredDomains.add(configEntry.domain);
+            filteredConfigEntry = configEntry;
           }
         }
         if (key === "domain") {
@@ -389,7 +396,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
               entity.config_entry_id &&
               entryIds.includes(entity.config_entry_id)
           );
-          filteredDomains.push(value);
+          filteredDomains.add(value);
           startLength = filteredEntities.length;
         }
       });
@@ -444,7 +451,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       }
 
       this._numHiddenEntities = startLength - result.length;
-      return { filteredEntities: result, filteredDomains: filteredDomains };
+      return { filteredEntities: result, filteredConfigEntry, filteredDomains };
     }
   );
 
@@ -509,7 +516,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         this._entries
       );
 
-    const includeZHAFab = filteredDomains.includes("zha");
+    const includeAddDeviceFab =
+      filteredDomains.size === 1 &&
+      (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
+        [...filteredDomains][0]
+      );
 
     return html`
       <hass-tabs-subpage-data-table
@@ -545,7 +556,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         @search-changed=${this._handleSearchChange}
         @row-click=${this._openEditEntry}
         id="entity_id"
-        .hasFab=${includeZHAFab}
+        .hasFab=${includeAddDeviceFab}
       >
         <ha-integration-overflow-menu
           .hass=${this.hass}
@@ -701,16 +712,16 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 </ha-check-list-item>
               </ha-button-menu>
             `}
-        ${includeZHAFab
+        ${includeAddDeviceFab
-          ? html`<a href="/config/zha/add" slot="fab">
+          ? html`<ha-fab
-              <ha-fab
+              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
-                .label=${this.hass.localize("ui.panel.config.zha.add_device")}
+              extended
-                extended
+              @click=${this._addDevice}
-                ?rtl=${computeRTL(this.hass)}
+              slot="fab"
-              >
+              ?rtl=${computeRTL(this.hass)}
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+            >
-              </ha-fab>
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-            </a>`
+            </ha-fab>`
           : nothing}
       </hass-tabs-subpage-data-table>
     `;
@@ -959,6 +970,36 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     this._showHidden = true;
   }
 
+  private _addDevice() {
+    const { filteredConfigEntry, filteredDomains } =
+      this._filteredEntitiesAndDomains(
+        this._entities!,
+        this._devices,
+        this._areas,
+        this._stateEntities,
+        this._searchParms,
+        this._showDisabled,
+        this._showUnavailable,
+        this._showReadOnly,
+        this._showHidden,
+        this._entries
+      );
+    if (
+      filteredDomains.size === 1 &&
+      (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
+        [...filteredDomains][0]
+      )
+    ) {
+      protocolIntegrationPicked(this, this.hass, [...filteredDomains][0], {
+        config_entry: filteredConfigEntry?.entry_id,
+      });
+      return;
+    }
+    showAddIntegrationDialog(this, {
+      domain: this._searchParms.get("domain") || undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/integrations/ha-config-integration-page.ts

@@ -10,16 +10,18 @@ import {
   mdiCloud,
   mdiCog,
   mdiDelete,
+  mdiDevices,
   mdiDotsVertical,
   mdiDownload,
+  mdiHandExtendedOutline,
   mdiOpenInNew,
   mdiPackageVariant,
   mdiPlayCircleOutline,
-  mdiPlus,
   mdiProgressHelper,
   mdiReload,
   mdiReloadAlert,
   mdiRenameBox,
+  mdiShapeOutline,
   mdiStopCircleOutline,
 } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -213,6 +215,27 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       ERROR_STATES.includes(entry.state)
     );
 
+    const normalEntries = configEntries
+      .filter(
+        (entry) =>
+          entry.source !== "ignore" && !ERROR_STATES.includes(entry.state)
+      )
+      .sort((a, b) => {
+        if (Boolean(a.disabled_by) !== Boolean(b.disabled_by)) {
+          return a.disabled_by ? 1 : -1;
+        }
+        return caseInsensitiveStringCompare(
+          a.title,
+          b.title,
+          this.hass.locale.language
+        );
+      });
+
+    const devices = this._getDevices(configEntries, this.hass.devices);
+    const entities = this._getEntities(configEntries, this._entities);
+
+    const services = !devices.some((device) => device.entry_type !== "service");
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -221,7 +244,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       >
         <div class="container">
           <div class="column small">
-            <ha-card>
+            <ha-card class="overview">
               <div class="card-content">
                 <div class="logo-container">
                   <img
@@ -258,28 +281,47 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
               </div>
 
               <div class="card-actions">
-                ${this._logInfo
+                ${devices.length > 0
-                  ? html`<ha-list-item
+                  ? html`<a
-                      @request-selected=${this._logInfo.level ===
+                      href=${devices.length === 1
-                      LogSeverity.DEBUG
+                        ? `/config/devices/device/${devices[0].id}`
-                        ? this._handleDisableDebugLogging
+                        : `/config/devices/dashboard?historyBack=1&domain=${this.domain}`}
-                        : this._handleEnableDebugLogging}
-                      graphic="icon"
                     >
-                      ${this._logInfo.level === LogSeverity.DEBUG
+                      <ha-list-item hasMeta graphic="icon">
-                        ? this.hass.localize(
+                        <ha-svg-icon
-                            "ui.panel.config.integrations.config_entry.disable_debug_logging"
+                          .path=${services
-                          )
+                            ? mdiHandExtendedOutline
-                        : this.hass.localize(
+                            : mdiDevices}
-                            "ui.panel.config.integrations.config_entry.enable_debug_logging"
+                          slot="graphic"
-                          )}
+                        ></ha-svg-icon>
-                      <ha-svg-icon
+                        ${this.hass.localize(
-                        slot="graphic"
+                          `ui.panel.config.integrations.config_entry.${
-                        .path=${this._logInfo.level === LogSeverity.DEBUG
+                            services ? "services" : "devices"
-                          ? mdiBugStop
+                          }`,
-                          : mdiBugPlay}
+                          "count",
-                      ></ha-svg-icon>
+                          devices.length
-                    </ha-list-item>`
+                        )}
+                        <ha-icon-next slot="meta"></ha-icon-next>
+                      </ha-list-item>
+                    </a>`
+                  : ""}
+                ${entities.length > 0
+                  ? html`<a
+                      href=${`/config/entities?historyBack=1&domain=${this.domain}`}
+                    >
+                      <ha-list-item hasMeta graphic="icon">
+                        <ha-svg-icon
+                          .path=${mdiShapeOutline}
+                          slot="graphic"
+                        ></ha-svg-icon>
+                        ${this.hass.localize(
+                          `ui.panel.config.integrations.config_entry.entities`,
+                          "count",
+                          entities.length
+                        )}
+                        <ha-icon-next slot="meta"></ha-icon-next>
+                      </ha-list-item>
+                    </a>`
                   : ""}
                 ${this._manifest
                   ? html`<a
@@ -329,6 +371,32 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                       </ha-list-item>
                     </a>`
                   : ""}
+                ${this._logInfo
+                  ? html`<ha-list-item
+                      @request-selected=${this._logInfo.level ===
+                      LogSeverity.DEBUG
+                        ? this._handleDisableDebugLogging
+                        : this._handleEnableDebugLogging}
+                      graphic="icon"
+                    >
+                      ${this._logInfo.level === LogSeverity.DEBUG
+                        ? this.hass.localize(
+                            "ui.panel.config.integrations.config_entry.disable_debug_logging"
+                          )
+                        : this.hass.localize(
+                            "ui.panel.config.integrations.config_entry.enable_debug_logging"
+                          )}
+                      <ha-svg-icon
+                        slot="graphic"
+                        class=${this._logInfo.level === LogSeverity.DEBUG
+                          ? "warning"
+                          : ""}
+                        .path=${this._logInfo.level === LogSeverity.DEBUG
+                          ? mdiBugStop
+                          : mdiBugPlay}
+                      ></ha-svg-icon>
+                    </ha-list-item>`
+                  : ""}
               </div>
             </ha-card>
           </div>
@@ -410,43 +478,38 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
 
             <ha-card>
               <h1 class="card-header">
-                ${this.hass.localize(
+                ${this._manifest?.integration_type
-                  `ui.panel.config.integrations.integration_page.entries`
+                  ? this.hass.localize(
-                )}
+                      `ui.panel.config.integrations.integration_page.entries_${this._manifest?.integration_type}`
+                    )
+                  : this.hass.localize(
+                      `ui.panel.config.integrations.integration_page.entries`
+                    )}
               </h1>
-              ${configEntries.length === 0
+              ${normalEntries.length === 0
                 ? html`<div class="card-content no-entries">
                     ${this.hass.localize(
-                      `ui.panel.config.integrations.integration_page.no_entries`
+                      "ui.panel.config.integrations.integration_page.no_entries"
                     )}
                   </div>`
                 : nothing}
               <mwc-list>
-                ${configEntries
+                ${normalEntries.map((item) => this._renderConfigEntry(item))}
-                  .filter((entry) => !ERROR_STATES.includes(entry.state))
-                  .sort((a, b) => {
-                    if (Boolean(a.disabled_by) !== Boolean(b.disabled_by)) {
-                      return a.disabled_by ? 1 : -1;
-                    }
-                    return caseInsensitiveStringCompare(
-                      a.title,
-                      b.title,
-                      this.hass.locale.language
-                    );
-                  })
-                  .map((item) => this._renderConfigEntry(item))}
               </mwc-list>
+              <div class="card-actions">
+                <ha-button @click=${this._addIntegration}>
+                  ${this._manifest?.integration_type
+                    ? this.hass.localize(
+                        `ui.panel.config.integrations.integration_page.add_${this._manifest?.integration_type}`
+                      )
+                    : this.hass.localize(
+                        `ui.panel.config.integrations.integration_page.add_entry`
+                      )}
+                </ha-button>
+              </div>
             </ha-card>
           </div>
         </div>
-        <ha-fab
-          slot="fab"
-          @click=${this._addIntegration}
-          .label=${`Add ${domainToName(this.hass.localize, this.domain)}`}
-          extended
-        >
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </ha-fab>
       </hass-subpage>
     `;
   }
@@ -464,21 +527,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
     let stateTextExtra: TemplateResult | string | undefined;
     let icon: string = mdiAlertCircle;
 
-    if (item.disabled_by) {
+    if (!item.disabled_by && item.state === "not_loaded") {
-      stateText = [
-        "ui.panel.config.integrations.config_entry.disable.disabled_cause",
-        "cause",
-        this.hass.localize(
-          `ui.panel.config.integrations.config_entry.disable.disabled_by.${item.disabled_by}`
-        ) || item.disabled_by,
-      ];
-      if (item.state === "failed_unload") {
-        stateTextExtra = html`.
-        ${this.hass.localize(
-          "ui.panel.config.integrations.config_entry.disable_restart_confirm"
-        )}.`;
-      }
-    } else if (item.state === "not_loaded") {
       stateText = ["ui.panel.config.integrations.config_entry.not_loaded"];
     } else if (item.state === "setup_in_progress") {
       icon = mdiProgressHelper;
@@ -508,66 +557,87 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       }
     }
 
-    const devices = this._getDevices(item, this.hass.devices);
+    const devices = this._getConfigEntryDevices(item);
-    const services = this._getServices(item, this.hass.devices);
+    const services = this._getConfigEntryServices(item);
-    const entities = this._getEntities(item, this._entities);
+    const entities = this._getConfigEntryEntities(item);
 
     let devicesLine: (TemplateResult | string)[] = [];
 
-    for (const [items, localizeKey] of [
+    if (item.disabled_by) {
-      [devices, "devices"],
+      devicesLine.push(
-      [services, "services"],
+        this.hass.localize(
-    ] as const) {
+          "ui.panel.config.integrations.config_entry.disable.disabled_cause",
-      if (items.length === 0) {
+          {
-        continue;
+            cause:
+              this.hass.localize(
+                `ui.panel.config.integrations.config_entry.disable.disabled_by.${item.disabled_by}`
+              ) || item.disabled_by,
+          }
+        )
+      );
+      if (item.state === "failed_unload") {
+        devicesLine.push(`.
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.disable_restart_confirm"
+        )}.`);
+      }
+    } else {
+      for (const [items, localizeKey] of [
+        [devices, "devices"],
+        [services, "services"],
+      ] as const) {
+        if (items.length === 0) {
+          continue;
+        }
+        const url =
+          items.length === 1
+            ? `/config/devices/device/${items[0].id}`
+            : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`;
+        devicesLine.push(
+          // no white space before/after template on purpose
+          html`<a href=${url}
+            >${this.hass.localize(
+              `ui.panel.config.integrations.config_entry.${localizeKey}`,
+              "count",
+              items.length
+            )}</a
+          >`
+        );
+      }
+
+      if (entities.length) {
+        devicesLine.push(
+          // no white space before/after template on purpose
+          html`<a
+            href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
+            >${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.entities",
+              "count",
+              entities.length
+            )}</a
+          >`
+        );
+      }
+
+      if (devicesLine.length === 0) {
+        devicesLine = ["No devices or entities"];
+      } else if (devicesLine.length === 2) {
+        devicesLine = [
+          devicesLine[0],
+          ` ${this.hass.localize("ui.common.and")} `,
+          devicesLine[1],
+        ];
+      } else if (devicesLine.length === 3) {
+        devicesLine = [
+          devicesLine[0],
+          ", ",
+          devicesLine[1],
+          ` ${this.hass.localize("ui.common.and")} `,
+          devicesLine[2],
+        ];
       }
-      const url =
-        items.length === 1
-          ? `/config/devices/device/${items[0].id}`
-          : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`;
-      devicesLine.push(
-        // no white space before/after template on purpose
-        html`<a href=${url}
-          >${this.hass.localize(
-            `ui.panel.config.integrations.config_entry.${localizeKey}`,
-            "count",
-            items.length
-          )}</a
-        >`
-      );
     }
 
-    if (entities.length) {
-      devicesLine.push(
-        // no white space before/after template on purpose
-        html`<a
-          href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
-          >${this.hass.localize(
-            "ui.panel.config.integrations.config_entry.entities",
-            "count",
-            entities.length
-          )}</a
-        >`
-      );
-    }
-
-    if (devicesLine.length === 0) {
-      devicesLine = ["No devices or entities"];
-    } else if (devicesLine.length === 2) {
-      devicesLine = [
-        devicesLine[0],
-        ` ${this.hass.localize("ui.common.and")} `,
-        devicesLine[1],
-      ];
-    } else if (devicesLine.length === 3) {
-      devicesLine = [
-        devicesLine[0],
-        ", ",
-        devicesLine[1],
-        ` ${this.hass.localize("ui.common.and")} `,
-        devicesLine[2],
-      ];
-    }
     return html`<ha-list-item
       hasMeta
       class="config_entry ${classMap({
@@ -577,6 +647,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         "state-error": ERROR_STATES.includes(item!.state),
       })}"
       data-entry-id=${item.entry_id}
+      .disabled=${item.disabled_by}
       .configEntry=${item}
       twoline
       noninteractive
@@ -637,6 +708,61 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
               )}
             </ha-list-item>`
           : ""}
+        ${item.disabled_by && devices.length
+          ? html`<a
+              href=${devices.length === 1
+                ? `/config/devices/device/${devices[0].id}`
+                : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
+            >
+              <ha-list-item hasMeta graphic="icon">
+                <ha-svg-icon .path=${mdiDevices} slot="graphic"></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.devices`,
+                  "count",
+                  devices.length
+                )}
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            </a>`
+          : ""}
+        ${item.disabled_by && services.length
+          ? html`<a
+              href=${services.length === 1
+                ? `/config/devices/device/${services[0].id}`
+                : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
+            >
+              <ha-list-item hasMeta graphic="icon">
+                <ha-svg-icon
+                  .path=${mdiHandExtendedOutline}
+                  slot="graphic"
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.services`,
+                  "count",
+                  services.length
+                )}
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            </a>`
+          : ""}
+        ${item.disabled_by && entities.length
+          ? html`<a
+              href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
+            >
+              <ha-list-item hasMeta graphic="icon">
+                <ha-svg-icon
+                  .path=${mdiShapeOutline}
+                  slot="graphic"
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.entities`,
+                  "count",
+                  entities.length
+                )}
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            </a>`
+          : ""}
         ${!item.disabled_by &&
         RECOVERABLE_STATES.includes(item.state) &&
         item.supports_unload &&
@@ -807,49 +933,77 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
 
   private _getEntities = memoizeOne(
     (
-      configEntry: ConfigEntry,
+      configEntry: ConfigEntry[],
       entityRegistryEntries: EntityRegistryEntry[]
     ): EntityRegistryEntry[] => {
       if (!entityRegistryEntries) {
         return [];
       }
+      const entryIds = configEntry.map((entry) => entry.entry_id);
       return entityRegistryEntries.filter(
-        (entity) => entity.config_entry_id === configEntry.entry_id
+        (entity) =>
+          entity.config_entry_id && entryIds.includes(entity.config_entry_id)
       );
     }
   );
 
   private _getDevices = memoizeOne(
     (
-      configEntry: ConfigEntry,
+      configEntry: ConfigEntry[],
       deviceRegistryEntries: HomeAssistant["devices"]
     ): DeviceRegistryEntry[] => {
       if (!deviceRegistryEntries) {
         return [];
       }
-      return Object.values(deviceRegistryEntries).filter(
+      const entryIds = configEntry.map((entry) => entry.entry_id);
-        (device) =>
+      return Object.values(deviceRegistryEntries).filter((device) =>
-          device.config_entries.includes(configEntry.entry_id) &&
+        device.config_entries.some((entryId) => entryIds.includes(entryId))
-          device.entry_type !== "service"
       );
     }
   );
 
-  private _getServices = memoizeOne(
+  private _getConfigEntryEntities = (
-    (
+    configEntry: ConfigEntry
-      configEntry: ConfigEntry,
+  ): EntityRegistryEntry[] => {
-      deviceRegistryEntries: HomeAssistant["devices"]
+    const entries = this._domainConfigEntries(
-    ): DeviceRegistryEntry[] => {
+      this.domain,
-      if (!deviceRegistryEntries) {
+      this._extraConfigEntries || this.configEntries
-        return [];
+    );
-      }
+    const entityRegistryEntries = this._getEntities(entries, this._entities);
-      return Object.values(deviceRegistryEntries).filter(
+    return entityRegistryEntries.filter(
-        (device) =>
+      (entity) => entity.config_entry_id === configEntry.entry_id
-          device.config_entries.includes(configEntry.entry_id) &&
+    );
-          device.entry_type === "service"
+  };
-      );
+
-    }
+  private _getConfigEntryDevices = (
-  );
+    configEntry: ConfigEntry
+  ): DeviceRegistryEntry[] => {
+    const entries = this._domainConfigEntries(
+      this.domain,
+      this._extraConfigEntries || this.configEntries
+    );
+    const deviceRegistryEntries = this._getDevices(entries, this.hass.devices);
+    return Object.values(deviceRegistryEntries).filter(
+      (device) =>
+        device.config_entries.includes(configEntry.entry_id) &&
+        device.entry_type !== "service"
+    );
+  };
+
+  private _getConfigEntryServices = (
+    configEntry: ConfigEntry
+  ): DeviceRegistryEntry[] => {
+    const entries = this._domainConfigEntries(
+      this.domain,
+      this._extraConfigEntries || this.configEntries
+    );
+    const deviceRegistryEntries = this._getDevices(entries, this.hass.devices);
+    return Object.values(deviceRegistryEntries).filter(
+      (device) =>
+        device.config_entries.includes(configEntry.entry_id) &&
+        device.entry_type === "service"
+    );
+  };
 
   private _showOptions(ev) {
     showOptionsFlowDialog(
@@ -1175,7 +1329,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           display: flex;
           justify-content: center;
         }
-        .card-actions {
+        .overview .card-actions {
           padding: 0;
         }
         img {
@@ -1199,6 +1353,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           --mdc-list-item-meta-size: auto;
           --mdc-list-item-meta-display: flex;
         }
+        ha-button-menu ha-list-item {
+          --mdc-list-item-meta-size: 24px;
+        }
         ha-list-item.config_entry::after {
           position: absolute;
           top: 0;
@@ -1221,6 +1378,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .attention {
           primary-color: var(--error-color);
         }
+        .warning {
+          color: var(--error-color);
+        }
         .state-error {
           --state-message-color: var(--error-color);
           --text-on-state-color: var(--text-primary-color);

src/panels/config/integrations/ha-integration-card.ts

@@ -5,6 +5,7 @@ import {
   mdiCogOutline,
   mdiDevices,
   mdiHandExtendedOutline,
+  mdiPuzzleOutline,
   mdiShapeOutline,
 } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -94,7 +95,9 @@ export class HaIntegrationCard extends LitElement {
 
   private _renderSingleEntry(): TemplateResult {
     const devices = this._getDevices(this.items, this.hass.devices);
-    const entities = this._getEntities(this.items, this.entityRegistryEntries);
+    const entities = devices.length
+      ? []
+      : this._getEntities(this.items, this.entityRegistryEntries);
 
     const services = !devices.some((device) => device.entry_type !== "service");
 
@@ -121,8 +124,7 @@ export class HaIntegrationCard extends LitElement {
                 <ha-icon-next slot="meta"></ha-icon-next>
               </ha-list-item>
             </a>`
-          : ""}
+          : entities.length > 0
-        ${entities.length > 0
           ? html`<a
               href=${`/config/entities?historyBack=1&domain=${this.domain}`}
             >
@@ -139,7 +141,20 @@ export class HaIntegrationCard extends LitElement {
                 <ha-icon-next slot="meta"></ha-icon-next>
               </ha-list-item>
             </a>`
-          : ""}
+          : html`<a href=${`/config/integrations/integration/${this.domain}`}>
+              <ha-list-item hasMeta graphic="icon">
+                <ha-svg-icon
+                  .path=${mdiPuzzleOutline}
+                  slot="graphic"
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.entries`,
+                  "count",
+                  this.items.length
+                )}
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            </a>`}
       </div>
     `;
   }

src/panels/config/integrations/ha-integration-header.ts

@@ -3,6 +3,7 @@ import { mdiCloud, mdiPackageVariant } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-svg-icon";
 import { domainToName, IntegrationManifest } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
@@ -94,7 +95,10 @@ export class HaIntegrationHeader extends LitElement {
                   ([icon, description]) => html`
                     <span>
                       <ha-svg-icon .path=${icon}></ha-svg-icon>
-                      <simple-tooltip animation-delay="0"
+                      <simple-tooltip
+                        animation-delay="0"
+                        .position=${computeRTL(this.hass) ? "left" : "right"}
+                        offset="4"
                         >${description}</simple-tooltip
                       >
                     </span>
@@ -184,6 +188,9 @@ export class HaIntegrationHeader extends LitElement {
       left: 40px;
       top: 40px;
       display: flex;
+      padding: 4px;
+      inset-inline-start: 40px;
+      inset-inline-end: initial;
     }
     .icons.cloud {
       background: var(--info-color);
@@ -191,14 +198,18 @@ export class HaIntegrationHeader extends LitElement {
     .icons.double {
       background: var(--warning-color);
       left: 28px;
+      inset-inline-start: 28px;
+      inset-inline-end: initial;
     }
     .icons ha-svg-icon {
       width: 16px;
       height: 16px;
-      margin: 4px;
+      display: block;
     }
     .icons span:not(:first-child) ha-svg-icon {
-      margin-left: 0;
+      margin-left: 4px;
+      margin-inline-start: 4px;
+      margin-inline-end: inherit;
     }
     simple-tooltip {
       white-space: nowrap;

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -501,7 +501,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
     haStyle,
     css`
       .content {
-        padding: 24px 0 32px;
+        padding: 24px 8px 32px;
         max-width: 600px;
         margin: 0 auto;
         direction: ltr;

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -46,6 +46,8 @@ import {
 } from "../../../../../data/zha";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
 
+const MULTIPROTOCOL_ADDON_URL = "socket://core-silabs-multiprotocol:9999";
+
 export const zhaTabs: PageNavigation[] = [
   {
     translationKey: "ui.panel.config.zha.network.caption",
@@ -181,6 +183,25 @@ class ZHAConfigDashboard extends LitElement {
                     >${this._networkSettings.radio_type}</span
                   >
                 </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="description">Serial port</span>
+                  <span slot="heading"
+                    >${this._networkSettings.device.path}</span
+                  >
+                </ha-settings-row>
+
+                ${this._networkSettings.device.baudrate &&
+                !this._networkSettings.device.path.startsWith("socket://")
+                  ? html`
+                      <ha-settings-row>
+                        <span slot="description">Baudrate</span>
+                        <span slot="heading"
+                          >${this._networkSettings.device.baudrate}</span
+                        >
+                      </ha-settings-row>
+                    `
+                  : ""}
               </div>`
             : ""}
           <div class="card-actions">
@@ -255,6 +276,19 @@ class ZHAConfigDashboard extends LitElement {
   }
 
   private async _showChannelMigrationDialog(): Promise<void> {
+    if (this._networkSettings!.device.path === MULTIPROTOCOL_ADDON_URL) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.zha.configuration_page.channel_dialog.title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.config.zha.configuration_page.channel_dialog.text"
+        ),
+        warning: true,
+      });
+      return;
+    }
+
     showZHAChangeChannelDialog(this, {
       currentChannel: this._networkSettings!.settings.network_info.channel,
     });

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

@@ -34,7 +34,10 @@ import {
   HistoryStates,
   subscribeHistoryStatesTimeWindow,
 } from "../../../data/history";
-import { hasConfigOrEntitiesChanged } from "../common/has-changed";
+import {
+  hasConfigChanged,
+  hasConfigOrEntitiesChanged,
+} from "../common/has-changed";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import { processConfigEntities } from "../common/process-config-entities";
@@ -194,7 +197,15 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       return true;
     }
 
-    return hasConfigOrEntitiesChanged(this, changedProps);
+    if (this._config?.geo_location_sources) {
+      if (oldHass.states !== this.hass.states) {
+        return true;
+      }
+    }
+
+    return this._config?.entities
+      ? hasConfigOrEntitiesChanged(this, changedProps)
+      : hasConfigChanged(this, changedProps);
   }
 
   public connectedCallback() {

src/panels/lovelace/common/has-changed.ts

@@ -4,7 +4,10 @@ import { EntityRegistryDisplayEntry } from "../../../data/entity_registry";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "./process-config-entities";
 
-function hasConfigChanged(element: any, changedProps: PropertyValues): boolean {
+export function hasConfigChanged(
+  element: any,
+  changedProps: PropertyValues
+): boolean {
   if (changedProps.has("_config")) {
     return true;
   }

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -85,7 +85,7 @@ class HuiGenericEntityRow extends LitElement {
         tabindex=${ifDefined(pointer ? "0" : undefined)}
       ></state-badge>
       ${!this.hideName
-        ? html` <div
+        ? html`<div
             class="info ${classMap({
               pointer,
               "text-content": !hasSecondary,

src/panels/lovelace/entity-rows/hui-date-entity-row.ts

@@ -2,7 +2,7 @@ import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-date-input";
 import { isUnavailableState } from "../../../data/entity";
-import { setDateValue, stateToIsoDateString } from "../../../data/date";
+import { setDateValue } from "../../../data/date";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -41,16 +41,14 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const unavailable = isUnavailableState(stateObj.state);
+
     return html`
-      <hui-generic-entity-row
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
         <ha-date-input
           .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
+          .disabled=${unavailable}
-          .value=${stateToIsoDateString(stateObj)}
+          .value=${unavailable ? "" : stateObj.state}
           @value-changed=${this._dateChanged}
         >
         </ha-date-input>
@@ -59,9 +57,7 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    const stateObj = this.hass!.states[this._config!.entity];
+    setDateValue(this.hass!, this._config!.entity, ev.detail.value);
-
-    setDateValue(this.hass!, stateObj.entity_id, ev.detail.value);
   }
 }
 

src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts

@@ -18,6 +18,7 @@ import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { EntityConfig, LovelaceRow } from "./types";
 import "../../../components/ha-time-input";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 
 @customElement("hui-datetime-entity-row")
 class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@@ -51,30 +52,35 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const dateObj = new Date(stateObj.state);
+    const unavailable = isUnavailableState(stateObj.state);
-    const time = format(dateObj, "HH:mm:ss");
+
-    const date = format(dateObj, "yyyy-MM-dd");
+    const dateObj = unavailable ? undefined : new Date(stateObj.state);
+    const time = dateObj ? format(dateObj, "HH:mm:ss") : "";
+    const date = dateObj ? format(dateObj, "yyyy-MM-dd") : "";
 
     return html`
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName="true"
+        hideName
       >
-        <ha-date-input
+        <div>
-          .locale=${this.hass.locale}
+          <ha-date-input
-          .value=${date}
+            .label=${this._config.name || computeStateName(stateObj)}
-          .disabled=${isUnavailableState(stateObj.state)}
+            .locale=${this.hass.locale}
-          @value-changed=${this._dateChanged}
+            .value=${date}
-        >
+            .disabled=${unavailable}
-        </ha-date-input>
+            @value-changed=${this._dateChanged}
-        <ha-time-input
+          >
-          .value=${time}
+          </ha-date-input>
-          .disabled=${isUnavailableState(stateObj.state)}
+          <ha-time-input
-          .locale=${this.hass.locale}
+            .value=${time}
-          @value-changed=${this._timeChanged}
+            .disabled=${unavailable}
-          @click=${this._stopEventPropagation}
+            .locale=${this.hass.locale}
-        ></ha-time-input>
+            @value-changed=${this._timeChanged}
+            @click=${this._stopEventPropagation}
+          ></ha-time-input>
+        </div>
       </hui-generic-entity-row>
     `;
   }
@@ -103,12 +109,17 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-date-input + ha-time-input {
+      ha-time-input {
         margin-left: 4px;
         margin-inline-start: 4px;
         margin-inline-end: initial;
         direction: var(--direction);
       }
+      div {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
     `;
   }
 }

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -62,33 +62,39 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         .hideName=${stateObj.attributes.has_date &&
         stateObj.attributes.has_time}
       >
-        ${stateObj.attributes.has_date
+        <div
-          ? html`
+          class=${stateObj.attributes.has_date && stateObj.attributes.has_time
-              <ha-date-input
+            ? "both"
-                .label=${stateObj.attributes.has_time ? name : undefined}
+            : ""}
-                .locale=${this.hass.locale}
+        >
-                .disabled=${isUnavailableState(stateObj.state)}
+          ${stateObj.attributes.has_date
-                .value=${stateToIsoDateString(stateObj)}
+            ? html`
-                @value-changed=${this._dateChanged}
+                <ha-date-input
-              >
+                  .label=${stateObj.attributes.has_time ? name : undefined}
-              </ha-date-input>
+                  .locale=${this.hass.locale}
-            `
+                  .disabled=${isUnavailableState(stateObj.state)}
-          : ``}
+                  .value=${stateToIsoDateString(stateObj)}
-        ${stateObj.attributes.has_time
+                  @value-changed=${this._dateChanged}
-          ? html`
+                >
-              <ha-time-input
+                </ha-date-input>
-                .value=${stateObj.state === UNKNOWN
+              `
-                  ? ""
+            : ``}
-                  : stateObj.attributes.has_date
+          ${stateObj.attributes.has_time
-                  ? stateObj.state.split(" ")[1]
+            ? html`
-                  : stateObj.state}
+                <ha-time-input
-                .locale=${this.hass.locale}
+                  .value=${stateObj.state === UNKNOWN
-                .disabled=${isUnavailableState(stateObj.state)}
+                    ? ""
-                @value-changed=${this._timeChanged}
+                    : stateObj.attributes.has_date
-                @click=${this._stopEventPropagation}
+                    ? stateObj.state.split(" ")[1]
-              ></ha-time-input>
+                    : stateObj.state}
-            `
+                  .locale=${this.hass.locale}
-          : ``}
+                  .disabled=${isUnavailableState(stateObj.state)}
+                  @value-changed=${this._timeChanged}
+                  @click=${this._stopEventPropagation}
+                ></ha-time-input>
+              `
+            : ``}
+        </div>
       </hui-generic-entity-row>
     `;
   }
@@ -126,6 +132,11 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         margin-inline-end: initial;
         direction: var(--direction);
       }
+      div.both {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
     `;
   }
 }

src/panels/lovelace/entity-rows/hui-time-entity-row.ts

@@ -42,16 +42,14 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const unavailable = isUnavailableState(stateObj.state);
+
     return html`
-      <hui-generic-entity-row
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
         <ha-time-input
-          .value=${stateObj.state}
+          .value=${unavailable ? "" : stateObj.state}
           .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
+          .disabled=${unavailable}
           @value-changed=${this._timeChanged}
           @click=${this._stopEventPropagation}
         ></ha-time-input>

src/panels/lovelace/views/hui-masonry-view.ts

@@ -320,6 +320,11 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         min-width: 0;
       }
 
+      /* Fix for safari */
+      .column:has(> *) {
+        flex-grow: 1;
+      }
+
       .column:not(:has(> *:not([hidden]))) {
         flex-grow: 0;
       }

src/translations/en.json

@@ -3251,8 +3251,19 @@
           },
           "integration_page": {
             "entries": "Integration entries",
+            "entries_device": "Devices",
+            "entries_hub": "Hubs",
+            "entries_service": "Services",
+            "entries_helper": "Helpers",
+            "entries_hardware": "Hardware",
             "no_entries": "No entries",
-            "attention_entries": "Needs attention"
+            "attention_entries": "Needs attention",
+            "add_entry": "Add entry",
+            "add_device": "Add device",
+            "add_hub": "Add hub",
+            "add_service": "Add service",
+            "add_helper": "Add helper",
+            "add_hardware": "Add hardware"
           },
           "config_entry": {
             "application_credentials": {
@@ -3266,6 +3277,7 @@
             "devices": "{count} {count, plural,\n  one {device}\n  other {devices}\n}",
             "entities": "{count} {count, plural,\n  one {entity}\n  other {entities}\n}",
             "services": "{count} {count, plural,\n  one {service}\n  other {services}\n}",
+            "entries": "{count} {count, plural,\n  one {entry}\n  other {entries}\n}",
             "rename": "Rename",
             "configure": "Configure",
             "system_options": "System options",
@@ -3509,7 +3521,11 @@
             "download_backup": "Download Backup",
             "migrate_radio": "Migrate Radio",
             "network_settings_title": "Network Settings",
-            "change_channel": "Change channel"
+            "change_channel": "Change channel",
+            "channel_dialog": {
+              "title": "Multiprotocol addon in use",
+              "text": "Zigbee and Thread share the same radio and must use the same channel. Change the channel of both networks by reconfiguring multiprotocol from the hardware menu."
+            }
           },
           "add_device_page": {
             "spinner": "Searching for Zigbee devices…",

yarn.lock

@@ -2063,13 +2063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lit-labs/context@npm:0.3.1":
+"@lit-labs/context@npm:0.3.2":
-  version: 0.3.1
+  version: 0.3.2
-  resolution: "@lit-labs/context@npm:0.3.1"
+  resolution: "@lit-labs/context@npm:0.3.2"
   dependencies:
     "@lit/reactive-element": ^1.5.0
     lit: ^2.7.0
-  checksum: eca24343bf63a092662a45c0483a77191348514c84aa7fa1a497d45c5741c16e8e61fb294ed8e56d73536b4e7fe96c49beb416417a2c879e670e553e19f5a3f5
+  checksum: 55920366798a3337a455c627c0b6911c7b78dee94a783ad77edb9a9e237a2e48201d6cf869f3d0b805316e5c8e8fb817f52f663bc556dd40ca6e8b3168662daf
   languageName: node
   linkType: hard
 
@@ -3349,15 +3349,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/plugin-retry@npm:4.1.3":
+"@octokit/plugin-retry@npm:4.1.5":
-  version: 4.1.3
+  version: 4.1.5
-  resolution: "@octokit/plugin-retry@npm:4.1.3"
+  resolution: "@octokit/plugin-retry@npm:4.1.5"
   dependencies:
     "@octokit/types": ^9.0.0
     bottleneck: ^2.15.3
   peerDependencies:
     "@octokit/core": ">=3"
-  checksum: f9ed5869be23dddcf1ee896ce996e46a412a586259b55612ba44c82cdeed91436102e6e3ec57db879bd91a4446dcafbaa94632e4e059c6af56d9cca9b163eacb
+  checksum: 37272a0dd2fea5025797bb0f6812899c048468b3ef35c0413154230ef0d5c3e323a76bb9eb971ea5ba498f68407711507336852783443397a185a9a75b28b06c
   languageName: node
   linkType: hard
 
@@ -3898,9 +3898,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:15.0.2":
+"@rollup/plugin-node-resolve@npm:15.1.0":
-  version: 15.0.2
+  version: 15.1.0
-  resolution: "@rollup/plugin-node-resolve@npm:15.0.2"
+  resolution: "@rollup/plugin-node-resolve@npm:15.1.0"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     "@types/resolve": 1.20.2
@@ -3913,7 +3913,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 328eafee06ff967a36441b55e77fbd0d4f599d256e5d1977800ee71915846c46bc1b6185df35c7b512ad2b4023b05b65a332be77b8b00b9d8a20f87d056b8166
+  checksum: 83617cdbb90cb780251e8b16dc1671e35bde90b8d4d30e008aefe706b5b643057f6299bdd3226b2a30bf5e4f807a880169de3faa47b9f2ba38d39f294f85f951
   languageName: node
   linkType: hard
 
@@ -4658,14 +4658,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:5.59.7":
+"@typescript-eslint/eslint-plugin@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.59.7"
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.59.8"
   dependencies:
     "@eslint-community/regexpp": ^4.4.0
-    "@typescript-eslint/scope-manager": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
-    "@typescript-eslint/type-utils": 5.59.7
+    "@typescript-eslint/type-utils": 5.59.8
-    "@typescript-eslint/utils": 5.59.7
+    "@typescript-eslint/utils": 5.59.8
     debug: ^4.3.4
     grapheme-splitter: ^1.0.4
     ignore: ^5.2.0
@@ -4678,43 +4678,43 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10d28bac7a5af9e41767be0bb9c270ee3dcdfeaa38d1b036c6822e7260b88821c460699ba943664eb1ef272d00de6a81b99d7d955332044ea87b624e7ead84a1
+  checksum: 3e05cd06149ec3741c3c2fb638e2d19a55687b4614a5c8820433db82997687650297e51c17828d320162ccf4241798cf5712c405561e7605cb17e984a6967f7b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:5.59.7":
+"@typescript-eslint/parser@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/parser@npm:5.59.7"
+  resolution: "@typescript-eslint/parser@npm:5.59.8"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
-    "@typescript-eslint/types": 5.59.7
+    "@typescript-eslint/types": 5.59.8
-    "@typescript-eslint/typescript-estree": 5.59.7
+    "@typescript-eslint/typescript-estree": 5.59.8
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: bc44f37a11a44f84ae5f0156213f3e2e49aef2ecac94d9e161a0c721acd29462e288f306ad4648095ac1c0e5a5f62b78280c1735883cf39f79ee3afcba312119
+  checksum: bac9f09d8552086ceb882a7b87ce4d98dfaa41579249216c75d97e3fc07af33cddc4cbbd07a127a5823c826a258882643aaf658bec19cb2a434002b55c5f0d12
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.59.7":
+"@typescript-eslint/scope-manager@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/scope-manager@npm:5.59.7"
+  resolution: "@typescript-eslint/scope-manager@npm:5.59.8"
   dependencies:
-    "@typescript-eslint/types": 5.59.7
+    "@typescript-eslint/types": 5.59.8
-    "@typescript-eslint/visitor-keys": 5.59.7
+    "@typescript-eslint/visitor-keys": 5.59.8
-  checksum: 43f7ea93fddbe2902122a41050677fe3eff2ea468f435b981592510cfc6136e8c28ac7d3a3e05fb332c0b3078a29bd0c91c35b2b1f4e788b4eb9aaeb70e21583
+  checksum: e1e810ee991cfeb433330b04ee949bb6784abe4dbdb7d9480aa7a7536671b4fec914b7803edf662516c8ecb1b31dcff126797f9923270a529c26e2b00b0ea96f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.59.7":
+"@typescript-eslint/type-utils@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/type-utils@npm:5.59.7"
+  resolution: "@typescript-eslint/type-utils@npm:5.59.8"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.59.7
+    "@typescript-eslint/typescript-estree": 5.59.8
-    "@typescript-eslint/utils": 5.59.7
+    "@typescript-eslint/utils": 5.59.8
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -4722,23 +4722,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 9cbeffad27b145b478e4cbbab2b44c5b246a9b922f01fd06d401ea4c41a4fa6dc8ba75d13a6409b3b4474ccaf2018770a4c6c599172e22ec2004110e00f4e721
+  checksum: d9fde31397da0f0e62a5568f64bad99d06bcd324b7e3aac7fd997a3d045a0fe4c084b2e85d440e0a39645acd2269ad6593f196399c2c0f880d293417fec894e3
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.59.7":
+"@typescript-eslint/types@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/types@npm:5.59.7"
+  resolution: "@typescript-eslint/types@npm:5.59.8"
-  checksum: 52eccec9e2d631eb2808e48b5dc33a837b5e242fa9eddace89fc707c9f2283b5364f1d38b33d418a08d64f45f6c22f051800898e1881a912f8aac0c3ae300d0a
+  checksum: 559473d5601c849eb0da1874a2ac67c753480beed484ad6f6cda62fa6023273f2c3005c7f2864d9c2afb7c6356412d0d304b57db10c53597207f18a7f6cd4f18
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.59.7":
+"@typescript-eslint/typescript-estree@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/typescript-estree@npm:5.59.7"
+  resolution: "@typescript-eslint/typescript-estree@npm:5.59.8"
   dependencies:
-    "@typescript-eslint/types": 5.59.7
+    "@typescript-eslint/types": 5.59.8
-    "@typescript-eslint/visitor-keys": 5.59.7
+    "@typescript-eslint/visitor-keys": 5.59.8
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -4747,35 +4747,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: eefe82eedf9ee2e14463c3f2b5b18df084c1328a859b245ee897a9a7075acce7cca0216a21fd7968b75aa64189daa008bfde1e2f9afbcc336f3dfe856e7f342e
+  checksum: d93371cc866f573a6a1ddc0eb10d498a8e59f36763a99ce21da0737fff2b4c942eef1587216aad273f8d896ebc0b19003677cba63a27d2646aa2c087638963eb
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.59.7":
+"@typescript-eslint/utils@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/utils@npm:5.59.7"
+  resolution: "@typescript-eslint/utils@npm:5.59.8"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
-    "@typescript-eslint/types": 5.59.7
+    "@typescript-eslint/types": 5.59.8
-    "@typescript-eslint/typescript-estree": 5.59.7
+    "@typescript-eslint/typescript-estree": 5.59.8
     eslint-scope: ^5.1.1
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: d8682700187ca94cc6441480cb6b87d0514a9748103c15dd93206c5b1c6fefa59063662f27a4103e16abbcfb654a61d479bc55af8f23d96f342431b87f31bb4e
+  checksum: cbaa057485c7f52c45d0dfb4f5a8e9273abccb1c52dcb4426a79f9e71d2c1062cf2525bad6d4aca5ec42db3fe723d749843bcade5a323bde7fbe4b5d5b5d5c3b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.59.7":
+"@typescript-eslint/visitor-keys@npm:5.59.8":
-  version: 5.59.7
+  version: 5.59.8
-  resolution: "@typescript-eslint/visitor-keys@npm:5.59.7"
+  resolution: "@typescript-eslint/visitor-keys@npm:5.59.8"
   dependencies:
-    "@typescript-eslint/types": 5.59.7
+    "@typescript-eslint/types": 5.59.8
     eslint-visitor-keys: ^3.3.0
-  checksum: 4367f2ea68dd96a0520485434ad11e1bd26239eeeb3a2150bee7478a0f1df3c2099a39f96486722932be0456bcb7a47a483b452876d1d30bdeb9b81d354eef3d
+  checksum: 6bfa7918dbb0e08d8a7404aeeef7bcd1a85736dc8d01614d267c0c5ec10f94d2746b50a945bf5c82c54fda67926e8deaeba8565c919da17f725fc11209ef8987
   languageName: node
   linkType: hard
 
@@ -9636,7 +9636,7 @@ __metadata:
     "@fullcalendar/timegrid": 6.1.8
     "@koa/cors": 4.0.0
     "@lezer/highlight": 1.1.6
-    "@lit-labs/context": 0.3.1
+    "@lit-labs/context": 0.3.2
     "@lit-labs/motion": 1.0.3
     "@lit-labs/virtualizer": 2.0.2
     "@lrnwebcomponents/simple-tooltip": 7.0.0
@@ -9669,7 +9669,7 @@ __metadata:
     "@mdi/js": 7.2.96
     "@mdi/svg": 7.2.96
     "@octokit/auth-oauth-device": 4.0.4
-    "@octokit/plugin-retry": 4.1.3
+    "@octokit/plugin-retry": 4.1.5
     "@octokit/rest": 19.0.11
     "@open-wc/dev-server-hmr": 0.1.4
     "@polymer/app-layout": 3.1.0
@@ -9686,7 +9686,7 @@ __metadata:
     "@rollup/plugin-babel": 6.0.3
     "@rollup/plugin-commonjs": 25.0.0
     "@rollup/plugin-json": 6.0.0
-    "@rollup/plugin-node-resolve": 15.0.2
+    "@rollup/plugin-node-resolve": 15.1.0
     "@rollup/plugin-replace": 5.0.2
     "@thomasloven/round-slider": 0.6.0
     "@types/babel__plugin-transform-runtime": 7.9.2
@@ -9705,8 +9705,8 @@ __metadata:
     "@types/sortablejs": 1.15.1
     "@types/tar": 6.1.5
     "@types/webspeechapi": 0.0.29
-    "@typescript-eslint/eslint-plugin": 5.59.7
+    "@typescript-eslint/eslint-plugin": 5.59.8
-    "@typescript-eslint/parser": 5.59.7
+    "@typescript-eslint/parser": 5.59.8
     "@vaadin/combo-box": 24.0.7
     "@vaadin/vaadin-themable-mixin": 24.0.7
     "@vibrant/color": 3.2.1-alpha.1
@@ -9765,7 +9765,7 @@ __metadata:
     leaflet: 1.9.4
     leaflet-draw: 1.0.4
     lint-staged: 13.2.2
-    lit: 2.7.4
+    lit: 2.7.5
     lit-analyzer: 1.2.1
     lodash.template: 4.5.0
     magic-string: 0.30.0
@@ -11474,14 +11474,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lit@npm:2.7.4, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.7.0, lit@npm:^2.7.2, lit@npm:^2.7.4":
+"lit@npm:2.7.5, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.7.0, lit@npm:^2.7.2, lit@npm:^2.7.4":
-  version: 2.7.4
+  version: 2.7.5
-  resolution: "lit@npm:2.7.4"
+  resolution: "lit@npm:2.7.5"
   dependencies:
     "@lit/reactive-element": ^1.6.0
     lit-element: ^3.3.0
     lit-html: ^2.7.0
-  checksum: 7494f4e814fca0ebf7a73923c85454531aac26ff83f0d4d5afe62ebbc6225363c9df41f88147d79d5d3ab518925ceb9b27a557bee610bbb414ae0339c513f5a3
+  checksum: 61a3f87c57136618f47a30b36cdfb592fcba42dcfbdb104d2b5ca291148c2d9a32fcb713bb91090bd08d6897a00e73f8425da6e3626aa080eaf410a32397ae69
   languageName: node
   linkType: hard