Bumped version to 20250526.0

.husky/pre-commit

@@ -1 +1 @@
-yarn run lint-staged --relative
+yarn run lint-staged --relative --shell "/bin/bash"

demo/src/stubs/frontend.ts

@@ -1,30 +1,7 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-let changeFunction;
-
 export const mockFrontend = (hass: MockHomeAssistant) => {
   hass.mockWS("frontend/get_user_data", () => ({
     value: null,
   }));
-  hass.mockWS("frontend/set_user_data", ({ key, value }) => {
-    if (key === "sidebar") {
-      changeFunction?.({
-        value: {
-          panelOrder: value.panelOrder || [],
-          hiddenPanels: value.hiddenPanels || [],
-        },
-      });
-    }
-  });
-  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
-    changeFunction = onChange;
-    onChange?.({
-      value: {
-        panelOrder: [],
-        hiddenPanels: [],
-      },
-    });
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  });
 };

package.json

@@ -26,7 +26,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.27.4",
+    "@babel/runtime": "7.27.1",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
@@ -34,7 +34,7 @@
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.37.1",
+    "@codemirror/view": "6.36.8",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.4",
+    "hls.js": "1.6.2",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -149,20 +149,20 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.27.4",
+    "@babel/core": "7.27.1",
     "@babel/helper-define-polyfill-provider": "0.6.4",
-    "@babel/plugin-transform-runtime": "7.27.4",
+    "@babel/plugin-transform-runtime": "7.27.1",
     "@babel/preset-env": "7.27.2",
-    "@bundle-stats/plugin-webpack-filter": "4.20.2",
-    "@lokalise/node-api": "14.8.0",
+    "@bundle-stats/plugin-webpack-filter": "4.20.1",
+    "@lokalise/node-api": "14.7.0",
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
-    "@octokit/rest": "22.0.0",
+    "@octokit/rest": "21.1.1",
     "@rsdoctor/rspack-plugin": "1.1.2",
-    "@rspack/cli": "1.3.12",
-    "@rspack/core": "1.3.12",
+    "@rspack/cli": "1.3.11",
+    "@rspack/core": "1.3.11",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.21",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/glob": "8.1.0",
@@ -184,7 +184,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.28.0",
+    "eslint": "9.27.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -196,7 +196,7 @@
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.0",
     "glob": "11.0.2",
-    "gulp": "5.0.1",
+    "gulp": "5.0.0",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
@@ -204,7 +204,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.0",
+    "lint-staged": "15.5.2",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -218,7 +218,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.33.0",
+    "typescript-eslint": "8.32.1",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.1.4",
     "webpack-stats-plugin": "1.1.3",
@@ -232,7 +232,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.0",
     "@fullcalendar/daygrid": "6.1.17",
-    "globals": "16.2.0",
+    "globals": "16.1.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250430.0"
+version      = "20250526.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/entity/valid_service_id.ts

@@ -1,4 +0,0 @@
-const validServiceId = /^(\w+)\.(\w+)$/;
-
-export const isValidServiceId = (actionId: string) =>
-  validServiceId.test(actionId);

src/common/string/slugify.ts

@@ -1,19 +1,9 @@
 // https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1
 export const slugify = (value: string, delimiter = "_") => {
   const a =
-    "àáâäæãåāăąабçćčđďдèéêëēėęěеёэфğǵгḧхîïíīįìıİийкłлḿмñńǹňнôöòóœøōõőоṕпŕřрßśšşșсťțтûüùúūǘůűųувẃẍÿýыžźżз·";
-  const b = `aaaaaaaaaaabcccdddeeeeeeeeeeefggghhiiiiiiiiijkllmmnnnnnoooooooooopprrrsssssstttuuuuuuuuuuvwxyyyzzzz${delimiter}`;
+    "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·";
+  const b = `aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}`;
   const p = new RegExp(a.split("").join("|"), "g");
-  const complex_cyrillic = {
-    ж: "zh",
-    х: "kh",
-    ц: "ts",
-    ч: "ch",
-    ш: "sh",
-    щ: "shch",
-    ю: "iu",
-    я: "ia",
-  };
 
   let slugified;
 
@@ -24,7 +14,6 @@ export const slugify = (value: string, delimiter = "_") => {
       .toString()
       .toLowerCase()
       .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
-      .replace(/[а-я]/g, (c) => complex_cyrillic[c] || "") // Replace some cyrillic characters
       .replace(/(\d),(?=\d)/g, "$1") // Remove Commas between numbers
       .replace(/[^a-z0-9]+/g, delimiter) // Replace all non-word characters
       .replace(new RegExp(`(${delimiter})\\1+`, "g"), "$1") // Replace multiple delimiters with single delimiter

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

@@ -220,11 +220,11 @@ export class HaChartBase extends LitElement {
       return nothing;
     }
     const datasets = ensureArray(this.data);
-    const items: LegendComponentOption["data"] =
-      legend.data ||
-      ((datasets
+    const items = (legend.data ||
+      datasets
         .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => d.name ?? d.id) || []) as string[]);
+        .map((d) => d.name ?? d.id) ||
+      []) as string[];
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -239,32 +239,20 @@ export class HaChartBase extends LitElement {
       })}
     >
       <ul>
-        ${items.map((item, index) => {
+        ${items.map((item: string, index: number) => {
           if (!this.expandLegend && index >= overflowLimit) {
             return nothing;
           }
-          let itemStyle: Record<string, any> = {};
-          let name = "";
-          if (typeof item === "string") {
-            name = item;
           const dataset = datasets.find(
             (d) => d.id === item || d.name === item
           );
-            itemStyle = {
-              color: dataset?.color as string,
-              ...(dataset?.itemStyle as { borderColor?: string }),
-            };
-          } else {
-            name = item.name ?? "";
-            itemStyle = item.itemStyle ?? {};
-          }
-          const color = itemStyle?.color as string;
-          const borderColor = itemStyle?.borderColor as string;
+          const color = dataset?.color as string;
+          const borderColor = dataset?.itemStyle?.borderColor as string;
           return html`<li
-            .name=${name}
+            .name=${item}
             @click=${this._legendClick}
-            class=${classMap({ hidden: this._hiddenDatasets.has(name) })}
-            .title=${name}
+            class=${classMap({ hidden: this._hiddenDatasets.has(item) })}
+            .title=${item}
           >
             <div
               class="bullet"
@@ -273,7 +261,7 @@ export class HaChartBase extends LitElement {
                 borderColor: borderColor || color,
               })}
             ></div>
-            <div class="label">${name}</div>
+            <div class="label">${item}</div>
           </li>`;
         })}
         ${items.length > overflowLimit
@@ -494,13 +482,6 @@ export class HaChartBase extends LitElement {
         smooth: false,
       },
       bar: { itemStyle: { barBorderWidth: 1.5 } },
-      graph: {
-        label: {
-          color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor: style.getPropertyValue("--primary-background-color"),
-          textBorderWidth: 2,
-        },
-      },
       categoryAxis: {
         axisLine: { show: false },
         axisTick: { show: false },

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

@@ -82,8 +82,6 @@ export class StateHistoryChartLine extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  private _previousYAxisLabelValue = 0;
-
   protected render() {
     return html`
       <ha-chart-base
@@ -260,7 +258,32 @@ export class StateHistoryChartLine extends LitElement {
           },
           axisLabel: {
             margin: 5,
-            formatter: this._formatYAxisLabel,
+            formatter: (value: number) => {
+              const formatOptions =
+                value >= 1 || value <= -1
+                  ? undefined
+                  : {
+                      // show the first significant digit for tiny values
+                      maximumFractionDigits: Math.max(
+                        2,
+                        -Math.floor(Math.log10(Math.abs(value % 1 || 1)))
+                      ),
+                    };
+              const label = formatNumber(
+                value,
+                this.hass.locale,
+                formatOptions
+              );
+              const width = measureTextWidth(label, 12) + 5;
+              if (width > this._yWidth) {
+                this._yWidth = width;
+                fireEvent(this, "y-width-changed", {
+                  value: this._yWidth,
+                  chartIndex: this.chartIndex,
+                });
+              }
+              return label;
+            },
           },
         } as YAXisOption,
         legend: {
@@ -722,33 +745,6 @@ export class StateHistoryChartLine extends LitElement {
     this._visualMap = visualMap.length > 0 ? visualMap : undefined;
   }
 
-  private _formatYAxisLabel = (value: number) => {
-    const formatOptions =
-      value >= 1 || value <= -1
-        ? undefined
-        : {
-            // show the first significant digit for tiny values
-            maximumFractionDigits: Math.max(
-              2,
-              // use the difference to the previous value to determine the number of significant digits #25526
-              -Math.floor(
-                Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
-              )
-            ),
-          };
-    const label = formatNumber(value, this.hass.locale, formatOptions);
-    const width = measureTextWidth(label, 12) + 5;
-    if (width > this._yWidth) {
-      this._yWidth = width;
-      fireEvent(this, "y-width-changed", {
-        value: this._yWidth,
-        chartIndex: this.chartIndex,
-      });
-    }
-    this._previousYAxisLabelValue = value;
-    return label;
-  };
-
   private _clampYAxis(value?: number | ((values: any) => number)) {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value

src/components/data-table/ha-data-table.ts

@@ -740,7 +740,6 @@ export class HaDataTable extends LitElement {
             }, {});
           const groupedItems: DataTableRowData[] = [];
           Object.entries(sorted).forEach(([groupName, rows]) => {
-            const collapsed = collapsedGroups.includes(groupName);
             groupedItems.push({
               append: true,
               selectable: false,
@@ -752,10 +751,9 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${this.hass.localize(
-                    `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  )}
-                  class=${collapsed ? "collapsed" : ""}
+                  class=${collapsedGroups.includes(groupName)
+                    ? "collapsed"
+                    : ""}
                 >
                 </ha-icon-button>
                 ${groupName === UNDEFINED_GROUP_KEY

src/components/entity/ha-entity-picker.ts

@@ -23,10 +23,7 @@ import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type {
-  PickerComboBoxItem,
-  PickerComboBoxSearchFn,
-} from "../ha-picker-combo-box";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";
@@ -54,9 +51,6 @@ export class HaEntityPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
-  @property({ type: Boolean, attribute: "show-entity-id" })
-  public showEntityId = false;
-
   @property() public label?: string;
 
   @property() public value?: string;
@@ -172,15 +166,11 @@ export class HaEntityPicker extends LitElement {
     `;
   };
 
-  private get _showEntityId() {
-    return this.showEntityId || this.hass.userData?.showEntityIdPicker;
-  }
-
   private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
     item,
     { index }
   ) => {
-    const showEntityId = this._showEntityId;
+    const showEntityId = this.hass.userData?.showEntityIdPicker;
 
     return html`
       <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
@@ -400,7 +390,6 @@ export class HaEntityPicker extends LitElement {
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
         .label=${this.label}
-        .helper=${this.helper}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
@@ -409,7 +398,6 @@ export class HaEntityPicker extends LitElement {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .hideClearIcon=${this.hideClearIcon}
-        .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
       >
@@ -417,23 +405,6 @@ export class HaEntityPicker extends LitElement {
     `;
   }
 
-  private _searchFn: PickerComboBoxSearchFn<EntityComboBoxItem> = (
-    search,
-    filteredItems
-  ) => {
-    // If there is exact match for entity id, put it first
-    const index = filteredItems.findIndex(
-      (item) => item.stateObj?.entity_id === search
-    );
-    if (index === -1) {
-      return filteredItems;
-    }
-
-    const [exactMatch] = filteredItems.splice(index, 1);
-    filteredItems.unshift(exactMatch);
-    return filteredItems;
-  };
-
   public async open() {
     await this.updateComplete;
     await this._picker?.open();

src/components/entity/ha-statistic-picker.ts

@@ -25,10 +25,7 @@ import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-icon-button";
 import "../ha-input-helper-text";
-import type {
-  PickerComboBoxItem,
-  PickerComboBoxSearchFn,
-} from "../ha-picker-combo-box";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";
@@ -473,7 +470,6 @@ export class HaStatisticPicker extends LitElement {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .hideClearIcon=${this.hideClearIcon}
-        .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
       >
@@ -481,24 +477,6 @@ export class HaStatisticPicker extends LitElement {
     `;
   }
 
-  private _searchFn: PickerComboBoxSearchFn<StatisticComboBoxItem> = (
-    search,
-    filteredItems
-  ) => {
-    // If there is exact match for entity id or statistic id, put it first
-    const index = filteredItems.findIndex(
-      (item) =>
-        item.stateObj?.entity_id === search || item.statistic_id === search
-    );
-    if (index === -1) {
-      return filteredItems;
-    }
-
-    const [exactMatch] = filteredItems.splice(index, 1);
-    filteredItems.unshift(exactMatch);
-    return filteredItems;
-  };
-
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const value = ev.detail.value;

src/components/ha-form/ha-form.ts

@@ -34,8 +34,6 @@ const getWarning = (obj, item) => (obj && item.name ? obj[item.name] : null);
 export class HaForm extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public data!: HaFormDataContainer;
 
   @property({ attribute: false }) public schema!: readonly HaFormSchema[];
@@ -137,7 +135,6 @@ export class HaForm extends LitElement implements HaFormElement {
               ? html`<ha-selector
                   .schema=${item}
                   .hass=${this.hass}
-                  .narrow=${this.narrow}
                   .name=${item.name}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}

src/components/ha-generic-picker.ts

@@ -12,7 +12,6 @@ import "./ha-picker-combo-box";
 import type {
   HaPickerComboBox,
   PickerComboBoxItem,
-  PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
 import type { HaPickerField, PickerValueRenderer } from "./ha-picker-field";
@@ -58,9 +57,6 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: false })
   public valueRenderer?: PickerValueRenderer;
 
-  @property({ attribute: false })
-  public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
-
   @property({ attribute: "not-found-label", type: String })
   public notFoundLabel?: string;
 
@@ -72,9 +68,7 @@ export class HaGenericPicker extends LitElement {
 
   protected render() {
     return html`
-      ${this.label
-        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-        : nothing}
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
       <div class="container">
         ${!this._opened
           ? html`
@@ -108,19 +102,16 @@ export class HaGenericPicker extends LitElement {
                 .notFoundLabel=${this.notFoundLabel}
                 .getItems=${this.getItems}
                 .getAdditionalItems=${this.getAdditionalItems}
-                .searchFn=${this.searchFn}
               ></ha-picker-combo-box>
             `}
-      </div>
         ${this._renderHelper()}
+      </div>
     `;
   }
 
   private _renderHelper() {
     return this.helper
-      ? html`<ha-input-helper-text .disabled=${this.disabled}
-          >${this.helper}</ha-input-helper-text
-        >`
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
       : nothing;
   }
 
@@ -169,17 +160,10 @@ export class HaGenericPicker extends LitElement {
           position: relative;
           display: block;
         }
-        label[disabled] {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
-        }
         label {
           display: block;
           margin: 0 0 8px;
         }
-        ha-input-helper-text {
-          display: block;
-          margin: 8px 0 0;
-        }
       `,
     ];
   }

src/components/ha-input-helper-text.ts

@@ -1,11 +1,9 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-input-helper-text")
 class InputHelperText extends LitElement {
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
   protected render(): TemplateResult {
     return html`<slot></slot>`;
   }
@@ -20,9 +18,6 @@ class InputHelperText extends LitElement {
       padding-inline-start: 16px;
       padding-inline-end: 16px;
     }
-    :host([disabled]) {
-      color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
-    }
   `;
 }
 

src/components/ha-items-display-editor.ts

@@ -262,7 +262,7 @@ export class HaItemDisplayEditor extends LitElement {
         ];
       }
 
-      return visibleItems.sort((a, b) =>
+      return items.sort((a, b) =>
         a.disableSorting && !b.disableSorting ? -1 : compare(a.value, b.value)
       );
     }

src/components/ha-markdown.ts

@@ -77,7 +77,7 @@ export class HaMarkdown extends LitElement {
     pre {
       padding: 16px;
       overflow: auto;
-      line-height: var(--ha-line-height-condensed);
+      line-height: 1.45;
       font-family: var(--ha-font-family-code);
     }
     h1,

src/components/ha-multi-textfield.ts

@@ -85,9 +85,7 @@ class HaMultiTextField extends LitElement {
         </ha-button>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text .disabled=${this.disabled}
-            >${this.helper}</ha-input-helper-text
-          >`
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
         : nothing}
     `;
   }

src/components/ha-navigation-picker.ts

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

src/components/ha-picker-combo-box.ts

@@ -49,12 +49,6 @@ const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
   </ha-combo-box-item>
 `;
 
-export type PickerComboBoxSearchFn<T extends PickerComboBoxItem> = (
-  search: string,
-  filteredItems: T[],
-  allItems: T[]
-) => T[];
-
 @customElement("ha-picker-combo-box")
 export class HaPickerComboBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -90,9 +84,6 @@ export class HaPickerComboBox extends LitElement {
   @property({ attribute: "not-found-label", type: String })
   public notFoundLabel?: string;
 
-  @property({ attribute: false })
-  public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
-
   @state() private _opened = false;
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
@@ -246,7 +237,6 @@ export class HaPickerComboBox extends LitElement {
     const fuse = new HaFuse(this._items, { shouldSort: false }, index);
 
     const results = fuse.multiTermsSearch(searchString);
-    let filteredItems = this._items as PickerComboBoxItem[];
     if (results) {
       const items = results.map((result) => result.item);
       if (items.length === 0) {
@@ -256,14 +246,10 @@ export class HaPickerComboBox extends LitElement {
       }
       const additionalItems = this._getAdditionalItems(searchString);
       items.push(...additionalItems);
-      filteredItems = items;
+      target.filteredItems = items;
+    } else {
+      target.filteredItems = this._items;
     }
-
-    if (this.searchFn) {
-      filteredItems = this.searchFn(searchString, filteredItems, this._items);
-    }
-
-    target.filteredItems = filteredItems;
   }
 
   private _setValue(value: string | undefined) {

src/components/ha-picker-field.ts

@@ -88,12 +88,6 @@ export class HaPickerField extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       css`
-        ha-combo-box-item[disabled] {
-          background-color: var(
-            --mdc-text-field-disabled-fill-color,
-            whitesmoke
-          );
-        }
         ha-combo-box-item {
           background-color: var(--mdc-text-field-fill-color, whitesmoke);
           border-radius: 4px;
@@ -101,8 +95,8 @@ export class HaPickerField extends LitElement {
           border-end-start-radius: 0;
           --md-list-item-one-line-container-height: 56px;
           --md-list-item-two-line-container-height: 56px;
-          --md-list-item-top-space: 0px;
-          --md-list-item-bottom-space: 0px;
+          --md-list-item-top-space: 8px;
+          --md-list-item-bottom-space: 8px;
           --md-list-item-leading-space: 8px;
           --md-list-item-trailing-space: 8px;
           --ha-md-list-item-gap: 8px;
@@ -112,12 +106,6 @@ export class HaPickerField extends LitElement {
         }
 
         /* Add Similar focus style as the text field */
-        ha-combo-box-item[disabled]:after {
-          background-color: var(
-            --mdc-text-field-disabled-line-color,
-            rgba(0, 0, 0, 0.42)
-          );
-        }
         ha-combo-box-item:after {
           display: block;
           content: "";

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

@@ -19,8 +19,6 @@ import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 export class HaActionSelector extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public selector!: ActionSelector;
 
   @property({ attribute: false }) public value?: Action;
@@ -68,7 +66,6 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
         .disabled=${this.disabled}
         .actions=${this._actions(this.value)}
         .hass=${this.hass}
-        .narrow=${this.narrow}
       ></ha-automation-action>
     `;
   }

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

@@ -9,8 +9,6 @@ import type { HomeAssistant } from "../../types";
 export class HaConditionSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public selector!: ConditionSelector;
 
   @property({ attribute: false }) public value?: Condition;
@@ -26,7 +24,6 @@ export class HaConditionSelector extends LitElement {
         .disabled=${this.disabled}
         .conditions=${this.value || []}
         .hass=${this.hass}
-        .narrow=${this.narrow}
       ></ha-automation-condition>
     `;
   }

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

@@ -11,8 +11,6 @@ import type { HomeAssistant } from "../../types";
 export class HaTriggerSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public selector!: TriggerSelector;
 
   @property({ attribute: false }) public value?: Trigger;
@@ -35,7 +33,6 @@ export class HaTriggerSelector extends LitElement {
         .disabled=${this.disabled}
         .triggers=${this._triggers(this.value)}
         .hass=${this.hass}
-        .narrow=${this.narrow}
       ></ha-automation-trigger>
     `;
   }

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

@@ -69,8 +69,6 @@ const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
 export class HaSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property() public name?: string;
 
   @property({ attribute: false }) public selector!: Selector;
@@ -129,7 +127,6 @@ export class HaSelector extends LitElement {
     return html`
       ${dynamicElement(`ha-selector-${this._type}`, {
         hass: this.hass,
-        narrow: this.narrow,
         name: this.name,
         selector: this._handleLegacySelector(this.selector),
         value: this.value,

src/components/ha-service-control.ts

@@ -85,11 +85,8 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "show-advanced", type: Boolean })
-  public showAdvanced = false;
-
-  @property({ attribute: "show-service-id", type: Boolean })
-  public showServiceId = false;
+  @property({ attribute: "show-advanced", type: Boolean }) public showAdvanced =
+    false;
 
   @property({ attribute: "hide-picker", type: Boolean, reflect: true })
   public hidePicker = false;
@@ -438,7 +435,6 @@ export class HaServiceControl extends LitElement {
           .value=${this._value?.action}
           .disabled=${this.disabled}
           @value-changed=${this._serviceChanged}
-          .showServiceId=${this.showServiceId}
         ></ha-service-picker>`}
     ${this.hideDescription
       ? nothing

src/components/ha-service-picker.ts

@@ -1,25 +1,15 @@
-import { mdiRoomService } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { html, LitElement, nothing, type TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { isValidServiceId } from "../common/entity/valid_service_id";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { getServiceIcons } from "../data/icons";
 import { domainToName } from "../data/integration";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HomeAssistant } from "../types";
+import "./ha-combo-box";
 import "./ha-combo-box-item";
-import "./ha-generic-picker";
-import type { HaGenericPicker } from "./ha-generic-picker";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-service-icon";
-
-interface ServiceComboBoxItem extends PickerComboBoxItem {
-  domain_name?: string;
-  service_id?: string;
-}
+import { getServiceIcons } from "../data/icons";
 
 @customElement("ha-service-picker")
 class HaServicePicker extends LitElement {
@@ -27,121 +17,66 @@ class HaServicePicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property() public label?: string;
-
-  @property() public placeholder?: string;
-
   @property() public value?: string;
 
-  @property({ attribute: "show-service-id", type: Boolean })
-  public showServiceId = false;
+  @state() private _filter?: string;
 
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  public async open() {
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  protected firstUpdated(props) {
-    super.firstUpdated(props);
+  protected willUpdate() {
+    if (!this.hasUpdated) {
       this.hass.loadBackendTranslation("services");
       getServiceIcons(this.hass);
     }
+  }
 
-  private _rowRenderer: ComboBoxLitRenderer<ServiceComboBoxItem> = (
-    item,
-    { index }
-  ) => html`
-    <ha-combo-box-item type="button" border-top .borderTop=${index !== 0}>
+  private _rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> =
+    (item) => html`
+      <ha-combo-box-item type="button">
         <ha-service-icon
           slot="start"
           .hass=${this.hass}
-        .service=${item.id}
+          .service=${item.service}
         ></ha-service-icon>
-      <span slot="headline">${item.primary}</span>
-      <span slot="supporting-text">${item.secondary}</span>
-      ${item.service_id && this.showServiceId
-        ? html`<span slot="supporting-text" class="code">
-            ${item.service_id}
-          </span>`
-        : nothing}
-      ${item.domain_name
-        ? html`
-            <div slot="trailing-supporting-text" class="domain">
-              ${item.domain_name}
-            </div>
-          `
-        : nothing}
+        <span slot="headline">${item.name}</span>
+        <span slot="supporting-text"
+          >${item.name === item.service ? "" : item.service}</span
+        >
       </ha-combo-box-item>
     `;
 
-  private _valueRenderer: PickerValueRenderer = (value) => {
-    const serviceId = value;
-    const [domain, service] = serviceId.split(".");
-
-    if (!this.hass.services[domain]?.[service]) {
+  protected render() {
     return html`
-        <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
-        <span slot="headline">${value}</span>
-      `;
-    }
-
-    const serviceName =
-      this.hass.localize(`component.${domain}.services.${service}.name`) ||
-      this.hass.services[domain][service].name ||
-      service;
-
-    return html`
-      <ha-service-icon
-        slot="start"
+      <ha-combo-box
         .hass=${this.hass}
-        .service=${serviceId}
-      ></ha-service-icon>
-      <span slot="headline">${serviceName}</span>
-      ${this.showServiceId
-        ? html`<span slot="supporting-text" class="code">${serviceId}</span>`
-        : nothing}
-    `;
-  };
-
-  protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ??
-      this.hass.localize("ui.components.service-picker.action");
-
-    return html`
-      <ha-generic-picker
-        .hass=${this.hass}
-        .autofocus=${this.autofocus}
-        allow-custom-value
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.service-picker.no_match"
+        .label=${this.hass.localize("ui.components.service-picker.action")}
+        .filteredItems=${this._filteredServices(
+          this.hass.localize,
+          this.hass.services,
+          this._filter
         )}
-        .label=${this.label}
-        .placeholder=${placeholder}
         .value=${this.value}
-        .getItems=${this._getItems}
-        .rowRenderer=${this._rowRenderer}
-        .valueRenderer=${this._valueRenderer}
+        .disabled=${this.disabled}
+        .renderer=${this._rowRenderer}
+        item-value-path="service"
+        item-label-path="name"
+        allow-custom-value
+        @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
-      >
-      </ha-generic-picker>
+      ></ha-combo-box>
     `;
   }
 
-  private _getItems = () =>
-    this._services(this.hass.localize, this.hass.services);
-
   private _services = memoizeOne(
     (
       localize: LocalizeFunc,
       services: HomeAssistant["services"]
-    ): ServiceComboBoxItem[] => {
+    ): {
+      service: string;
+      name: string;
+    }[] => {
       if (!services) {
         return [];
       }
-      const items: ServiceComboBoxItem[] = [];
+      const result: { service: string; name: string }[] = [];
 
       Object.keys(services)
         .sort()
@@ -149,60 +84,56 @@ class HaServicePicker extends LitElement {
           const services_keys = Object.keys(services[domain]).sort();
 
           for (const service of services_keys) {
-            const serviceId = `${domain}.${service}`;
-            const domainName = domainToName(localize, domain);
-
-            const name =
+            result.push({
+              service: `${domain}.${service}`,
+              name: `${domainToName(localize, domain)}: ${
                 this.hass.localize(
                   `component.${domain}.services.${service}.name`
                 ) ||
                 services[domain][service].name ||
-              service;
-
-            const description =
-              this.hass.localize(
-                `component.${domain}.services.${service}.description`
-              ) || services[domain][service].description;
-
-            items.push({
-              id: serviceId,
-              primary: name,
-              secondary: description,
-              domain_name: domainName,
-              service_id: serviceId,
-              search_labels: [serviceId, domainName, name, description].filter(
-                Boolean
-              ),
-              sorting_label: serviceId,
+                service
+              }`,
             });
           }
         });
 
-      return items;
+      return result;
     }
   );
 
-  private _valueChanged(ev: ValueChangedEvent<string>) {
-    ev.stopPropagation();
-    const value = ev.detail.value;
+  private _filteredServices = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      services: HomeAssistant["services"],
+      filter?: string
+    ) => {
+      if (!services) {
+        return [];
+      }
+      const processedServices = this._services(localize, services);
 
-    if (!value) {
-      this._setValue(undefined);
-      return;
+      if (!filter) {
+        return processedServices;
+      }
+      const split_filter = filter.split(" ");
+      return processedServices.filter((service) => {
+        const lower_service_name = service.name.toLowerCase();
+        const lower_service = service.service.toLowerCase();
+        return split_filter.every(
+          (f) => lower_service_name.includes(f) || lower_service.includes(f)
+        );
+      });
+    }
+  );
+
+  private _filterChanged(ev: CustomEvent): void {
+    this._filter = ev.detail.value.toLowerCase();
   }
 
-    if (!isValidServiceId(value)) {
-      return;
-    }
-
-    this._setValue(value);
-  }
-
-  private _setValue(value: string | undefined) {
-    this.value = value;
-
-    fireEvent(this, "value-changed", { value });
+  private _valueChanged(ev) {
+    this.value = ev.detail.value;
     fireEvent(this, "change");
+    fireEvent(this, "value-changed", { value: this.value });
   }
 }
 

src/components/ha-sidebar.ts

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

src/components/map/ha-entity-marker.ts

@@ -12,8 +12,6 @@ class HaEntityMarker extends LitElement {
 
   @property({ attribute: "entity-name" }) public entityName?: string;
 
-  @property({ attribute: "entity-unit" }) public entityUnit?: string;
-
   @property({ attribute: "entity-picture" }) public entityPicture?: string;
 
   @property({ attribute: "entity-color" }) public entityColor?: string;
@@ -39,16 +37,7 @@ class HaEntityMarker extends LitElement {
                 .hass=${this.hass}
                 .stateObj=${this.hass?.states[this.entityId]}
               ></ha-state-icon>`
-            : !this.entityUnit
-              ? this.entityName
-              : html`
-                  ${this.entityName}
-                  <span
-                    class="unit"
-                    style="display: ${this.entityUnit ? "initial" : "none"}"
-                    >${this.entityUnit}</span
-                  >
-                `}
+            : this.entityName}
       </div>
     `;
   }
@@ -83,9 +72,6 @@ class HaEntityMarker extends LitElement {
       height: 100%;
       width: 100%;
     }
-    .unit {
-      margin-left: 2px;
-    }
   `;
 }
 

src/components/map/ha-map.ts

@@ -56,7 +56,6 @@ export interface HaMapEntity {
   color: string;
   label_mode?: "name" | "state" | "attribute" | "icon";
   attribute?: string;
-  unit?: string;
   name?: string;
   focus?: boolean;
 }
@@ -550,12 +549,6 @@ export class HaMap extends ReactiveElement {
         typeof entity !== "string" && entity.label_mode === "icon";
       entityMarker.entityId = getEntityId(entity);
       entityMarker.entityName = entityName;
-      entityMarker.entityUnit =
-        typeof entity !== "string" &&
-        entity.unit &&
-        entity.label_mode === "attribute"
-          ? entity.unit
-          : "";
       entityMarker.entityPicture =
         entityPicture && (typeof entity === "string" || !entity.label_mode)
           ? this.hass.hassUrl(entityPicture)

src/data/frontend.ts

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

src/data/history.ts

@@ -640,12 +640,6 @@ export const mergeHistoryResults = (
   }
 
   for (const item of ltsResult.line) {
-    if (item.unit === BLANK_UNIT) {
-      // disabled entities have no unit, so we need to find the unit from the history result
-      item.unit =
-        historyResult.line.find((line) => line.identifier === item.identifier)
-          ?.unit ?? BLANK_UNIT;
-    }
     const key = computeGroupKey(
       item.unit,
       item.device_class,

src/data/panel.ts

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

src/data/preview.ts

@@ -6,7 +6,6 @@ const HAS_CUSTOM_PREVIEW = ["generic_camera", "template"];
 export interface GenericPreview {
   state: string;
   attributes: Record<string, any>;
-  error?: string;
 }
 
 export const subscribePreviewGeneric = (

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -349,7 +349,6 @@ class DataEntryFlowDialog extends LitElement {
                   ${this._step.type === "form"
                     ? html`
                         <step-flow-form
-                          narrow
                           .flowConfig=${this._params.flowConfig}
                           .step=${this._step}
                           .hass=${this.hass}

src/dialogs/config-flow/previews/flow-preview-generic.ts

@@ -58,11 +58,6 @@ export class FlowPreviewGeneric extends LitElement {
   }
 
   private _setPreview = (preview: GenericPreview) => {
-    if (preview.error) {
-      this._error = preview.error;
-      this._preview = undefined;
-      return;
-    }
     const now = new Date().toISOString();
     this._preview = {
       entity_id: `${this.stepId}.___flow_preview___`,
@@ -85,7 +80,6 @@ export class FlowPreviewGeneric extends LitElement {
     if (this.flowType !== "config_flow" && this.flowType !== "options_flow") {
       return;
     }
-    this._error = undefined;
     try {
       this._unsub = subscribePreviewGeneric(
         this.hass,
@@ -95,7 +89,6 @@ export class FlowPreviewGeneric extends LitElement {
         this.stepData,
         this._setPreview
       );
-      await this._unsub;
       fireEvent(this, "set-flow-errors", { errors: {} });
     } catch (err: any) {
       if (typeof err.message === "string") {

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

@@ -235,15 +235,11 @@ class StepFlowCreateEntry extends LitElement {
 
     fireEvent(this, "flow-update", { step: undefined });
     if (this.step.result && this.navigateToResult) {
-      if (this.devices.length === 1) {
-        navigate(`/config/devices/device/${this.devices[0].id}`);
-      } else {
       navigate(
         `/config/integrations/integration/${this.step.result.domain}#config_entry=${this.step.result.entry_id}`
       );
     }
   }
-  }
 
   private async _areaPicked(ev: CustomEvent) {
     const picker = ev.currentTarget as any;

src/dialogs/config-flow/step-flow-form.ts

@@ -27,8 +27,6 @@ import { configFlowContentStyles } from "./styles";
 class StepFlowForm extends LitElement {
   @property({ attribute: false }) public flowConfig!: FlowConfig;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public step!: DataEntryFlowStepForm;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -65,7 +63,6 @@ class StepFlowForm extends LitElement {
           : ""}
         <ha-form
           .hass=${this.hass}
-          .narrow=${this.narrow}
           .data=${stepData}
           .disabled=${this._loading}
           @value-changed=${this._stepDataChanged}

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

@@ -45,7 +45,8 @@ class MoreInfoCamera extends LitElement {
         <ha-progress-button
           @click=${this._downloadSnapshot}
           .progress=${this._waiting}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
+          .disabled=${this.stateObj.state === UNAVAILABLE ||
+          this.stateObj.state === "idle"}
         >
           ${this.hass.localize(
             "ui.dialogs.more_info_control.camera.download_snapshot"

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

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

src/panels/calendar/ha-full-calendar.ts

@@ -497,9 +497,9 @@ export class HAFullCalendar extends LitElement {
 
         ha-fab {
           position: absolute;
-          bottom: 16px;
-          right: 16px;
-          inset-inline-end: 16px;
+          bottom: 32px;
+          right: 32px;
+          inset-inline-end: 32px;
           inset-inline-start: initial;
           z-index: 1;
         }

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

@@ -1,4 +1,5 @@
 import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
+import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -45,7 +46,6 @@ import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
-import { HaFuse } from "../../../resources/fuse";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
@@ -175,40 +175,6 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       type: AddAutomationElementDialogParams["type"],
       group: string | undefined,
       filter: string,
-      domains: Set<string> | undefined,
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      manifests?: DomainManifestLookup
-    ): ListItem[] => {
-      const items = this._items(type, group, localize, services, manifests);
-
-      const index = this._fuseIndex(items);
-
-      const fuse = new HaFuse(
-        items,
-        { ignoreLocation: true, includeScore: true },
-        index
-      );
-
-      const results = fuse.multiTermsSearch(filter);
-      if (results) {
-        return results.map((result) => result.item);
-      }
-      return this._getGroupItems(
-        type,
-        group,
-        domains,
-        localize,
-        services,
-        manifests
-      );
-    }
-  );
-
-  private _items = memoizeOne(
-    (
-      type: AddAutomationElementDialogParams["type"],
-      group: string | undefined,
       localize: LocalizeFunc,
       services: HomeAssistant["services"],
       manifests?: DomainManifestLookup
@@ -223,15 +189,22 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         );
 
       const items = flattenGroups(groups).flat();
+
       if (type === "action") {
         items.push(...this._services(localize, services, manifests, group));
       }
-      return items;
-    }
-  );
 
-  private _fuseIndex = memoizeOne((items: ListItem[]) =>
-    Fuse.createIndex(["key", "name", "description"], items)
+      const options: IFuseOptions<ListItem> = {
+        keys: ["key", "name", "description"],
+        isCaseSensitive: false,
+        ignoreLocation: true,
+        minMatchCharLength: Math.min(filter.length, 2),
+        threshold: 0.2,
+        ignoreDiacritics: true,
+      };
+      const fuse = new Fuse(items, options);
+      return fuse.search(filter).map((result) => result.item);
+    }
   );
 
   private _getGroupItems = memoizeOne(
@@ -476,7 +449,6 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           this._params.type,
           this._group,
           this._filter,
-          this._domains,
           this.hass.localize,
           this.hass.services,
           this._manifests

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

@@ -233,8 +233,6 @@ export class CloudLogin extends LitElement {
               text: this.hass.localize(
                 "ui.panel.config.cloud.login.cloud_pipeline_text"
               ),
-              confirmText: this.hass.localize("ui.common.yes"),
-              dismissText: this.hass.localize("ui.common.no"),
             })
           ) {
             setAssistPipelinePreferred(this.hass, result.cloud_pipeline);

src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts

@@ -4,7 +4,6 @@ import {
   mdiDeleteForever,
   mdiHospitalBox,
   mdiInformation,
-  mdiPlus,
   mdiUpload,
   mdiWrench,
 } from "@mdi/js";
@@ -14,7 +13,6 @@ import {
   fetchZwaveIntegrationSettings,
   fetchZwaveIsAnyOTAFirmwareUpdateInProgress,
   fetchZwaveIsNodeFirmwareUpdateInProgress,
-  fetchZwaveNetworkStatus,
   fetchZwaveNodeStatus,
 } from "../../../../../../data/zwave_js";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
@@ -26,7 +24,6 @@ import { showZWaveJSRemoveFailedNodeDialog } from "../../../../integrations/inte
 import { showZWaveJSUpdateFirmwareNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-update-firmware-node";
 import type { DeviceAction } from "../../../ha-config-device-page";
 import { showZWaveJSHardResetControllerDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-hard-reset-controller";
-import { showZWaveJSAddNodeDialog } from "../../../../integrations/integration-panels/zwave_js/add-node/show-dialog-zwave_js-add-node";
 
 export const getZwaveDeviceActions = async (
   el: HTMLElement,
@@ -163,19 +160,6 @@ export const getZwaveDeviceActions = async (
   }
 
   if (nodeStatus.is_controller_node) {
-    const networkStatus = await fetchZwaveNetworkStatus(hass, {
-      entry_id: entryId,
-    });
-    actions.unshift({
-      label: hass.localize("ui.panel.config.zwave_js.common.add_node"),
-      icon: mdiPlus,
-      action: async () => {
-        showZWaveJSAddNodeDialog(el, {
-          entry_id: entryId,
-          longRangeSupported: networkStatus.controller?.supports_long_range,
-        });
-      },
-    });
     actions.push({
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.hard_reset_controller"

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

@@ -163,7 +163,6 @@ export class HaIntegrationCard extends LitElement {
                   : "custom"}"
               >
                 <ha-tooltip
-                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
                   .content=${this.hass.localize(
                     this.manifest.overwrites_built_in
@@ -178,7 +177,6 @@ export class HaIntegrationCard extends LitElement {
           ${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
             ? html`<div class="icon cloud">
                 <ha-tooltip
-                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
                   .content=${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.depends_on_cloud"
@@ -193,7 +191,6 @@ export class HaIntegrationCard extends LitElement {
           !this.items.every((itm) => itm.source === "system")
             ? html`<div class="icon yaml">
                 <ha-tooltip
-                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
                   .content=${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.no_config_flow"

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

@@ -133,11 +133,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
     if (ERROR_STATES.includes(this._configEntry.state)) {
       return this._renderErrorScreen();
     }
-    const provisioningDevices =
-      this._provisioningEntries?.filter((entry) => !entry.nodeId).length ?? 0;
     const notReadyDevices =
-      (this._network?.controller.nodes.filter((node) => !node.ready).length ??
-        0) + provisioningDevices;
+      this._network?.controller.nodes.filter((node) => !node.ready).length ?? 0;
 
     return html`
       <hass-tabs-subpage
@@ -185,9 +182,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                               ${this.hass.localize(
                                 `ui.panel.config.zwave_js.dashboard.devices`,
                                 {
-                                  count:
-                                    this._network.controller.nodes.length +
-                                    provisioningDevices,
+                                  count: this._network.controller.nodes.length,
                                 }
                               )}
                               ${notReadyDevices > 0

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

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

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

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

src/panels/developer-tools/action/developer-tools-action.ts

@@ -142,7 +142,6 @@ class HaPanelDevAction extends LitElement {
                   .hass=${this.hass}
                   .value=${this._serviceData?.action}
                   @value-changed=${this._serviceChanged}
-                  show-service-id
                 ></ha-service-picker>
                 <ha-yaml-editor
                   id="yaml-editor"
@@ -157,7 +156,6 @@ class HaPanelDevAction extends LitElement {
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
                   show-advanced
-                  show-service-id
                   @value-changed=${this._serviceDataChanged}
                   class="card-content"
                 ></ha-service-control>

src/panels/developer-tools/state/developer-tools-state.ts

@@ -130,7 +130,6 @@ class HaPanelDevState extends LitElement {
               .value=${this._entityId}
               @value-changed=${this._entityIdChanged}
               allow-custom-entity
-              show-entity-id
             ></ha-entity-picker>
             ${this._entityId
               ? html`

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

@@ -6,7 +6,6 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { BarSeriesOption } from "echarts/charts";
-import type { LegendComponentOption } from "echarts/components";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { getEnergyColor } from "./common/color";
 import "../../../../components/ha-card";
@@ -55,8 +54,6 @@ export class HuiEnergyDevicesDetailGraphCard
 
   @state() private _data?: EnergyData;
 
-  @state() private _legendData?: LegendComponentOption["data"];
-
   @state() private _start = startOfToday();
 
   @state() private _end = endOfToday();
@@ -188,7 +185,6 @@ export class HuiEnergyDevicesDetailGraphCard
         legend: {
           show: true,
           type: "custom",
-          data: this._legendData,
           selected: this._hiddenStats.reduce((acc, stat) => {
             acc[stat] = false;
             return acc;
@@ -314,13 +310,6 @@ export class HuiEnergyDevicesDetailGraphCard
     );
 
     datasets.push(...processedData);
-    this._legendData = processedData.map((d) => ({
-      name: d.name as string,
-      itemStyle: {
-        color: d.color as string,
-        borderColor: d.itemStyle?.borderColor as string,
-      },
-    }));
 
     if (showUntracked) {
       const untrackedData = this._processUntracked(
@@ -330,13 +319,6 @@ export class HuiEnergyDevicesDetailGraphCard
         false
       );
       datasets.push(untrackedData);
-      this._legendData.push({
-        name: untrackedData.name as string,
-        itemStyle: {
-          color: untrackedData.color as string,
-          borderColor: untrackedData.itemStyle?.borderColor as string,
-        },
-      });
     }
 
     fillDataGapsAndRoundCaps(datasets);

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

@@ -384,10 +384,7 @@ export class HuiAreaCard
             areaSensorEntityId = area.humidity_entity_id;
             break;
         }
-        const areaEntity =
-          areaSensorEntityId &&
-          this.hass.states[areaSensorEntityId] &&
-          !isUnavailableState(this.hass.states[areaSensorEntityId].state)
+        const areaEntity = areaSensorEntityId
           ? this.hass.states[areaSensorEntityId]
           : undefined;
         if (
@@ -396,10 +393,6 @@ export class HuiAreaCard
             (entity) => entity.attributes.device_class === deviceClass
           )
         ) {
-          let value = areaEntity
-            ? this.hass.formatEntityState(areaEntity)
-            : this._average(domain, deviceClass);
-          if (!value) value = "—";
           sensors.push(html`
             <div class="sensor">
               <ha-domain-icon
@@ -407,7 +400,9 @@ export class HuiAreaCard
                 .domain=${domain}
                 .deviceClass=${deviceClass}
               ></ha-domain-icon>
-              ${value}
+              ${areaEntity
+                ? this.hass.formatEntityState(areaEntity)
+                : this._average(domain, deviceClass)}
             </div>
           `);
         }

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

@@ -224,19 +224,19 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                   filter: colored ? stateColorBrightness(stateObj) : undefined,
                   height: this._config.icon_height
                     ? this._config.icon_height
-                    : undefined,
+                    : "",
                 })}
               ></ha-state-icon>
             `
-          : nothing}
+          : ""}
         ${this._config.show_name
           ? html`<span tabindex="-1" .title=${name}>${name}</span>`
-          : nothing}
+          : ""}
         ${this._config.show_state && stateObj
           ? html`<span class="state">
               ${this.hass.formatEntityState(stateObj)}
             </span>`
-          : nothing}
+          : ""}
       </ha-card>
     `;
   }
@@ -282,8 +282,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           align-items: center;
           text-align: center;
           padding: 4% 0;
-          font-size: var(--ha-font-size-l);
-          line-height: var(--ha-line-height-condensed);
+          font-size: 16.8px;
           height: 100%;
           box-sizing: border-box;
           justify-content: center;

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

@@ -301,7 +301,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
-          line-height: var(--ha-line-height-condensed);
+          line-height: var(--ha-line-height-expanded);
         }
 
         .value {

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

@@ -45,7 +45,6 @@ export const DEFAULT_ZOOM = 14;
 interface MapEntityConfig extends EntityConfig {
   label_mode?: "state" | "attribute" | "name";
   attribute?: string;
-  unit?: string;
   focus?: boolean;
 }
 
@@ -53,7 +52,6 @@ interface GeoEntity {
   entity_id: string;
   label_mode?: "state" | "attribute" | "name" | "icon";
   attribute?: string;
-  unit?: string;
   focus: boolean;
 }
 
@@ -432,7 +430,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           entity_id: stateObj.entity_id,
           label_mode: sourceObj?.label_mode ?? allSource?.label_mode,
           attribute: sourceObj?.attribute ?? allSource?.attribute,
-          unit: sourceObj?.unit ?? allSource?.unit,
           focus: sourceObj
             ? (sourceObj.focus ?? true)
             : (allSource?.focus ?? true),
@@ -449,7 +446,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         color: this._getColor(entityConf.entity),
         label_mode: entityConf.label_mode,
         attribute: entityConf.attribute,
-        unit: entityConf.unit,
         focus: entityConf.focus,
         name: entityConf.name,
       })),

src/panels/lovelace/cards/types.ts

@@ -323,7 +323,6 @@ interface GeoLocationSourceConfig {
   source: string;
   label_mode?: "name" | "state" | "attribute" | "icon";
   attribute?: string;
-  unit?: string;
   focus?: boolean;
 }
 

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

@@ -40,7 +40,6 @@ export const mapEntitiesConfigStruct = union([
     entity: string(),
     label_mode: optional(string()),
     attribute: optional(string()),
-    unit: optional(string()),
     focus: optional(boolean()),
     name: optional(string()),
   }),
@@ -52,7 +51,6 @@ const geoSourcesConfigStruct = union([
     source: string(),
     label_mode: optional(string()),
     attribute: optional(string()),
-    unit: optional(string()),
     focus: optional(boolean()),
   }),
   string(),

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

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

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

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

src/panels/lovelace/hui-root.ts

@@ -1109,16 +1109,6 @@ class HUIRoot extends LitElement {
         sl-tab[aria-selected="true"] .edit-icon {
           display: inline-flex;
         }
-        sl-tab::part(base) {
-          padding-inline-start: var(
-            --ha-tab-padding-start,
-            var(--sl-spacing-large)
-          );
-          padding-inline-end: var(
-            --ha-tab-padding-end,
-            var(--sl-spacing-large)
-          );
-        }
         sl-tab::part(base) {
           padding-top: calc((var(--header-height) - 20px) / 2);
           padding-bottom: calc((var(--header-height) - 20px) / 2 - 2px);

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

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

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

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

src/state/connection-mixin.ts

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

src/state/sidebar-mixin.ts

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

src/translations/en.json

@@ -873,8 +873,7 @@
         }
       },
       "service-picker": {
-        "action": "Action",
-        "no_match": "No matching actions found"
+        "action": "Action"
       },
       "service-control": {
         "required": "This field is required",
@@ -902,8 +901,6 @@
         "hidden": "{number} hidden",
         "clear": "Clear",
         "ungrouped": "Ungrouped",
-        "collapse": "Collapse",
-        "expand": "Expand",
         "settings": {
           "header": "Customize",
           "hide": "Hide column {title}",
@@ -1581,7 +1578,7 @@
         "upload_in_progress": "A backup upload is currently in progress. The action will automatically proceed once the upload process is complete.",
         "restore_in_progress": "A backup restore is currently in progress. The action will automatically proceed once the restore process is complete.",
         "wait_for_backup": "Wait for the backup creation to finish",
-        "error_backup_state": "An error occurred while getting the current backup state. Error: {error}",
+        "error_backup_state": "An error occured while getting the current backup state. Error: {error}",
         "wait_for_upload": "Wait for backup upload to finish",
         "wait_for_restore": "Wait for backup restore to finish",
         "reload": {
@@ -1784,7 +1781,7 @@
         "buttons": {
           "add": "Add devices via this device",
           "remove": "Remove",
-          "manage": "Manage Zigbee device",
+          "manage": "Manage zigbee device",
           "reconfigure": "Reconfigure",
           "view_network": "View network"
         },
@@ -2380,7 +2377,7 @@
             },
             "generate": {
               "sync": {
-                "title": "Synchronization",
+                "title": "Synchonization",
                 "name": "Backup name",
                 "locations": "Locations",
                 "locations_description": "What locations you want to automatically backup to.",
@@ -5134,7 +5131,7 @@
             "restore_entity_id_selected": {
               "button": "Recreate entity IDs of selected",
               "confirm_title": "Recreate entity IDs?",
-              "confirm_text": "Are you sure you want to change the entity IDs of these entities? You will have to change your dashboards, automations and scripts to use the new entity IDs.",
+              "confirm_text": "Are you sure you want to change the entity IDs of these entities? You will have to change you dashboards, automations and scripts to use the new entity IDs.",
               "changes": "The following entity IDs will be updated:"
             },
             "delete_selected": {

src/types.ts

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

src/util/ha-pref-storage.ts

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