20230605.0 (#16787)

2025-07-24 09:46:36 +00:00 · 2023-06-05 19:19:02 +02:00 · 2023-06-05 19:19:02 +02:00 · 871f0f9e0d
commit 871f0f9e0d
parent 82fd56efe7 93e31df106
40 changed files with 974 additions and 418 deletions
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/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>
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/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>
--- a/package.json
+++ b/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/parser": "5.59.7",
+    "@typescript-eslint/eslint-plugin": "5.59.8",
+    "@typescript-eslint/parser": "5.59.8",
    "@web/dev-server": "0.1.38",
    "@web/dev-server-rollup": "0.4.1",
    "babel-loader": "9.1.2",
--- a/pyproject.toml
+++ b/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"
--- a/src/common/integrations/protocolIntegrationPicked.ts
+++ b/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, {
-      domain,
-    });
+    const entries = options?.config_entry
+      ? 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, {
-      domain,
-    });
+    const entries = options?.config_entry
+      ? 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, {
-      domain,
-    });
-    if (!isComponentLoaded(hass, domain) || !entries.length) {
+    const entries = options?.config_entry
+      ? undefined
+      : await getConfigEntries(hass, {
+          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(
--- a/src/components/ha-hs-color-picker.ts
+++ b/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") ||
--- a/src/components/ha-markdown-element.ts
+++ b/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);
      }
    }
--- a/src/components/ha-markdown.ts
+++ b/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>`;
  }

--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/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 => {
-    if (!this.selector.device?.entity) {
-      return true;
-    }
-    return ensureArray(this.selector.device.entity).some((filter) =>
+  private _filterEntities = (entity: HassEntity): boolean =>
+    ensureArray(this.selector.device!.entity).some((filter) =>
      filterSelectorEntities(filter, entity, this._entitySources)
    );
-  };
 }

 declare global {
--- a/src/data/light.ts
+++ b/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 =>
--- a/src/data/zha.ts
+++ b/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 {
--- a/src/dialogs/more-info/components/lights/light-color-picker.ts
+++ b/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;
        }
--- a/src/dialogs/more-info/const.ts
+++ b/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",
--- a/src/dialogs/more-info/controls/more-info-date.ts
+++ b/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;
+  }
+}
--- a/src/dialogs/more-info/controls/more-info-datetime.ts
+++ b/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;
+  }
+}
--- a/src/dialogs/more-info/controls/more-info-input_datetime.ts
+++ b/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
-            ? html`
-                <ha-date-input
-                  .locale=${this.hass.locale}
-                  .value=${stateToIsoDateString(this.stateObj)}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
-                  @value-changed=${this._dateChanged}
-                >
-                </ha-date-input>
-              `
-            : ``
-        }
-        ${
-          this.stateObj.attributes.has_time
-            ? html`
-                <ha-time-input
-                  .value=${this.stateObj.state === UNKNOWN
-                    ? ""
-                    : this.stateObj.attributes.has_date
-                    ? this.stateObj.state.split(" ")[1]
-                    : this.stateObj.state}
-                  .locale=${this.hass.locale}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
-                  @value-changed=${this._timeChanged}
-                  @click=${this._stopEventPropagation}
-                ></ha-time-input>
-              `
-            : ``
-        }
-      </hui-generic-entity-row>
+      ${this.stateObj.attributes.has_date
+        ? html`
+            <ha-date-input
+              .locale=${this.hass.locale}
+              .value=${stateToIsoDateString(this.stateObj)}
+              .disabled=${isUnavailableState(this.stateObj.state)}
+              @value-changed=${this._dateChanged}
+            >
+            </ha-date-input>
+          `
+        : ``}
+      ${this.stateObj.attributes.has_time
+        ? html`
+            <ha-time-input
+              .value=${this.stateObj.state === UNKNOWN
+                ? ""
+                : this.stateObj.attributes.has_date
+                ? this.stateObj.state.split(" ")[1]
+                : this.stateObj.state}
+              .locale=${this.hass.locale}
+              .disabled=${isUnavailableState(this.stateObj.state)}
+              @value-changed=${this._timeChanged}
+              @click=${this._stopEventPropagation}
+            ></ha-time-input>
+          `
+        : ``}
    `;
  }

--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/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}
--- a/src/dialogs/more-info/controls/more-info-time.ts
+++ b/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;
+  }
+}
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/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"
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/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"),
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/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
-        type="modal"
-        .open=${this._open}
-        @MDCDrawer:closed=${this._closeDrawer}
-      >
+      <ha-drawer type="modal" open @MDCDrawer:closed=${this._dialogClosed}>
        <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() {
--- a/src/onboarding/onboarding-core-config.ts
+++ b/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) {
-    const target = ev.currentTarget;
+  private _handleValueChanged(ev: ValueChangedEvent<string>) {
+    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;
  }
--- a/src/panels/config/core/ha-config-section-general.ts
+++ b/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) {
-    const target = ev.currentTarget;
-    this[`_${target.name}`] = ev.detail.value;
+  private _handleValueChanged(ev: ValueChangedEvent<string>) {
+    const target = ev.currentTarget as HTMLElement;
+    this[`_${target.getAttribute("name")}`] = ev.detail.value;
  }

-  private _handleChange(ev) {
-    const target = ev.currentTarget;
+  private _handleChange(ev: Event) {
+    const target = ev.currentTarget as HaTextField;
    this[`_${target.name}`] = target.value;
  }

--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/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(
-      this.devices,
-      this.entries,
-      this.entities,
-      this.areas,
-      this._searchParms,
-      this._showDisabled,
-      this.hass.localize
-    );
-    if (filteredConfigEntry?.domain === "zha") {
-      navigate(`/config/zha/add`);
-      return;
-    }
-    if (filteredConfigEntry?.domain === "zwave_js") {
-      this._showZJSAddDeviceDialog(filteredConfigEntry);
-      return;
-    }
-    if (filteredConfigEntry?.domain === "matter") {
-      showMatterAddDeviceDialog(this);
+    const { filteredConfigEntry, filteredDomains } =
+      this._devicesAndFilterDomains(
+        this.devices,
+        this.entries,
+        this.entities,
+        this.areas,
+        this._searchParms,
+        this._showDisabled,
+        this.hass.localize
+      );
+    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, {
@ -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`
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/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
-          ? html`<a href="/config/zha/add" slot="fab">
-              <ha-fab
-                .label=${this.hass.localize("ui.panel.config.zha.add_device")}
-                extended
-                ?rtl=${computeRTL(this.hass)}
-              >
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </ha-fab>
-            </a>`
+        ${includeAddDeviceFab
+          ? html`<ha-fab
+              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
+              extended
+              @click=${this._addDevice}
+              slot="fab"
+              ?rtl=${computeRTL(this.hass)}
+            >
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+            </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,
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/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
-                  ? html`<ha-list-item
-                      @request-selected=${this._logInfo.level ===
-                      LogSeverity.DEBUG
-                        ? this._handleDisableDebugLogging
-                        : this._handleEnableDebugLogging}
-                      graphic="icon"
+                ${devices.length > 0
+                  ? html`<a
+                      href=${devices.length === 1
+                        ? `/config/devices/device/${devices[0].id}`
+                        : `/config/devices/dashboard?historyBack=1&domain=${this.domain}`}
                    >
-                      ${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"
-                        .path=${this._logInfo.level === LogSeverity.DEBUG
-                          ? mdiBugStop
-                          : mdiBugPlay}
-                      ></ha-svg-icon>
-                    </ha-list-item>`
+                      <ha-list-item hasMeta graphic="icon">
+                        <ha-svg-icon
+                          .path=${services
+                            ? mdiHandExtendedOutline
+                            : mdiDevices}
+                          slot="graphic"
+                        ></ha-svg-icon>
+                        ${this.hass.localize(
+                          `ui.panel.config.integrations.config_entry.${
+                            services ? "services" : "devices"
+                          }`,
+                          "count",
+                          devices.length
+                        )}
+                        <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(
-                  `ui.panel.config.integrations.integration_page.entries`
-                )}
+                ${this._manifest?.integration_type
+                  ? 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
-                  .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))}
+                ${normalEntries.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) {
-      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") {
+    if (!item.disabled_by && 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 services = this._getServices(item, this.hass.devices);
-    const entities = this._getEntities(item, this._entities);
+    const devices = this._getConfigEntryDevices(item);
+    const services = this._getConfigEntryServices(item);
+    const entities = this._getConfigEntryEntities(item);

    let devicesLine: (TemplateResult | string)[] = [];

-    for (const [items, localizeKey] of [
-      [devices, "devices"],
-      [services, "services"],
-    ] as const) {
-      if (items.length === 0) {
-        continue;
+    if (item.disabled_by) {
+      devicesLine.push(
+        this.hass.localize(
+          "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") {
+        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(
-        (device) =>
-          device.config_entries.includes(configEntry.entry_id) &&
-          device.entry_type !== "service"
+      const entryIds = configEntry.map((entry) => entry.entry_id);
+      return Object.values(deviceRegistryEntries).filter((device) =>
+        device.config_entries.some((entryId) => entryIds.includes(entryId))
      );
    }
  );

-  private _getServices = memoizeOne(
-    (
-      configEntry: ConfigEntry,
-      deviceRegistryEntries: HomeAssistant["devices"]
-    ): DeviceRegistryEntry[] => {
-      if (!deviceRegistryEntries) {
-        return [];
-      }
-      return Object.values(deviceRegistryEntries).filter(
-        (device) =>
-          device.config_entries.includes(configEntry.entry_id) &&
-          device.entry_type === "service"
-      );
-    }
-  );
+  private _getConfigEntryEntities = (
+    configEntry: ConfigEntry
+  ): EntityRegistryEntry[] => {
+    const entries = this._domainConfigEntries(
+      this.domain,
+      this._extraConfigEntries || this.configEntries
+    );
+    const entityRegistryEntries = this._getEntities(entries, this._entities);
+    return entityRegistryEntries.filter(
+      (entity) => entity.config_entry_id === configEntry.entry_id
+    );
+  };
+
+  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);
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/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>
    `;
  }
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/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;
--- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts
+++ b/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;
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/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,
    });
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/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() {
--- a/src/panels/lovelace/common/has-changed.ts
+++ b/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;
  }
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/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,
--- a/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
+++ b/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
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
        <ha-date-input
          .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
-          .value=${stateToIsoDateString(stateObj)}
+          .disabled=${unavailable}
+          .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!, stateObj.entity_id, ev.detail.value);
+    setDateValue(this.hass!, this._config!.entity, ev.detail.value);
  }
 }

--- a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
+++ b/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 time = format(dateObj, "HH:mm:ss");
-    const date = format(dateObj, "yyyy-MM-dd");
+    const unavailable = isUnavailableState(stateObj.state);
+
+    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
-          .locale=${this.hass.locale}
-          .value=${date}
-          .disabled=${isUnavailableState(stateObj.state)}
-          @value-changed=${this._dateChanged}
-        >
-        </ha-date-input>
-        <ha-time-input
-          .value=${time}
-          .disabled=${isUnavailableState(stateObj.state)}
-          .locale=${this.hass.locale}
-          @value-changed=${this._timeChanged}
-          @click=${this._stopEventPropagation}
-        ></ha-time-input>
+        <div>
+          <ha-date-input
+            .label=${this._config.name || computeStateName(stateObj)}
+            .locale=${this.hass.locale}
+            .value=${date}
+            .disabled=${unavailable}
+            @value-changed=${this._dateChanged}
+          >
+          </ha-date-input>
+          <ha-time-input
+            .value=${time}
+            .disabled=${unavailable}
+            .locale=${this.hass.locale}
+            @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%;
+      }
    `;
  }
 }
--- a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
+++ b/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
-          ? html`
-              <ha-date-input
-                .label=${stateObj.attributes.has_time ? name : undefined}
-                .locale=${this.hass.locale}
-                .disabled=${isUnavailableState(stateObj.state)}
-                .value=${stateToIsoDateString(stateObj)}
-                @value-changed=${this._dateChanged}
-              >
-              </ha-date-input>
-            `
-          : ``}
-        ${stateObj.attributes.has_time
-          ? html`
-              <ha-time-input
-                .value=${stateObj.state === UNKNOWN
-                  ? ""
-                  : stateObj.attributes.has_date
-                  ? stateObj.state.split(" ")[1]
-                  : stateObj.state}
-                .locale=${this.hass.locale}
-                .disabled=${isUnavailableState(stateObj.state)}
-                @value-changed=${this._timeChanged}
-                @click=${this._stopEventPropagation}
-              ></ha-time-input>
-            `
-          : ``}
+        <div
+          class=${stateObj.attributes.has_date && stateObj.attributes.has_time
+            ? "both"
+            : ""}
+        >
+          ${stateObj.attributes.has_date
+            ? html`
+                <ha-date-input
+                  .label=${stateObj.attributes.has_time ? name : undefined}
+                  .locale=${this.hass.locale}
+                  .disabled=${isUnavailableState(stateObj.state)}
+                  .value=${stateToIsoDateString(stateObj)}
+                  @value-changed=${this._dateChanged}
+                >
+                </ha-date-input>
+              `
+            : ``}
+          ${stateObj.attributes.has_time
+            ? html`
+                <ha-time-input
+                  .value=${stateObj.state === UNKNOWN
+                    ? ""
+                    : stateObj.attributes.has_date
+                    ? stateObj.state.split(" ")[1]
+                    : 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%;
+      }
    `;
  }
 }
--- a/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
+++ b/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
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
        <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>
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/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;
      }
--- a/src/translations/en.json
+++ b/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…",
--- a/yarn.lock
+++ b/yarn.lock
@ -2063,13 +2063,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@lit-labs/context@npm:0.3.1":
-  version: 0.3.1
-  resolution: "@lit-labs/context@npm:0.3.1"
+"@lit-labs/context@npm:0.3.2":
+  version: 0.3.2
+  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":
-  version: 4.1.3
-  resolution: "@octokit/plugin-retry@npm:4.1.3"
+"@octokit/plugin-retry@npm:4.1.5":
+  version: 4.1.5
+  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":
-  version: 15.0.2
-  resolution: "@rollup/plugin-node-resolve@npm:15.0.2"
+"@rollup/plugin-node-resolve@npm:15.1.0":
+  version: 15.1.0
+  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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.59.7"
+"@typescript-eslint/eslint-plugin@npm:5.59.8":
+  version: 5.59.8
+  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/type-utils": 5.59.7
-    "@typescript-eslint/utils": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
+    "@typescript-eslint/type-utils": 5.59.8
+    "@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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/parser@npm:5.59.7"
+"@typescript-eslint/parser@npm:5.59.8":
+  version: 5.59.8
+  resolution: "@typescript-eslint/parser@npm:5.59.8"
  dependencies:
-    "@typescript-eslint/scope-manager": 5.59.7
-    "@typescript-eslint/types": 5.59.7
-    "@typescript-eslint/typescript-estree": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
+    "@typescript-eslint/types": 5.59.8
+    "@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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/scope-manager@npm:5.59.7"
+"@typescript-eslint/scope-manager@npm:5.59.8":
+  version: 5.59.8
+  resolution: "@typescript-eslint/scope-manager@npm:5.59.8"
  dependencies:
-    "@typescript-eslint/types": 5.59.7
-    "@typescript-eslint/visitor-keys": 5.59.7
-  checksum: 43f7ea93fddbe2902122a41050677fe3eff2ea468f435b981592510cfc6136e8c28ac7d3a3e05fb332c0b3078a29bd0c91c35b2b1f4e788b4eb9aaeb70e21583
+    "@typescript-eslint/types": 5.59.8
+    "@typescript-eslint/visitor-keys": 5.59.8
+  checksum: e1e810ee991cfeb433330b04ee949bb6784abe4dbdb7d9480aa7a7536671b4fec914b7803edf662516c8ecb1b31dcff126797f9923270a529c26e2b00b0ea96f
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:5.59.7":
-  version: 5.59.7
-  resolution: "@typescript-eslint/type-utils@npm:5.59.7"
+"@typescript-eslint/type-utils@npm:5.59.8":
+  version: 5.59.8
+  resolution: "@typescript-eslint/type-utils@npm:5.59.8"
  dependencies:
-    "@typescript-eslint/typescript-estree": 5.59.7
-    "@typescript-eslint/utils": 5.59.7
+    "@typescript-eslint/typescript-estree": 5.59.8
+    "@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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/types@npm:5.59.7"
-  checksum: 52eccec9e2d631eb2808e48b5dc33a837b5e242fa9eddace89fc707c9f2283b5364f1d38b33d418a08d64f45f6c22f051800898e1881a912f8aac0c3ae300d0a
+"@typescript-eslint/types@npm:5.59.8":
+  version: 5.59.8
+  resolution: "@typescript-eslint/types@npm:5.59.8"
+  checksum: 559473d5601c849eb0da1874a2ac67c753480beed484ad6f6cda62fa6023273f2c3005c7f2864d9c2afb7c6356412d0d304b57db10c53597207f18a7f6cd4f18
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:5.59.7":
-  version: 5.59.7
-  resolution: "@typescript-eslint/typescript-estree@npm:5.59.7"
+"@typescript-eslint/typescript-estree@npm:5.59.8":
+  version: 5.59.8
+  resolution: "@typescript-eslint/typescript-estree@npm:5.59.8"
  dependencies:
-    "@typescript-eslint/types": 5.59.7
-    "@typescript-eslint/visitor-keys": 5.59.7
+    "@typescript-eslint/types": 5.59.8
+    "@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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/utils@npm:5.59.7"
+"@typescript-eslint/utils@npm:5.59.8":
+  version: 5.59.8
+  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/types": 5.59.7
-    "@typescript-eslint/typescript-estree": 5.59.7
+    "@typescript-eslint/scope-manager": 5.59.8
+    "@typescript-eslint/types": 5.59.8
+    "@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":
-  version: 5.59.7
-  resolution: "@typescript-eslint/visitor-keys@npm:5.59.7"
+"@typescript-eslint/visitor-keys@npm:5.59.8":
+  version: 5.59.8
+  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/parser": 5.59.7
+    "@typescript-eslint/eslint-plugin": 5.59.8
+    "@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":
-  version: 2.7.4
-  resolution: "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.5
+  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