Adjust WebSocket ping timeout to 15 seconds

5 seconds was too low to prevent the UI from reloading
when connecting the WebSocket during startup or on
a high latancy connection

This problem presented as the UI reloading over
and over again because it could never respond
to the ping in time on high latancy connections.

At startup it usually only did this once so it
went unnoticed in most cases.

This ping was added in #18934

.devcontainer/devcontainer.json

@@ -11,9 +11,6 @@
     "DEV_CONTAINER": "1",
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
-  "remoteEnv": {
-    "NODE_OPTIONS": "--max_old_space_size=8192"
-  },
   "customizations": {
     "vscode": {
       "extensions": [

hassio/src/components/hassio-filter-addons.ts

@@ -1,6 +1,8 @@
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
+import { stripDiacritics } from "../../../src/common/string/strip-diacritics";
 import type { StoreAddon } from "../../../src/data/supervisor/store";
+import { getStripDiacriticsFn } from "../../../src/util/fuse";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
   const options: IFuseOptions<StoreAddon> = {
@@ -8,8 +10,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
     isCaseSensitive: false,
     minMatchCharLength: Math.min(filter.length, 2),
     threshold: 0.2,
-    ignoreDiacritics: true,
+    getFn: getStripDiacriticsFn,
   };
   const fuse = new Fuse(addons, options);
-  return fuse.search(filter).map((result) => result.item);
+  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
 }

package.json

@@ -33,7 +33,7 @@
     "@codemirror/language": "6.10.8",
     "@codemirror/legacy-modes": "6.4.2",
     "@codemirror/search": "6.5.8",
-    "@codemirror/state": "6.5.2",
+    "@codemirror/state": "6.5.1",
     "@codemirror/view": "6.36.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.17.2",
@@ -91,14 +91,14 @@
     "@polymer/polymer": "3.5.2",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.6.3",
-    "@vaadin/vaadin-themable-mixin": "24.6.3",
+    "@vaadin/combo-box": "24.6.2",
+    "@vaadin/vaadin-themable-mixin": "24.6.2",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.0",
+    "barcode-detector": "2.3.1",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
     "core-js": "3.40.0",
@@ -110,7 +110,7 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "5.6.0",
     "element-internals-polyfill": "1.3.13",
-    "fuse.js": "7.1.0",
+    "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
     "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
@@ -137,7 +137,7 @@
     "tinykeys": "3.0.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "2.0.1",
+    "ua-parser-js": "2.0.0",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
     "vue": "2.7.16",
@@ -167,7 +167,7 @@
     "@rspack/cli": "1.2.2",
     "@rspack/core": "1.2.2",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.21",
+    "@types/chromecast-caf-receiver": "6.0.20",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/glob": "8.1.0",
@@ -183,9 +183,9 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "8.23.0",
-    "@typescript-eslint/parser": "8.23.0",
-    "@vitest/coverage-v8": "3.0.5",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/parser": "8.21.0",
+    "@vitest/coverage-v8": "3.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,13 +219,12 @@
     "pinst": "3.0.0",
     "prettier": "3.4.2",
     "rspack-manifest-plugin": "5.0.3",
-    "serve": "14.2.4",
     "sinon": "19.0.2",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.11",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.7.3",
-    "vitest": "3.0.5",
+    "vitest": "3.0.4",
     "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"

pyproject.toml

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

script/develop_and_serve

@@ -64,7 +64,7 @@ echo Core is used from ${coreUrl}
 HASS_URL="$coreUrl" ./script/develop &
 
 # serve the frontend
-./node_modules/.bin/serve -p $frontendPort --single --no-port-switching --config ../script/serve-config.json ./hass_frontend &
+yarn dlx serve -l $frontendPort ./hass_frontend -s &
 
 # keep the script running while serving
 wait

script/serve-config.json

@@ -1,3 +0,0 @@
-{
-  "cleanUrls": false
-}

src/common/color/colors.ts

@@ -1,4 +1,3 @@
-import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";
 
 export const COLORS = [
@@ -75,12 +74,3 @@ export function getGraphColorByIndex(
     getColorByIndex(index);
   return theme2hex(themeColor);
 }
-
-export const getAllGraphColors = memoizeOne(
-  (style: CSSStyleDeclaration) =>
-    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
-  (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
-    // this is not ideal, but we need to memoize the colors
-    newArgs[0].getPropertyValue("--graph-color-1") ===
-    lastArgs[0].getPropertyValue("--graph-color-1")
-);

src/common/const.ts

@@ -99,7 +99,6 @@ export const DOMAINS_TOGGLE = new Set([
   "switch",
   "group",
   "automation",
-  "climate",
   "humidifier",
   "valve",
 ]);

src/components/chart/axis-label.ts

@@ -1,4 +1,5 @@
 import type { HassConfig } from "home-assistant-js-websocket";
+import type { XAXisOption } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../data/translation";
 import {
   formatDateMonth,
@@ -6,46 +7,56 @@ import {
   formatDateVeryShort,
   formatDateWeekdayShort,
 } from "../../common/datetime/format_date";
-import {
-  formatTime,
-  formatTimeWithSeconds,
-} from "../../common/datetime/format_time";
+import { formatTime } from "../../common/datetime/format_time";
 
-export function formatTimeLabel(
-  value: number | Date,
+export function getLabelFormatter(
   locale: FrontendLocaleData,
   config: HassConfig,
-  minutesDifference: number
+  dayDifference = 0
 ) {
-  const dayDifference = minutesDifference / 60 / 24;
-  const date = new Date(value);
-  if (dayDifference > 88) {
-    return date.getMonth() === 0
-      ? `{bold|${formatDateMonthYear(date, locale, config)}}`
-      : formatDateMonth(date, locale, config);
-  }
-  if (dayDifference > 35) {
-    return date.getDate() === 1
-      ? `{bold|${formatDateVeryShort(date, locale, config)}}`
-      : formatDateVeryShort(date, locale, config);
-  }
-  if (dayDifference > 7) {
-    const label = formatDateVeryShort(date, locale, config);
-    return date.getDate() === 1 ? `{bold|${label}}` : label;
-  }
-  if (dayDifference > 2) {
-    return formatDateWeekdayShort(date, locale, config);
-  }
-  if (minutesDifference && minutesDifference < 5) {
-    return formatTimeWithSeconds(date, locale, config);
-  }
-  if (
-    date.getHours() === 0 &&
-    date.getMinutes() === 0 &&
-    date.getSeconds() === 0
-  ) {
+  return (value: number | Date) => {
+    const date = new Date(value);
+    if (dayDifference > 88) {
+      return date.getMonth() === 0
+        ? `{bold|${formatDateMonthYear(date, locale, config)}}`
+        : formatDateMonth(date, locale, config);
+    }
+    if (dayDifference > 35) {
+      return date.getDate() === 1
+        ? `{bold|${formatDateVeryShort(date, locale, config)}}`
+        : formatDateVeryShort(date, locale, config);
+    }
+    if (dayDifference > 7) {
+      const label = formatDateVeryShort(date, locale, config);
+      return date.getDate() === 1 ? `{bold|${label}}` : label;
+    }
+    if (dayDifference > 2) {
+      return formatDateWeekdayShort(date, locale, config);
+    }
     // show only date for the beginning of the day
-    return `{bold|${formatDateVeryShort(date, locale, config)}}`;
-  }
-  return formatTime(date, locale, config);
+    if (
+      date.getHours() === 0 &&
+      date.getMinutes() === 0 &&
+      date.getSeconds() === 0
+    ) {
+      return `{bold|${formatDateVeryShort(date, locale, config)}}`;
+    }
+    return formatTime(date, locale, config);
+  };
+}
+
+export function getTimeAxisLabelConfig(
+  locale: FrontendLocaleData,
+  config: HassConfig,
+  dayDifference?: number
+): XAXisOption["axisLabel"] {
+  return {
+    formatter: getLabelFormatter(locale, config, dayDifference),
+    rich: {
+      bold: {
+        fontWeight: "bold",
+      },
+    },
+    hideOverlap: true,
+  };
 }

src/components/chart/ha-chart-base.ts

@@ -1,29 +1,25 @@
-import { consume } from "@lit-labs/context";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
+import type { PropertyValues } from "lit";
+import { css, html, nothing, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { mdiRestart } from "@mdi/js";
-import { differenceInMinutes } from "date-fns";
-import type { DataZoomComponentOption } from "echarts/components";
 import type { EChartsType } from "echarts/core";
+import type { DataZoomComponentOption } from "echarts/components";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type {
   ECElementEvent,
   XAXisOption,
   YAXisOption,
 } from "echarts/types/dist/shared";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
-import { getAllGraphColors } from "../../common/color/colors";
+import { consume } from "@lit-labs/context";
 import { fireEvent } from "../../common/dom/fire_event";
-import { listenMediaQuery } from "../../common/dom/media_query";
-import { themesContext } from "../../data/context";
-import type { Themes } from "../../data/ws-themes";
-import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../ha-icon-button";
-import { formatTimeLabel } from "./axis-label";
+import type { ECOption } from "../../resources/echarts";
+import { listenMediaQuery } from "../../common/dom/media_query";
+import type { Themes } from "../../data/ws-themes";
+import { themesContext } from "../../data/context";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 
@@ -48,10 +44,6 @@ export class HaChartBase extends LitElement {
 
   @state() private _isZoomed = false;
 
-  @state() private _zoomRatio = 1;
-
-  @state() private _minutesDifference = 24 * 60;
-
   private _modifierPressed = false;
 
   private _isTouchDevice = "ontouchstart" in window;
@@ -143,7 +135,16 @@ export class HaChartBase extends LitElement {
       this.chart.setOption(this._createOptions(), {
         lazyUpdate: true,
         // if we replace the whole object, it will reset the dataZoom
-        replaceMerge: ["grid"],
+        replaceMerge: [
+          "xAxis",
+          "yAxis",
+          "dataZoom",
+          "dataset",
+          "tooltip",
+          "legend",
+          "grid",
+          "visualMap",
+        ],
       });
     }
   }
@@ -151,10 +152,7 @@ export class HaChartBase extends LitElement {
   protected render() {
     return html`
       <div
-        class=${classMap({
-          "chart-container": true,
-          "has-legend": !!this.options?.legend,
-        })}
+        class="chart-container"
         style=${styleMap({
           height: this.height ?? `${this._getDefaultHeight()}px`,
         })}
@@ -175,14 +173,6 @@ export class HaChartBase extends LitElement {
     `;
   }
 
-  private _formatTimeLabel = (value: number | Date) =>
-    formatTimeLabel(
-      value,
-      this.hass.locale,
-      this.hass.config,
-      this._minutesDifference * this._zoomRatio
-    );
-
   private async _setupChart() {
     if (this._loading) return;
     const container = this.renderRoot.querySelector(".chart") as HTMLDivElement;
@@ -193,9 +183,10 @@ export class HaChartBase extends LitElement {
       }
       const echarts = (await import("../../resources/echarts")).default;
 
-      echarts.registerTheme("custom", this._createTheme());
-
-      this.chart = echarts.init(container, "custom");
+      this.chart = echarts.init(
+        container,
+        this._themes.darkMode ? "dark" : "light"
+      );
       this.chart.on("legendselectchanged", (params: any) => {
         if (this.externalHidden) {
           const isSelected = params.selected[params.name];
@@ -209,7 +200,6 @@ export class HaChartBase extends LitElement {
       this.chart.on("datazoom", (e: any) => {
         const { start, end } = e.batch?.[0] ?? e;
         this._isZoomed = start !== 0 || end !== 100;
-        this._zoomRatio = (end - start) / 100;
       });
       this.chart.on("click", (e: ECElementEvent) => {
         fireEvent(this, "chart-click", e);
@@ -247,60 +237,24 @@ export class HaChartBase extends LitElement {
   }
 
   private _createOptions(): ECOption {
-    let xAxis = this.options?.xAxis;
-    if (xAxis) {
-      xAxis = Array.isArray(xAxis) ? xAxis : [xAxis];
-      xAxis = xAxis.map((axis: XAXisOption) => {
-        if (axis.type !== "time" || axis.show === false) {
-          return axis;
-        }
-        if (axis.max && axis.min) {
-          this._minutesDifference = differenceInMinutes(
-            axis.max as Date,
-            axis.min as Date
-          );
-        }
-        const dayDifference = this._minutesDifference / 60 / 24;
-        let minInterval: number | undefined;
-        if (dayDifference) {
-          minInterval =
-            dayDifference >= 89 // quarter
-              ? 28 * 3600 * 24 * 1000
-              : dayDifference > 2
-                ? 3600 * 24 * 1000
-                : undefined;
-        }
-        return {
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-          },
-          ...axis,
-          axisLabel: {
-            formatter: this._formatTimeLabel,
-            rich: {
-              bold: {
-                fontWeight: "bold",
-              },
-            },
-            hideOverlap: true,
-            ...axis.axisLabel,
-          },
-          minInterval,
-        } as XAXisOption;
-      });
-    }
+    const darkMode = this._themes.darkMode ?? false;
+
     const options = {
+      backgroundColor: "transparent",
       animation: !this._reducedMotion,
-      darkMode: this._themes.darkMode ?? false,
+      darkMode,
       aria: {
         show: true,
       },
       dataZoom: this._getDataZoomConfig(),
       ...this.options,
-      xAxis,
+      legend: this.options?.legend
+        ? {
+            // we should create our own theme but this is a quick fix for now
+            inactiveColor: darkMode ? "#444" : "#ccc",
+            ...this.options.legend,
+          }
+        : undefined,
     };
 
     const isMobile = window.matchMedia(
@@ -314,207 +268,18 @@ export class HaChartBase extends LitElement {
       tooltips.forEach((tooltip) => {
         tooltip.confine = true;
         tooltip.appendTo = undefined;
-        tooltip.triggerOn = "click";
       });
       options.tooltip = tooltips;
     }
     return options;
   }
 
-  private _createTheme() {
-    const style = getComputedStyle(this);
-    return {
-      color: getAllGraphColors(style),
-      backgroundColor: "transparent",
-      textStyle: {
-        color: style.getPropertyValue("--primary-text-color"),
-        fontFamily: "Roboto, Noto, sans-serif",
-      },
-      title: {
-        textStyle: {
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        subtextStyle: {
-          color: style.getPropertyValue("--secondary-text-color"),
-        },
-      },
-      line: {
-        lineStyle: {
-          width: 1.5,
-        },
-        symbolSize: 1,
-        symbol: "circle",
-        smooth: false,
-      },
-      bar: {
-        itemStyle: {
-          barBorderWidth: 1.5,
-        },
-      },
-      categoryAxis: {
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          show: true,
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        splitLine: {
-          show: false,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        splitArea: {
-          show: false,
-          areaStyle: {
-            color: [
-              style.getPropertyValue("--divider-color") + "3F",
-              style.getPropertyValue("--divider-color") + "7F",
-            ],
-          },
-        },
-      },
-      valueAxis: {
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisLabel: {
-          show: true,
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        splitArea: {
-          show: false,
-          areaStyle: {
-            color: [
-              style.getPropertyValue("--divider-color") + "3F",
-              style.getPropertyValue("--divider-color") + "7F",
-            ],
-          },
-        },
-      },
-      logAxis: {
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisLabel: {
-          show: true,
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        splitArea: {
-          show: false,
-          areaStyle: {
-            color: [
-              style.getPropertyValue("--divider-color") + "3F",
-              style.getPropertyValue("--divider-color") + "7F",
-            ],
-          },
-        },
-      },
-      timeAxis: {
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        axisLabel: {
-          show: true,
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-        splitArea: {
-          show: false,
-          areaStyle: {
-            color: [
-              style.getPropertyValue("--divider-color") + "3F",
-              style.getPropertyValue("--divider-color") + "7F",
-            ],
-          },
-        },
-      },
-      legend: {
-        textStyle: {
-          color: style.getPropertyValue("--primary-text-color"),
-        },
-        inactiveColor: style.getPropertyValue("--disabled-text-color"),
-        pageIconColor: style.getPropertyValue("--primary-text-color"),
-        pageIconInactiveColor: style.getPropertyValue("--disabled-text-color"),
-        pageTextStyle: {
-          color: style.getPropertyValue("--secondary-text-color"),
-        },
-      },
-      tooltip: {
-        backgroundColor: style.getPropertyValue("--card-background-color"),
-        borderColor: style.getPropertyValue("--divider-color"),
-        textStyle: {
-          color: style.getPropertyValue("--primary-text-color"),
-          fontSize: 12,
-        },
-        axisPointer: {
-          lineStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-          crossStyle: {
-            color: style.getPropertyValue("--divider-color"),
-          },
-        },
-      },
-      timeline: {},
-    };
-  }
-
   private _getDefaultHeight() {
-    return Math.max(this.clientWidth / 2, 200);
+    return Math.max(this.clientWidth / 2, 400);
   }
 
   private _handleZoomReset() {
     this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
-    this._modifierPressed = false;
   }
 
   private _handleWheel(e: WheelEvent) {
@@ -537,11 +302,10 @@ export class HaChartBase extends LitElement {
     :host {
       display: block;
       position: relative;
-      letter-spacing: normal;
     }
     .chart-container {
       position: relative;
-      max-height: var(--chart-max-height, 350px);
+      max-height: var(--chart-max-height, 400px);
     }
     .chart {
       width: 100%;
@@ -557,9 +321,6 @@ export class HaChartBase extends LitElement {
       color: var(--primary-color);
       border: 1px solid var(--divider-color);
     }
-    .has-legend .zoom-reset {
-      top: 64px;
-    }
   `;
 }
 

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

@@ -4,6 +4,7 @@ import { property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
+import { differenceInDays } from "date-fns";
 import { styleMap } from "lit/directives/style-map";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -17,10 +18,10 @@ import {
   getNumberFormatOptions,
   formatNumber,
 } from "../../common/number/format_number";
+import { getTimeAxisLabelConfig } from "./axis-label";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
-import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -71,8 +72,6 @@ export class StateHistoryChartLine extends LitElement {
 
   @state() private _chartOptions?: ECOption;
 
-  private _hiddenStats = new Set<string>();
-
   @state() private _yWidth = 25;
 
   private _chartTime: Date = new Date();
@@ -85,104 +84,49 @@ export class StateHistoryChartLine extends LitElement {
         .options=${this._chartOptions}
         .height=${this.height}
         style=${styleMap({ height: this.height })}
-        external-hidden
-        @dataset-hidden=${this._datasetHidden}
-        @dataset-unhidden=${this._datasetUnhidden}
       ></ha-chart-base>
     `;
   }
 
-  private _renderTooltip(params: any) {
-    const time = params[0].axisValue;
-    const title =
-      formatDateTimeWithSeconds(
-        new Date(time),
-        this.hass.locale,
-        this.hass.config
-      ) + "<br>";
-    const datapoints: Record<string, any>[] = [];
-    this._chartData.forEach((dataset, index) => {
-      if (
-        dataset.tooltip?.show === false ||
-        this._hiddenStats.has(dataset.name as string)
-      )
-        return;
-      const param = params.find(
-        (p: Record<string, any>) => p.seriesIndex === index
-      );
-      if (param) {
-        datapoints.push(param);
-        return;
-      }
-      // If the datapoint is not found, we need to find the last datapoint before the current time
-      let lastData;
-      const data = dataset.data || [];
-      for (let i = data.length - 1; i >= 0; i--) {
-        const point = data[i];
-        if (point && point[0] <= time && point[1]) {
-          lastData = point;
-          break;
+  private _renderTooltip(params) {
+    return params
+      .map((param, index: number) => {
+        let value = `${formatNumber(
+          param.value[1] as number,
+          this.hass.locale,
+          getNumberFormatOptions(
+            undefined,
+            this.hass.entities[this._entityIds[param.seriesIndex]]
+          )
+        )} ${this.unit}`;
+        const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+        const data = this.data[dataIndex];
+        if (data.statistics && data.statistics.length > 0) {
+          value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+          const source =
+            data.states.length === 0 ||
+            param.value[0] < data.states[0].last_changed
+              ? `${this.hass.localize(
+                  "ui.components.history_charts.source_stats"
+                )}`
+              : `${this.hass.localize(
+                  "ui.components.history_charts.source_history"
+                )}`;
+          value += source;
         }
-      }
-      if (!lastData) return;
-      datapoints.push({
-        seriesName: dataset.name,
-        seriesIndex: index,
-        value: lastData,
-        // HTML copied from echarts. May change based on options
-        marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
-      });
-    });
-    const unit = this.unit
-      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
-      : "";
 
-    return (
-      title +
-      datapoints
-        .map((param) => {
-          const entityId = this._entityIds[param.seriesIndex];
-          const stateObj = this.hass.states[entityId];
-          const entry = this.hass.entities[entityId];
-          const stateValue = String(param.value[1]);
-          let value = stateObj
-            ? this.hass.formatEntityState(stateObj, stateValue)
-            : `${formatNumber(
-                stateValue,
+        const time =
+          index === 0
+            ? formatDateTimeWithSeconds(
+                new Date(param.value[0]),
                 this.hass.locale,
-                getNumberFormatOptions(undefined, entry)
-              )}${unit}`;
-          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-          const data = this.data[dataIndex];
-          if (data.statistics && data.statistics.length > 0) {
-            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-            const source =
-              data.states.length === 0 ||
-              param.value[0] < data.states[0].last_changed
-                ? `${this.hass.localize(
-                    "ui.components.history_charts.source_stats"
-                  )}`
-                : `${this.hass.localize(
-                    "ui.components.history_charts.source_history"
-                  )}`;
-            value += source;
-          }
-
-          if (param.seriesName) {
-            return `${param.marker} ${param.seriesName}: ${value}`;
-          }
-          return `${param.marker} ${value}`;
-        })
-        .join("<br>")
-    );
-  }
-
-  private _datasetHidden(ev: CustomEvent) {
-    this._hiddenStats.add(ev.detail.name);
-  }
-
-  private _datasetUnhidden(ev: CustomEvent) {
-    this._hiddenStats.delete(ev.detail.name);
+                this.hass.config
+              ) + "<br>"
+            : "";
+        return `${time}${param.marker} ${param.seriesName}: ${value}
+      `;
+      })
+      .join("<br>");
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -212,44 +156,49 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("paddingYAxis") ||
       changedProps.has("_yWidth")
     ) {
+      const dayDifference = differenceInDays(this.endTime, this.startTime);
       const rtl = computeRTL(this.hass);
-      let minYAxis: number | ((values: { min: number }) => number) | undefined =
-        this.minYAxis;
-      let maxYAxis: number | ((values: { max: number }) => number) | undefined =
-        this.maxYAxis;
-      if (typeof minYAxis === "number") {
-        if (this.fitYData) {
-          minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
-        }
-      } else if (this.logarithmicScale) {
-        minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
-      }
-      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);
-      }
+      const splitLineStyle = this.hass.themes?.darkMode
+        ? { opacity: 0.15 }
+        : {};
       this._chartOptions = {
         xAxis: {
           type: "time",
           min: this.startTime,
           max: this.endTime,
+          axisLabel: getTimeAxisLabelConfig(
+            this.hass.locale,
+            this.hass.config,
+            dayDifference
+          ),
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: splitLineStyle,
+          },
+          minInterval:
+            dayDifference >= 89 // quarter
+              ? 28 * 3600 * 24 * 1000
+              : dayDifference > 2
+                ? 3600 * 24 * 1000
+                : undefined,
         },
         yAxis: {
           type: this.logarithmicScale ? "log" : "value",
           name: this.unit,
-          min: this._clampYAxis(minYAxis),
-          max: this._clampYAxis(maxYAxis),
+          min: this.fitYData ? this.minYAxis : undefined,
+          max: this.fitYData ? this.maxYAxis : undefined,
           position: rtl ? "right" : "left",
           scale: true,
           nameGap: 2,
           nameTextStyle: {
             align: "left",
           },
-          axisLine: {
-            show: false,
+          splitLine: {
+            show: true,
+            lineStyle: splitLineStyle,
           },
           axisLabel: {
             margin: 5,
@@ -269,8 +218,6 @@ export class StateHistoryChartLine extends LitElement {
         } as YAXisOption,
         legend: {
           show: this.showNames,
-          type: "scroll",
-          animationDurationUpdate: 400,
           icon: "circle",
           padding: [20, 0],
         },
@@ -360,18 +307,13 @@ export class StateHistoryChartLine extends LitElement {
         prevValues = datavalues;
       };
 
-      const addDataSet = (
-        id: string,
-        nameY: string,
-        color?: string,
-        fill = false
-      ) => {
+      const addDataSet = (nameY: string, color?: string, fill = false) => {
         if (!color) {
           color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
         }
         data.push({
-          id,
+          id: nameY,
           data: [],
           type: "line",
           cursor: "default",
@@ -379,7 +321,6 @@ export class StateHistoryChartLine extends LitElement {
           color,
           symbol: "circle",
           step: "end",
-          animationDurationUpdate: 0,
           symbolSize: 1,
           lineStyle: {
             width: fill ? 0 : 1.5,
@@ -434,23 +375,13 @@ export class StateHistoryChartLine extends LitElement {
               entityState.attributes.target_temp_low
         );
         addDataSet(
-          states.entity_id + "-current_temperature",
-          this.showNames
-            ? this.hass.localize("ui.card.climate.current_temperature", {
-                name: name,
-              })
-            : this.hass.localize(
-                "component.climate.entity_component._.state_attributes.current_temperature.name"
-              )
+          `${this.hass.localize("ui.card.climate.current_temperature", {
+            name: name,
+          })}`
         );
         if (hasHeat) {
           addDataSet(
-            states.entity_id + "-heating",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.heating", { name: name })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
-                ),
+            `${this.hass.localize("ui.card.climate.heating", { name: name })}`,
             computedStyles.getPropertyValue("--state-climate-heat-color"),
             true
           );
@@ -459,12 +390,7 @@ export class StateHistoryChartLine extends LitElement {
         }
         if (hasCool) {
           addDataSet(
-            states.entity_id + "-cooling",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.cooling", { name: name })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.cooling"
-                ),
+            `${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
             computedStyles.getPropertyValue("--state-climate-cool-color"),
             true
           );
@@ -474,40 +400,22 @@ export class StateHistoryChartLine extends LitElement {
 
         if (hasTargetRange) {
           addDataSet(
-            states.entity_id + "-target_temperature_mode",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
-                  name: name,
-                  mode: this.hass.localize("ui.card.climate.high"),
-                })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.target_temp_high.name"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
+              name: name,
+              mode: this.hass.localize("ui.card.climate.high"),
+            })}`
           );
           addDataSet(
-            states.entity_id + "-target_temperature_mode_low",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
-                  name: name,
-                  mode: this.hass.localize("ui.card.climate.low"),
-                })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.target_temp_low.name"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
+              name: name,
+              mode: this.hass.localize("ui.card.climate.low"),
+            })}`
           );
         } else {
           addDataSet(
-            states.entity_id + "-target_temperature",
-            this.showNames
-              ? this.hass.localize(
-                  "ui.card.climate.target_temperature_entity",
-                  {
-                    name: name,
-                  }
-                )
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.temperature.name"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_entity", {
+              name: name,
+            })}`
           );
         }
 
@@ -560,29 +468,19 @@ export class StateHistoryChartLine extends LitElement {
           );
 
         addDataSet(
-          states.entity_id + "-target_humidity",
-          this.showNames
-            ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
-                name: name,
-              })
-            : this.hass.localize(
-                "component.humidifier.entity_component._.state_attributes.humidity.name"
-              )
+          `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
+            name: name,
+          })}`
         );
 
         if (hasCurrent) {
           addDataSet(
-            states.entity_id + "-current_humidity",
-            this.showNames
-              ? this.hass.localize(
-                  "ui.card.humidifier.current_humidity_entity",
-                  {
-                    name: name,
-                  }
-                )
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.current_humidity.name"
-                )
+            `${this.hass.localize(
+              "ui.card.humidifier.current_humidity_entity",
+              {
+                name: name,
+              }
+            )}`
           );
         }
 
@@ -590,40 +488,25 @@ export class StateHistoryChartLine extends LitElement {
         // If action attribute is not available, we shade the area when the device is on
         if (hasHumidifying) {
           addDataSet(
-            states.entity_id + "-humidifying",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.humidifying", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
-                ),
+            `${this.hass.localize("ui.card.humidifier.humidifying", {
+              name: name,
+            })}`,
             computedStyles.getPropertyValue("--state-humidifier-on-color"),
             true
           );
         } else if (hasDrying) {
           addDataSet(
-            states.entity_id + "-drying",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.drying", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.action.state.drying"
-                ),
+            `${this.hass.localize("ui.card.humidifier.drying", {
+              name: name,
+            })}`,
             computedStyles.getPropertyValue("--state-humidifier-on-color"),
             true
           );
         } else {
           addDataSet(
-            states.entity_id + "-on",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.on_entity", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state.on"
-                ),
+            `${this.hass.localize("ui.card.humidifier.on_entity", {
+              name: name,
+            })}`,
             undefined,
             true
           );
@@ -656,7 +539,7 @@ export class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(states.entity_id, name);
+        addDataSet(name);
 
         let lastValue: number;
         let lastDate: Date;
@@ -726,19 +609,6 @@ export class StateHistoryChartLine extends LitElement {
     this._entityIds = entityIds;
     this._datasetToDataIndex = datasetToDataIndex;
   }
-
-  private _clampYAxis(value?: number | ((values: any) => number)) {
-    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);
-      }
-      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
-      }
-    }
-    return value;
-  }
 }
 customElements.define("state-history-chart-line", StateHistoryChartLine);
 

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

@@ -8,6 +8,7 @@ import type {
   TooltipFormatterCallback,
   TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
+import { differenceInDays } from "date-fns";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -21,6 +22,7 @@ import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
+import { getTimeAxisLabelConfig } from "./axis-label";
 
 @customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
@@ -65,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement {
         .hass=${this.hass}
         .options=${this._chartOptions}
         .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData as ECOption["series"]}
+        .data=${this._chartData}
         @chart-click=${this._handleChartClick}
       ></ha-chart-base>
     `;
@@ -127,12 +129,10 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
     (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker, seriesName } = Array.isArray(params)
+      const { value, name, marker } = Array.isArray(params)
         ? params[0]
         : params;
-      const title = seriesName
-        ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
-        : "";
+      const title = `<h4 style="text-align: center; margin: 0;">${value![0]}</h4>`;
       const durationInMs = value![2] - value![1];
       const formattedDuration = `${this.hass.localize(
         "ui.components.history_charts.duration"
@@ -183,12 +183,13 @@ export class StateHistoryChartTimeline extends LitElement {
   private _createOptions() {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
-    const maxInternalLabelWidth = narrow ? 105 : 185;
+    const maxInternalLabelWidth = narrow ? 70 : 165;
     const labelWidth = showNames
       ? Math.max(this.paddingYAxis, this._yWidth)
       : 0;
     const labelMargin = 5;
     const rtl = computeRTL(this.hass);
+    const dayDifference = differenceInDays(this.endTime, this.startTime);
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -196,10 +197,21 @@ export class StateHistoryChartTimeline extends LitElement {
         max: this.endTime,
         axisTick: {
           show: true,
+          lineStyle: {
+            opacity: 0.4,
+          },
         },
-        splitLine: {
-          show: false,
-        },
+        axisLabel: getTimeAxisLabelConfig(
+          this.hass.locale,
+          this.hass.config,
+          dayDifference
+        ),
+        minInterval:
+          dayDifference >= 89 // quarter
+            ? 28 * 3600 * 24 * 1000
+            : dayDifference > 2
+              ? 3600 * 24 * 1000
+              : undefined,
       },
       yAxis: {
         type: "category",
@@ -214,18 +226,14 @@ export class StateHistoryChartTimeline extends LitElement {
         },
         axisLabel: {
           show: showNames,
-          width: labelWidth,
+          width: labelWidth - labelMargin,
           overflow: "truncate",
           margin: labelMargin,
-          formatter: (id: string) => {
-            const label = this._chartData.find((d) => d.id === id)
-              ?.name as string;
-            const width = label
-              ? Math.min(
-                  measureTextWidth(label, 12) + labelMargin,
-                  maxInternalLabelWidth
-                )
-              : 0;
+          formatter: (label: string) => {
+            const width = Math.min(
+              measureTextWidth(label, 12) + labelMargin,
+              maxInternalLabelWidth
+            );
             if (width > this._yWidth) {
               this._yWidth = width;
               fireEvent(this, "y-width-changed", {
@@ -270,9 +278,8 @@ export class StateHistoryChartTimeline extends LitElement {
       let prevState: string | null = null;
       let locState: string | null = null;
       let prevLastChanged = startTime;
-      const entityDisplay: string = this.showNames
-        ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
-        : "";
+      const entityDisplay: string =
+        names[stateInfo.entity_id] || stateInfo.name;
 
       const dataRow: unknown[] = [];
       stateInfo.data.forEach((entityState) => {
@@ -300,7 +307,7 @@ export class StateHistoryChartTimeline extends LitElement {
           );
           dataRow.push({
             value: [
-              stateInfo.entity_id,
+              entityDisplay,
               prevLastChanged,
               newLastChanged,
               locState,
@@ -326,7 +333,7 @@ export class StateHistoryChartTimeline extends LitElement {
         );
         dataRow.push({
           value: [
-            stateInfo.entity_id,
+            entityDisplay,
             prevLastChanged,
             endTime,
             locState,
@@ -339,10 +346,9 @@ export class StateHistoryChartTimeline extends LitElement {
         });
       }
       datasets.push({
-        id: stateInfo.entity_id,
         data: dataRow,
         name: entityDisplay,
-        dimensions: ["id", "start", "end", "name", "color", "textColor"],
+        dimensions: ["index", "start", "end", "name", "color", "textColor"],
         type: "custom",
         encode: {
           x: [1, 2],
@@ -358,10 +364,10 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _handleChartClick(e: CustomEvent<ECElementEvent>): void {
     if (e.detail.targetType === "axisLabel") {
-      const dataset = this._chartData[e.detail.dataIndex];
+      const dataset = this.data[e.detail.dataIndex];
       if (dataset) {
         fireEvent(this, "hass-more-info", {
-          entityId: dataset.id as string,
+          entityId: dataset.entity_id,
         });
       }
     }

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

@@ -135,7 +135,7 @@ export class StateHistoryCharts extends LitElement {
       return html``;
     }
     if (!Array.isArray(item)) {
-      return html`<div class="entry-container line">
+      return html`<div class="entry-container">
         <state-history-chart-line
           .hass=${this.hass}
           .unit=${item.unit}
@@ -157,7 +157,7 @@ export class StateHistoryCharts extends LitElement {
         ></state-history-chart-line>
       </div> `;
     }
-    return html`<div class="entry-container timeline">
+    return html`<div class="entry-container">
       <state-history-chart-timeline
         .hass=${this.hass}
         .data=${item}
@@ -299,9 +299,6 @@ export class StateHistoryCharts extends LitElement {
 
     .entry-container {
       width: 100%;
-    }
-
-    .entry-container.line {
       flex: 1;
     }
 
@@ -316,10 +313,6 @@ export class StateHistoryCharts extends LitElement {
       padding-inline-end: 1px;
     }
 
-    .entry-container.timeline:first-child {
-      margin-top: var(--timeline-top-margin);
-    }
-
     .entry-container:not(:first-child) {
       border-top: 2px solid var(--divider-color);
       margin-top: 16px;

src/components/chart/statistics-chart.ts

@@ -1,22 +1,15 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import type {
   BarSeriesOption,
   LineSeriesOption,
 } from "echarts/types/dist/shared";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import {
-  formatNumber,
-  getNumberFormatOptions,
-} from "../../common/number/format_number";
-import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
-import { computeRTL } from "../../common/util/compute_rtl";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -28,9 +21,16 @@ import {
   getStatisticMetadata,
   statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
+import { computeRTL } from "../../common/util/compute_rtl";
+import type { ECOption } from "../../resources/echarts";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+} from "../../common/number/format_number";
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import { getTimeAxisLabelConfig } from "./axis-label";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -56,8 +56,6 @@ export class StatisticsChart extends LitElement {
 
   @property() public unit?: string;
 
-  @property({ attribute: false }) public startTime?: Date;
-
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ attribute: false, type: Array })
@@ -126,10 +124,7 @@ export class StatisticsChart extends LitElement {
       changedProps.has("fitYData") ||
       changedProps.has("logarithmicScale") ||
       changedProps.has("hideLegend") ||
-      changedProps.has("startTime") ||
-      changedProps.has("endTime") ||
-      changedProps.has("_legendData") ||
-      changedProps.has("_chartData")
+      changedProps.has("_legendData")
     ) {
       this._createOptions();
     }
@@ -186,31 +181,18 @@ export class StatisticsChart extends LitElement {
     this.requestUpdate("_hiddenStats");
   }
 
-  private _renderTooltip = (params: any) => {
-    const rendered: Record<string, boolean> = {};
-    const unit = this.unit
-      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
-      : "";
-    return params
+  private _renderTooltip = (params: any) =>
+    params
       .map((param, index: number) => {
-        if (rendered[param.seriesName]) return "";
-        rendered[param.seriesName] = true;
-
-        const statisticId = this._statisticIds[param.seriesIndex];
-        const stateObj = this.hass.states[statisticId];
-        const entry = this.hass.entities[statisticId];
-        // max series can have 3 values, as the second value is the max-min to form a band
-        const rawValue = String(param.value[2] ?? param.value[1]);
-
-        const options = getNumberFormatOptions(stateObj, entry) ?? {
-          maximumFractionDigits: 2,
-        };
-
         const value = `${formatNumber(
-          rawValue,
+          // max series can have 3 values, as the second value is the max-min to form a band
+          (param.value[2] ?? param.value[1]) as number,
           this.hass.locale,
-          options
-        )}${unit}`;
+          getNumberFormatOptions(
+            undefined,
+            this.hass.entities[this._statisticIds[param.seriesIndex]]
+          )
+        )} ${this.unit}`;
 
         const time =
           index === 0
@@ -220,68 +202,36 @@ export class StatisticsChart extends LitElement {
                 this.hass.config
               ) + "<br>"
             : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}`;
+        return `${time}${param.marker} ${param.seriesName}: ${value}
+  `;
       })
-      .filter(Boolean)
       .join("<br>");
-  };
 
   private _createOptions() {
+    const splitLineStyle = this.hass.themes?.darkMode ? { opacity: 0.15 } : {};
     const dayDifference = this.daysToShow ?? 1;
-    let minYAxis: number | ((values: { min: number }) => number) | undefined =
-      this.minYAxis;
-    let maxYAxis: number | ((values: { max: number }) => number) | undefined =
-      this.maxYAxis;
-    if (typeof minYAxis === "number") {
-      if (this.fitYData) {
-        minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
-      }
-    } else if (this.logarithmicScale) {
-      minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
-    }
-    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);
-    }
-    const endTime = this.endTime ?? new Date();
-    let startTime = this.startTime;
-
-    if (!startTime) {
-      // set start time to the earliest point in the chart data
-      this._chartData.forEach((series) => {
-        if (!Array.isArray(series.data) || !series.data[0]) return;
-        const firstPoint = series.data[0] as any;
-        const timestamp = Array.isArray(firstPoint)
-          ? firstPoint[0]
-          : firstPoint.value?.[0];
-        if (timestamp && (!startTime || new Date(timestamp) < startTime)) {
-          startTime = new Date(timestamp);
-        }
-      });
-
-      if (!startTime) {
-        // Calculate default start time based on dayDifference
-        startTime = new Date(
-          endTime.getTime() - dayDifference * 24 * 3600 * 1000
-        );
-      }
-    }
-
     this._chartOptions = {
-      xAxis: [
-        {
-          type: "time",
-          min: startTime,
-          max: endTime,
-        },
-        {
-          type: "time",
+      xAxis: {
+        type: "time",
+        axisLabel: getTimeAxisLabelConfig(
+          this.hass.locale,
+          this.hass.config,
+          dayDifference
+        ),
+        axisLine: {
           show: false,
         },
-      ],
+        splitLine: {
+          show: true,
+          lineStyle: splitLineStyle,
+        },
+        minInterval:
+          dayDifference >= 89 // quarter
+            ? 28 * 3600 * 24 * 1000
+            : dayDifference > 2
+              ? 3600 * 24 * 1000
+              : undefined,
+      },
       yAxis: {
         type: this.logarithmicScale ? "log" : "value",
         name: this.unit,
@@ -290,24 +240,24 @@ export class StatisticsChart extends LitElement {
           align: "left",
         },
         position: computeRTL(this.hass) ? "right" : "left",
-        scale: true,
-        min: this._clampYAxis(minYAxis),
-        max: this._clampYAxis(maxYAxis),
+        // @ts-ignore
+        scale: this.chartType !== "bar",
+        min: this.fitYData ? undefined : this.minYAxis,
+        max: this.fitYData ? undefined : this.maxYAxis,
         splitLine: {
           show: true,
+          lineStyle: splitLineStyle,
         },
       },
       legend: {
         show: !this.hideLegend,
-        type: "scroll",
-        animationDurationUpdate: 400,
         icon: "circle",
         padding: [20, 0],
         data: this._legendData,
       },
       grid: {
         ...(this.hideLegend ? { top: this.unit ? 30 : 5 } : {}), // undefined is the same as 0
-        left: 1,
+        left: 20,
         right: 1,
         bottom: 0,
         containLabel: true,
@@ -368,7 +318,6 @@ export class StatisticsChart extends LitElement {
     if (endTime > new Date()) {
       endTime = new Date();
     }
-    this.endTime = endTime;
 
     let unit: string | undefined | null;
 
@@ -420,12 +369,10 @@ export class StatisticsChart extends LitElement {
           ) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push(
-              this._transformDataValue([prevEndTime, ...prevValues[i]!])
-            );
+            d.data!.push([prevEndTime, ...prevValues[i]!]);
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
+          d.data!.push([start, ...dataValues[i]!]);
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -474,14 +421,9 @@ export class StatisticsChart extends LitElement {
             displayedLegend = displayedLegend || showLegend;
           }
           statTypes.push(type);
-          const borderColor =
-            band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color;
-          const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
             type: this.chartType,
-            smooth: this.chartType === "line" ? 0.4 : false,
-            smoothMonotone: "x",
             cursor: "default",
             data: [],
             name: name
@@ -493,7 +435,6 @@ export class StatisticsChart extends LitElement {
                 ),
             symbol: "circle",
             symbolSize: 0,
-            animationDurationUpdate: 0,
             lineStyle: {
               width: 1.5,
             },
@@ -501,16 +442,21 @@ export class StatisticsChart extends LitElement {
               this.chartType === "bar"
                 ? {
                     borderRadius: [4, 4, 0, 0],
-                    borderColor,
+                    borderColor:
+                      band && hasMean
+                        ? color + (this.hideLegend ? "00" : "7F")
+                        : color,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: this.chartType === "bar" ? backgroundColor : borderColor,
+            color: band ? color + "3F" : color + "7F",
           };
           if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
-            series.stackStrategy = "all";
             (series as LineSeriesOption).symbol = "none";
+            (series as LineSeriesOption).lineStyle = {
+              opacity: 0,
+            };
             if (drawBands && type === "max") {
               (series as LineSeriesOption).areaStyle = {
                 color: color + "3F",
@@ -543,7 +489,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (type === "max" && this.chartType === "line") {
             const max = stat.max || 0;
-            val.push(Math.abs(max - (stat.min || 0)));
+            val.push(max - (stat.min || 0));
             val.push(max);
           } else {
             val.push(stat[type] ?? null);
@@ -572,7 +518,6 @@ export class StatisticsChart extends LitElement {
         color,
         type: this.chartType,
         data: [],
-        xAxisIndex: 1,
       });
     });
 
@@ -584,26 +529,6 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
-  private _transformDataValue(val: [Date, ...(number | null)[]]) {
-    if (this.chartType === "bar" && val[1] && val[1] < 0) {
-      return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
-    }
-    return val;
-  }
-
-  private _clampYAxis(value?: number | ((values: any) => number)) {
-    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);
-      }
-      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
-      }
-    }
-    return value;
-  }
-
   static styles = css`
     :host {
       display: block;

src/components/ha-assist-chat.ts

@@ -295,12 +295,10 @@ export class HaAssistChat extends LitElement {
     this._addMessage(userMessage);
     this.requestUpdate("_audioRecorder");
 
-    let hassMessage = {
+    const hassMessage: AssistMessage = {
       who: "hass",
       text: "…",
-      error: false,
     };
-    let currentDeltaRole = "";
     // To make sure the answer is placed at the right user text, we add it before we process it
     try {
       const unsub = await runAssistPipeline(
@@ -330,43 +328,6 @@ export class HaAssistChat extends LitElement {
             this._addMessage(hassMessage);
           }
 
-          if (event.type === "intent-progress") {
-            const delta = event.data.chat_log_delta;
-
-            // new message
-            if (delta.role) {
-              // If currentDeltaRole exists, it means we're receiving our
-              // second or later message. Let's add it to the chat.
-              if (currentDeltaRole && delta.role && hassMessage.text !== "…") {
-                // Remove progress indicator of previous message
-                hassMessage.text = hassMessage.text.substring(
-                  0,
-                  hassMessage.text.length - 1
-                );
-
-                hassMessage = {
-                  who: "hass",
-                  text: "…",
-                  error: false,
-                };
-                this._addMessage(hassMessage);
-              }
-              currentDeltaRole = delta.role;
-            }
-
-            if (
-              currentDeltaRole === "assistant" &&
-              "content" in delta &&
-              delta.content
-            ) {
-              hassMessage.text =
-                hassMessage.text.substring(0, hassMessage.text.length - 1) +
-                delta.content +
-                "…";
-              this.requestUpdate("_conversation");
-            }
-          }
-
           if (event.type === "intent-end") {
             this._conversationId = event.data.intent_output.conversation_id;
             const plain = event.data.intent_output.response.speech?.plain;
@@ -474,71 +435,28 @@ export class HaAssistChat extends LitElement {
     this._processing = true;
     this._audio?.pause();
     this._addMessage({ who: "user", text });
-    let hassMessage = {
+    const message: AssistMessage = {
       who: "hass",
       text: "…",
-      error: false,
     };
-    let currentDeltaRole = "";
     // To make sure the answer is placed at the right user text, we add it before we process it
-    this._addMessage(hassMessage);
+    this._addMessage(message);
     try {
       const unsub = await runAssistPipeline(
         this.hass,
         (event) => {
-          if (event.type === "intent-progress") {
-            const delta = event.data.chat_log_delta;
-
-            // new message and previous message has content
-            if (delta.role) {
-              // If currentDeltaRole exists, it means we're receiving our
-              // second or later message. Let's add it to the chat.
-              if (
-                currentDeltaRole &&
-                delta.role === "assistant" &&
-                hassMessage.text !== "…"
-              ) {
-                // Remove progress indicator of previous message
-                hassMessage.text = hassMessage.text.substring(
-                  0,
-                  hassMessage.text.length - 1
-                );
-
-                hassMessage = {
-                  who: "hass",
-                  text: "…",
-                  error: false,
-                };
-                this._addMessage(hassMessage);
-              }
-              currentDeltaRole = delta.role;
-            }
-
-            if (
-              currentDeltaRole === "assistant" &&
-              "content" in delta &&
-              delta.content
-            ) {
-              hassMessage.text =
-                hassMessage.text.substring(0, hassMessage.text.length - 1) +
-                delta.content +
-                "…";
-              this.requestUpdate("_conversation");
-            }
-          }
-
           if (event.type === "intent-end") {
             this._conversationId = event.data.intent_output.conversation_id;
             const plain = event.data.intent_output.response.speech?.plain;
             if (plain) {
-              hassMessage.text = plain.speech;
+              message.text = plain.speech;
             }
             this.requestUpdate("_conversation");
             unsub();
           }
           if (event.type === "error") {
-            hassMessage.text = event.data.message;
-            hassMessage.error = true;
+            message.text = event.data.message;
+            message.error = true;
             this.requestUpdate("_conversation");
             unsub();
           }
@@ -552,8 +470,8 @@ export class HaAssistChat extends LitElement {
         }
       );
     } catch {
-      hassMessage.text = this.hass.localize("ui.dialogs.voice_command.error");
-      hassMessage.error = true;
+      message.text = this.hass.localize("ui.dialogs.voice_command.error");
+      message.error = true;
       this.requestUpdate("_conversation");
     } finally {
       this._processing = false;

src/components/ha-base-time-input.ts

@@ -329,12 +329,15 @@ export class HaBaseTimeInput extends LitElement {
     :host([clearable]) {
       position: relative;
     }
+    :host {
+      display: block;
+    }
     .time-input-wrap-wrap {
       display: flex;
     }
     .time-input-wrap {
       display: flex;
-      flex: var(--time-input-flex, unset);
+      flex: 1;
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;

src/components/ha-date-range-picker.ts

@@ -9,13 +9,12 @@ import {
   endOfMonth,
   endOfWeek,
   endOfYear,
-  isThisYear,
   startOfDay,
   startOfMonth,
   startOfWeek,
   startOfYear,
+  isThisYear,
 } from "date-fns";
-import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -23,18 +22,16 @@ import { ifDefined } from "lit/directives/if-defined";
 import { calcDate, shiftDateRange } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import {
-  formatShortDateTime,
   formatShortDateTimeWithYear,
+  formatShortDateTime,
 } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
-import { fireEvent } from "../common/dom/fire_event";
-import { TimeZone } from "../data/translation";
 import type { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-icon-button";
+import "./ha-textarea";
 import "./ha-icon-button-next";
 import "./ha-icon-button-prev";
-import "./ha-textarea";
 
 export type DateRangePickerRanges = Record<string, [Date, Date]>;
 
@@ -200,15 +197,14 @@ export class HaDateRangePicker extends LitElement {
         ?auto-apply=${this.autoApply}
         time-picker=${this.timePicker}
         twentyfour-hours=${this._hour24format}
-        start-date=${this._formatDate(this.startDate)}
-        end-date=${this._formatDate(this.endDate)}
+        start-date=${this.startDate.toISOString()}
+        end-date=${this.endDate.toISOString()}
         ?ranges=${this.ranges !== false}
         opening-direction=${ifDefined(
           this.openingDirection || this._calcedOpeningDirection
         )}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
-        @change=${this._handleChange}
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
@@ -329,31 +325,9 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _applyDateRange() {
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      const dateRangePicker = this._dateRangePicker;
-
-      const startDate = fromZonedTime(
-        dateRangePicker.start,
-        this.hass.config.time_zone
-      );
-      const endDate = fromZonedTime(
-        dateRangePicker.end,
-        this.hass.config.time_zone
-      );
-
-      dateRangePicker.clickRange([startDate, endDate]);
-    }
-
     this._dateRangePicker.clickedApply();
   }
 
-  private _formatDate(date: Date): string {
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      return toZonedTime(date, this.hass.config.time_zone).toISOString();
-    }
-    return date.toISOString();
-  }
-
   private get _dateRangePicker() {
     const dateRangePicker = this.shadowRoot!.querySelector(
       "date-range-picker"
@@ -384,16 +358,6 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
-  private _handleChange(ev: CustomEvent) {
-    ev.stopPropagation();
-    const startDate = ev.detail.startDate;
-    const endDate = ev.detail.endDate;
-
-    fireEvent(this, "value-changed", {
-      value: { startDate, endDate },
-    });
-  }
-
   static styles = css`
 
       ha-icon-button {

src/components/ha-network.ts

@@ -64,13 +64,9 @@ export class HaNetwork extends LitElement {
           >
           </ha-checkbox>
         </span>
-        <span slot="heading" data-for="auto_configure">
-          ${this.hass.localize(
-            "ui.panel.config.network.adapter.auto_configure"
-          )}
-        </span>
+        <span slot="heading" data-for="auto_configure"> Auto Configure </span>
         <span slot="description" data-for="auto_configure">
-          ${this.hass.localize("ui.panel.config.network.adapter.detected")}:
+          Detected:
           ${format_auto_detected_interfaces(this.networkConfig.adapters)}
         </span>
       </ha-settings-row>
@@ -89,21 +85,18 @@ export class HaNetwork extends LitElement {
                   </ha-checkbox>
                 </span>
                 <span slot="heading">
-                  ${this.hass.localize(
-                    "ui.panel.config.network.adapter.adapter"
-                  )}:
-                  ${adapter.name}
+                  Adapter: ${adapter.name}
                   ${adapter.default
                     ? html`<ha-svg-icon .path=${mdiStar}></ha-svg-icon>
-                        (${this.hass.localize("ui.common.default")})`
-                    : nothing}
+                        (Default)`
+                    : ""}
                 </span>
                 <span slot="description">
                   ${format_addresses([...adapter.ipv4, ...adapter.ipv6])}
                 </span>
               </ha-settings-row>`
           )
-        : nothing}
+        : ""}
     `;
   }
 

src/components/ha-qr-scanner.ts

@@ -8,7 +8,7 @@ import { customElement, property, query, state } from "lit/decorators";
 // and "qr-scanner" defaults to a suboptimal implementation if it is not available.
 // The following import makes a better implementation available that is based on a
 // WebAssembly port of ZXing:
-import { prepareZXingModule } from "barcode-detector";
+import { setZXingModuleOverrides } from "barcode-detector";
 import type QrScanner from "qr-scanner";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -21,14 +21,12 @@ import "./ha-list-item";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
-prepareZXingModule({
-  overrides: {
-    locateFile: (path: string, prefix: string) => {
-      if (path.endsWith(".wasm")) {
-        return "/static/js/zxing_reader.wasm";
-      }
-      return prefix + path;
-    },
+setZXingModuleOverrides({
+  locateFile: (path: string, prefix: string) => {
+    if (path.endsWith(".wasm")) {
+      return "/static/js/zxing_reader.wasm";
+    }
+    return prefix + path;
   },
 });
 

src/components/trace/hat-graph-branch.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, svg } from "lit";
+import { css, html, LitElement, svg } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { BRANCH_HEIGHT, SPACING } from "./hat-graph-const";
@@ -41,8 +41,8 @@ export class HatGraphBranch extends LitElement {
       branches.push({
         x: width / 2 + total_width,
         height,
-        start: c.hasAttribute("graph-start"),
-        end: c.hasAttribute("graph-end"),
+        start: c.hasAttribute("graphStart"),
+        end: c.hasAttribute("graphEnd"),
         track: c.hasAttribute("track"),
       });
       total_width += width;
@@ -65,8 +65,11 @@ export class HatGraphBranch extends LitElement {
     return html`
       <slot name="head"></slot>
       ${!this.start
-        ? html`
-            <svg id="top" width=${this._totalWidth}>
+        ? svg`
+            <svg
+              id="top"
+              width="${this._totalWidth}"
+            >
               ${this._branches.map((branch) =>
                 branch.start
                   ? ""
@@ -83,7 +86,7 @@ export class HatGraphBranch extends LitElement {
               )}
             </svg>
           `
-        : nothing}
+        : ""}
       <div id="branches">
         <svg id="lines" width=${this._totalWidth} height=${this._maxHeight}>
           ${this._branches.map((branch) => {
@@ -104,8 +107,11 @@ export class HatGraphBranch extends LitElement {
       </div>
 
       ${!this.short
-        ? html`
-            <svg id="bottom" width=${this._totalWidth}>
+        ? svg`
+            <svg
+              id="bottom"
+              width="${this._totalWidth}"
+            >
               ${this._branches.map((branch) => {
                 if (branch.end) return "";
                 return svg`
@@ -122,7 +128,7 @@ export class HatGraphBranch extends LitElement {
               })}
             </svg>
           `
-        : nothing}
+        : ""}
     `;
   }
 

src/data/assist_pipeline.ts

@@ -108,34 +108,6 @@ interface PipelineIntentStartEvent extends PipelineEventBase {
     intent_input: string;
   };
 }
-
-interface ConversationChatLogAssistantDelta {
-  role: "assistant";
-  content: string;
-  tool_calls: {
-    id: string;
-    tool_name: string;
-    tool_args: Record<string, unknown>;
-  }[];
-}
-
-interface ConversationChatLogToolResultDelta {
-  role: "tool_result";
-  agent_id: string;
-  tool_call_id: string;
-  tool_name: string;
-  tool_result: unknown;
-}
-interface PipelineIntentProgressEvent extends PipelineEventBase {
-  type: "intent-progress";
-  data: {
-    chat_log_delta:
-      | Partial<ConversationChatLogAssistantDelta>
-      // These always come in 1 chunk
-      | ConversationChatLogToolResultDelta;
-  };
-}
-
 interface PipelineIntentEndEvent extends PipelineEventBase {
   type: "intent-end";
   data: {
@@ -169,7 +141,6 @@ export type PipelineRunEvent =
   | PipelineSTTStartEvent
   | PipelineSTTEndEvent
   | PipelineIntentStartEvent
-  | PipelineIntentProgressEvent
   | PipelineIntentEndEvent
   | PipelineTTSStartEvent
   | PipelineTTSEndEvent;

src/data/backup.ts

@@ -1,8 +1,6 @@
-import { memoize } from "@fullcalendar/core/internal";
 import { setHours, setMinutes } from "date-fns";
 import type { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import checkValidDate from "../common/datetime/check_valid_date";
 import {
   formatDateTime,
   formatDateTimeNumeric,
@@ -13,6 +11,7 @@ import type { HomeAssistant } from "../types";
 import { fileDownload } from "../util/file_download";
 import { domainToName } from "./integration";
 import type { FrontendLocaleData } from "./translation";
+import checkValidDate from "../common/datetime/check_valid_date";
 
 export const enum BackupScheduleRecurrence {
   NEVER = "never",
@@ -105,9 +104,6 @@ export interface BackupContent {
   name: string;
   agents: Record<string, BackupContentAgent>;
   failed_agent_ids?: string[];
-  extra_metadata?: {
-    "supervisor.addon_update"?: string;
-  };
   with_automatic_settings: boolean;
 }
 
@@ -323,29 +319,6 @@ export const computeBackupAgentName = (
 export const computeBackupSize = (backup: BackupContent) =>
   Math.max(...Object.values(backup.agents).map((agent) => agent.size));
 
-export type BackupType = "automatic" | "manual" | "addon_update";
-
-const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "manual", "addon_update"];
-
-export const getBackupTypes = memoize((isHassio: boolean) =>
-  isHassio
-    ? BACKUP_TYPE_ORDER
-    : BACKUP_TYPE_ORDER.filter((type) => type !== "addon_update")
-);
-
-export const computeBackupType = (
-  backup: BackupContent,
-  isHassio: boolean
-): BackupType => {
-  if (backup.with_automatic_settings) {
-    return "automatic";
-  }
-  if (isHassio && backup.extra_metadata?.["supervisor.addon_update"] != null) {
-    return "addon_update";
-  }
-  return "manual";
-};
-
 export const compareAgents = (a: string, b: string) => {
   const isLocalA = isLocalAgent(a);
   const isLocalB = isLocalAgent(b);

src/data/cloud.ts

@@ -181,6 +181,3 @@ export const updateCloudGoogleEntityConfig = (
 
 export const cloudSyncGoogleAssistant = (hass: HomeAssistant) =>
   hass.callApi("POST", "cloud/google_actions/sync");
-
-export const fetchSupportPackage = (hass: HomeAssistant) =>
-  hass.callApi<string>("GET", "cloud/support_package");

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -19,7 +19,6 @@ import { showAlertDialog } from "../generic/show-dialog-box";
 import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
-import { navigate } from "../../common/navigate";
 
 @customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@@ -66,8 +65,7 @@ class StepFlowCreateEntry extends LitElement {
 
     if (
       devices.length !== 1 ||
-      devices[0].primary_config_entry !== this.step.result?.entry_id ||
-      this.step.result.domain === "voip"
+      devices[0].primary_config_entry !== this.step.result?.entry_id
     ) {
       return;
     }
@@ -153,11 +151,6 @@ class StepFlowCreateEntry extends LitElement {
 
   private _flowDone(): void {
     fireEvent(this, "flow-update", { step: undefined });
-    if (this.step.result) {
-      navigate(
-        `/config/integrations/integration/${this.step.result.domain}#config_entry=${this.step.result.entry_id}`
-      );
-    }
   }
 
   private async _areaPicked(ev: CustomEvent) {

src/dialogs/more-info/const.ts

@@ -33,7 +33,6 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "switch",
   "valve",
   "water_heater",
-  "weather",
 ];
 /** Domains with full height more info dialog */
 export const DOMAINS_FULL_HEIGHT_MORE_INFO = ["update"];

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

@@ -448,10 +448,6 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       margin-bottom: -16px;
       margin-top: -4px;
-      --md-sys-color-surface: var(
-        --ha-dialog-surface-background,
-        var(--mdc-theme-surface, #fff)
-      );
     }
 
     ha-md-list-item {

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

@@ -1,13 +1,18 @@
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
-import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import {
+  mdiEye,
+  mdiGauge,
+  mdiThermometer,
+  mdiWaterPercent,
+  mdiWeatherWindy,
+} from "@mdi/js";
+import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
-import { formatTime } from "../../../common/datetime/format_time";
-import { formatNumber } from "../../../common/number/format_number";
+import { formatDateWeekdayDay } from "../../../common/datetime/format_date";
+import { formatTimeWeekday } from "../../../common/datetime/format_time";
 import "../../../components/ha-svg-icon";
 import type {
   ForecastEvent,
@@ -18,16 +23,11 @@ import {
   getDefaultForecastType,
   getForecast,
   getSupportedForecastTypes,
-  getSecondaryWeatherAttribute,
-  getWeatherStateIcon,
-  getWeatherUnit,
   getWind,
   subscribeForecast,
-  weatherSVGStyles,
+  weatherIcons,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-relative-time";
-import "../../../components/ha-state-icon";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -137,90 +137,23 @@ class MoreInfoWeather extends LitElement {
     const hourly = forecastData?.type === "hourly";
     const dayNight = forecastData?.type === "twice_daily";
 
-    const weatherStateIcon = getWeatherStateIcon(this.stateObj.state, this);
-
     return html`
-      <div class="content">
-        <div class="icon-image">
-          ${weatherStateIcon ||
-          html`
-            <ha-state-icon
-              class="weather-icon"
-              .stateObj=${this.stateObj}
-              .hass=${this.hass}
-            ></ha-state-icon>
-          `}
-        </div>
-        <div class="info">
-          <div class="name-state">
-            <div class="state">
-              ${this.hass.formatEntityState(this.stateObj)}
+      ${this._showValue(this.stateObj.attributes.temperature)
+        ? html`
+            <div class="flex">
+              <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
+              <div class="main">
+                ${this.hass.localize("ui.card.weather.attributes.temperature")}
+              </div>
+              <div>
+                ${this.hass.formatEntityAttributeValue(
+                  this.stateObj,
+                  "temperature"
+                )}
+              </div>
             </div>
-            <div class="time-ago">
-              <ha-relative-time
-                id="last_changed"
-                .hass=${this.hass}
-                .datetime=${this.stateObj.last_changed}
-                capitalize
-              ></ha-relative-time>
-              <simple-tooltip animation-delay="0" for="last_changed">
-                <div>
-                  <div class="row">
-                    <span class="column-name">
-                      ${this.hass.localize(
-                        "ui.dialogs.more_info_control.last_changed"
-                      )}:
-                    </span>
-                    <ha-relative-time
-                      .hass=${this.hass}
-                      .datetime=${this.stateObj.last_changed}
-                      capitalize
-                    ></ha-relative-time>
-                  </div>
-                  <div class="row">
-                    <span>
-                      ${this.hass.localize(
-                        "ui.dialogs.more_info_control.last_updated"
-                      )}:
-                    </span>
-                    <ha-relative-time
-                      .hass=${this.hass}
-                      .datetime=${this.stateObj.last_updated}
-                      capitalize
-                    ></ha-relative-time>
-                  </div>
-                </div>
-              </simple-tooltip>
-            </div>
-          </div>
-          <div class="temp-attribute">
-            <div class="temp">
-              ${this.stateObj.attributes.temperature !== undefined &&
-              this.stateObj.attributes.temperature !== null
-                ? html`
-                    ${formatNumber(
-                      this.stateObj.attributes.temperature,
-                      this.hass.locale
-                    )}&nbsp;<span
-                      >${getWeatherUnit(
-                        this.hass.config,
-                        this.stateObj,
-                        "temperature"
-                      )}</span
-                    >
-                  `
-                : nothing}
-            </div>
-            <div class="attribute">
-              ${getSecondaryWeatherAttribute(
-                this.hass,
-                this.stateObj,
-                forecast!
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
+          `
+        : ""}
       ${this._showValue(this.stateObj.attributes.pressure)
         ? html`
             <div class="flex">
@@ -236,7 +169,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : nothing}
+        : ""}
       ${this._showValue(this.stateObj.attributes.humidity)
         ? html`
             <div class="flex">
@@ -252,7 +185,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : nothing}
+        : ""}
       ${this._showValue(this.stateObj.attributes.wind_speed)
         ? html`
             <div class="flex">
@@ -270,7 +203,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : nothing}
+        : ""}
       ${this._showValue(this.stateObj.attributes.visibility)
         ? html`
             <div class="flex">
@@ -286,7 +219,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : nothing}
+        : ""}
       ${forecast
         ? html`
             <div class="section">
@@ -309,90 +242,76 @@ class MoreInfoWeather extends LitElement {
                   )}
                 </mwc-tab-bar>`
               : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
-                      <div>
-                        <div>
-                          ${dayNight
-                            ? html`
-                                ${formatDateWeekdayShort(
-                                  new Date(item.datetime),
-                                  this.hass!.locale,
-                                  this.hass!.config
-                                )}
-                                <div class="daynight">
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
+            ${forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`<div class="flex">
+                    ${item.condition
+                      ? html`
+                          <ha-svg-icon
+                            .path=${weatherIcons[item.condition]}
+                          ></ha-svg-icon>
+                        `
+                      : ""}
+                    <div class="main">
+                      ${dayNight
+                        ? html`
+                            ${formatDateWeekdayDay(
+                              new Date(item.datetime),
+                              this.hass!.locale,
+                              this.hass!.config
+                            )}
+                            (${item.is_daytime !== false
+                              ? this.hass!.localize("ui.card.weather.day")
+                              : this.hass!.localize("ui.card.weather.night")})
+                          `
+                        : hourly
                           ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
+                              ${formatTimeWeekday(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
                             `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
-                      </div>
-                    `
-                  : nothing
-              )}
-            </div>
+                          : html`
+                              ${formatDateWeekdayDay(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                            `}
+                    </div>
+                    <div class="templow">
+                      ${this._showValue(item.templow)
+                        ? this.hass.formatEntityAttributeValue(
+                            this.stateObj!,
+                            "templow",
+                            item.templow
+                          )
+                        : hourly
+                          ? ""
+                          : "—"}
+                    </div>
+                    <div class="temp">
+                      ${this._showValue(item.temperature)
+                        ? this.hass.formatEntityAttributeValue(
+                            this.stateObj!,
+                            "temperature",
+                            item.temperature
+                          )
+                        : "—"}
+                    </div>
+                  </div>`
+                : ""
+            )}
           `
-        : nothing}
+        : ""}
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
               ${this.stateObj.attributes.attribution}
             </div>
           `
-        : nothing}
+        : ""}
     `;
   }
 
@@ -402,186 +321,56 @@ class MoreInfoWeather extends LitElement {
     ];
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      weatherSVGStyles,
-      css`
-        ha-svg-icon {
-          color: var(--paper-item-icon-color);
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-        }
+  static styles = css`
+    ha-svg-icon {
+      color: var(--paper-item-icon-color);
+      margin-left: 8px;
+      margin-inline-start: 8px;
+      margin-inline-end: initial;
+    }
 
-        mwc-tab-bar {
-          margin-bottom: 4px;
-        }
+    mwc-tab-bar {
+      margin-bottom: 4px;
+    }
 
-        .section {
-          margin: 16px 0 8px 0;
-          font-size: 1.2em;
-        }
+    .section {
+      margin: 16px 0 8px 0;
+      font-size: 1.2em;
+    }
 
-        .flex {
-          display: flex;
-          height: 32px;
-          align-items: center;
-        }
-        .flex > div:last-child {
-          direction: ltr;
-        }
+    .flex {
+      display: flex;
+      height: 32px;
+      align-items: center;
+    }
+    .flex > div:last-child {
+      direction: ltr;
+    }
 
-        .main {
-          flex: 1;
-          margin-left: 24px;
-          margin-inline-start: 24px;
-          margin-inline-end: initial;
-        }
+    .main {
+      flex: 1;
+      margin-left: 24px;
+      margin-inline-start: 24px;
+      margin-inline-end: initial;
+    }
 
-        .attribution {
-          text-align: center;
-          margin-top: 16px;
-        }
+    .temp,
+    .templow {
+      min-width: 48px;
+      text-align: right;
+      direction: ltr;
+    }
 
-        .time-ago,
-        .attribute {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+    .templow {
+      margin: 0 16px;
+      color: var(--secondary-text-color);
+    }
 
-        .attribution,
-        .templow,
-        .daynight,
-        .attribute,
-        .time-ago {
-          color: var(--secondary-text-color);
-        }
-
-        .content {
-          display: flex;
-          flex-wrap: nowrap;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 16px;
-        }
-
-        .icon-image {
-          display: flex;
-          align-items: center;
-          min-width: 64px;
-          margin-right: 16px;
-          margin-inline-end: 16px;
-          margin-inline-start: initial;
-        }
-
-        .icon-image > * {
-          flex: 0 0 64px;
-          height: 64px;
-        }
-
-        .weather-icon {
-          --mdc-icon-size: 64px;
-        }
-
-        .info {
-          display: flex;
-          justify-content: space-between;
-          flex-grow: 1;
-          overflow: hidden;
-        }
-
-        .temp-attribute {
-          text-align: var(--float-end);
-        }
-
-        .temp-attribute .temp {
-          position: relative;
-          margin-right: 24px;
-          direction: ltr;
-        }
-
-        .temp-attribute .temp span {
-          position: absolute;
-          font-size: 24px;
-          top: 1px;
-        }
-
-        .state,
-        .temp-attribute .temp {
-          font-size: 28px;
-          line-height: 1.2;
-        }
-
-        .attribute {
-          font-size: 14px;
-          line-height: 1;
-        }
-
-        .name-state {
-          overflow: hidden;
-          padding-right: 12px;
-          padding-inline-end: 12px;
-          padding-inline-start: initial;
-          width: 100%;
-        }
-
-        .state {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .forecast {
-          display: flex;
-          justify-content: space-around;
-          padding: 16px;
-          padding-bottom: 0px;
-          overflow-x: auto;
-          scrollbar-color: var(--scrollbar-thumb-color) transparent;
-          scrollbar-width: thin;
-          mask-image: linear-gradient(
-            90deg,
-            transparent 0%,
-            black 5%,
-            black 94%,
-            transparent 100%
-          );
-        }
-
-        .forecast > div {
-          text-align: center;
-          padding: 0 10px;
-        }
-
-        .forecast .icon,
-        .forecast .temp {
-          margin: 4px 0;
-        }
-
-        .forecast .temp {
-          font-size: 16px;
-        }
-
-        .forecast-image-icon {
-          padding-top: 4px;
-          padding-bottom: 4px;
-          display: flex;
-          justify-content: center;
-        }
-
-        .forecast-image-icon > * {
-          width: 40px;
-          height: 40px;
-          --mdc-icon-size: 40px;
-        }
-
-        .forecast-icon {
-          --mdc-icon-size: 40px;
-        }
-      `,
-    ];
-  }
+    .attribution {
+      color: var(--secondary-text-color);
+      text-align: center;
+    }
+  `;
 
   private _showValue(item: number | string | undefined): boolean {
     return typeof item !== "undefined" && item !== null;

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -47,8 +47,6 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
 
   @state() private _assistConfiguration?: AssistSatelliteConfiguration;
 
-  @state() private _error?: string;
-
   private _previousSteps: STEP[] = [];
 
   private _nextStep?: STEP;
@@ -167,86 +165,79 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                   "update"
                 )}
               ></ha-voice-assistant-setup-step-update>`
-            : this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : assistEntityState?.state === UNAVAILABLE
-                ? html`<ha-alert alert-type="error"
-                    >${this.hass.localize(
-                      "ui.panel.config.voice_assistants.satellite_wizard.not_available"
-                    )}</ha-alert
-                  >`
-                : this._step === STEP.CHECK
-                  ? html`<ha-voice-assistant-setup-step-check
+            : assistEntityState?.state === UNAVAILABLE
+              ? this.hass.localize(
+                  "ui.panel.config.voice_assistants.satellite_wizard.not_available"
+                )
+              : this._step === STEP.CHECK
+                ? html`<ha-voice-assistant-setup-step-check
+                    .hass=${this.hass}
+                    .assistEntityId=${assistSatelliteEntityId}
+                  ></ha-voice-assistant-setup-step-check>`
+                : this._step === STEP.WAKEWORD
+                  ? html`<ha-voice-assistant-setup-step-wake-word
                       .hass=${this.hass}
+                      .assistConfiguration=${this._assistConfiguration}
                       .assistEntityId=${assistSatelliteEntityId}
-                    ></ha-voice-assistant-setup-step-check>`
-                  : this._step === STEP.WAKEWORD
-                    ? html`<ha-voice-assistant-setup-step-wake-word
-                        .hass=${this.hass}
-                        .assistConfiguration=${this._assistConfiguration}
-                        .assistEntityId=${assistSatelliteEntityId}
-                        .deviceEntities=${this._deviceEntities(
-                          this._params.deviceId,
-                          this.hass.entities
-                        )}
-                      ></ha-voice-assistant-setup-step-wake-word>`
-                    : this._step === STEP.CHANGE_WAKEWORD
+                      .deviceEntities=${this._deviceEntities(
+                        this._params.deviceId,
+                        this.hass.entities
+                      )}
+                    ></ha-voice-assistant-setup-step-wake-word>`
+                  : this._step === STEP.CHANGE_WAKEWORD
+                    ? html`
+                        <ha-voice-assistant-setup-step-change-wake-word
+                          .hass=${this.hass}
+                          .assistConfiguration=${this._assistConfiguration}
+                          .assistEntityId=${assistSatelliteEntityId}
+                        ></ha-voice-assistant-setup-step-change-wake-word>
+                      `
+                    : this._step === STEP.AREA
                       ? html`
-                          <ha-voice-assistant-setup-step-change-wake-word
+                          <ha-voice-assistant-setup-step-area
+                            .hass=${this.hass}
+                            .deviceId=${this._params.deviceId}
+                          ></ha-voice-assistant-setup-step-area>
+                        `
+                      : this._step === STEP.PIPELINE
+                        ? html`<ha-voice-assistant-setup-step-pipeline
                             .hass=${this.hass}
                             .assistConfiguration=${this._assistConfiguration}
                             .assistEntityId=${assistSatelliteEntityId}
-                          ></ha-voice-assistant-setup-step-change-wake-word>
-                        `
-                      : this._step === STEP.AREA
-                        ? html`
-                            <ha-voice-assistant-setup-step-area
+                          ></ha-voice-assistant-setup-step-pipeline>`
+                        : this._step === STEP.CLOUD
+                          ? html`<ha-voice-assistant-setup-step-cloud
                               .hass=${this.hass}
-                              .deviceId=${this._params.deviceId}
-                            ></ha-voice-assistant-setup-step-area>
-                          `
-                        : this._step === STEP.PIPELINE
-                          ? html`<ha-voice-assistant-setup-step-pipeline
-                              .hass=${this.hass}
-                              .assistConfiguration=${this._assistConfiguration}
-                              .assistEntityId=${assistSatelliteEntityId}
-                            ></ha-voice-assistant-setup-step-pipeline>`
-                          : this._step === STEP.CLOUD
-                            ? html`<ha-voice-assistant-setup-step-cloud
+                            ></ha-voice-assistant-setup-step-cloud>`
+                          : this._step === STEP.LOCAL
+                            ? html`<ha-voice-assistant-setup-step-local
                                 .hass=${this.hass}
-                              ></ha-voice-assistant-setup-step-cloud>`
-                            : this._step === STEP.LOCAL
-                              ? html`<ha-voice-assistant-setup-step-local
+                                .assistConfiguration=${this
+                                  ._assistConfiguration}
+                              ></ha-voice-assistant-setup-step-local>`
+                            : this._step === STEP.SUCCESS
+                              ? html`<ha-voice-assistant-setup-step-success
                                   .hass=${this.hass}
                                   .assistConfiguration=${this
                                     ._assistConfiguration}
-                                ></ha-voice-assistant-setup-step-local>`
-                              : this._step === STEP.SUCCESS
-                                ? html`<ha-voice-assistant-setup-step-success
-                                    .hass=${this.hass}
-                                    .assistConfiguration=${this
-                                      ._assistConfiguration}
-                                    .assistEntityId=${assistSatelliteEntityId}
-                                  ></ha-voice-assistant-setup-step-success>`
-                                : nothing}
+                                  .assistEntityId=${assistSatelliteEntityId}
+                                ></ha-voice-assistant-setup-step-success>`
+                              : nothing}
         </div>
       </ha-dialog>
     `;
   }
 
   private async _fetchAssistConfiguration() {
-    try {
-      this._assistConfiguration = await fetchAssistSatelliteConfiguration(
-        this.hass,
-        this._findDomainEntityId(
-          this._params!.deviceId,
-          this.hass.entities,
-          "assist_satellite"
-        )!
-      );
-    } catch (err: any) {
-      this._error = err.message;
-    }
+    this._assistConfiguration = await fetchAssistSatelliteConfiguration(
+      this.hass,
+      this._findDomainEntityId(
+        this._params!.deviceId,
+        this.hass.entities,
+        "assist_satellite"
+      )!
+    );
+    return this._assistConfiguration;
   }
 
   private _goToPreviousStep() {
@@ -302,10 +293,6 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
         .skip-btn {
           margin-top: 6px;
         }
-        ha-alert {
-          margin: 24px;
-          display: block;
-        }
       `,
     ];
   }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -85,7 +85,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
         <div class="rows">
           ${this.assistConfiguration &&
           this.assistConfiguration.available_wake_words.length > 1
-            ? html`<div class="row">
+            ? html` <div class="row">
                 <ha-select
                   .label=${"Wake word"}
                   @closed=${stopPropagation}

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -44,15 +44,6 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
   protected override willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties);
 
-    if (changedProperties.has("assistConfiguration")) {
-      if (
-        this.assistConfiguration &&
-        !this.assistConfiguration.available_wake_words.length
-      ) {
-        this._nextStep();
-      }
-    }
-
     if (changedProperties.has("assistEntityId")) {
       this._detected = false;
       this._muteSwitchEntity = this.deviceEntities?.find(
@@ -144,16 +135,13 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
               >`
             : nothing}
       </div>
-      ${this.assistConfiguration &&
-      this.assistConfiguration.available_wake_words.length > 1
-        ? html`<div class="footer centered">
-            <ha-button @click=${this._changeWakeWord}
-              >${this.hass.localize(
-                "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
-              )}</ha-button
-            >
-          </div>`
-        : nothing}`;
+      <div class="footer centered">
+        <ha-button @click=${this._changeWakeWord}
+          >${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
+          )}</ha-button
+        >
+      </div>`;
   }
 
   private async _listenWakeWord() {

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -106,7 +106,6 @@ export class HaConfigApplicationCredentials extends LitElement {
         },
         actions: {
           title: "",
-          label: localize("ui.panel.config.generic.headers.actions"),
           type: "overflow-menu",
           showNarrow: true,
           hideable: false,

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

@@ -329,9 +329,6 @@ class DialogAreaDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-textfield {
-          display: block;
-        }
         ha-aliases-editor,
         ha-entity-picker,
         ha-floor-picker,

src/panels/config/automation/add-automation-element-dialog.ts

@@ -11,16 +11,17 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stringCompare } from "../../../common/string/compare";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-dialog";
 import type { HaDialog } from "../../../components/ha-dialog";
 import "../../../components/ha-dialog-header";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-md-divider";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import "../../../components/ha-service-icon";
@@ -44,6 +45,7 @@ import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
 
@@ -200,10 +202,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         ignoreLocation: true,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        ignoreDiacritics: true,
+        getFn: getStripDiacriticsFn,
       };
       const fuse = new Fuse(items, options);
-      return fuse.search(filter).map((result) => result.item);
+      return fuse.search(stripDiacritics(filter)).map((result) => result.item);
     }
   );
 

src/panels/config/backup/components/config/ha-backup-config-agents.ts

@@ -1,4 +1,4 @@
-import { mdiCog, mdiDelete, mdiHarddisk, mdiNas } from "@mdi/js";
+import { mdiCog, mdiHarddisk, mdiNas } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -41,6 +41,13 @@ class HaBackupConfigAgents extends LitElement {
 
   @state() private value?: string[];
 
+  private _availableAgents = memoizeOne(
+    (agents: BackupAgent[], cloudStatus: CloudStatus) =>
+      agents.filter(
+        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus.logged_in
+      )
+  );
+
   private get _value() {
     return this.value ?? DEFAULT_AGENTS;
   }
@@ -79,84 +86,19 @@ class HaBackupConfigAgents extends LitElement {
     return "";
   }
 
-  private _availableAgents = memoizeOne(
-    (agents: BackupAgent[], cloudStatus: CloudStatus) =>
-      agents.filter(
-        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus.logged_in
-      )
-  );
-
-  private _unavailableAgents = memoizeOne(
-    (
-      agents: BackupAgent[],
-      cloudStatus: CloudStatus,
-      selectedAgentIds: string[]
-    ) => {
-      const availableAgentIds = this._availableAgents(agents, cloudStatus).map(
-        (agent) => agent.agent_id
-      );
-
-      return selectedAgentIds
-        .filter((agent) => !availableAgentIds.includes(agent))
-        .map<BackupAgent>((id) => ({
-          agent_id: id,
-          name: id.split(".")[1] || id, // Use the id as name as it is not available in the list
-        }));
-    }
-  );
-
-  private _renderAgentIcon(agentId: string) {
-    if (isLocalAgent(agentId)) {
-      return html`
-        <ha-svg-icon .path=${mdiHarddisk} slot="start"></ha-svg-icon>
-      `;
-    }
-
-    if (isNetworkMountAgent(agentId)) {
-      return html`<ha-svg-icon .path=${mdiNas} slot="start"></ha-svg-icon>`;
-    }
-
-    const domain = computeDomain(agentId);
-
-    return html`
-      <img
-        .src=${brandsUrl({
-          domain,
-          type: "icon",
-          useFallback: true,
-          darkOptimized: this.hass.themes?.darkMode,
-        })}
-        crossorigin="anonymous"
-        referrerpolicy="no-referrer"
-        alt=""
-        slot="start"
-      />
-    `;
-  }
-
   protected render() {
-    const availableAgents = this._availableAgents(
-      this.agents,
-      this.cloudStatus
-    );
-    const unavailableAgents = this._unavailableAgents(
-      this.agents,
-      this.cloudStatus,
-      this._value
-    );
-
-    const allAgents = [...availableAgents, ...unavailableAgents];
-
+    const agents = this._availableAgents(this.agents, this.cloudStatus);
     return html`
-      ${allAgents.length > 0
+      ${agents.length > 0
         ? html`
             <ha-md-list>
-              ${availableAgents.map((agent) => {
+              ${agents.map((agent) => {
                 const agentId = agent.agent_id;
+                const domain = computeDomain(agentId);
                 const name = computeBackupAgentName(
                   this.hass.localize,
                   agentId,
-                  allAgents
+                  this.agents
                 );
                 const description = this._description(agentId);
                 const noCloudSubscription =
@@ -166,7 +108,32 @@ class HaBackupConfigAgents extends LitElement {
 
                 return html`
                   <ha-md-list-item>
-                    ${this._renderAgentIcon(agentId)}
+                    ${isLocalAgent(agentId)
+                      ? html`
+                          <ha-svg-icon .path=${mdiHarddisk} slot="start">
+                          </ha-svg-icon>
+                        `
+                      : isNetworkMountAgent(agentId)
+                        ? html`
+                            <ha-svg-icon
+                              .path=${mdiNas}
+                              slot="start"
+                            ></ha-svg-icon>
+                          `
+                        : html`
+                            <img
+                              .src=${brandsUrl({
+                                domain,
+                                type: "icon",
+                                useFallback: true,
+                                darkOptimized: this.hass.themes?.darkMode,
+                              })}
+                              crossorigin="anonymous"
+                              referrerpolicy="no-referrer"
+                              alt=""
+                              slot="start"
+                            />
+                          `}
                     <div slot="headline" class="name">${name}</div>
                     ${description
                       ? html`<div slot="supporting-text">${description}</div>`
@@ -184,44 +151,14 @@ class HaBackupConfigAgents extends LitElement {
                     <ha-switch
                       slot="end"
                       id=${agentId}
-                      .checked=${this._value.includes(agentId)}
-                      .disabled=${noCloudSubscription &&
-                      !this._value.includes(agentId)}
+                      .checked=${!noCloudSubscription &&
+                      this._value.includes(agentId)}
+                      .disabled=${noCloudSubscription}
                       @change=${this._agentToggled}
                     ></ha-switch>
                   </ha-md-list-item>
                 `;
               })}
-              ${unavailableAgents.length > 0 && this.showSettings
-                ? html`
-                    <p class="heading">
-                      ${this.hass.localize(
-                        "ui.panel.config.backup.agents.unavailable_agents"
-                      )}
-                    </p>
-                    ${unavailableAgents.map((agent) => {
-                      const agentId = agent.agent_id;
-                      const name = computeBackupAgentName(
-                        this.hass.localize,
-                        agentId,
-                        allAgents
-                      );
-
-                      return html`
-                        <ha-md-list-item>
-                          ${this._renderAgentIcon(agentId)}
-                          <div slot="headline" class="name">${name}</div>
-                          <ha-icon-button
-                            id=${agentId}
-                            slot="end"
-                            path=${mdiDelete}
-                            @click=${this._deleteAgent}
-                          ></ha-icon-button>
-                        </ha-md-list-item>
-                      `;
-                    })}
-                  `
-                : nothing}
             </ha-md-list>
           `
         : html`
@@ -237,13 +174,6 @@ class HaBackupConfigAgents extends LitElement {
     navigate(`/config/backup/location/${agentId}`);
   }
 
-  private _deleteAgent(ev): void {
-    ev.stopPropagation();
-    const agentId = ev.currentTarget.id;
-    this.value = this._value.filter((agent) => agent !== agentId);
-    fireEvent(this, "value-changed", { value: this.value });
-  }
-
   private _agentToggled(ev) {
     ev.stopPropagation();
     const value = ev.currentTarget.checked;
@@ -255,8 +185,19 @@ class HaBackupConfigAgents extends LitElement {
       this.value = this._value.filter((agent) => agent !== agentId);
     }
 
+    const availableAgents = this._availableAgents(
+      this.agents,
+      this.cloudStatus
+    );
+
     // Ensure we don't have duplicates, agents exist in the list and cloud is logged in
-    this.value = [...new Set(this.value)];
+    this.value = [...new Set(this.value)]
+      .filter((id) => availableAgents.some((agent) => agent.agent_id === id))
+      .filter(
+        (id) =>
+          id !== CLOUD_AGENT ||
+          (this.cloudStatus.logged_in && this.cloudStatus.active_subscription)
+      );
 
     fireEvent(this, "value-changed", { value: this.value });
   }

src/panels/config/backup/components/config/ha-backup-config-data.ts

@@ -378,9 +378,8 @@ class HaBackupConfigData extends LitElement {
     }
     @media all and (max-width: 450px) {
       ha-md-select {
-        min-width: 140px;
-        width: 140px;
-        --md-filled-field-content-space: 0;
+        min-width: 160px;
+        width: 160px;
       }
     }
   `;

src/panels/config/backup/components/config/ha-backup-config-schedule.ts

@@ -403,11 +403,11 @@ class HaBackupConfigSchedule extends LitElement {
             backup_create: html`<a
               href=${documentationUrl(
                 this.hass,
-                "/integrations/backup/#action-backupcreate_automatic"
+                "/integrations/backup#example-backing-up-every-night-at-300-am"
               )}
               target="_blank"
               rel="noopener noreferrer"
-              >backup.create_automatic</a
+              >backup.create</a
             >`,
           })}</ha-tip
         >
@@ -537,22 +537,14 @@ class HaBackupConfigSchedule extends LitElement {
     ha-md-list-item {
       --md-item-overflow: visible;
     }
-    ha-md-select {
+    ha-md-select,
+    ha-time-input {
       min-width: 210px;
     }
-    ha-time-input {
-      min-width: 194px;
-      --time-input-flex: 1;
-    }
     @media all and (max-width: 450px) {
-      ha-md-select {
-        min-width: 160px;
-        width: 160px;
-        --md-filled-field-content-space: 0;
-      }
+      ha-md-select,
       ha-time-input {
-        min-width: 145px;
-        width: 145px;
+        min-width: 160px;
       }
     }
     ha-md-textfield#value {
@@ -561,16 +553,6 @@ class HaBackupConfigSchedule extends LitElement {
     ha-md-select#type {
       min-width: 100px;
     }
-    @media all and (max-width: 450px) {
-      ha-md-textfield#value {
-        min-width: 60px;
-        margin: 0 -8px;
-      }
-      ha-md-select#type {
-        min-width: 120px;
-        width: 120px;
-      }
-    }
     ha-expansion-panel {
       --expansion-panel-summary-padding: 0 16px;
       --expansion-panel-content-padding: 0 16px;

src/panels/config/backup/components/overview/ha-backup-overview-backups.ts

@@ -1,19 +1,16 @@
-import { mdiCalendarSync, mdiGestureTap, mdiPuzzle } from "@mdi/js";
+import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import type { BackupContent, BackupType } from "../../../../../data/backup";
 import {
   computeBackupSize,
-  computeBackupType,
-  getBackupTypes,
+  type BackupContent,
 } from "../../../../../data/backup";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -24,12 +21,6 @@ interface BackupStats {
   size: number;
 }
 
-const TYPE_ICONS: Record<BackupType, string> = {
-  automatic: mdiCalendarSync,
-  manual: mdiGestureTap,
-  addon_update: mdiPuzzle,
-};
-
 const computeBackupStats = (backups: BackupContent[]): BackupStats =>
   backups.reduce(
     (stats, backup) => {
@@ -46,22 +37,23 @@ class HaBackupOverviewBackups extends LitElement {
 
   @property({ attribute: false }) public backups: BackupContent[] = [];
 
-  private _stats = memoizeOne(
-    (
-      backups: BackupContent[],
-      isHassio: boolean
-    ): [BackupType, BackupStats][] =>
-      getBackupTypes(isHassio).map((type) => {
-        const backupsOfType = backups.filter(
-          (backup) => computeBackupType(backup, isHassio) === type
-        );
-        return [type, computeBackupStats(backupsOfType)] as const;
-      })
-  );
+  private _automaticStats = memoizeOne((backups: BackupContent[]) => {
+    const automaticBackups = backups.filter(
+      (backup) => backup.with_automatic_settings
+    );
+    return computeBackupStats(automaticBackups);
+  });
+
+  private _manualStats = memoizeOne((backups: BackupContent[]) => {
+    const manualBackups = backups.filter(
+      (backup) => !backup.with_automatic_settings
+    );
+    return computeBackupStats(manualBackups);
+  });
 
   render() {
-    const isHassio = isComponentLoaded(this.hass, "hassio");
-    const stats = this._stats(this.backups, isHassio);
+    const automaticStats = this._automaticStats(this.backups);
+    const manualStats = this._manualStats(this.backups);
 
     return html`
       <ha-card class="my-backups">
@@ -70,32 +62,44 @@ class HaBackupOverviewBackups extends LitElement {
         </div>
         <div class="card-content">
           <ha-md-list>
-            ${stats.map(
-              ([type, { count, size }]) => html`
-                <ha-md-list-item
-                  type="link"
-                  href="/config/backup/backups?type=${type}"
-                >
-                  <ha-svg-icon
-                    slot="start"
-                    .path=${TYPE_ICONS[type]}
-                  ></ha-svg-icon>
-                  <div slot="headline">
-                    ${this.hass.localize(
-                      `ui.panel.config.backup.overview.backups.${type}`,
-                      { count }
-                    )}
-                  </div>
-                  <div slot="supporting-text">
-                    ${this.hass.localize(
-                      "ui.panel.config.backup.overview.backups.total_size",
-                      { size: bytesToString(size) }
-                    )}
-                  </div>
-                  <ha-icon-next slot="end"></ha-icon-next>
-                </ha-md-list-item>
-              `
-            )}
+            <ha-md-list-item
+              type="link"
+              href="/config/backup/backups?type=automatic"
+            >
+              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.overview.backups.automatic",
+                  { count: automaticStats.count }
+                )}
+              </div>
+              <div slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.overview.backups.total_size",
+                  { size: bytesToString(automaticStats.size, 1) }
+                )}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+            <ha-md-list-item
+              type="link"
+              href="/config/backup/backups?type=manual"
+            >
+              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.overview.backups.manual",
+                  { count: manualStats.count }
+                )}
+              </div>
+              <div slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.overview.backups.total_size",
+                  { size: bytesToString(manualStats.size, 1) }
+                )}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
           </ha-md-list>
         </div>
         <div class="card-actions">

src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts

@@ -1,225 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-icon-next";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
-import "../../../../components/ha-md-list";
-import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-svg-icon";
-import "../../../../components/ha-password-field";
-import "../../../../components/ha-alert";
-import {
-  canDecryptBackupOnDownload,
-  getPreferredAgentForDownload,
-} from "../../../../data/backup";
-import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import { downloadBackupFile } from "../helper/download_backup";
-import type { DownloadDecryptedBackupDialogParams } from "./show-dialog-download-decrypted-backup";
-
-@customElement("ha-dialog-download-decrypted-backup")
-class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _params?: DownloadDecryptedBackupDialogParams;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  @state() private _encryptionKey = "";
-
-  @state() private _error = "";
-
-  public showDialog(params: DownloadDecryptedBackupDialogParams): void {
-    this._opened = true;
-    this._params = params;
-  }
-
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
-  private _dialogClosed() {
-    if (this._opened) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._opened = false;
-    this._params = undefined;
-    this._encryptionKey = "";
-    this._error = "";
-  }
-
-  protected render() {
-    if (!this._opened || !this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed} disable-cancel-action>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title">
-            ${this.hass.localize(
-              "ui.panel.config.backup.dialogs.download.title"
-            )}
-          </span>
-        </ha-dialog-header>
-
-        <div slot="content">
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.backup.dialogs.download.description"
-            )}
-          </p>
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.backup.dialogs.download.download_backup_encrypted",
-              {
-                download_it_encrypted: html`<button
-                  class="link"
-                  @click=${this._downloadEncrypted}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.backup.dialogs.download.download_it_encrypted"
-                  )}
-                </button>`,
-              }
-            )}
-          </p>
-
-          <ha-password-field
-            .label=${this.hass.localize(
-              "ui.panel.config.backup.dialogs.download.encryption_key"
-            )}
-            @input=${this._keyChanged}
-          ></ha-password-field>
-
-          ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : nothing}
-        </div>
-        <div slot="actions">
-          <ha-button @click=${this._cancel}>
-            ${this.hass.localize("ui.dialogs.generic.cancel")}
-          </ha-button>
-
-          <ha-button @click=${this._submit}>
-            ${this.hass.localize(
-              "ui.panel.config.backup.dialogs.download.download"
-            )}
-          </ha-button>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private _cancel() {
-    this.closeDialog();
-  }
-
-  private async _submit() {
-    if (this._encryptionKey === "") {
-      return;
-    }
-    try {
-      await canDecryptBackupOnDownload(
-        this.hass,
-        this._params!.backup.backup_id,
-        this._agentId,
-        this._encryptionKey
-      );
-      downloadBackupFile(
-        this.hass,
-        this._params!.backup.backup_id,
-        this._agentId,
-        this._encryptionKey
-      );
-      this.closeDialog();
-    } catch (err: any) {
-      if (err?.code === "password_incorrect") {
-        this._error = this.hass.localize(
-          "ui.panel.config.backup.dialogs.download.incorrect_encryption_key"
-        );
-      } else if (err?.code === "decrypt_not_supported") {
-        this._error = this.hass.localize(
-          "ui.panel.config.backup.dialogs.download.decryption_not_supported"
-        );
-      } else {
-        alert(err.message);
-      }
-    }
-  }
-
-  private _keyChanged(ev) {
-    this._encryptionKey = ev.currentTarget.value;
-    this._error = "";
-  }
-
-  private get _agentId() {
-    if (this._params?.agentId) {
-      return this._params.agentId;
-    }
-    return getPreferredAgentForDownload(
-      Object.keys(this._params!.backup.agents)
-    );
-  }
-
-  private async _downloadEncrypted() {
-    downloadBackupFile(
-      this.hass,
-      this._params!.backup.backup_id,
-      this._agentId
-    );
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-md-dialog {
-          --dialog-content-padding: 8px 24px;
-          max-width: 500px;
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-md-dialog {
-            max-width: none;
-          }
-          div[slot="content"] {
-            margin-top: 0;
-          }
-        }
-
-        button.link {
-          background: none;
-          border: none;
-          padding: 0;
-          font-size: 14px;
-          color: var(--primary-color);
-          text-decoration: underline;
-          cursor: pointer;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-download-decrypted-backup": DialogDownloadDecryptedBackup;
-  }
-}

src/panels/config/backup/dialogs/show-dialog-download-decrypted-backup.ts

@@ -1,21 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-import type { BackupContent } from "../../../../data/backup";
-
-export interface DownloadDecryptedBackupDialogParams {
-  backup: BackupContent;
-  agentId?: string;
-}
-
-export const loadDownloadDecryptedBackupDialog = () =>
-  import("./dialog-download-decrypted-backup");
-
-export const showDownloadDecryptedBackupDialog = (
-  element: HTMLElement,
-  params: DownloadDecryptedBackupDialogParams
-) => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-download-decrypted-backup",
-    dialogImport: loadDownloadDecryptedBackupDialog,
-    dialogParams: params,
-  });
-};

src/panels/config/backup/ha-config-backup-backups.ts

@@ -11,7 +11,6 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event";
@@ -43,11 +42,9 @@ import {
   compareAgents,
   computeBackupAgentName,
   computeBackupSize,
-  computeBackupType,
   deleteBackup,
   generateBackup,
   generateBackupWithAutomaticSettings,
-  getBackupTypes,
   isLocalAgent,
   isNetworkMountAgent,
 } from "../../../data/backup";
@@ -77,6 +74,10 @@ interface BackupRow extends DataTableRowData, BackupContent {
   agent_ids: string[];
 }
 
+type BackupType = "automatic" | "manual";
+
+const TYPE_ORDER: BackupType[] = ["automatic", "manual"];
+
 @customElement("ha-config-backup-backups")
 class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -140,10 +141,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   };
 
   private _columns = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      maxDisplayedAgents: number
-    ): DataTableColumnContainer<BackupRow> => ({
+    (localize: LocalizeFunc): DataTableColumnContainer<BackupRow> => ({
       name: {
         title: localize("ui.panel.config.backup.name"),
         main: true,
@@ -174,75 +172,54 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
       locations: {
         title: localize("ui.panel.config.backup.locations"),
         showNarrow: true,
-        // 24 icon size, 4 gap, 16 left and right padding
-        minWidth: `${maxDisplayedAgents * 24 + (maxDisplayedAgents - 1) * 4 + 32}px`,
-        template: (backup) => {
-          const agentIds = backup.agent_ids;
-          const displayedAgentIds =
-            agentIds.length > maxDisplayedAgents
-              ? [...agentIds].splice(0, maxDisplayedAgents - 1)
-              : agentIds;
-          const agentsMore = Math.max(
-            agentIds.length - displayedAgentIds.length,
-            0
-          );
-          return html`
-            <div style="display: flex; gap: 4px;">
-              ${displayedAgentIds.map((agentId) => {
-                const name = computeBackupAgentName(
-                  this.hass.localize,
-                  agentId,
-                  this.agents
-                );
-                if (isLocalAgent(agentId)) {
-                  return html`
-                    <ha-svg-icon
-                      .path=${mdiHarddisk}
-                      title=${name}
-                      style="flex-shrink: 0;"
-                    ></ha-svg-icon>
-                  `;
-                }
-                if (isNetworkMountAgent(agentId)) {
-                  return html`
-                    <ha-svg-icon
-                      .path=${mdiNas}
-                      title=${name}
-                      style="flex-shrink: 0;"
-                    ></ha-svg-icon>
-                  `;
-                }
-                const domain = computeDomain(agentId);
+        minWidth: "60px",
+        template: (backup) => html`
+          <div style="display: flex; gap: 4px;">
+            ${(backup.agent_ids || []).map((agentId) => {
+              const name = computeBackupAgentName(
+                this.hass.localize,
+                agentId,
+                this.agents
+              );
+              if (isLocalAgent(agentId)) {
                 return html`
-                  <img
+                  <ha-svg-icon
+                    .path=${mdiHarddisk}
                     title=${name}
-                    .src=${brandsUrl({
-                      domain,
-                      type: "icon",
-                      useFallback: true,
-                      darkOptimized: this.hass.themes?.darkMode,
-                    })}
-                    height="24"
-                    crossorigin="anonymous"
-                    referrerpolicy="no-referrer"
-                    alt=${name}
-                    slot="graphic"
                     style="flex-shrink: 0;"
-                  />
+                  ></ha-svg-icon>
                 `;
-              })}
-              ${agentsMore
-                ? html`
-                    <span
-                      style="display: flex; align-items: center; font-size: 14px;"
-                    >
-                      +${agentsMore}
-                    </span>
-                  `
-                : nothing}
-            </div>
-          `;
-        },
+              }
+              if (isNetworkMountAgent(agentId)) {
+                return html`
+                  <ha-svg-icon
+                    .path=${mdiNas}
+                    title=${name}
+                    style="flex-shrink: 0;"
+                  ></ha-svg-icon>
+                `;
+              }
+              const domain = computeDomain(agentId);
+              return html`
+                <img
+                  title=${name}
+                  .src=${brandsUrl({
+                    domain,
+                    type: "icon",
+                    useFallback: true,
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  height="24"
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  alt=${name}
+                  slot="graphic"
+                  style="flex-shrink: 0;"
+                />
+              `;
+            })}
+          </div>
+        `,
       },
       actions: {
         title: "",
@@ -276,13 +253,9 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   );
 
   private _groupOrder = memoizeOne(
-    (
-      activeGrouping: string | undefined,
-      localize: LocalizeFunc,
-      isHassio: boolean
-    ) =>
+    (activeGrouping: string | undefined, localize: LocalizeFunc) =>
       activeGrouping === "formatted_type"
-        ? getBackupTypes(isHassio).map((type) =>
+        ? TYPE_ORDER.map((type) =>
             localize(`ui.panel.config.backup.type.${type}`)
           )
         : undefined
@@ -306,48 +279,33 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     (
       backups: BackupContent[],
       filters: DataTableFiltersValues,
-      localize: LocalizeFunc,
-      isHassio: boolean
+      localize: LocalizeFunc
     ): BackupRow[] => {
       const typeFilter = filters["ha-filter-states"] as string[] | undefined;
       let filteredBackups = backups;
       if (typeFilter?.length) {
-        filteredBackups = filteredBackups.filter((backup) => {
-          const type = computeBackupType(backup, isHassio);
-          return typeFilter.includes(type);
-        });
+        filteredBackups = filteredBackups.filter(
+          (backup) =>
+            (backup.with_automatic_settings &&
+              typeFilter.includes("automatic")) ||
+            (!backup.with_automatic_settings && typeFilter.includes("manual"))
+        );
       }
       return filteredBackups.map((backup) => {
-        const type = computeBackupType(backup, isHassio);
-        const agentIds = Object.keys(backup.agents);
+        const type = backup.with_automatic_settings ? "automatic" : "manual";
         return {
           ...backup,
           size: computeBackupSize(backup),
-          agent_ids: agentIds.sort(compareAgents),
+          agent_ids: Object.keys(backup.agents).sort(compareAgents),
           formatted_type: localize(`ui.panel.config.backup.type.${type}`),
         };
       });
     }
   );
 
-  private _maxAgents = memoizeOne((data: BackupRow[]): number =>
-    Math.max(...data.map((row) => row.agent_ids.length))
-  );
-
   protected render(): TemplateResult {
     const backupInProgress =
       "state" in this.manager && this.manager.state === "in_progress";
-    const isHassio = isComponentLoaded(this.hass, "hassio");
-    const data = this._data(
-      this.backups,
-      this._filters,
-      this.hass.localize,
-      isHassio
-    );
-    const maxDisplayedAgents = Math.min(
-      this._maxAgents(data),
-      this.narrow ? 3 : 5
-    );
 
     return html`
       <hass-tabs-subpage-data-table
@@ -378,16 +336,15 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         .initialCollapsedGroups=${this._activeCollapsed}
         .groupOrder=${this._groupOrder(
           this._activeGrouping,
-          this.hass.localize,
-          isHassio
+          this.hass.localize
         )}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
         @selection-changed=${this._handleSelectionChanged}
         .route=${this.route}
         @row-click=${this._showBackupDetails}
-        .columns=${this._columns(this.hass.localize, maxDisplayedAgents)}
-        .data=${data}
+        .columns=${this._columns(this.hass.localize)}
+        .data=${this._data(this.backups, this._filters, this.hass.localize)}
         .noDataText=${this.hass.localize("ui.panel.config.backup.no_backups")}
         .searchLabel=${this.hass.localize(
           "ui.panel.config.backup.picker.search"
@@ -443,7 +400,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           .hass=${this.hass}
           .label=${this.hass.localize("ui.panel.config.backup.backup_type")}
           .value=${this._filters["ha-filter-states"]}
-          .states=${this._states(this.hass.localize, isHassio)}
+          .states=${this._states(this.hass.localize)}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           expanded
@@ -468,8 +425,8 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _states = memoizeOne((localize: LocalizeFunc, isHassio: boolean) =>
-    getBackupTypes(isHassio).map((type) => ({
+  private _states = memoizeOne((localize: LocalizeFunc) =>
+    TYPE_ORDER.map((type) => ({
       value: type,
       label: localize(`ui.panel.config.backup.type.${type}`),
     }))
@@ -539,7 +496,12 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   }
 
   private async _downloadBackup(backup: BackupContent): Promise<void> {
-    downloadBackup(this.hass, this, backup, this.config);
+    downloadBackup(
+      this.hass,
+      this,
+      backup,
+      this.config?.create_backup.password
+    );
   }
 
   private async _deleteBackup(backup: BackupContent): Promise<void> {

src/panels/config/backup/ha-config-backup-details.ts

@@ -31,7 +31,6 @@ import {
   compareAgents,
   computeBackupAgentName,
   computeBackupSize,
-  computeBackupType,
   deleteBackup,
   fetchBackupDetails,
   isLocalAgent,
@@ -47,7 +46,6 @@ import { showRestoreBackupDialog } from "./dialogs/show-dialog-restore-backup";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { downloadBackup } from "./helper/download_backup";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 
 interface Agent extends BackupContentAgent {
   id: string;
@@ -112,8 +110,6 @@ class HaConfigBackupDetails extends LitElement {
       return nothing;
     }
 
-    const isHassio = isComponentLoaded(this.hass, "hassio");
-
     return html`
       <hass-subpage
         back-path="/config/backup/backups"
@@ -165,18 +161,6 @@ class HaConfigBackupDetails extends LitElement {
                     </div>
                     <div class="card-content">
                       <ha-md-list class="summary">
-                        <ha-md-list-item>
-                          <span slot="headline">
-                            ${this.hass.localize(
-                              "ui.panel.config.backup.backup_type"
-                            )}
-                          </span>
-                          <span slot="supporting-text">
-                            ${this.hass.localize(
-                              `ui.panel.config.backup.type.${computeBackupType(this._backup, isHassio)}`
-                            )}
-                          </span>
-                        </ha-md-list-item>
                         <ha-md-list-item>
                           <span slot="headline">
                             ${this.hass.localize(
@@ -417,7 +401,13 @@ class HaConfigBackupDetails extends LitElement {
   }
 
   private async _downloadBackup(agentId?: string): Promise<void> {
-    await downloadBackup(this.hass, this, this._backup!, this.config, agentId);
+    await downloadBackup(
+      this.hass,
+      this,
+      this._backup!,
+      this.config?.create_backup.password,
+      agentId
+    );
   }
 
   private async _deleteBackup(): Promise<void> {

src/panels/config/backup/ha-config-backup-overview.ts

@@ -221,7 +221,8 @@ class HaConfigBackupOverview extends LitElement {
           gap: 24px;
           display: flex;
           flex-direction: column;
-          margin-bottom: calc(env(safe-area-inset-bottom) + 72px);
+          margin-bottom: 24px;
+          margin-bottom: 72px;
         }
         .card-actions {
           display: flex;

src/panels/config/backup/ha-config-backup-settings.ts

@@ -50,11 +50,9 @@ class HaConfigBackupSettings extends LitElement {
     }
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
     this._scrollToSection();
-    // Update config the page is displayed (e.g. when coming back from a location detail page)
-    this._config = this.config;
   }
 
   private async _scrollToSection() {

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

@@ -119,7 +119,6 @@ class HaConfigBackup extends SubscribeMixin(HassRouterPage) {
       settings: {
         tag: "ha-config-backup-settings",
         load: () => import("./ha-config-backup-settings"),
-        cache: true,
       },
       location: {
         tag: "ha-config-backup-location",

src/panels/config/backup/helper/download_backup.ts

@@ -1,17 +1,20 @@
 import type { LitElement } from "lit";
-import { getSignedPath } from "../../../../data/auth";
-import type { BackupConfig, BackupContent } from "../../../../data/backup";
 import {
   canDecryptBackupOnDownload,
   getBackupDownloadUrl,
   getPreferredAgentForDownload,
+  type BackupContent,
 } from "../../../../data/backup";
 import type { HomeAssistant } from "../../../../types";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+  showPromptDialog,
+} from "../../../lovelace/custom-card-helpers";
+import { getSignedPath } from "../../../../data/auth";
 import { fileDownload } from "../../../../util/file_download";
-import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
-import { showDownloadDecryptedBackupDialog } from "../dialogs/show-dialog-download-decrypted-backup";
 
-export const downloadBackupFile = async (
+const triggerDownload = async (
   hass: HomeAssistant,
   backupId: string,
   preferedAgent: string,
@@ -24,80 +27,120 @@ export const downloadBackupFile = async (
   fileDownload(signedUrl.path);
 };
 
+const downloadEncryptedBackup = async (
+  hass: HomeAssistant,
+  element: LitElement,
+  backup: BackupContent,
+  agentId?: string
+) => {
+  if (
+    await showConfirmationDialog(element, {
+      title: "Encryption key incorrect",
+      text: hass.localize(
+        "ui.panel.config.backup.dialogs.download.incorrect_entered_encryption_key"
+      ),
+      confirmText: "Download encrypted",
+    })
+  ) {
+    const agentIds = Object.keys(backup.agents);
+    const preferedAgent = agentId ?? getPreferredAgentForDownload(agentIds);
+
+    triggerDownload(hass, backup.backup_id, preferedAgent);
+  }
+};
+
+const requestEncryptionKey = async (
+  hass: HomeAssistant,
+  element: LitElement,
+  backup: BackupContent,
+  agentId?: string
+): Promise<void> => {
+  const encryptionKey = await showPromptDialog(element, {
+    title: hass.localize(
+      "ui.panel.config.backup.dialogs.show_encryption_key.title"
+    ),
+    text: hass.localize(
+      "ui.panel.config.backup.dialogs.download.incorrect_current_encryption_key"
+    ),
+    inputLabel: hass.localize(
+      "ui.panel.config.backup.dialogs.show_encryption_key.title"
+    ),
+    inputType: "password",
+    confirmText: hass.localize("ui.common.download"),
+  });
+  if (encryptionKey === null) {
+    return;
+  }
+  downloadBackup(hass, element, backup, encryptionKey, agentId, true);
+};
+
 export const downloadBackup = async (
   hass: HomeAssistant,
   element: LitElement,
   backup: BackupContent,
-  backupConfig?: BackupConfig,
-  agentId?: string
+  encryptionKey?: string | null,
+  agentId?: string,
+  userProvided = false
 ): Promise<void> => {
   const agentIds = Object.keys(backup.agents);
   const preferedAgent = agentId ?? getPreferredAgentForDownload(agentIds);
   const isProtected = backup.agents[preferedAgent]?.protected;
 
-  if (!isProtected) {
-    downloadBackupFile(hass, backup.backup_id, preferedAgent);
-    return;
-  }
+  if (isProtected) {
+    if (encryptionKey) {
+      try {
+        await canDecryptBackupOnDownload(
+          hass,
+          backup.backup_id,
+          preferedAgent,
+          encryptionKey
+        );
+      } catch (err: any) {
+        if (err?.code === "password_incorrect") {
+          if (userProvided) {
+            downloadEncryptedBackup(hass, element, backup, agentId);
+          } else {
+            requestEncryptionKey(hass, element, backup, agentId);
+          }
+          return;
+        }
+        if (err?.code === "decrypt_not_supported") {
+          showAlertDialog(element, {
+            title: hass.localize(
+              "ui.panel.config.backup.dialogs.download.decryption_unsupported_title"
+            ),
+            text: hass.localize(
+              "ui.panel.config.backup.dialogs.download.decryption_unsupported"
+            ),
+            confirm() {
+              triggerDownload(hass, backup.backup_id, preferedAgent);
+            },
+          });
+          encryptionKey = undefined;
+          return;
+        }
 
-  const encryptionKey = backupConfig?.create_backup?.password;
-
-  if (!encryptionKey) {
-    showDownloadDecryptedBackupDialog(element, {
-      backup,
-      agentId: preferedAgent,
-    });
-    return;
-  }
-
-  try {
-    // Check if we can decrypt it
-    await canDecryptBackupOnDownload(
-      hass,
-      backup.backup_id,
-      preferedAgent,
-      encryptionKey
-    );
-    downloadBackupFile(hass, backup.backup_id, preferedAgent, encryptionKey);
-  } catch (err: any) {
-    // If encryption key is incorrect, ask for encryption key
-    if (err?.code === "password_incorrect") {
-      showDownloadDecryptedBackupDialog(element, {
-        backup,
-        agentId: preferedAgent,
-      });
+        showAlertDialog(element, {
+          title: hass.localize(
+            "ui.panel.config.backup.dialogs.download.error_check_title",
+            {
+              error: err.message,
+            }
+          ),
+          text: hass.localize(
+            "ui.panel.config.backup.dialogs.download.error_check_description",
+            {
+              error: err.message,
+            }
+          ),
+        });
+        return;
+      }
+    } else {
+      requestEncryptionKey(hass, element, backup, agentId);
       return;
     }
-    // If decryption is not supported, ask for confirmation and download it encrypted
-    if (err?.code === "decrypt_not_supported") {
-      showAlertDialog(element, {
-        title: hass.localize(
-          "ui.panel.config.backup.dialogs.download.decryption_unsupported_title"
-        ),
-        text: hass.localize(
-          "ui.panel.config.backup.dialogs.download.decryption_unsupported"
-        ),
-        confirm() {
-          downloadBackupFile(hass, backup.backup_id, preferedAgent);
-        },
-      });
-      return;
-    }
-
-    // Else, show generic error
-    showAlertDialog(element, {
-      title: hass.localize(
-        "ui.panel.config.backup.dialogs.download.error_check_title",
-        {
-          error: err.message,
-        }
-      ),
-      text: hass.localize(
-        "ui.panel.config.backup.dialogs.download.error_check_description",
-        {
-          error: err.message,
-        }
-      ),
-    });
   }
+
+  await triggerDownload(hass, backup.backup_id, preferedAgent, encryptionKey);
 };

src/panels/config/cloud/account/cloud-account.ts

@@ -1,15 +1,15 @@
 import "@material/mwc-button";
-import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-list-item";
 import "../../../../components/ha-tip";
+import "../../../../components/ha-list-item";
+import "../../../../components/ha-button-menu";
 import type {
   CloudStatusLoggedIn,
   SubscriptionInfo,
@@ -32,7 +32,6 @@ import "./cloud-ice-servers-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
-import { showSupportPackageDialog } from "./show-dialog-cloud-support-package";
 
 @customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -53,7 +52,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-button-menu slot="toolbar-icon" @action=${this._deleteCloudData}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -66,12 +65,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             )}
             <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
           </ha-list-item>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.download_support_package"
-            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
         </ha-button-menu>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
@@ -293,16 +286,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     fireEvent(this, "ha-refresh-cloud-status");
   }
 
-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
-        this._deleteCloudData();
-        break;
-      case 1:
-        this._downloadSupportPackage();
-    }
-  }
-
   private async _deleteCloudData() {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -333,10 +316,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _downloadSupportPackage() {
-    showSupportPackageDialog(this);
-  }
-
   static get styles() {
     return [
       haStyle,

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -1,206 +0,0 @@
-import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import { mdiClose } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
-import "../../../../components/ha-circular-progress";
-import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-markdown-element";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
-import "../../../../components/ha-select";
-import "../../../../components/ha-textarea";
-import { fetchSupportPackage } from "../../../../data/cloud";
-import type { HomeAssistant } from "../../../../types";
-import { fileDownload } from "../../../../util/file_download";
-
-@customElement("dialog-cloud-support-package")
-export class DialogSupportPackage extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _open = false;
-
-  @state() private _supportPackage?: string;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public showDialog() {
-    this._open = true;
-    this._loadSupportPackage();
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
-    this._supportPackage = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
-  protected render() {
-    if (!this._open) {
-      return nothing;
-    }
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title">Download support package</span>
-        </ha-dialog-header>
-
-        <div slot="content">
-          ${this._supportPackage
-            ? html`<ha-markdown-element
-                .content=${this._supportPackage}
-                breaks
-              ></ha-markdown-element>`
-            : html`
-                <div class="progress-container">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
-                  Generating preview...
-                </div>
-              `}
-        </div>
-        <div class="footer" slot="actions">
-          <ha-alert>
-            This file may contain personal data about your home. Avoid sharing
-            them with unverified or untrusted parties.
-          </ha-alert>
-          <hr />
-          <div class="actions">
-            <ha-button @click=${this.closeDialog}>Close</ha-button>
-            <ha-button @click=${this._download}>Download</ha-button>
-          </div>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private async _loadSupportPackage() {
-    this._supportPackage = await fetchSupportPackage(this.hass);
-  }
-
-  private async _download() {
-    fileDownload(
-      "data:text/plain;charset=utf-8," +
-        encodeURIComponent(this._supportPackage || ""),
-      "support-package.md"
-    );
-  }
-
-  static styles = css`
-    ha-md-dialog {
-      min-width: 90vw;
-      min-height: 90vh;
-    }
-
-    .progress-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: calc(90vh - 260px);
-      width: 100%;
-    }
-
-    @media all and (max-width: 450px), all and (max-height: 500px) {
-      ha-md-dialog {
-        min-width: 100vw;
-        min-height: 100vh;
-      }
-      .progress-container {
-        height: calc(100vh - 260px);
-      }
-    }
-
-    .footer {
-      flex-direction: column;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      justify-content: flex-end;
-    }
-    hr {
-      border: none;
-      border-top: 1px solid var(--divider-color);
-      width: calc(100% + 48px);
-      margin-right: -24px;
-      margin-left: -24px;
-    }
-    table,
-    th,
-    td {
-      border: none;
-    }
-
-    table {
-      width: 100%;
-      display: table;
-      border-collapse: collapse;
-      border-spacing: 0;
-    }
-
-    table tr {
-      border-bottom: none;
-    }
-
-    table > tbody > tr:nth-child(odd) {
-      background-color: rgba(var(--rgb-primary-text-color), 0.04);
-    }
-
-    table > tbody > tr > td {
-      border-radius: 0;
-    }
-
-    table > tbody > tr {
-      -webkit-transition: background-color 0.25s ease;
-      transition: background-color 0.25s ease;
-    }
-
-    table > tbody > tr:hover {
-      background-color: rgba(var(--rgb-primary-text-color), 0.08);
-    }
-
-    tr {
-      border-bottom: 1px solid var(--divider-color);
-    }
-
-    td,
-    th {
-      padding: 15px 5px;
-      display: table-cell;
-      text-align: left;
-      vertical-align: middle;
-      border-radius: 2px;
-    }
-    details {
-      background-color: var(--secondary-background-color);
-      padding: 16px 24px;
-      margin: 8px 0;
-      border: 1px solid var(--divider-color);
-      border-radius: 16px;
-    }
-    summary {
-      font-weight: bold;
-      cursor: pointer;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-cloud-support-package": DialogSupportPackage;
-  }
-}

src/panels/config/cloud/account/show-dialog-cloud-support-package.ts

@@ -1,12 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-
-export const loadSupportPackageDialog = () =>
-  import("./dialog-cloud-support-package");
-
-export const showSupportPackageDialog = (element: HTMLElement): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-cloud-support-package",
-    dialogImport: loadSupportPackageDialog,
-    dialogParams: {},
-  });
-};

src/panels/config/cloud/login/cloud-login.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list";
-import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
+import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -27,7 +27,6 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
-import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
 
 @customElement("cloud-login")
 export class CloudLogin extends LitElement {
@@ -58,7 +57,7 @@ export class CloudLogin extends LitElement {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-button-menu slot="toolbar-icon" @action=${this._deleteCloudData}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -71,12 +70,6 @@ export class CloudLogin extends LitElement {
             )}
             <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
           </ha-list-item>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.download_support_package"
-            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
         </ha-button-menu>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
@@ -355,16 +348,6 @@ export class CloudLogin extends LitElement {
     fireEvent(this, "flash-message-changed", { value: "" });
   }
 
-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
-        this._deleteCloudData();
-        break;
-      case 1:
-        this._downloadSupportPackage();
-    }
-  }
-
   private async _deleteCloudData() {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -394,10 +377,6 @@ export class CloudLogin extends LitElement {
     }
   }
 
-  private async _downloadSupportPackage() {
-    showSupportPackageDialog(this);
-  }
-
   static get styles() {
     return [
       haStyle,

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

@@ -66,18 +66,6 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
           rel="noreferrer"
           >${hass.localize("ui.panel.config.tips.join_x")}</a
         >`,
-        mastodon: html`<a
-          href=${documentationUrl(hass, `/mastodon`)}
-          target="_blank"
-          rel="noreferrer"
-          >${hass.localize("ui.panel.config.tips.join_mastodon")}</a
-        >`,
-        bluesky: html`<a
-          href=${documentationUrl(hass, `/bluesky`)}
-          target="_blank"
-          rel="noreferrer"
-          >${hass.localize("ui.panel.config.tips.join_bluesky")}</a
-        >`,
         discord: html`<a
           href=${documentationUrl(hass, `/join-chat`)}
           target="_blank"

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

@@ -1073,14 +1073,7 @@ export class HaConfigDevicePage extends LitElement {
       (ent) => computeDomain(ent.entity_id) === "assist_satellite"
     );
 
-    const domains = this._integrations(
-      device,
-      this.entries,
-      this.manifests
-    ).map((int) => int.domain);
-
     if (
-      !domains.includes("voip") &&
       assistSatellite &&
       assistSatelliteSupportsSetupFlow(
         this.hass.states[assistSatellite.entity_id]
@@ -1095,6 +1088,12 @@ export class HaConfigDevicePage extends LitElement {
       });
     }
 
+    const domains = this._integrations(
+      device,
+      this.entries,
+      this.manifests
+    ).map((int) => int.domain);
+
     if (domains.includes("mqtt")) {
       const mqtt = await import(
         "./device-detail/integration-elements/mqtt/device-actions"

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

@@ -626,7 +626,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+            @click=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -637,7 +637,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -645,7 +645,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+      <ha-md-menu-item @click=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -684,7 +684,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+      <ha-md-menu-item @click=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -969,10 +969,10 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
+  private async _handleBulkArea(ev) {
+    const area = ev.currentTarget.value;
     this._bulkAddArea(area);
-  };
+  }
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<DeviceRegistryEntry>[] = [];
@@ -999,7 +999,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateArea = () => {
+  private async _bulkCreateArea() {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1007,7 +1007,7 @@ ${rejected
         return area;
       },
     });
-  };
+  }
 
   private async _handleBulkLabel(ev) {
     const label = ev.currentTarget.value;
@@ -1045,7 +1045,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateLabel = () => {
+  private _bulkCreateLabel() {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1053,7 +1053,7 @@ ${rejected
         return label;
       },
     });
-  };
+  }
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

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

@@ -39,6 +39,7 @@ import { hardwareBrandsUrl } from "../../../util/brands-url";
 import { showhardwareAvailableDialog } from "./show-dialog-hardware-available";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type { ECOption } from "../../../resources/echarts";
+import { getTimeAxisLabelConfig } from "../../../components/chart/axis-label";
 
 const DATASAMPLES = 60;
 
@@ -152,6 +153,13 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
       this._chartOptions = {
         xAxis: {
           type: "time",
+          axisLabel: getTimeAxisLabelConfig(this.hass.locale, this.hass.config),
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
         },
         yAxis: {
           type: "value",

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

@@ -561,7 +561,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+            @click=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -569,7 +569,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
@@ -577,7 +577,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+      <ha-md-menu-item @click=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -612,7 +612,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           </ha-label>
         </ha-md-menu-item> `;
       })}<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+      <ha-md-menu-item @click=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div>
@@ -958,10 +958,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
+  private async _handleBulkCategory(ev) {
+    const category = ev.currentTarget.value;
     this._bulkAddCategory(category);
-  };
+  }
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1234,7 +1234,7 @@ ${rejected
     showHelperDetailDialog(this, {});
   }
 
-  private _bulkCreateCategory = () => {
+  private async _bulkCreateCategory() {
     showCategoryRegistryDetailDialog(this, {
       scope: "helpers",
       createEntry: async (values) => {
@@ -1247,9 +1247,9 @@ ${rejected
         return category;
       },
     });
-  };
+  }
 
-  private _bulkCreateLabel = () => {
+  private _bulkCreateLabel() {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1257,7 +1257,7 @@ ${rejected
         return label;
       },
     });
-  };
+  }
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

src/panels/config/integrations/dialog-add-integration.ts

@@ -21,7 +21,6 @@ import type { LocalizeFunc } from "../../../common/translations/localize";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/search-input";
-import { getConfigEntries } from "../../../data/config_entries";
 import { fetchConfigFlowInProgress } from "../../../data/config_flow";
 import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
 import {
@@ -50,6 +49,9 @@ import "./ha-domain-integrations";
 import "./ha-integration-list-item";
 import type { AddIntegrationDialogParams } from "./show-add-integration-dialog";
 import { showYamlIntegrationDialog } from "./show-add-integration-dialog";
+import { getConfigEntries } from "../../../data/config_entries";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 
 export interface IntegrationListItem {
   name: string;
@@ -254,7 +256,7 @@ class AddIntegrationDialog extends LitElement {
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
-          ignoreDiacritics: true,
+          getFn: getStripDiacriticsFn,
         };
         const helpers = Object.entries(h).map(([domain, integration]) => ({
           domain,
@@ -264,15 +266,16 @@ class AddIntegrationDialog extends LitElement {
           is_built_in: integration.is_built_in !== false,
           cloud: integration.iot_class?.startsWith("cloud_"),
         }));
+        const normalizedFilter = stripDiacritics(filter);
         return [
           ...new Fuse(integrations, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
           ...new Fuse(yamlIntegrations, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
           ...new Fuse(helpers, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
         ];
       }

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

@@ -15,6 +15,7 @@ import {
 } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
@@ -31,7 +32,6 @@ import { getConfigFlowInProgressCollection } from "../../../data/config_flow";
 import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import { subscribeEntityRegistry } from "../../../data/entity_registry";
-import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
 import type {
   IntegrationLogInfo,
   IntegrationManifest,
@@ -52,13 +52,12 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import type { ImprovDiscoveredDevice } from "../../../external_app/external_messaging";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
-import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 import { configSections } from "../ha-panel-config";
 import { isHelperDomain } from "../helpers/const";
 import "./ha-config-flow-card";
@@ -69,6 +68,9 @@ import "./ha-integration-card";
 import type { HaIntegrationCard } from "./ha-integration-card";
 import "./ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
+import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
+import type { ImprovDiscoveredDevice } from "../../../external_app/external_messaging";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 
 export interface ConfigEntryExtended extends Omit<ConfigEntry, "entry_id"> {
   entry_id?: string;
@@ -302,10 +304,12 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
-          ignoreDiacritics: true,
+          getFn: getStripDiacriticsFn,
         };
         const fuse = new Fuse(inProgress, options);
-        filteredEntries = fuse.search(filter).map((result) => result.item);
+        filteredEntries = fuse
+          .search(stripDiacritics(filter))
+          .map((result) => result.item);
       } else {
         filteredEntries = inProgress;
       }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -1,9 +1,8 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { storage } from "../../../../../common/decorators/storage";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type {
@@ -12,6 +11,9 @@ import type {
 } from "../../../../../components/data-table/ha-data-table";
 import "../../../../../components/ha-fab";
 import "../../../../../components/ha-icon-button";
+import "../../../../../layouts/hass-tabs-subpage-data-table";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
 import type {
   BluetoothDeviceData,
   BluetoothScannersDetails,
@@ -20,10 +22,6 @@ import {
   subscribeBluetoothAdvertisements,
   subscribeBluetoothScannersDetails,
 } from "../../../../../data/bluetooth";
-import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
-import "../../../../../layouts/hass-tabs-subpage-data-table";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
 import { showBluetoothDeviceInfoDialog } from "./show-dialog-bluetooth-device-info";
 
 @customElement("bluetooth-advertisement-monitor")
@@ -40,22 +38,6 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
 
   @state() private _scanners: BluetoothScannersDetails = {};
 
-  @state() private _sourceDevices: Record<string, DeviceRegistryEntry> = {};
-
-  @storage({
-    key: "bluetooth-advertisement-table-grouping",
-    state: false,
-    subscribe: false,
-  })
-  private _activeGrouping?: string = "source";
-
-  @storage({
-    key: "bluetooth-advertisement-table-collapsed",
-    state: false,
-    subscribe: false,
-  })
-  private _activeCollapsed: string[] = [];
-
   private _unsub_advertisements?: UnsubscribeFunc;
 
   private _unsub_scanners?: UnsubscribeFunc;
@@ -75,19 +57,6 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
           this._scanners = scanners;
         }
       );
-
-      const devices = Object.values(this.hass.devices);
-      const bluetoothDevices = devices.filter((device) =>
-        device.connections.find((connection) => connection[0] === "bluetooth")
-      );
-      this._sourceDevices = Object.fromEntries(
-        bluetoothDevices.map((device) => {
-          const connection = device.connections.find(
-            (c) => c[0] === "bluetooth"
-          )!;
-          return [connection[1], device];
-        })
-      );
     }
   }
 
@@ -122,28 +91,14 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
           filterable: true,
           sortable: true,
         },
-        device: {
-          title: localize("ui.panel.config.bluetooth.device"),
-          filterable: true,
-          sortable: true,
-          template: (data) => html`${data.device || "-"}`,
-        },
         source: {
           title: localize("ui.panel.config.bluetooth.source"),
           filterable: true,
           sortable: true,
-          groupable: true,
-        },
-        source_address: {
-          title: localize("ui.panel.config.bluetooth.source_address"),
-          filterable: true,
-          sortable: true,
-          defaultHidden: true,
         },
         rssi: {
           title: localize("ui.panel.config.bluetooth.rssi"),
           type: "numeric",
-          maxWidth: "60px",
           sortable: true,
         },
       };
@@ -153,22 +108,11 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
   );
 
   private _dataWithNamedSourceAndIds = memoizeOne((data) =>
-    data.map((row) => {
-      const device = this._sourceDevices[row.address];
-      const scannerDevice = this._sourceDevices[row.source];
-      const scanner = this._scanners[row.source];
-      return {
-        ...row,
-        id: row.address,
-        source_address: row.source,
-        source:
-          scannerDevice?.name_by_user ||
-          scannerDevice?.name ||
-          scanner?.name ||
-          row.source,
-        device: device?.name_by_user || device?.name || undefined,
-      };
-    })
+    data.map((row) => ({
+      ...row,
+      id: row.address,
+      source: this._scanners[row.source]?.name || row.source,
+    }))
   );
 
   protected render(): TemplateResult {
@@ -180,23 +124,11 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
         .columns=${this._columns(this.hass.localize)}
         .data=${this._dataWithNamedSourceAndIds(this._data)}
         @row-click=${this._handleRowClicked}
-        .initialGroupColumn=${this._activeGrouping}
-        .initialCollapsedGroups=${this._activeCollapsed}
-        @grouping-changed=${this._handleGroupingChanged}
-        @collapsed-changed=${this._handleCollapseChanged}
         clickable
       ></hass-tabs-subpage-data-table>
     `;
   }
 
-  private _handleGroupingChanged(ev: CustomEvent) {
-    this._activeGrouping = ev.detail.value;
-  }
-
-  private _handleCollapseChanged(ev: CustomEvent) {
-    this._activeCollapsed = ev.detail.value;
-  }
-
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const entry = this._data.find((ent) => ent.address === ev.detail.id);
     showBluetoothDeviceInfoDialog(this, {

src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts

@@ -53,6 +53,8 @@ class DialogBluetoothDeviceInfo extends LitElement implements HassDialog {
     return html`
       <ha-dialog
         open
+        scrimClickAction
+        escapeKeyAction
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,

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

@@ -420,7 +420,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+            @click=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -428,7 +428,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
@@ -436,7 +436,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+      <ha-md-menu-item @click=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -473,7 +473,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+      <ha-md-menu-item @click=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -483,7 +483,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+            @click=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -494,7 +494,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -502,7 +502,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+      <ha-md-menu-item @click=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -932,10 +932,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
+  private async _handleBulkCategory(ev) {
+    const category = ev.currentTarget.value;
     this._bulkAddCategory(category);
-  };
+  }
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -998,10 +998,10 @@ ${rejected
     }
   }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
+  private async _handleBulkArea(ev) {
+    const area = ev.currentTarget.value;
     this._bulkAddArea(area);
-  };
+  }
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1028,7 +1028,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateArea = () => {
+  private async _bulkCreateArea() {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1036,7 +1036,7 @@ ${rejected
         return area;
       },
     });
-  };
+  }
 
   private _editCategory(scene: any) {
     const entityReg = this._entityReg.find(
@@ -1133,7 +1133,7 @@ ${rejected
     });
   }
 
-  private _bulkCreateCategory = () => {
+  private async _bulkCreateCategory() {
     showCategoryRegistryDetailDialog(this, {
       scope: "scene",
       createEntry: async (values) => {
@@ -1146,9 +1146,9 @@ ${rejected
         return category;
       },
     });
-  };
+  }
 
-  private _bulkCreateLabel = () => {
+  private _bulkCreateLabel() {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1156,7 +1156,7 @@ ${rejected
         return label;
       },
     });
-  };
+  }
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

src/panels/config/script/ha-script-picker.ts

@@ -25,7 +25,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time";
+import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -304,7 +304,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             return html`
               ${script.last_triggered
                 ? dayDifference > 3
-                  ? formatShortDateTimeWithConditionalYear(
+                  ? formatShortDateTime(
                       date,
                       this.hass.locale,
                       this.hass.config
@@ -410,7 +410,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+            @click=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -418,14 +418,14 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
           )}
         </div> </ha-md-menu-item
       ><ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+      <ha-md-menu-item @click=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -462,7 +462,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+      <ha-md-menu-item @click=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -472,7 +472,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+            @click=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -483,7 +483,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -491,7 +491,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+      <ha-md-menu-item @click=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -977,10 +977,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
+  private async _handleBulkCategory(ev) {
+    const category = ev.currentTarget.value;
     this._bulkAddCategory(category);
-  };
+  }
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1185,7 +1185,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateCategory = () => {
+  private async _bulkCreateCategory() {
     showCategoryRegistryDetailDialog(this, {
       scope: "script",
       createEntry: async (values) => {
@@ -1198,9 +1198,9 @@ ${rejected
         return category;
       },
     });
-  };
+  }
 
-  private _bulkCreateLabel = () => {
+  private _bulkCreateLabel() {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1208,12 +1208,12 @@ ${rejected
         return label;
       },
     });
-  };
+  }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
+  private async _handleBulkArea(ev) {
+    const area = ev.currentTarget.value;
     this._bulkAddArea(area);
-  };
+  }
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1240,7 +1240,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateArea = () => {
+  private async _bulkCreateArea() {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1248,7 +1248,7 @@ ${rejected
         return area;
       },
     });
-  };
+  }
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

src/panels/config/storage/dialog-mount-view.ts

@@ -1,4 +1,4 @@
-import { mdiClose, mdiHelpCircle } from "@mdi/js";
+import { mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -215,12 +215,6 @@ class ViewMountDialog extends LitElement {
         @closed=${this.closeDialog}
       >
         <ha-dialog-header slot="heading">
-          <ha-icon-button
-            slot="navigationIcon"
-            dialogAction="cancel"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
           <span slot="title"
             >${this._existing
               ? this.hass.localize(
@@ -267,34 +261,30 @@ class ViewMountDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
-
-        ${this._existing
-          ? html`<ha-button
-              @click=${this._deleteMount}
-              destructive
-              slot="secondaryAction"
-            >
-              ${this.hass.localize("ui.common.delete")}
-            </ha-button>`
-          : nothing}
-
-        <div slot="primaryAction">
-          <ha-button @click=${this.closeDialog} dialogInitialFocus>
+        <div slot="secondaryAction">
+          <mwc-button @click=${this.closeDialog} dialogInitialFocus>
             ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-progress-button
-            .progress=${this._waiting}
-            @click=${this._connectMount}
-          >
-            ${this._existing
-              ? this.hass.localize(
-                  "ui.panel.config.storage.network_mounts.update"
-                )
-              : this.hass.localize(
-                  "ui.panel.config.storage.network_mounts.connect"
-                )}
-          </ha-progress-button>
+          </mwc-button>
+          ${this._existing
+            ? html`<mwc-button @click=${this._deleteMount} class="delete-btn">
+                ${this.hass.localize("ui.common.delete")}
+              </mwc-button>`
+            : nothing}
         </div>
+
+        <ha-progress-button
+          .progress=${this._waiting}
+          slot="primaryAction"
+          @click=${this._connectMount}
+        >
+          ${this._existing
+            ? this.hass.localize(
+                "ui.panel.config.storage.network_mounts.update"
+              )
+            : this.hass.localize(
+                "ui.panel.config.storage.network_mounts.connect"
+              )}
+        </ha-progress-button>
       </ha-dialog>
     `;
   }
@@ -399,6 +389,9 @@ class ViewMountDialog extends LitElement {
         ha-icon-button {
           color: var(--primary-text-color);
         }
+        .delete-btn {
+          --mdc-theme-primary: var(--error-color);
+        }
       `,
     ];
   }

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

@@ -140,14 +140,12 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have a solar source.
-    if (hasSolar) {
-      if (hasReturn) {
-        view.cards!.push({
-          type: "energy-solar-consumed-gauge",
-          view_layout: { position: "sidebar" },
-          collection_key: "energy_dashboard",
-        });
-      }
+    if (hasSolar && hasReturn) {
+      view.cards!.push({
+        type: "energy-solar-consumed-gauge",
+        view_layout: { position: "sidebar" },
+        collection_key: "energy_dashboard",
+      });
       view.cards!.push({
         type: "energy-self-sufficiency-gauge",
         view_layout: { position: "sidebar" },

src/panels/history/ha-panel-history.ts

@@ -173,7 +173,7 @@ class HaPanelHistory extends LitElement {
               .endDate=${this._endDate}
               extended-presets
               time-picker
-              @value-changed=${this._dateRangeChanged}
+              @change=${this._dateRangeChanged}
             ></ha-date-range-picker>
             <ha-target-picker
               .hass=${this.hass}
@@ -424,8 +424,8 @@ class HaPanelHistory extends LitElement {
   );
 
   private _dateRangeChanged(ev) {
-    this._startDate = ev.detail.value.startDate;
-    const endDate = ev.detail.value.endDate;
+    this._startDate = ev.detail.startDate;
+    const endDate = ev.detail.endDate;
     if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
       endDate.setDate(endDate.getDate() + 1);
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);

src/panels/logbook/ha-panel-logbook.ts

@@ -93,7 +93,7 @@ export class HaPanelLogbook extends LitElement {
               .hass=${this.hass}
               .startDate=${this._time.range[0]}
               .endDate=${this._time.range[1]}
-              @value-changed=${this._dateRangeChanged}
+              @change=${this._dateRangeChanged}
               time-picker
             ></ha-date-range-picker>
 
@@ -233,8 +233,8 @@ export class HaPanelLogbook extends LitElement {
   }
 
   private _dateRangeChanged(ev) {
-    const startDate = ev.detail.value.startDate;
-    const endDate = ev.detail.value.endDate;
+    const startDate = ev.detail.startDate;
+    const endDate = ev.detail.endDate;
     if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
       endDate.setDate(endDate.getDate() + 1);
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);

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

@@ -1,16 +1,5 @@
 import type { HassConfig } from "home-assistant-js-websocket";
-import {
-  differenceInMonths,
-  subHours,
-  differenceInDays,
-  differenceInYears,
-  startOfYear,
-  addMilliseconds,
-  startOfMonth,
-  addYears,
-  addMonths,
-  addHours,
-} from "date-fns";
+import { addHours, subHours, differenceInDays } from "date-fns";
 import type {
   BarSeriesOption,
   CallbackDataParams,
@@ -18,12 +7,10 @@ import type {
 } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../../../../data/translation";
 import { formatNumber } from "../../../../../common/number/format_number";
-import {
-  formatDateMonthYear,
-  formatDateVeryShort,
-} from "../../../../../common/datetime/format_date";
+import { formatDateVeryShort } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts";
+import { getTimeAxisLabelConfig } from "../../../../../components/chart/axis-label";
 
 export function getSuggestedMax(dayDifference: number, end: Date): number {
   let suggestedMax = new Date(end);
@@ -65,17 +52,28 @@ export function getCommonOptions(
 
   const options: ECOption = {
     xAxis: {
+      id: "xAxisMain",
       type: "time",
-      min: start,
+      min: start.getTime(),
       max: getSuggestedMax(dayDifference, end),
+      axisLabel: getTimeAxisLabelConfig(locale, config, dayDifference),
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+      },
+      minInterval:
+        dayDifference >= 89 // quarter
+          ? 28 * 3600 * 24 * 1000
+          : dayDifference > 2
+            ? 3600 * 24 * 1000
+            : undefined,
     },
     yAxis: {
       type: "value",
       name: unit,
-      nameGap: 2,
-      nameTextStyle: {
-        align: "left",
-      },
+      nameGap: 5,
       axisLabel: {
         formatter: (value: number) => formatNumber(Math.abs(value), locale),
       },
@@ -84,10 +82,10 @@ export function getCommonOptions(
       },
     },
     grid: {
-      top: 15,
-      bottom: 0,
-      left: 1,
-      right: 1,
+      top: 35,
+      bottom: 10,
+      left: 10,
+      right: 10,
       containLabel: true,
     },
     tooltip: {
@@ -105,6 +103,7 @@ export function getCommonOptions(
             }
           });
           return [mainItems, compareItems]
+            .filter((items) => items.length > 0)
             .map((items) =>
               formatTooltip(
                 items,
@@ -116,7 +115,6 @@ export function getCommonOptions(
                 formatTotal
               )
             )
-            .filter(Boolean)
             .join("<br><br>");
         }
         return formatTooltip(
@@ -143,16 +141,14 @@ function formatTooltip(
   unit?: string,
   formatTotal?: (total: number) => string
 ) {
-  if (!params[0]?.value) {
+  if (!params[0].value) {
     return "";
   }
   // when comparing the first value is offset to match the main period
   // and the real date is in the third value
   const date = new Date(params[0].value?.[2] ?? params[0].value?.[0]);
   let period: string;
-  if (dayDifference > 89) {
-    period = `${formatDateMonthYear(date, locale, config)}`;
-  } else if (dayDifference > 0) {
+  if (dayDifference > 0) {
     period = `${formatDateVeryShort(date, locale, config)}`;
   } else {
     period = `${
@@ -202,9 +198,7 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
   const buckets = Array.from(
     new Set(
       datasets
-        .map((dataset) =>
-          dataset.data!.map((datapoint) => Number(datapoint![0]))
-        )
+        .map((dataset) => dataset.data!.map((datapoint) => datapoint![0]))
         .flat()
     )
   ).sort((a, b) => a - b);
@@ -225,7 +219,7 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
       if (x === undefined) {
         continue;
       }
-      if (Number(x) !== bucket) {
+      if (x !== bucket) {
         datasets[i].data?.splice(index, 0, {
           value: [bucket, 0],
           itemStyle: {
@@ -263,25 +257,3 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
     }
   });
 }
-
-export function getCompareTransform(start: Date, compareStart?: Date) {
-  if (!compareStart) {
-    return (ts: Date) => ts;
-  }
-  const compareYearDiff = differenceInYears(start, compareStart);
-  if (
-    compareYearDiff !== 0 &&
-    start.getTime() === startOfYear(start).getTime()
-  ) {
-    return (ts: Date) => addYears(ts, compareYearDiff);
-  }
-  const compareMonthDiff = differenceInMonths(start, compareStart);
-  if (
-    compareMonthDiff !== 0 &&
-    start.getTime() === startOfMonth(start).getTime()
-  ) {
-    return (ts: Date) => addMonths(ts, compareMonthDiff);
-  }
-  const compareOffset = start.getTime() - compareStart.getTime();
-  return (ts: Date) => addMilliseconds(ts, compareOffset);
-}

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -33,7 +33,6 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
-  getCompareTransform,
 } from "./common/energy-chart-options";
 import { storage } from "../../../../common/decorators/storage";
 import type { ECOption } from "../../../../resources/echarts";
@@ -193,10 +192,9 @@ export class HuiEnergyDevicesDetailGraphCard
           icon: "circle",
         },
         grid: {
-          top: 45,
           bottom: 0,
-          left: 1,
-          right: 1,
+          left: 5,
+          right: 5,
           containLabel: true,
         },
       };
@@ -316,34 +314,29 @@ export class HuiEnergyDevicesDetailGraphCard
 
     processedData.forEach((device) => {
       device.data.forEach((datapoint) => {
-        totalDeviceConsumption[datapoint[compare ? 2 : 0]] =
-          (totalDeviceConsumption[datapoint[compare ? 2 : 0]] || 0) +
-          datapoint[1];
+        totalDeviceConsumption[datapoint[0]] =
+          (totalDeviceConsumption[datapoint[0]] || 0) + datapoint[1];
       });
     });
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     const untrackedConsumption: BarSeriesOption["data"] = [];
     Object.keys(consumptionData.total).forEach((time) => {
-      const ts = Number(time);
       const value =
         consumptionData.total[time] - (totalDeviceConsumption[time] || 0);
-      const dataPoint: number[] = [ts, value];
+      const dataPoint = [Number(time), value];
       if (compare) {
         dataPoint[2] = dataPoint[0];
-        dataPoint[0] = compareTransform(new Date(ts)).getTime();
+        dataPoint[0] += compareOffset;
       }
       untrackedConsumption.push(dataPoint);
     });
-    // random id to always add untracked at the end
-    const order = Date.now();
     const dataset: BarSeriesOption = {
       type: "bar",
       cursor: "default",
-      id: compare ? `compare-untracked-${order}` : `untracked-${order}`,
+      id: compare ? "compare-untracked" : "untracked",
       name: this.hass.localize(
         "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
       ),
@@ -379,10 +372,9 @@ export class HuiEnergyDevicesDetailGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     devices.forEach((source, idx) => {
       const order = sorted_devices.indexOf(source.stat_consumption);
@@ -417,7 +409,7 @@ export class HuiEnergyDevicesDetailGraphCard
           const dataPoint = [point.start, point.change];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start)).getTime();
+            dataPoint[0] += compareOffset;
           }
           consumptionData.push(dataPoint);
           prevStart = point.start;
@@ -427,10 +419,9 @@ export class HuiEnergyDevicesDetailGraphCard
       data.push({
         type: "bar",
         cursor: "default",
-        // add order to id, otherwise echarts refuses to reorder them
         id: compare
-          ? `compare-${source.stat_consumption}-${order}`
-          : `${source.stat_consumption}-${order}`,
+          ? `compare-${source.stat_consumption}`
+          : source.stat_consumption,
         name:
           source.name ||
           getStatisticLabel(
@@ -447,9 +438,7 @@ export class HuiEnergyDevicesDetailGraphCard
         stack: compare ? "devicesCompare" : "devices",
       });
     });
-    return sorted_devices
-      .map((device) => data.find((d) => (d.id as string).includes(device))!)
-      .filter(Boolean);
+    return data;
   }
 
   static styles = css`

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -88,7 +88,7 @@ export class HuiEnergyDevicesGraphCard
           <ha-chart-base
             .hass=${this.hass}
             .data=${this._chartData}
-            .options=${this._createOptions(this._chartData)}
+            .options=${this._createOptions(this.hass.themes?.darkMode)}
             .height=${`${(this._chartData[0]?.data?.length || 0) * 28 + 50}px`}
             @chart-click=${this._handleChartClick}
           ></ha-chart-base>
@@ -110,17 +110,18 @@ export class HuiEnergyDevicesGraphCard
   }
 
   private _createOptions = memoizeOne(
-    (data: BarSeriesOption[]): ECOption => ({
+    (darkMode: boolean): ECOption => ({
       xAxis: {
         type: "value",
         name: "kWh",
+        splitLine: {
+          lineStyle: darkMode ? { opacity: 0.15 } : {},
+        },
       },
       yAxis: {
         type: "category",
         inverse: true,
         triggerEvent: true,
-        // take order from data
-        data: data[0]?.data?.map((d: any) => d.value[1]),
         axisLabel: {
           formatter: this._getDeviceName.bind(this),
           overflow: "truncate",

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -29,7 +29,6 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
-  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -214,10 +213,9 @@ export class HuiEnergyGasGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     gasSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -238,13 +236,10 @@ export class HuiEnergyGasGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
-            point.start,
-            point.change,
-          ];
+          const dataPoint = [point.start, point.change];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] += compareOffset;
           }
           gasConsumptionData.push(dataPoint);
           prevStart = point.start;

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -30,7 +30,6 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
-  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -232,10 +231,9 @@ export class HuiEnergySolarGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     solarSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -257,13 +255,10 @@ export class HuiEnergySolarGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
-            point.start,
-            point.change,
-          ];
+          const dataPoint = [point.start, point.change];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] += compareOffset;
           }
           solarProductionData.push(dataPoint);
           prevStart = point.start;
@@ -367,7 +362,6 @@ export class HuiEnergySolarGraphCard
             data.push({
               id: "forecast-" + source.stat_energy_from,
               type: "line",
-              stack: "forecast",
               name: this.hass.localize(
                 "ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
                 {

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -27,7 +27,6 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
-  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -477,10 +476,9 @@ export class HuiEnergyUsageGraphCard
       (a, b) => Number(a) - Number(b)
     );
 
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     Object.entries(combinedData).forEach(([type, sources]) => {
       Object.entries(sources).forEach(([statId, source]) => {
@@ -496,7 +494,7 @@ export class HuiEnergyUsageGraphCard
           ];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(dataPoint[0]);
+            dataPoint[0] += compareOffset;
           }
           points.push(dataPoint);
         }

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -28,7 +28,6 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
-  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 import { formatNumber } from "../../../../common/number/format_number";
@@ -212,10 +211,9 @@ export class HuiEnergyWaterGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareTransform = getCompareTransform(
-      this._start,
-      this._compareStart!
-    );
+    const compareOffset = compare
+      ? this._start.getTime() - this._compareStart!.getTime()
+      : 0;
 
     waterSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -236,13 +234,10 @@ export class HuiEnergyWaterGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
-            point.start,
-            point.change,
-          ];
+          const dataPoint = [point.start, point.change];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] += compareOffset;
           }
           waterConsumptionData.push(dataPoint);
           prevStart = point.start;

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

@@ -65,7 +65,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     return {
       columns: 12,
       min_columns: 6,
-      min_rows: 2,
+      min_rows: this._config?.entities?.length || 1,
     };
   }
 
@@ -244,8 +244,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     })}`;
 
     const columns = this._config.grid_options?.columns ?? 12;
-    const narrow = typeof columns === "number" && columns <= 12;
-    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
+    const narrow = Number.isNaN(columns) || Number(columns) < 12;
 
     return html`
       <ha-card>
@@ -260,7 +259,6 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
-            "has-rows": !!this._config.grid_options?.rows,
           })}"
         >
           ${this._error
@@ -285,7 +283,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
                   .minYAxis=${this._config.min_y_axis}
                   .maxYAxis=${this._config.max_y_axis}
                   .fitYData=${this._config.fit_y_data || false}
-                  .height=${hasFixedHeight ? "100%" : undefined}
+                  .height=${this._config.grid_options?.rows
+                    ? "100%"
+                    : undefined}
                   .narrow=${narrow}
                 ></state-history-charts>
               `}
@@ -303,7 +303,6 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     .card-header {
       justify-content: space-between;
       display: flex;
-      padding-bottom: 0;
     }
     .card-header ha-icon-next {
       --mdc-icon-button-size: 24px;
@@ -311,7 +310,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       color: var(--primary-text-color);
     }
     .content {
-      padding: 0 16px 8px 16px;
+      padding: 16px;
       flex: 1;
     }
     .has-header {
@@ -319,10 +318,6 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     }
     state-history-charts {
       height: 100%;
-      --timeline-top-margin: 16px;
-    }
-    .has-rows {
-      --chart-max-height: 100%;
     }
   `;
 }

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

@@ -22,9 +22,6 @@ import type { PictureEntityCardConfig } from "./types";
 import type { CameraEntity } from "../../../data/camera";
 import type { PersonEntity } from "../../../data/person";
 
-export const STUB_IMAGE =
-  "https://demo.home-assistant.io/stub_config/bedroom.png";
-
 @customElement("hui-picture-entity-card")
 class HuiPictureEntityCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -49,7 +46,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     return {
       type: "picture-entity",
       entity: foundEntities[0] || "",
-      image: STUB_IMAGE,
+      image: "https://demo.home-assistant.io/stub_config/bedroom.png",
     };
   }
 
@@ -137,17 +134,15 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
 
     const domain: string = computeDomain(this._config.entity);
     let image: string | undefined = this._config.image;
-    if (!image) {
-      switch (domain) {
-        case "image":
-          image = computeImageUrl(stateObj as ImageEntity);
-          break;
-        case "person":
-          if ((stateObj as PersonEntity).attributes.entity_picture) {
-            image = (stateObj as PersonEntity).attributes.entity_picture;
-          }
-          break;
-      }
+    switch (domain) {
+      case "image":
+        image = computeImageUrl(stateObj as ImageEntity);
+        break;
+      case "person":
+        if ((stateObj as PersonEntity).attributes.entity_picture) {
+          image = (stateObj as PersonEntity).attributes.entity_picture;
+        }
+        break;
     }
 
     return html`

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

@@ -1,4 +1,4 @@
-import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -9,7 +9,6 @@ import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
 import "../../../components/ha-state-icon";
-import { getEnergyDataCollection } from "../../../data/energy";
 import type { StatisticsMetaData } from "../../../data/recorder";
 import {
   fetchStatistic,
@@ -32,8 +31,6 @@ import type {
 import type { HuiErrorCard } from "./hui-error-card";
 import type { EntityCardConfig, StatisticCardConfig } from "./types";
 
-export const PERIOD_ENERGY = "energy_date_selection";
-
 @customElement("hui-statistic-card")
 export class HuiStatisticCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -73,52 +70,15 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
 
   @state() private _error?: string;
 
-  private _energySub?: UnsubscribeFunc;
-
-  @state() private _energyStart?: Date;
-
-  @state() private _energyEnd?: Date;
-
   private _interval?: number;
 
   private _footerElement?: HuiErrorCard | LovelaceHeaderFooter;
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._unsubscribeEnergy();
     clearInterval(this._interval);
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    if (this._config?.period === PERIOD_ENERGY) {
-      this._subscribeEnergy();
-    } else {
-      this._setFetchStatisticTimer();
-    }
-  }
-
-  private _subscribeEnergy() {
-    if (!this._energySub) {
-      this._energySub = getEnergyDataCollection(this.hass!, {
-        key: this._config?.collection_key,
-      }).subscribe((data) => {
-        this._energyStart = data.start;
-        this._energyEnd = data.end;
-        this._fetchStatistic();
-      });
-    }
-  }
-
-  private _unsubscribeEnergy() {
-    if (this._energySub) {
-      this._energySub();
-      this._energySub = undefined;
-    }
-    this._energyStart = undefined;
-    this._energyEnd = undefined;
-  }
-
   public setConfig(config: StatisticCardConfig): void {
     if (!config.entity) {
       throw new Error("Entity must be specified");
@@ -139,6 +99,8 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
 
     this._config = config;
     this._error = undefined;
+    this._fetchStatistic();
+    this._fetchMetadata();
 
     if (this._config.footer) {
       this._footerElement = createHeaderFooterElement(this._config.footer);
@@ -212,9 +174,7 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     if (
       changedProps.has("_value") ||
       changedProps.has("_metadata") ||
-      changedProps.has("_error") ||
-      changedProps.has("_energyStart") ||
-      changedProps.has("_energyEnd")
+      changedProps.has("_error")
     ) {
       return true;
     }
@@ -224,46 +184,6 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     return true;
   }
 
-  protected willUpdate(changedProps: PropertyValues) {
-    super.willUpdate(changedProps);
-    if (!this._config || !changedProps.has("_config")) {
-      return;
-    }
-    const oldConfig = changedProps.get("_config") as
-      | StatisticCardConfig
-      | undefined;
-
-    if (this.hass) {
-      if (this._config.period === PERIOD_ENERGY && !this._energySub) {
-        this._subscribeEnergy();
-        return;
-      }
-      if (this._config.period !== PERIOD_ENERGY && this._energySub) {
-        this._unsubscribeEnergy();
-        this._setFetchStatisticTimer();
-        return;
-      }
-      if (
-        this._config.period === PERIOD_ENERGY &&
-        this._energySub &&
-        changedProps.has("_config") &&
-        oldConfig?.collection_key !== this._config.collection_key
-      ) {
-        this._unsubscribeEnergy();
-        this._subscribeEnergy();
-      }
-    }
-
-    if (
-      changedProps.has("_config") &&
-      oldConfig?.entity !== this._config.entity
-    ) {
-      this._fetchMetadata().then(() => {
-        this._setFetchStatisticTimer();
-      });
-    }
-  }
-
   protected firstUpdated() {
     this._fetchStatistic();
     this._fetchMetadata();
@@ -290,31 +210,20 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private _setFetchStatisticTimer() {
-    this._fetchStatistic();
-    // statistics are created every hour
-    clearInterval(this._interval);
-    if (this._config?.period !== PERIOD_ENERGY) {
-      this._interval = window.setInterval(
-        () => this._fetchStatistic(),
-        5 * 1000 * 60
-      );
-    }
-  }
-
   private async _fetchStatistic() {
     if (!this.hass || !this._config) {
       return;
     }
+    clearInterval(this._interval);
+    this._interval = window.setInterval(
+      () => this._fetchStatistic(),
+      5 * 1000 * 60
+    );
     try {
       const stats = await fetchStatistic(
         this.hass,
         this._config.entity,
-        this._energyStart && this._energyEnd
-          ? { fixed_period: { start: this._energyStart, end: this._energyEnd } }
-          : typeof this._config?.period === "object"
-            ? this._config?.period
-            : {}
+        this._config.period
       );
       this._value = stats[this._config!.stat_type];
       this._error = undefined;

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

@@ -6,10 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../components/ha-card";
 import { getEnergyDataCollection } from "../../../data/energy";
-import {
-  getSuggestedMax,
-  getSuggestedPeriod,
-} from "./energy/common/energy-chart-options";
+import { getSuggestedPeriod } from "./energy/common/energy-chart-options";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -258,13 +255,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
-
     return html`
-      <ha-card>
-        ${this._config.title
-          ? html`<h1 class="card-header">${this._config.title}</h1>`
-          : nothing}
+      <ha-card .header=${this._config.title}>
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
@@ -282,20 +274,11 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .unit=${this._unit}
             .minYAxis=${this._config.min_y_axis}
             .maxYAxis=${this._config.max_y_axis}
-            .startTime=${this._energyStart}
-            .endTime=${this._energyEnd && this._energyStart
-              ? getSuggestedMax(
-                  differenceInDays(this._energyEnd, this._energyStart),
-                  this._energyEnd
-                )
-              : undefined}
             .fitYData=${this._config.fit_y_data || false}
             .hideLegend=${this._config.hide_legend || false}
             .logarithmicScale=${this._config.logarithmic_scale || false}
-            .daysToShow=${this._energyStart && this._energyEnd
-              ? differenceInDays(this._energyEnd, this._energyStart)
-              : this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
-            .height=${hasFixedHeight ? "100%" : undefined}
+            .daysToShow=${this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
+            .height=${this._config.grid_options?.rows ? "100%" : undefined}
           ></statistics-chart>
         </div>
       </ha-card>
@@ -375,12 +358,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       flex-direction: column;
       height: 100%;
     }
-    .card-header {
-      padding-bottom: 0;
-    }
     .content {
       padding: 16px;
-      padding-top: 0;
       flex: 1;
     }
     .has-header {

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

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list";
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import type { List } from "@material/mwc-list/mwc-list";
 import {
   mdiClock,
@@ -287,16 +286,15 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                     this._todoListSupportsFeature(
                       TodoListEntityFeature.MOVE_TODO_ITEM
                     )
-                      ? html`<ha-button-menu
-                          @closed=${stopPropagation}
-                          fixed
-                          @action=${this._handlePrimaryMenuAction}
-                        >
+                      ? html`<ha-button-menu @closed=${stopPropagation}>
                           <ha-icon-button
                             slot="trigger"
                             .path=${mdiDotsVertical}
                           ></ha-icon-button>
-                          <ha-list-item graphic="icon">
+                          <ha-list-item
+                            @click=${this._toggleReorder}
+                            graphic="icon"
+                          >
                             ${this.hass!.localize(
                               this._reordering
                                 ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
@@ -332,16 +330,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                       ${this._todoListSupportsFeature(
                         TodoListEntityFeature.DELETE_TODO_ITEM
                       )
-                        ? html`<ha-button-menu
-                            @closed=${stopPropagation}
-                            fixed
-                            @action=${this._handleCompletedMenuAction}
-                          >
+                        ? html`<ha-button-menu @closed=${stopPropagation}>
                             <ha-icon-button
                               slot="trigger"
                               .path=${mdiDotsVertical}
                             ></ha-icon-button>
-                            <ha-list-item graphic="icon" class="warning">
+                            <ha-list-item
+                              @click=${this._clearCompletedItems}
+                              graphic="icon"
+                              class="warning"
+                            >
                               ${this.hass!.localize(
                                 "ui.panel.lovelace.cards.todo-list.clear_items"
                               )}
@@ -550,15 +548,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private _handleCompletedMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._clearCompletedItems();
-        break;
-    }
-  }
-
-  private _clearCompletedItems() {
+  private async _clearCompletedItems(): Promise<void> {
     if (!this.hass) {
       return;
     }
@@ -613,15 +603,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private _handlePrimaryMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._toggleReorder();
-        break;
-    }
-  }
-
-  private _toggleReorder() {
+  private async _toggleReorder() {
     this._reordering = !this._reordering;
   }
 
@@ -666,7 +648,6 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     ha-card {
       height: 100%;
       box-sizing: border-box;
-      overflow-y: auto;
     }
 
     .has-header {

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

@@ -134,15 +134,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    let cardSize = 1;
+    let cardSize = 0;
     if (this._config?.show_current !== false) {
-      cardSize += 1;
+      cardSize += 2;
     }
     if (this._config?.show_forecast !== false) {
-      cardSize += 1;
-    }
-    if (this._config?.forecast_type === "daily") {
-      cardSize += 1;
+      cardSize += 3;
     }
     return cardSize;
   }
@@ -221,19 +218,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       this._forecastEvent,
       this._config?.forecast_type
     );
-
-    let itemsToShow = this._config?.forecast_slots ?? 5;
-    if (this._sizeController.value === "very-very-narrow") {
-      itemsToShow = Math.min(3, itemsToShow);
-    } else if (this._sizeController.value === "very-narrow") {
-      itemsToShow = Math.min(5, itemsToShow);
-    } else if (this._sizeController.value === "narrow") {
-      itemsToShow = Math.min(7, itemsToShow);
-    }
-
     const forecast =
       this._config?.show_forecast !== false && forecastData?.forecast?.length
-        ? forecastData.forecast.slice(0, itemsToShow)
+        ? forecastData.forecast.slice(
+            0,
+            this._sizeController.value === "very-very-narrow" ? 3 : 5
+          )
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
@@ -429,24 +419,30 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   public getGridOptions(): LovelaceGridOptions {
-    let rows = 1;
-    let min_rows = 1;
-    if (this._config?.show_current !== false) {
-      rows += 1;
-      min_rows += 1;
+    if (
+      this._config?.show_current !== false &&
+      this._config?.show_forecast !== false
+    ) {
+      return {
+        columns: 12,
+        rows: 4,
+        min_columns: 6,
+        min_rows: 4,
+      };
     }
     if (this._config?.show_forecast !== false) {
-      rows += 1;
-      min_rows += 1;
-    }
-    if (this._config?.forecast_type === "daily") {
-      rows += 1;
+      return {
+        columns: 12,
+        rows: 3,
+        min_columns: 6,
+        min_rows: 3,
+      };
     }
     return {
       columns: 12,
-      rows: rows,
+      rows: 2,
       min_columns: 6,
-      min_rows: min_rows,
+      min_rows: 2,
     };
   }
 
@@ -466,6 +462,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           display: flex;
           flex-direction: column;
           justify-content: center;
+          padding: 16px;
           box-sizing: border-box;
         }
 
@@ -474,11 +471,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           flex-wrap: nowrap;
           justify-content: space-between;
           align-items: center;
-          padding: 0 16px;
-        }
-
-        .content + .forecast {
-          padding-top: 8px;
         }
 
         .icon-image {
@@ -557,7 +549,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .forecast {
           display: flex;
           justify-content: space-around;
-          padding: 0 16px;
+          padding-top: 16px;
         }
 
         .forecast > div {
@@ -566,7 +558,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         .forecast .icon,
         .forecast .temp {
-          margin: 0;
+          margin: 4px 0;
         }
 
         .forecast .temp {

src/panels/lovelace/cards/types.ts

@@ -379,13 +379,11 @@ export interface StatisticsGraphCardConfig extends EnergyCardBaseConfig {
 export interface StatisticCardConfig extends LovelaceCardConfig {
   name?: string;
   entities: (EntityConfig | string)[];
-  period:
-    | {
-        fixed_period?: { start: string; end: string };
-        calendar?: { period: string; offset: number };
-        rolling_window?: { duration: HaDurationData; offset: HaDurationData };
-      }
-    | "energy_date_selection";
+  period: {
+    fixed_period?: { start: string; end: string };
+    calendar?: { period: string; offset: number };
+    rolling_window?: { duration: HaDurationData; offset: HaDurationData };
+  };
   stat_type: keyof Statistic;
   theme?: string;
 }
@@ -509,7 +507,6 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   show_current?: boolean;
   show_forecast?: boolean;
   forecast_type?: ForecastType;
-  forecast_slots?: number;
   secondary_info_attribute?: keyof TranslationDict["ui"]["card"]["weather"]["attributes"];
   theme?: string;
   tap_action?: ActionConfig;

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

@@ -246,7 +246,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             .startDate=${this._startDate}
             .endDate=${this._endDate || new Date()}
             .ranges=${this._ranges}
-            @value-changed=${this._dateRangeChanged}
+            @change=${this._dateRangeChanged}
             minimal
           ></ha-date-range-picker>
         </div>
@@ -346,7 +346,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   private _dateRangeChanged(ev) {
     const weekStartsOn = firstWeekdayIndex(this.hass.locale);
     this._startDate = calcDate(
-      ev.detail.value.startDate,
+      ev.detail.startDate,
       startOfDay,
       this.hass.locale,
       this.hass.config,
@@ -355,7 +355,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       }
     );
     this._endDate = calcDate(
-      ev.detail.value.endDate,
+      ev.detail.endDate,
       endOfDay,
       this.hass.locale,
       this.hass.config,

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

@@ -201,7 +201,9 @@ export class HuiGenericEntityRow extends LitElement {
       padding-inline-end: 8px;
       flex: 1 1 30%;
       min-height: 40px;
-      align-content: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
     .info,
     .info > * {
@@ -236,7 +238,8 @@ export class HuiGenericEntityRow extends LitElement {
     .value {
       direction: ltr;
       min-height: 40px;
-      align-content: center;
+      display: flex;
+      align-items: center;
     }
   `;
 }

src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts

@@ -10,6 +10,7 @@ import memoizeOne from "memoize-one";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
+import { stripDiacritics } from "../../../../common/string/strip-diacritics";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/search-input";
 import { isUnavailableState } from "../../../../data/entity";
@@ -22,6 +23,7 @@ import {
   getCustomBadgeEntry,
 } from "../../../../data/lovelace_custom_cards";
 import type { HomeAssistant } from "../../../../types";
+import { getStripDiacriticsFn } from "../../../../util/fuse";
 import {
   calcUnusedEntities,
   computeUsedEntities,
@@ -80,10 +82,12 @@ export class HuiBadgePicker extends LitElement {
         isCaseSensitive: false,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        ignoreDiacritics: true,
+        getFn: getStripDiacriticsFn,
       };
       const fuse = new Fuse(badges, options);
-      badges = fuse.search(filter).map((result) => result.item);
+      badges = fuse
+        .search(stripDiacritics(filter))
+        .map((result) => result.item);
       return badgeElements.filter((badgeElement: BadgeElement) =>
         badges.includes(badgeElement.badge)
       );

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -10,6 +10,7 @@ import memoizeOne from "memoize-one";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
+import { stripDiacritics } from "../../../../common/string/strip-diacritics";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/search-input";
 import { isUnavailableState } from "../../../../data/entity";
@@ -22,6 +23,7 @@ import {
   getCustomCardEntry,
 } from "../../../../data/lovelace_custom_cards";
 import type { HomeAssistant } from "../../../../types";
+import { getStripDiacriticsFn } from "../../../../util/fuse";
 import {
   calcUnusedEntities,
   computeUsedEntities,
@@ -90,10 +92,10 @@ export class HuiCardPicker extends LitElement {
         isCaseSensitive: false,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        ignoreDiacritics: true,
+        getFn: getStripDiacriticsFn,
       };
       const fuse = new Fuse(cards, options);
-      cards = fuse.search(filter).map((result) => result.item);
+      cards = fuse.search(stripDiacritics(filter)).map((result) => result.item);
       return cardElements.filter((cardElement: CardElement) =>
         cards.includes(cardElement.card)
       );

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -11,8 +11,6 @@ import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { configElementStyle } from "./config-elements-style";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { STUB_IMAGE } from "../../cards/hui-picture-entity-card";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -112,19 +110,7 @@ export class HuiPictureEntityCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    const config = ev.detail.value;
-    if (
-      config.entity &&
-      config.entity !== this._config?.entity &&
-      (computeDomain(config.entity) === "image" ||
-        (computeDomain(config.entity) === "person" &&
-          this.hass?.states[config.entity]?.attributes.entity_picture)) &&
-      config.image === STUB_IMAGE
-    ) {
-      delete config.image;
-    }
-
-    fireEvent(this, "config-changed", { config });
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {

src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts

@@ -32,7 +32,6 @@ const cardConfigStruct = assign(
     period: optional(any()),
     theme: optional(string()),
     footer: optional(headerFooterConfigStructs),
-    collection_key: optional(string()),
   })
 );
 

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -1,15 +1,7 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import {
-  assert,
-  assign,
-  boolean,
-  object,
-  optional,
-  string,
-  number,
-} from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
@@ -33,7 +25,6 @@ const cardConfigStruct = assign(
     show_current: optional(boolean()),
     show_forecast: optional(boolean()),
     forecast_type: optional(string()),
-    forecast_slots: optional(number()),
     secondary_info_attribute: optional(string()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
@@ -234,11 +225,6 @@ export class HuiWeatherForecastCardEditor
                   },
                 },
               },
-              {
-                name: "forecast_slots",
-                selector: { number: { min: 1, max: 12 } },
-                default: 5,
-              },
             ] as const)
           : []),
       ] as const
@@ -318,10 +304,6 @@ export class HuiWeatherForecastCardEditor
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.weather-forecast.forecast_type"
         );
-      case "forecast_slots":
-        return this.hass!.localize(
-          "ui.panel.lovelace.editor.card.weather-forecast.forecast_slots"
-        );
       case "forecast":
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.weather-forecast.weather_to_show"

src/panels/media-browser/ha-bar-media-player.ts

@@ -462,7 +462,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
   }
 
   private _openMoreInfo() {
-    if (this.entityId === BROWSER_PLAYER) {
+    if (this._browserPlayer) {
       return;
     }
     fireEvent(this, "hass-more-info", { entityId: this.entityId });

src/state/connection-mixin.ts

@@ -286,7 +286,10 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
       clearInterval(this.__backendPingInterval);
       this.__backendPingInterval = setInterval(() => {
         if (this.hass?.connected) {
-          promiseTimeout(5000, this.hass?.connection.ping()).catch(() => {
+          // If the backend if busy, or the connection is latent,
+          // it can take more than 10 seconds for the ping to return.
+          // We give it a 15 second timeout to be safe.
+          promiseTimeout(15000, this.hass?.connection.ping()).catch(() => {
             if (!this.hass?.connected) {
               return;
             }
@@ -296,7 +299,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
             this.hass?.connection.reconnect(true);
           });
         }
-      }, 10000);
+      }, 30000);
     }
 
     protected hassReconnected() {

src/state/disconnect-toast-mixin.ts

@@ -35,7 +35,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           showToast(this, {
             message:
               this.hass!.localize("ui.notification_toast.starting") ||
-              "Home Assistant is starting. Not everything will be available until it is finished.",
+              "Home Assistant is starting, not everything will be available until it is finished.",
             duration: -1,
             dismissable: false,
             action: {
@@ -121,7 +121,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         showToast(this, {
           message:
             this.hass!.localize("ui.notification_toast.wrapping_up_startup") ||
-            `Wrapping up startup. Not everything will be available until it is finished.`,
+            `Wrapping up startup, not everything will be available until it is finished.`,
           duration: -1,
           dismissable: false,
           action: {
@@ -146,7 +146,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           this.hass!.localize("ui.notification_toast.integration_starting", {
             integration: domainToName(this.hass!.localize, integration),
           }) ||
-          `Starting ${integration}. Not everything will be available until it is finished.`,
+          `Starting ${integration}, not everything will be available until it is finished.`,
         duration: -1,
         dismissable: false,
         action: {

src/state/logging-mixin.ts

@@ -29,11 +29,21 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
           return;
         }
         if (
-          (!__DEV__ &&
-            ev.message.includes("ResizeObserver loop limit exceeded")) ||
+          // !__DEV__ &&
+          ev.message.includes("ResizeObserver loop limit exceeded") ||
           ev.message.includes(
             "ResizeObserver loop completed with undelivered notifications"
-          )
+          ) ||
+          (ev.error.stack.includes("echarts") &&
+            (ev.message.includes(
+              "Cannot read properties of undefined (reading 'hostedBy')"
+            ) ||
+              ev.message.includes(
+                "Cannot read properties of undefined (reading 'scale')"
+              ) ||
+              ev.message.includes(
+                "Cannot read properties of null (reading 'innerHTML')"
+              )))
         ) {
           ev.preventDefault();
           ev.stopImmediatePropagation();

src/translations/en.json

@@ -1929,9 +1929,9 @@
       "action_failed": "Failed to perform the action {service}.",
       "connection_lost": "Connection lost. Reconnecting…",
       "started": "Home Assistant has started!",
-      "starting": "Home Assistant is starting. Not everything will be available until it is finished.",
-      "wrapping_up_startup": "Wrapping up startup. Not everything will be available until it is finished.",
-      "integration_starting": "Starting {integration}. Not everything will be available until it is finished.",
+      "starting": "Home Assistant is starting, not everything will be available until it is finished.",
+      "wrapping_up_startup": "Wrapping up startup, not everything will be available until it is finished.",
+      "integration_starting": "Starting {integration}, not everything will be available until it is finished.",
       "triggered": "Triggered {name}",
       "dismiss": "Dismiss",
       "no_matching_link_found": "No matching My link found for {path}"
@@ -2223,8 +2223,7 @@
           "backup_type": "Type",
           "type": {
             "manual": "Manual",
-            "automatic": "Automatic",
-            "addon_update": "Add-on update"
+            "automatic": "Automatic"
           },
           "locations": "Locations",
           "create": {
@@ -2393,23 +2392,17 @@
             "download": {
               "decryption_unsupported_title": "Decryption unsupported",
               "decryption_unsupported": "Decryption is not supported for this backup. The downloaded backup will remain encrypted and can't be opened. To restore it, you will need the encryption key.",
+              "incorrect_entered_encryption_key": "The entered encryption key was incorrect, try again or download the encrypted backup. The encrypted backup can't be opened. To restore it, you will need the encryption key.",
+              "download_encrypted": "Download encrypted",
+              "incorrect_current_encryption_key": "This backup is encrypted with a different encryption key than the current one, please enter the encryption key of this backup.",
               "error_check_title": "Error checking backup",
-              "error_check_description": "An error occurred while checking the backup, please try again. Error message: {error}",
-              "title": "Download backup",
-              "description": "This backup is encrypted with a different encryption key than the current one, please enter the encryption key of this backup.",
-              "download_backup_encrypted": "You can still {download_it_encrypted}. To restore it, you will need the encryption key.",
-              "download_it_encrypted": "download the backup encrypted",
-              "encryption_key": "Encryption key",
-              "incorrect_encryption_key": "Incorrect encryption key",
-              "decryption_not_supported": "Decryption not supported",
-              "download": "Download"
+              "error_check_description": "An error occurred while checking the backup, please try again. Error message: {error}"
             }
           },
           "agents": {
             "cloud_agent_description": "Note: It stores only the most recent backup, regardless of your retention settings, with a maximum size of 5 GB.",
             "cloud_agent_no_subcription": "You currently do not have an active Home Assistant Cloud subscription.",
             "network_mount_agent_description": "Network storage",
-            "unavailable_agents": "Unavailable locations",
             "no_agents": "No locations configured",
             "encryption_turned_off": "Encryption turned off",
             "local_agent": "This system"
@@ -2567,7 +2560,6 @@
               "title": "My backups",
               "automatic": "{count} automatic {count, plural,\n one {backup}\n other {backups}\n}",
               "manual": "{count} manual {count, plural,\n one {backup}\n other {backups}\n}",
-              "addon_update": "{count} add-on update {count, plural,\n one {backup}\n other {backups}\n}",
               "total_size": "{size} in total",
               "show_all": "Show all backups"
             },
@@ -2686,19 +2678,19 @@
             "encryption": {
               "title": "Encryption",
               "description": "All your backups are encrypted by default to keep your data private and secure.",
-              "location_encrypted": "Backups made to this location will be encrypted",
-              "location_unencrypted": "Backups made to this location will be unencrypted",
-              "location_encrypted_description": "Your data is private and secure by encrypting backups with your encryption key.",
+              "location_encrypted": "This location is encrypted",
+              "location_unencrypted": "This location is unencrypted",
+              "location_encrypted_description": "Your data private and secure by securing it with your encryption key.",
               "location_encrypted_cloud_description": "Home Assistant Cloud is the privacy-focused cloud. This is why it will only accept encrypted backups and why we don’t store your encryption key.",
               "location_encrypted_cloud_learn_more": "Learn more",
               "location_unencrypted_description": "Please keep your backups private and secure.",
               "encryption_turn_on": "Turn on",
               "encryption_turn_off": "Turn off",
               "encryption_turn_off_confirm_title": "Turn encryption off?",
-              "encryption_turn_off_confirm_text": "After confirming, backups created will be unencrypted for this location. Please ensure your backups remain private and secure.",
+              "encryption_turn_off_confirm_text": "All your next backups will not be encrypted for this location. Please keep your backups private and secure.",
               "encryption_turn_off_confirm_action": "Turn encryption off",
               "warning_encryption_turn_off": "Encryption turned off",
-              "warning_encryption_turn_off_description": "Backups will be unencrypted."
+              "warning_encryption_turn_off_description": "All your next backups will not be encrypted."
             }
           }
         },
@@ -4592,7 +4584,6 @@
             "account_created": "Account created! Check your email for instructions on how to activate your account."
           },
           "account": {
-            "download_support_package": "Download support package",
             "reset_cloud_data": "Reset cloud data",
             "reset_data_confirm_title": "Reset cloud data?",
             "reset_data_confirm_text": "This will reset all your cloud settings. This includes your remote connection, Google Assistant and Amazon Alexa integrations. This action cannot be undone.",
@@ -5339,8 +5330,6 @@
           "name": "Name",
           "source": "Source",
           "rssi": "RSSI",
-          "source_address": "Source address",
-          "device": "Device",
           "device_information": "Device information",
           "advertisement_data": "Advertisement data",
           "manufacturer_data": "Manufacturer data",
@@ -6052,10 +6041,8 @@
         },
         "tips": {
           "tip": "Tip!",
-          "join": "Join the community on our {forums}, {mastodon}, {bluesky}, {twitter}, {discord}, {blog} or {newsletter}",
+          "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}",
           "join_x": "X (formerly Twitter)",
-          "join_mastodon": "Mastodon",
-          "join_bluesky": "Bluesky",
           "join_forums": "Forums",
           "join_chat": "Chat",
           "join_blog": "Blog",
@@ -6124,12 +6111,7 @@
           },
           "network_adapter": "Network adapter",
           "network_adapter_info": "Configure which network adapters integrations will use. Currently this setting only affects multicast traffic. A restart is required for these settings to apply.",
-          "ip_information": "IP Information",
-          "adapter": {
-            "auto_configure": "Auto configure",
-            "detected": "Detected",
-            "adapter": "Adapter"
-          }
+          "ip_information": "IP Information"
         },
         "storage": {
           "caption": "Storage",
@@ -7131,7 +7113,6 @@
               "show_only_current": "Show only current Weather",
               "show_only_forecast": "Show only forecast",
               "forecast_type": "Select forecast type",
-              "forecast_slots": "Maximum number of forecast elements to show",
               "no_type": "No type",
               "daily": "Daily",
               "hourly": "Hourly",
@@ -7422,7 +7403,7 @@
           "entity_not_found": "Entity not available: {entity}",
           "entity_non_numeric": "Entity is non-numeric: {entity}",
           "entity_unavailable": "Entity is currently unavailable: {entity}",
-          "starting": "Home Assistant is starting. Not everything may be available yet."
+          "starting": "Home Assistant is starting, not everything may be available yet"
         },
         "changed_toast": {
           "message": "Your dashboard was updated. Refresh to see changes?"

src/util/fuse.ts

@@ -0,0 +1,12 @@
+import Fuse from "fuse.js";
+import { stripDiacritics } from "../common/string/strip-diacritics";
+
+type GetFn = typeof Fuse.config.getFn;
+
+export const getStripDiacriticsFn: GetFn = (obj, path) => {
+  const value = Fuse.config.getFn(obj, path);
+  if (Array.isArray(value)) {
+    return value.map((v) => stripDiacritics(v ?? ""));
+  }
+  return stripDiacritics((value as string | undefined) ?? "");
+};

src/util/text.ts

@@ -10,7 +10,7 @@ let textMeasureCanvas: HTMLCanvasElement | undefined;
 export function measureTextWidth(
   text: string,
   fontSize: number,
-  fontFamily = "Roboto, Noto, sans-serif"
+  fontFamily = "sans-serif"
 ): number {
   if (!textMeasureCanvas) {
     textMeasureCanvas = document.createElement("canvas");
@@ -21,11 +21,5 @@ export function measureTextWidth(
   }
 
   context.font = `${fontSize}px ${fontFamily}`;
-  const textMetrics = context.measureText(text);
-  return Math.ceil(
-    Math.max(
-      textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
-      textMetrics.width
-    )
-  );
+  return Math.ceil(context.measureText(text).width);
 }