Don't add audio track is webrtc player is muted

* Fix alerts refresh on device page

* don't reset actions periodically

* reset stuff only on deviceId change

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -108,9 +108,9 @@ body:
       render: yaml
   - type: textarea
     attributes:
-      label: Javascript errors shown in your browser console/inspector
+      label: JavaScript errors shown in your browser console/inspector
       description: >
-        If you come across any Javascript or other error logs, e.g., in your
+        If you come across any JavaScript or other error logs, e.g., in your
         browser console/inspector please provide them.
       render: txt
   - type: textarea

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

package.json

@@ -26,11 +26,11 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.27.4",
+    "@babel/runtime": "7.27.6",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.0",
+    "@codemirror/language": "6.11.1",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.8.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.7",
+    "@vaadin/combo-box": "24.7.8",
-    "@vaadin/vaadin-themable-mixin": "24.7.7",
+    "@vaadin/vaadin-themable-mixin": "24.7.8",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.4",
+    "hls.js": "1.6.5",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -158,7 +158,7 @@
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.1.2",
+    "@rsdoctor/rspack-plugin": "1.1.3",
     "@rspack/cli": "1.3.12",
     "@rspack/core": "1.3.12",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -179,7 +179,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.1.4",
+    "@vitest/coverage-v8": "3.2.2",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -218,9 +218,9 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.33.0",
+    "typescript-eslint": "8.33.1",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.4",
+    "vitest": "3.2.2",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -236,5 +236,5 @@
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.9.2"
 }

src/components/chart/state-history-chart-line.ts

@@ -229,14 +229,20 @@ export class StateHistoryChartLine extends LitElement {
           minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
         }
       } else if (this.logarithmicScale) {
-        minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+        minYAxis = ({ min }) => {
+          const value = min > 0 ? min * 0.95 : min * 1.05;
+          return Math.abs(value) < 1 ? value : Math.floor(value);
+        };
       }
       if (typeof maxYAxis === "number") {
         if (this.fitYData) {
           maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
         }
       } else if (this.logarithmicScale) {
-        maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+        maxYAxis = ({ max }) => {
+          const value = max > 0 ? max * 1.05 : max * 0.95;
+          return Math.abs(value) < 1 ? value : Math.ceil(value);
+        };
       }
       this._chartOptions = {
         xAxis: {
@@ -753,10 +759,10 @@ export class StateHistoryChartLine extends LitElement {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value
       if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
       }
       if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
       }
     }
     return value;

src/components/chart/statistics-chart.ts

@@ -241,14 +241,20 @@ export class StatisticsChart extends LitElement {
         minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
       }
     } else if (this.logarithmicScale) {
-      minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+      minYAxis = ({ min }) => {
+        const value = min > 0 ? min * 0.95 : min * 1.05;
+        return Math.abs(value) < 1 ? value : Math.floor(value);
+      };
     }
     if (typeof maxYAxis === "number") {
       if (this.fitYData) {
         maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
       }
     } else if (this.logarithmicScale) {
-      maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+      maxYAxis = ({ max }) => {
+        const value = max > 0 ? max * 1.05 : max * 0.95;
+        return Math.abs(value) < 1 ? value : Math.ceil(value);
+      };
     }
     const endTime = this.endTime ?? new Date();
     let startTime = this.startTime;
@@ -619,10 +625,10 @@ export class StatisticsChart extends LitElement {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value
       if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
       }
       if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
       }
     }
     return value;

src/components/ha-assist-chat.ts

@@ -509,7 +509,7 @@ export class HaAssistChat extends LitElement {
         this.requestUpdate("_conversation");
       },
       processEvent: (event: PipelineRunEvent) => {
-        if (event.type === "intent-progress") {
+        if (event.type === "intent-progress" && event.data.chat_log_delta) {
           const delta = event.data.chat_log_delta;
 
           // new message

src/components/ha-camera-stream.ts

@@ -220,9 +220,10 @@ export class HaCameraStream extends LitElement {
         if (
           hlsStreams.hasVideo &&
           hlsStreams.hasAudio &&
-          !webRtcStreams.hasAudio
+          !webRtcStreams.hasAudio &&
+          !this.muted
         ) {
-          // webRTC stream is missing audio, use HLS
+          // webRTC stream is missing audio and video is not muted, use HLS
           return [{ type: STREAM_TYPE_HLS, visible: true }];
         }
         if (webRtcStreams.hasVideo) {

src/components/ha-combo-box.ts

@@ -345,8 +345,10 @@ export class HaComboBox extends LitElement {
       // @ts-ignore
       this._comboBox._closeOnBlurIsPrevented = true;
     }
+    if (!this.opened) {
+      return;
+    }
     const newValue = ev.detail.value;
-
     if (newValue !== this.value) {
       fireEvent(this, "value-changed", { value: newValue || undefined });
     }

src/components/ha-navigation-picker.ts

@@ -44,7 +44,7 @@ const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
   path: `/${panel.url_path}`,
   icon: panel.icon ?? "mdi:view-dashboard",
   title:
-    panel.url_path === hass.sidebar.defaultPanel
+    panel.url_path === hass.defaultPanel
       ? hass.localize("panel.states")
       : hass.localize(`panel.${panel.title}`) ||
         panel.title ||

src/components/ha-sidebar.ts

@@ -50,7 +50,6 @@ import type { HaMdListItem } from "./ha-md-list-item";
 import "./ha-spinner";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
-import { DEFAULT_PANEL } from "../data/panel";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
@@ -141,9 +140,9 @@ const defaultPanelSorter = (
 export const computePanels = memoizeOne(
   (
     panels: HomeAssistant["panels"],
-    defaultPanel: HomeAssistant["sidebar"]["defaultPanel"],
+    defaultPanel: HomeAssistant["defaultPanel"],
-    panelsOrder: HomeAssistant["sidebar"]["panelOrder"],
+    panelsOrder: string[],
-    hiddenPanels: HomeAssistant["sidebar"]["hiddenPanels"],
+    hiddenPanels: string[],
     locale: HomeAssistant["locale"]
   ): [PanelInfo[], PanelInfo[]] => {
     if (!panels) {
@@ -196,6 +195,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   @state() private _issuesCount = 0;
 
+  @state() private _panelOrder?: string[];
+
+  @state() private _hiddenPanels?: string[];
+
   private _mouseLeaveTimeout?: number;
 
   private _tooltipHideTimeout?: number;
@@ -210,32 +213,18 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         this.hass.connection,
         "sidebar",
         ({ value }) => {
-          let panelOrder = value?.panelOrder;
+          this._panelOrder = value?.panelOrder;
-          let hiddenPanels = value?.hiddenPanels;
+          this._hiddenPanels = value?.hiddenPanels;
-          let defaultPanel = value?.defaultPanel;
 
           // fallback to old localStorage values
-          if (!panelOrder) {
+          if (!this._panelOrder) {
             const storedOrder = localStorage.getItem("sidebarPanelOrder");
-            panelOrder = storedOrder ? JSON.parse(storedOrder) : [];
+            this._panelOrder = storedOrder ? JSON.parse(storedOrder) : [];
           }
-          if (!hiddenPanels) {
+          if (!this._hiddenPanels) {
             const storedHidden = localStorage.getItem("sidebarHiddenPanels");
-            hiddenPanels = storedHidden ? JSON.parse(storedHidden) : [];
+            this._hiddenPanels = storedHidden ? JSON.parse(storedHidden) : [];
           }
-          if (!defaultPanel) {
-            const storedDefault = localStorage.getItem("defaultPanel");
-            defaultPanel = storedDefault
-              ? JSON.parse(storedDefault)
-              : DEFAULT_PANEL;
-          }
-
-          fireEvent(this, "hass-set-sidebar-data", {
-            ...value,
-            defaultPanel: defaultPanel as string,
-            panelOrder: panelOrder as string[],
-            hiddenPanels: hiddenPanels as string[],
-          });
         }
       ),
       subscribeNotifications(this.hass.connection, (notifications) => {
@@ -286,8 +275,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       changedProps.has("_updatesCount") ||
       changedProps.has("_issuesCount") ||
       changedProps.has("_notifications") ||
-      (changedProps.has("hass") &&
+      changedProps.has("_hiddenPanels") ||
-        changedProps.get("hass")?.sidebar !== this.hass.sidebar)
+      changedProps.has("_panelOrder")
     ) {
       return true;
     }
@@ -306,7 +295,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       hass.localize !== oldHass.localize ||
       hass.locale !== oldHass.locale ||
       hass.states !== oldHass.states ||
-      hass.sidebar !== oldHass.sidebar ||
+      hass.defaultPanel !== oldHass.defaultPanel ||
       hass.connected !== oldHass.connected
     );
   }
@@ -376,7 +365,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   }
 
   private _renderAllPanels(selectedPanel: string) {
-    if (!this.hass.sidebar.panelOrder || !this.hass.sidebar.hiddenPanels) {
+    if (!this._panelOrder || !this._hiddenPanels) {
       return html`
         <ha-fade-in .delay=${500}
           ><ha-spinner size="small"></ha-spinner
@@ -386,9 +375,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.sidebar.defaultPanel,
+      this.hass.defaultPanel,
-      this.hass.sidebar.panelOrder,
+      this._panelOrder,
-      this.hass.sidebar.hiddenPanels,
+      this._hiddenPanels,
       this.hass.locale
     );
 
@@ -413,11 +402,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
-        panel.url_path === this.hass.sidebar.defaultPanel
+        panel.url_path === this.hass.defaultPanel
           ? panel.title || this.hass.localize("panel.states")
           : this.hass.localize(`panel.${panel.title}`) || panel.title,
         panel.icon,
-        panel.url_path === this.hass.sidebar.defaultPanel && !panel.icon
+        panel.url_path === this.hass.defaultPanel && !panel.icon
           ? PANEL_ICONS.lovelace
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]

src/components/ha-web-rtc-player.ts

@@ -308,6 +308,10 @@ class HaWebRtcPlayer extends LitElement {
     if (!this._remoteStream) {
       return;
     }
+    // If the track is audio and the player is muted, we do not add it to the stream.
+    if (event.track.kind === "audio" && this.muted) {
+      return;
+    }
     this._remoteStream.addTrack(event.track);
     if (!this.hasUpdated) {
       await this.updateComplete;

src/data/assist_pipeline.ts

@@ -134,7 +134,8 @@ export interface ConversationChatLogToolResultDelta {
 interface PipelineIntentProgressEvent extends PipelineEventBase {
   type: "intent-progress";
   data: {
-    chat_log_delta:
+    tts_start_streaming?: boolean;
+    chat_log_delta?:
       | Partial<ConversationChatLogAssistantDelta>
       // These always come in 1 chunk
       | ConversationChatLogToolResultDelta;

src/data/automation_i18n.ts

@@ -26,6 +26,7 @@ import {
 import type { EntityRegistryEntry } from "./entity_registry";
 import type { FrontendLocaleData } from "./translation";
 import { isTriggerList } from "./trigger";
+import { hasTemplate } from "../common/string/has-template";
 
 const triggerTranslationBaseKey =
   "ui.panel.config.automation.editor.triggers.type";
@@ -820,6 +821,12 @@ const tryDescribeCondition = (
   entityRegistry: EntityRegistryEntry[],
   ignoreAlias = false
 ) => {
+  if (typeof condition === "string" && hasTemplate(condition)) {
+    return hass.localize(
+      `${conditionsTranslationBaseKey}.template.description.full`
+    );
+  }
+
   if (condition.alias && !ignoreAlias) {
     return condition.alias;
   }

src/data/backup.ts

@@ -339,7 +339,7 @@ export const computeBackupSize = (backup: BackupContent) =>
 
 export type BackupType = "automatic" | "manual" | "addon_update";
 
-const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "manual", "addon_update"];
+const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "addon_update", "manual"];
 
 export const getBackupTypes = memoize((isHassio: boolean) =>
   isHassio

src/data/energy.ts

@@ -679,7 +679,9 @@ export const getEnergyDataCollection = (
   const period =
     preferredPeriod === "today" && hour === "0" ? "yesterday" : preferredPeriod;
 
-  [collection.start, collection.end] = calcDateRange(hass, period);
+  const [start, end] = calcDateRange(hass, period);
+  collection.start = calcDate(start, startOfDay, hass.locale, hass.config);
+  collection.end = calcDate(end, endOfDay, hass.locale, hass.config);
 
   const scheduleUpdatePeriod = () => {
     collection._updatePeriodTimeout = window.setTimeout(

src/data/frontend.ts

@@ -8,7 +8,6 @@ export interface CoreFrontendUserData {
 export interface SidebarFrontendUserData {
   panelOrder: string[];
   hiddenPanels: string[];
-  defaultPanel?: string;
 }
 
 declare global {

src/data/panel.ts

@@ -1,3 +1,4 @@
+import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant, PanelInfo } from "../types";
 
 /** Panel to show when no panel is picked. */
@@ -9,9 +10,16 @@ export const getStorageDefaultPanelUrlPath = (): string => {
   return defaultPanel ? JSON.parse(defaultPanel) : DEFAULT_PANEL;
 };
 
+export const setDefaultPanel = (
+  element: HTMLElement,
+  urlPath: string
+): void => {
+  fireEvent(element, "hass-default-panel", { defaultPanel: urlPath });
+};
+
 export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
-  hass.panels[hass.sidebar.defaultPanel]
+  hass.panels[hass.defaultPanel]
-    ? hass.panels[hass.sidebar.defaultPanel]
+    ? hass.panels[hass.defaultPanel]
     : hass.panels[DEFAULT_PANEL];
 
 export const getPanelNameTranslationKey = (panel: PanelInfo) => {

src/data/script.ts

@@ -29,6 +29,7 @@ import { migrateAutomationTrigger } from "./automation";
 import type { BlueprintInput } from "./blueprint";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { createSearchParam } from "../common/url/search-params";
+import { hasTemplate } from "../common/string/has-template";
 
 export const MODES = ["single", "restart", "queued", "parallel"] as const;
 export const MODES_MAX = ["queued", "parallel"] as const;
@@ -339,6 +340,9 @@ export const getScriptEditorInitData = () => {
 
 export const getActionType = (action: Action): ActionType => {
   // Check based on config_validation.py#determine_script_action
+  if (typeof action === "string" && hasTemplate(action)) {
+    return "check_condition";
+  }
   if ("delay" in action) {
     return "delay";
   }

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -96,7 +96,7 @@ class DialogEditSidebar extends LitElement {
 
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.sidebar.defaultPanel,
+      this.hass.defaultPanel,
       this._order,
       this._hidden,
       this.hass.locale
@@ -109,12 +109,12 @@ class DialogEditSidebar extends LitElement {
     ].map((panel) => ({
       value: panel.url_path,
       label:
-        panel.url_path === this.hass.sidebar.defaultPanel
+        panel.url_path === this.hass.defaultPanel
           ? panel.title || this.hass.localize("panel.states")
           : this.hass.localize(`panel.${panel.title}`) || panel.title || "?",
       icon: panel.icon || undefined,
       iconPath:
-        panel.url_path === this.hass.sidebar.defaultPanel && !panel.icon
+        panel.url_path === this.hass.defaultPanel && !panel.icon
           ? PANEL_ICONS.lovelace
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]
@@ -195,7 +195,6 @@ class DialogEditSidebar extends LitElement {
       await saveFrontendUserData(this.hass.connection, "sidebar", {
         panelOrder: this._order!,
         hiddenPanels: this._hidden!,
-        defaultPanel: this.hass.sidebar.defaultPanel,
       });
     } catch (err: any) {
       this._error = err.message || err;

src/panels/config/devices/ha-config-device-page.ts

@@ -127,16 +127,15 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _related?: RelatedResult;
 
-  // If a number, it's the request ID so we make sure we don't show older info
+  @state() private _diagnosticDownloadLinks: DeviceAction[] = [];
-  @state() private _diagnosticDownloadLinks?: number | DeviceAction[];
 
-  @state() private _deleteButtons?: DeviceAction[];
+  @state() private _deleteButtons: DeviceAction[] = [];
 
-  @state() private _deviceActions?: DeviceAction[];
+  @state() private _deviceActions: DeviceAction[] = [];
 
-  @state() private _deviceAlerts?: DeviceAlert[];
+  @state() private _deviceAlerts: DeviceAlert[] = [];
 
-  private _deviceAlertsTimeout?: number;
+  private _deviceAlertsActionsTimeout?: number;
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
@@ -255,42 +254,19 @@ export class HaConfigDevicePage extends LitElement {
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
 
-    if (
+    if (changedProps.has("deviceId") || changedProps.has("entries")) {
-      changedProps.has("deviceId") ||
+      this._deviceActions = [];
-      changedProps.has("devices") ||
+      this._deviceAlerts = [];
-      changedProps.has("entries")
+      this._deleteButtons = [];
-    ) {
+      this._diagnosticDownloadLinks = [];
-      this._diagnosticDownloadLinks = undefined;
+      this._fetchData();
-      this._deleteButtons = undefined;
-      this._deviceActions = undefined;
-      this._deviceAlerts = undefined;
     }
-
-    if (
-      (this._diagnosticDownloadLinks &&
-        this._deleteButtons &&
-        this._deviceActions &&
-        this._deviceAlerts) ||
-      !this.deviceId ||
-      !this.entries
-    ) {
-      return;
-    }
-
-    this._diagnosticDownloadLinks = Math.random();
-    this._deleteButtons = []; // To prevent re-rendering if no delete buttons
-    this._deviceActions = [];
-    this._deviceAlerts = [];
-    this._getDiagnosticButtons(this._diagnosticDownloadLinks);
-    this._getDeleteActions();
-    this._getDeviceActions();
-    clearTimeout(this._deviceAlertsTimeout);
-    this._getDeviceAlerts();
   }
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     loadDeviceRegistryDetailDialog();
+    this._fetchData();
   }
 
   protected updated(changedProps) {
@@ -302,7 +278,7 @@ export class HaConfigDevicePage extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    clearTimeout(this._deviceAlertsTimeout);
+    clearTimeout(this._deviceAlertsActionsTimeout);
   }
 
   protected render() {
@@ -909,7 +885,18 @@ export class HaConfigDevicePage extends LitElement {
     </hass-subpage>`;
   }
 
-  private async _getDiagnosticButtons(requestId: number): Promise<void> {
+  private _fetchData() {
+    if (this.deviceId && this.entries.length) {
+      this._getDiagnosticButtons();
+      this._getDeleteActions();
+      clearTimeout(this._deviceAlertsActionsTimeout);
+      this._getDeviceActions();
+      this._getDeviceAlerts();
+    }
+  }
+
+  private async _getDiagnosticButtons(): Promise<void> {
+    const deviceId = this.deviceId;
     if (!isComponentLoaded(this.hass, "diagnostics")) {
       return;
     }
@@ -951,7 +938,8 @@ export class HaConfigDevicePage extends LitElement {
 
     links = links.filter(Boolean);
 
-    if (this._diagnosticDownloadLinks !== requestId) {
+    if (this.deviceId !== deviceId) {
+      // abort if the device has changed
       return;
     }
     if (links.length > 0) {
@@ -1176,12 +1164,12 @@ export class HaConfigDevicePage extends LitElement {
       deviceAlerts.push(...alerts);
     }
 
+    this._deviceAlerts = deviceAlerts;
     if (deviceAlerts.length) {
-      this._deviceAlerts = deviceAlerts;
+      this._deviceAlertsActionsTimeout = window.setTimeout(() => {
-      this._deviceAlertsTimeout = window.setTimeout(
+        this._getDeviceAlerts();
-        () => this._getDeviceAlerts(),
+        this._getDeviceActions();
-        DEVICE_ALERTS_INTERVAL
+      }, DEVICE_ALERTS_INTERVAL);
-      );
     }
   }
 

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

@@ -429,7 +429,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
               </ha-card>
               <ha-card>
                 <div class="card-header">
-                  <h1>Third-Party Data Reporting</h1>
+                  <h1>Third-party data reporting</h1>
                   ${this._dataCollectionOptIn !== undefined
                     ? html`
                         <ha-switch

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -13,11 +13,10 @@ import type {
   LovelaceDashboardCreateParams,
   LovelaceDashboardMutableParams,
 } from "../../../../data/lovelace/dashboard";
-import { DEFAULT_PANEL } from "../../../../data/panel";
+import { DEFAULT_PANEL, setDefaultPanel } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail";
-import { saveFrontendUserData } from "../../../../data/frontend";
 
 @customElement("dialog-lovelace-dashboard-detail")
 export class DialogLovelaceDashboardDetail extends LitElement {
@@ -60,7 +59,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     if (!this._params || !this._data) {
       return nothing;
     }
-    const defaultPanelUrlPath = this.hass.sidebar.defaultPanel;
+    const defaultPanelUrlPath = this.hass.defaultPanel;
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
@@ -250,17 +249,15 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     };
   }
 
-  private async _toggleDefault() {
+  private _toggleDefault() {
     const urlPath = this._params?.urlPath;
     if (!urlPath) {
       return;
     }
-    await saveFrontendUserData(this.hass!.connection, "sidebar", {
+    setDefaultPanel(
-      panelOrder: this.hass!.sidebar.panelOrder,
+      this,
-      hiddenPanels: this.hass!.sidebar.hiddenPanels,
+      urlPath === this.hass.defaultPanel ? DEFAULT_PANEL : urlPath
-      defaultPanel:
+    );
-        urlPath === this.hass.sidebar.defaultPanel ? DEFAULT_PANEL : urlPath,
-    });
   }
 
   private async _updateDashboard() {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -255,7 +255,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
     const defaultMode = (
       this.hass.panels?.lovelace?.config as LovelacePanelConfig
     ).mode;
-    const defaultUrlPath = this.hass.sidebar.defaultPanel;
+    const defaultUrlPath = this.hass.defaultPanel;
     const isDefault = defaultUrlPath === "lovelace";
     const result: DataTableItem[] = [
       {

src/panels/energy/strategies/energy-view-strategy.ts

@@ -64,7 +64,9 @@ export class EnergyViewStrategy extends ReactiveElement {
       (source) => source.type === "solar"
     );
     const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
-
+    const hasBattery = prefs.energy_sources.some(
+      (source) => source.type === "battery"
+    );
     const hasWater = prefs.energy_sources.some(
       (source) => source.type === "water"
     );
@@ -74,8 +76,8 @@ export class EnergyViewStrategy extends ReactiveElement {
       collection_key: "energy_dashboard",
     });
 
-    // Only include if we have a grid source.
+    // Only include if we have a grid or battery.
-    if (hasGrid) {
+    if (hasGrid || hasBattery) {
       view.cards!.push({
         title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
         type: "energy-usage-graph",
@@ -110,8 +112,8 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    // Only include if we have a grid.
+    // Only include if we have a grid or battery.
-    if (hasGrid) {
+    if (hasGrid || hasBattery) {
       view.cards!.push({
         title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
         type: "energy-distribution",
@@ -120,7 +122,7 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasGas || hasWater) {
+    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -10,6 +10,8 @@ import {
   addYears,
   addMonths,
   addHours,
+  startOfDay,
+  addDays,
 } from "date-fns";
 import type {
   BarSeriesOption,
@@ -282,6 +284,10 @@ export function getCompareTransform(start: Date, compareStart?: Date) {
   ) {
     return (ts: Date) => addMonths(ts, compareMonthDiff);
   }
+  const compareDayDiff = differenceInDays(start, compareStart);
+  if (compareDayDiff !== 0 && start.getTime() === startOfDay(start).getTime()) {
+    return (ts: Date) => addDays(ts, compareDayDiff);
+  }
   const compareOffset = start.getTime() - compareStart.getTime();
   return (ts: Date) => addMilliseconds(ts, compareOffset);
 }

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

@@ -102,14 +102,13 @@ class HuiEnergyDistrubutionCard
     const prefs = this._data.prefs;
     const types = energySourcesByType(prefs);
 
-    // The strategy only includes this card if we have a grid.
+    const hasGrid =
-    const hasConsumption = true;
+      !!types.grid?.[0].flow_from.length || !!types.grid?.[0].flow_to.length;
-
     const hasSolarProduction = types.solar !== undefined;
     const hasBattery = types.battery !== undefined;
     const hasGas = types.gas !== undefined;
     const hasWater = types.water !== undefined;
-    const hasReturnToGrid = hasConsumption && types.grid![0].flow_to.length > 0;
+    const hasReturnToGrid = !!types.grid?.[0].flow_to.length;
 
     const { summedData, compareSummedData: _ } = getSummedData(this._data);
     const { consumption, compareConsumption: __ } = computeConsumptionData(
@@ -163,14 +162,14 @@ class HuiEnergyDistrubutionCard
     }
     let batteryFromGrid: null | number = null;
     let batteryToGrid: null | number = null;
-    if (hasBattery) {
+    if (hasBattery && hasGrid) {
       batteryToGrid = consumption.total.battery_to_grid;
       batteryFromGrid = consumption.total.grid_to_battery;
     }
 
     let solarToBattery: null | number = null;
     let solarToGrid: null | number = null;
-    if (hasSolarProduction) {
+    if (hasSolarProduction && hasGrid) {
       solarToGrid = consumption.total.solar_to_grid;
     }
     if (hasSolarProduction && hasBattery) {
@@ -182,7 +181,9 @@ class HuiEnergyDistrubutionCard
       batteryConsumption = Math.max(consumption.total.used_battery, 0);
     }
 
-    const gridConsumption = Math.max(consumption.total.used_grid, 0);
+    const gridConsumption = hasGrid
+      ? Math.max(consumption.total.used_grid, 0)
+      : 0;
 
     const totalHomeConsumption = Math.max(0, consumption.total.used_total);
 
@@ -206,7 +207,11 @@ class HuiEnergyDistrubutionCard
     // This fallback is used in the demo
     let electricityMapUrl = "https://app.electricitymap.org";
 
-    if (this._data.co2SignalEntity && this._data.fossilEnergyConsumption) {
+    if (
+      hasGrid &&
+      this._data.co2SignalEntity &&
+      this._data.fossilEnergyConsumption
+    ) {
       // Calculate high carbon consumption
       const highCarbonEnergy = Object.values(
         this._data.fossilEnergyConsumption
@@ -225,7 +230,7 @@ class HuiEnergyDistrubutionCard
         if (gridConsumption !== totalFromGrid) {
           // Only get the part that was used for consumption and not the battery
           highCarbonConsumption =
-            highCarbonEnergy * (gridConsumption / totalFromGrid);
+            highCarbonEnergy * (gridConsumption! / totalFromGrid);
         } else {
           highCarbonConsumption = highCarbonEnergy;
         }
@@ -378,41 +383,43 @@ class HuiEnergyDistrubutionCard
               </div>`
             : ""}
           <div class="row">
-            <div class="circle-container grid">
+            ${hasGrid
-              <div class="circle">
+              ? html`<div class="circle-container grid">
-                <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
+                  <div class="circle">
-                ${returnedToGrid !== null
+                    <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
-                  ? html`<span class="return">
+                    ${returnedToGrid !== null
-                      <ha-svg-icon
+                      ? html`<span class="return">
-                        class="small"
+                          <ha-svg-icon
-                        .path=${mdiArrowLeft}
+                            class="small"
-                      ></ha-svg-icon
+                            .path=${mdiArrowLeft}
-                      >${formatConsumptionShort(
+                          ></ha-svg-icon
+                          >${formatConsumptionShort(
+                            this.hass,
+                            returnedToGrid,
+                            "kWh"
+                          )}
+                        </span>`
+                      : ""}
+                    <span class="consumption">
+                      ${hasReturnToGrid
+                        ? html`<ha-svg-icon
+                            class="small"
+                            .path=${mdiArrowRight}
+                          ></ha-svg-icon>`
+                        : ""}${formatConsumptionShort(
                         this.hass,
-                        returnedToGrid,
+                        totalFromGrid,
                         "kWh"
                       )}
-                    </span>`
+                    </span>
-                  : ""}
+                  </div>
-                <span class="consumption">
+                  <span class="label"
-                  ${hasReturnToGrid
+                    >${this.hass.localize(
-                    ? html`<ha-svg-icon
+                      "ui.panel.lovelace.cards.energy.energy_distribution.grid"
-                        class="small"
+                    )}</span
-                        .path=${mdiArrowRight}
+                  >
-                      ></ha-svg-icon>`
+                </div> `
-                    : ""}${formatConsumptionShort(
+              : html`<div class="grid-spacer"></div>`}
-                    this.hass,
-                    totalFromGrid,
-                    "kWh"
-                  )}
-                </span>
-              </div>
-              <span class="label"
-                >${this.hass.localize(
-                  "ui.panel.lovelace.cards.energy.energy_distribution.grid"
-                )}</span
-              >
-            </div>
             <div class="circle-container home">
               <div
                 class="circle ${classMap({
@@ -480,22 +487,27 @@ class HuiEnergyDistrubutionCard
                             shape-rendering="geometricPrecision"
                           />`
                         : ""}
-                      <circle
+                      ${hasGrid
+                        ? svg`<circle
                         class="grid"
                         cx="40"
                         cy="40"
                         r="38"
-                        stroke-dasharray="${homeHighCarbonCircumference ??
+                        stroke-dasharray="${
-                        CIRCLE_CIRCUMFERENCE -
+                          homeHighCarbonCircumference ??
-                          homeSolarCircumference! -
+                          CIRCLE_CIRCUMFERENCE -
-                          (homeBatteryCircumference ||
+                            homeSolarCircumference! -
-                            0)} ${homeHighCarbonCircumference !== undefined
+                            (homeBatteryCircumference || 0)
-                          ? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
+                        } ${
-                          : homeSolarCircumference! +
+                          homeHighCarbonCircumference !== undefined
-                            (homeBatteryCircumference || 0)}"
+                            ? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
+                            : homeSolarCircumference! +
+                              (homeBatteryCircumference || 0)
+                        }"
                         stroke-dashoffset="0"
                         shape-rendering="geometricPrecision"
-                      />
+                      />`
+                        : nothing}
                     </svg>`
                   : ""}
               </div>
@@ -619,15 +631,19 @@ class HuiEnergyDistrubutionCard
                     d="M55,100 v-15 c0,-35 10,-30 30,-30 h20"
                     vector-effect="non-scaling-stroke"
                   ></path>
-                  <path
+                  ${
-                    id="battery-grid"
+                    hasGrid
-                    class=${classMap({
+                      ? svg`<path
-                      "battery-from-grid": Boolean(batteryFromGrid),
+                          id="battery-grid"
-                      "battery-to-grid": Boolean(batteryToGrid),
+                          class=${classMap({
-                    })}
+                            "battery-from-grid": Boolean(batteryFromGrid),
-                    d="M45,100 v-15 c0,-35 -10,-30 -30,-30 h-20"
+                            "battery-to-grid": Boolean(batteryToGrid),
-                    vector-effect="non-scaling-stroke"
+                          })}
-                  ></path>
+                          d="M45,100 v-15 c0,-35 -10,-30 -30,-30 h-20"
+                          vector-effect="non-scaling-stroke"
+                        ></path>`
+                      : nothing
+                  }
                   `
                 : ""}
               ${hasBattery && hasSolarProduction
@@ -638,12 +654,14 @@ class HuiEnergyDistrubutionCard
                     vector-effect="non-scaling-stroke"
                   ></path>`
                 : ""}
-              <path
+              ${hasGrid
-                class="grid"
+                ? svg`<path
-                id="grid"
+                    class="grid"
-                d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
+                    id="grid"
-                vector-effect="non-scaling-stroke"
+                    d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
-              ></path>
+                    vector-effect="non-scaling-stroke"
+              ></path>`
+                : nothing}
               ${solarToGrid && this._animate
                 ? svg`<circle
                     r="1"
@@ -839,6 +857,10 @@ class HuiEnergyDistrubutionCard
     .spacer {
       width: 84px;
     }
+    .grid-spacer {
+      width: 84px;
+      height: 100px;
+    }
     .circle {
       width: 80px;
       height: 80px;

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

@@ -418,12 +418,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
     .keypad {
       --keypad-columns: 3;
-      margin-top: 12px;
       padding: 12px;
       display: grid;
       grid-template-columns: repeat(var(--keypad-columns), auto);
       grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: 16px;
       justify-items: center;
       align-items: center;
     }

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

@@ -12,7 +12,8 @@ import {
   attachConditionMediaQueriesListeners,
   checkConditionsMet,
 } from "../common/validate-condition";
-import { createCardElement } from "../create-element/create-card-element";
+import { tryCreateCardElement } from "../create-element/create-card-element";
+import { createErrorCardElement } from "../create-element/create-element-base";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
 
 declare global {
@@ -71,10 +72,23 @@ export class HuiCard extends ReactiveElement {
   public getGridOptions(): LovelaceGridOptions {
     const elementOptions = this.getElementGridOptions();
     const configOptions = this.getConfigGridOptions();
-    return {
+    const mergedConfig = {
       ...elementOptions,
       ...configOptions,
     };
+
+    // If the element has fixed rows or columns, we use the values from the element
+    if (elementOptions.fixed_rows) {
+      mergedConfig.rows = elementOptions.rows;
+      delete mergedConfig.min_rows;
+      delete mergedConfig.max_rows;
+    }
+    if (elementOptions.fixed_columns) {
+      mergedConfig.columns = elementOptions.columns;
+      delete mergedConfig.min_columns;
+      delete mergedConfig.max_columns;
+    }
+    return mergedConfig;
   }
 
   // options provided by the element
@@ -82,7 +96,9 @@ export class HuiCard extends ReactiveElement {
     if (!this._element) return {};
 
     if (this._element.getGridOptions) {
-      return this._element.getGridOptions();
+      const options = this._element.getGridOptions();
+      // Some custom cards might return undefined, so we ensure we return an object
+      return options || {};
     }
     if (this._element.getLayoutOptions) {
       // Disabled for now to avoid spamming the console, need to be re-enabled when hui-card performance are fixed
@@ -119,7 +135,15 @@ export class HuiCard extends ReactiveElement {
   }
 
   private _loadElement(config: LovelaceCardConfig) {
-    this._element = createCardElement(config);
+    try {
+      this._element = tryCreateCardElement(config);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : undefined;
+      this._element = createErrorCardElement({
+        type: "error",
+        message: errorMessage,
+      });
+    }
     this._elementConfig = config;
     if (this.hass) {
       this._element.hass = this.hass;
@@ -200,6 +224,7 @@ export class HuiCard extends ReactiveElement {
           this._element.preview = this.preview;
           // For backwards compatibility
           (this._element as any).editMode = this.preview;
+          fireEvent(this, "card-updated");
         } catch (e: any) {
           // eslint-disable-next-line no-console
           console.error(this.config?.type, e);

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

@@ -1,11 +1,11 @@
+import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
+import "../../../components/ha-card";
+import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
 import type { ErrorCardConfig } from "./types";
-import "../../../components/ha-card";
-import "../../../components/ha-svg-icon";
 
 const ERROR_ICONS = {
   warning: mdiAlertOutline,
@@ -30,9 +30,10 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
   public getGridOptions(): LovelaceGridOptions {
     return {
       columns: 6,
-      rows: 1,
+      rows: this.preview ? "auto" : 1,
       min_rows: 1,
       min_columns: 6,
+      fixed_rows: this.preview,
     };
   }
 
@@ -45,17 +46,24 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
     const error =
       this._config?.error ||
       this.hass?.localize("ui.errors.config.configuration_error");
-    const showTitle = this.hass === undefined || this.hass?.user?.is_admin;
+    const showTitle =
+      this.hass === undefined || this.hass?.user?.is_admin || this.preview;
+    const showMessage = this.preview;
 
     return html`
       <ha-card class="${this.severity} ${showTitle ? "" : "no-title"}">
-        <div class="icon">
+        <div class="header">
-          <slot name="icon">
+          <div class="icon">
-            <ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
+            <slot name="icon">
-          </slot>
+              <ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
+            </slot>
+          </div>
+          ${showTitle
+            ? html`<div class="title"><slot>${error}</slot></div>`
+            : nothing}
         </div>
-        ${showTitle
+        ${showMessage && this._config?.message
-          ? html`<div class="title"><slot>${error}</slot></div>`
+          ? html`<div class="message">${this._config.message}</div>`
           : nothing}
       </ha-card>
     `;
@@ -65,10 +73,6 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
     ha-card {
       height: 100%;
       border-width: 0;
-      display: flex;
-      align-items: center;
-      column-gap: 16px;
-      padding: 16px;
     }
     ha-card::after {
       position: absolute;
@@ -81,6 +85,15 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
       content: "";
       border-radius: var(--ha-card-border-radius, 12px);
     }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px;
+    }
+    .message {
+      padding: 0 16px 16px 16px;
+    }
     .no-title {
       justify-content: center;
     }
@@ -90,13 +103,13 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
       text-overflow: ellipsis;
       font-weight: var(--ha-font-weight-bold);
     }
-    ha-card.warning > .icon {
+    ha-card.warning .icon {
       color: var(--warning-color);
     }
     ha-card.warning::after {
       background-color: var(--warning-color);
     }
-    ha-card.error > .icon {
+    ha-card.error .icon {
       color: var(--error-color);
     }
     ha-card.error::after {

src/panels/lovelace/components/hui-badge-edit-mode.ts

@@ -85,7 +85,7 @@ export class HuiBadgeEditMode extends LitElement {
       if (this._touchStarted) return;
       this._hover = true;
     });
-    this.addEventListener("mouseout", () => {
+    this.addEventListener("mouseleave", () => {
       this._hover = false;
     });
     this.addEventListener("click", () => {

src/panels/lovelace/components/hui-card-edit-mode.ts

@@ -71,7 +71,7 @@ export class HuiCardEditMode extends LitElement {
       if (this._touchStarted) return;
       this._hover = true;
     });
-    this.addEventListener("mouseout", () => {
+    this.addEventListener("mouseleave", () => {
       this._hover = false;
     });
     this.addEventListener("click", () => {

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -297,24 +297,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   }
 
   private _dateRangeChanged(ev) {
-    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
     this._startDate = calcDate(
       ev.detail.value.startDate,
       startOfDay,
       this.hass.locale,
-      this.hass.config,
+      this.hass.config
-      {
-        weekStartsOn,
-      }
     );
     this._endDate = calcDate(
       ev.detail.value.endDate,
       endOfDay,
       this.hass.locale,
-      this.hass.config,
+      this.hass.config
-      {
-        weekStartsOn,
-      }
     );
 
     this._updateCollectionPeriod();

src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts

@@ -139,7 +139,7 @@ export class HuiDialogSelectDashboard extends LitElement {
       ...(this._params!.dashboards || (await fetchDashboards(this.hass))),
     ];
 
-    const currentPath = this._fromUrlPath || this.hass.sidebar.defaultPanel;
+    const currentPath = this._fromUrlPath || this.hass.defaultPanel;
     for (const dashboard of this._dashboards!) {
       if (dashboard.url_path !== currentPath) {
         this._toUrlPath = dashboard.url_path;

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -77,7 +77,7 @@ export class HuiDialogSelectView extends LitElement {
                 "ui.panel.lovelace.editor.select_view.dashboard_label"
               )}
               .disabled=${!this._dashboards.length}
-              .value=${this._urlPath || this.hass.sidebar.defaultPanel}
+              .value=${this._urlPath || this.hass.defaultPanel}
               @selected=${this._dashboardChanged}
               @closed=${stopPropagation}
               fixedMenuPosition

src/panels/lovelace/hui-root.ts

@@ -57,6 +57,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../dialogs/generic/show-dialog-box";
+import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
 import {
   QuickBarMode,
   showQuickBar,
@@ -75,9 +76,9 @@ import { getLovelaceStrategy } from "./strategies/get-strategy";
 import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
 import type { Lovelace } from "./types";
 import "./views/hui-view";
-import "./views/hui-view-container";
 import type { HUIView } from "./views/hui-view";
 import "./views/hui-view-background";
+import "./views/hui-view-container";
 
 @customElement("hui-root")
 class HUIRoot extends LitElement {
@@ -490,7 +491,16 @@ class HUIRoot extends LitElement {
     } else if (searchParams.conversation === "1") {
       this._clearParam("conversation");
       this._showVoiceCommandDialog();
+    } else if (searchParams["more-info-entity-id"]) {
+      const entityId = searchParams["more-info-entity-id"];
+      this._clearParam("more-info-entity-id");
+      // Wait for the next render to ensure the view is fully loaded
+      // because the more info dialog is closed when the url changes
+      afterNextRender(() => {
+        this._showMoreInfoDialog(entityId);
+      });
     }
+
     window.addEventListener("scroll", this._handleWindowScroll, {
       passive: true,
     });
@@ -730,6 +740,10 @@ class HUIRoot extends LitElement {
     showVoiceCommandDialog(this, this.hass, { pipeline_id: "last_used" });
   }
 
+  private _showMoreInfoDialog(entityId: string): void {
+    showMoreInfoDialog(this, { entityId });
+  }
+
   private _handleEnableEditMode(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;

src/panels/lovelace/types.ts

@@ -62,6 +62,8 @@ export interface LovelaceGridOptions {
   min_columns?: number;
   min_rows?: number;
   max_rows?: number;
+  fixed_rows?: boolean;
+  fixed_columns?: boolean;
 }
 
 export interface LovelaceCard extends HTMLElement {

src/panels/profile/ha-pick-dashboard-row.ts

@@ -6,8 +6,8 @@ import "../../components/ha-select";
 import "../../components/ha-settings-row";
 import type { LovelaceDashboard } from "../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../data/lovelace/dashboard";
+import { setDefaultPanel } from "../../data/panel";
 import type { HomeAssistant } from "../../types";
-import { saveFrontendUserData } from "../../data/frontend";
 
 @customElement("ha-pick-dashboard-row")
 class HaPickDashboardRow extends LitElement {
@@ -37,7 +37,7 @@ class HaPickDashboardRow extends LitElement {
                 "ui.panel.profile.dashboard.dropdown_label"
               )}
               .disabled=${!this._dashboards?.length}
-              .value=${this.hass.sidebar.defaultPanel}
+              .value=${this.hass.defaultPanel}
               @selected=${this._dashboardChanged}
               naturalMenuWidth
             >
@@ -71,16 +71,12 @@ class HaPickDashboardRow extends LitElement {
     this._dashboards = await fetchDashboards(this.hass);
   }
 
-  private async _dashboardChanged(ev) {
+  private _dashboardChanged(ev) {
     const urlPath = ev.target.value;
-    if (!urlPath || urlPath === this.hass.sidebar.defaultPanel) {
+    if (!urlPath || urlPath === this.hass.defaultPanel) {
       return;
     }
-    await saveFrontendUserData(this.hass!.connection, "sidebar", {
+    setDefaultPanel(this, urlPath);
-      panelOrder: this.hass!.sidebar.panelOrder,
-      hiddenPanels: this.hass!.sidebar.hiddenPanels,
-      defaultPanel: urlPath,
-    });
   }
 }
 

src/panels/profile/ha-profile-section-general.ts

@@ -167,10 +167,6 @@ class HaProfileSectionGeneral extends LitElement {
                 )}
               </mwc-button>
             </ha-settings-row>
-            <ha-pick-dashboard-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-dashboard-row>
             ${this.hass.user!.is_admin
               ? html`
                   <ha-advanced-mode-row
@@ -204,6 +200,10 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-theme-row>
+            <ha-pick-dashboard-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-dashboard-row>
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
                   <ha-force-narrow-row

src/state/connection-mixin.ts

@@ -59,11 +59,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         services: null as any,
         user: null as any,
         panelUrl: (this as any)._panelUrl,
-        sidebar: {
+        defaultPanel: DEFAULT_PANEL,
-          defaultPanel: DEFAULT_PANEL,
-          hiddenPanels: [],
-          panelOrder: [],
-        },
         language,
         selectedLanguage: null,
         locale: {

src/state/sidebar-mixin.ts

@@ -7,16 +7,20 @@ interface DockSidebarParams {
   dock: HomeAssistant["dockedSidebar"];
 }
 
+interface DefaultPanelParams {
+  defaultPanel: HomeAssistant["defaultPanel"];
+}
+
 declare global {
   // for fire event
   interface HASSDomEvents {
     "hass-dock-sidebar": DockSidebarParams;
-    "hass-set-sidebar-data": HomeAssistant["sidebar"];
+    "hass-default-panel": DefaultPanelParams;
   }
   // for add event listener
   interface HTMLElementEventMap {
     "hass-dock-sidebar": HASSDomEvent<DockSidebarParams>;
-    "hass-set-sidebar-data": HASSDomEvent<HomeAssistant["sidebar"]>;
+    "hass-default-panel": HASSDomEvent<DefaultPanelParams>;
   }
 }
 
@@ -28,10 +32,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         this._updateHass({ dockedSidebar: ev.detail.dock });
         storeState(this.hass!);
       });
-      this.addEventListener("hass-set-sidebar-data", async (ev) => {
+      this.addEventListener("hass-default-panel", (ev) => {
-        this._updateHass({
+        this._updateHass({ defaultPanel: ev.detail.defaultPanel });
-          sidebar: ev.detail,
-        });
         storeState(this.hass!);
       });
     }

src/translations/en.json

@@ -5807,8 +5807,8 @@
             "provisioned_devices": "Provisioned devices",
             "not_ready": "{count} not ready",
             "nvm_backup": {
-              "title": "Backup and Restore",
+              "title": "Backup and restore",
-              "description": "Back up or restore your Z-Wave controller's Non-Volatile Memory (NVM). The NVM contains your network information including paired devices. It's recommended to create a backup before making any major changes to your Z-Wave network.",
+              "description": "Back up or restore your Z-Wave controller's non-volatile memory (NVM). The NVM contains your network information including paired devices. It's recommended to create a backup before making any major changes to your Z-Wave network.",
               "download_backup": "Download backup",
               "restore_backup": "Restore from backup",
               "backup_failed": "Failed to download backup",
@@ -6013,9 +6013,9 @@
             "default": "Default"
           },
           "network_status": {
-            "connected": "Connected",
+            "connected": "status: connected",
-            "connecting": "Connecting",
+            "connecting": "status: connecting",
-            "unknown": "Unknown"
+            "unknown": "status: unknown"
           },
           "add_node": {
             "title": "Add a Z-Wave device",

src/types.ts

@@ -243,11 +243,7 @@ export interface HomeAssistant {
   vibrate: boolean;
   debugConnection: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
-  sidebar: {
+  defaultPanel: string;
-    defaultPanel: string;
-    panelOrder: string[];
-    hiddenPanels: string[];
-  };
   moreInfoEntityId: string | null;
   user?: CurrentUser;
   userData?: CoreFrontendUserData | null;

src/util/ha-pref-storage.ts

@@ -8,7 +8,7 @@ const STORED_STATE = [
   "debugConnection",
   "suspendWhenHidden",
   "enableShortcuts",
-  "sidebar",
+  "defaultPanel",
 ];
 
 export function storeState(hass: HomeAssistant) {