Add other panels to profile

add markdown to parameter descriptions for actions

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3

.yarnrc.yml

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

package.json

@@ -115,7 +115,7 @@
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.18",
-    "js-yaml": "4.1.0",
+    "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
@@ -194,7 +194,7 @@
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
-    "glob": "11.0.3",
+    "glob": "12.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -233,9 +233,10 @@
     "@fullcalendar/daygrid": "6.1.19",
     "globals": "16.5.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"
+    "@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",
+    "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.10.3",
+  "packageManager": "yarn@4.11.0",
   "volta": {
     "node": "22.21.1"
   }

src/common/areas/areas-floor-hierarchy.ts

@@ -0,0 +1,53 @@
+import type { AreaRegistryEntry } from "../../data/area_registry";
+import type { FloorRegistryEntry } from "../../data/floor_registry";
+
+export interface AreasFloorHierarchy {
+  floors: {
+    id: string;
+    areas: string[];
+  }[];
+  areas: string[];
+}
+
+export const getAreasFloorHierarchy = (
+  floors: FloorRegistryEntry[],
+  areas: AreaRegistryEntry[]
+): AreasFloorHierarchy => {
+  const floorAreas = new Map<string, string[]>();
+  const unassignedAreas: string[] = [];
+
+  for (const area of areas) {
+    if (area.floor_id) {
+      if (!floorAreas.has(area.floor_id)) {
+        floorAreas.set(area.floor_id, []);
+      }
+      floorAreas.get(area.floor_id)!.push(area.area_id);
+    } else {
+      unassignedAreas.push(area.area_id);
+    }
+  }
+
+  const hierarchy: AreasFloorHierarchy = {
+    floors: floors.map((floor) => ({
+      id: floor.floor_id,
+      areas: floorAreas.get(floor.floor_id) || [],
+    })),
+    areas: unassignedAreas,
+  };
+
+  return hierarchy;
+};
+
+export const getAreasOrder = (hierarchy: AreasFloorHierarchy): string[] => {
+  const order: string[] = [];
+
+  for (const floor of hierarchy.floors) {
+    order.push(...floor.areas);
+  }
+  order.push(...hierarchy.areas);
+
+  return order;
+};
+
+export const getFloorOrder = (hierarchy: AreasFloorHierarchy): string[] =>
+  hierarchy.floors.map((floor) => floor.id);

src/common/keyboard/shortcuts.ts

@@ -0,0 +1,67 @@
+import { tinykeys } from "tinykeys";
+import { canOverrideAlphanumericInput } from "../dom/can-override-input";
+
+/**
+ * A function to handle a keyboard shortcut.
+ */
+export type ShortcutHandler = (event: KeyboardEvent) => void;
+
+/**
+ * Configuration for a keyboard shortcut.
+ */
+export interface ShortcutConfig {
+  handler: ShortcutHandler;
+  /**
+   * If true, allows shortcuts even when text is selected.
+   * Default is false to avoid interrupting copy/paste.
+   */
+  allowWhenTextSelected?: boolean;
+}
+
+/**
+ * Register keyboard shortcuts using tinykeys.
+ * Automatically blocks shortcuts in input fields and during text selection.
+ */
+function registerShortcuts(
+  shortcuts: Record<string, ShortcutConfig>
+): () => void {
+  const wrappedShortcuts: Record<string, ShortcutHandler> = {};
+
+  Object.entries(shortcuts).forEach(([key, config]) => {
+    wrappedShortcuts[key] = (event: KeyboardEvent) => {
+      if (!canOverrideAlphanumericInput(event.composedPath())) {
+        return;
+      }
+      if (!config.allowWhenTextSelected && window.getSelection()?.toString()) {
+        return;
+      }
+      config.handler(event);
+    };
+  });
+
+  return tinykeys(window, wrappedShortcuts);
+}
+
+/**
+ * Manages keyboard shortcuts registration and cleanup.
+ */
+export class ShortcutManager {
+  private _disposer?: () => void;
+
+  /**
+   * Register keyboard shortcuts.
+   * Uses tinykeys syntax: https://github.com/jamiebuilds/tinykeys#usage
+   */
+  public add(shortcuts: Record<string, ShortcutConfig>) {
+    this._disposer?.();
+    this._disposer = registerShortcuts(shortcuts);
+  }
+
+  /**
+   * Remove all registered shortcuts.
+   */
+  public remove() {
+    this._disposer?.();
+    this._disposer = undefined;
+  }
+}

src/components/chips/ha-filter-chip.ts

@@ -30,6 +30,7 @@ export class HaFilterChip extends FilterChip {
           var(--rgb-primary-text-color),
           0.15
         );
+        --_label-text-font: var(--ha-font-family-body);
         border-radius: var(--ha-border-radius-md);
       }
     `,

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

@@ -298,6 +298,18 @@ export class HaDataTable extends LitElement {
     }
 
     if (properties.has("data")) {
+      // Clean up checked rows that no longer exist in the data
+      if (this._checkedRows.length) {
+        const validIds = new Set(this.data.map((row) => String(row[this.id])));
+        const validCheckedRows = this._checkedRows.filter((id) =>
+          validIds.has(id)
+        );
+        if (validCheckedRows.length !== this._checkedRows.length) {
+          this._checkedRows = validCheckedRows;
+          this._checkedRowsChanged();
+        }
+      }
+
       this._checkableRowsCount = this.data.filter(
         (row) => row.selectable !== false
       ).length;

src/components/ha-date-input.ts

@@ -94,6 +94,12 @@ export class HaDateInput extends LitElement {
   }
 
   private _keyDown(ev: KeyboardEvent) {
+    if (["Space", "Enter"].includes(ev.code)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this._openDialog();
+      return;
+    }
     if (!this.canClear) {
       return;
     }

src/components/ha-hls-player.ts

@@ -60,6 +60,10 @@ class HaHLSPlayer extends LitElement {
   private static streamCount = 0;
 
   private _handleVisibilityChange = () => {
+    if (document.pictureInPictureElement) {
+      // video is playing in picture-in-picture mode, don't do anything
+      return;
+    }
     if (document.hidden) {
       this._cleanUp();
     } else {

src/components/ha-icon-overflow-menu.ts

@@ -66,7 +66,7 @@ export class HaIconOverflowMenu extends LitElement {
                         .path=${item.path}
                       ></ha-svg-icon>
                       ${item.label}
-                    </ha-md-menu-item> `
+                    </ha-md-menu-item>`
               )}
             </ha-md-button-menu>`
         : html`
@@ -103,6 +103,7 @@ export class HaIconOverflowMenu extends LitElement {
         :host {
           display: flex;
           justify-content: flex-end;
+          cursor: initial;
         }
         div[role="separator"] {
           border-right: 1px solid var(--divider-color);

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

@@ -27,6 +27,7 @@ export interface DisplayItem {
   label: string;
   description?: string;
   disableSorting?: boolean;
+  disableHiding?: boolean;
 }
 
 export interface DisplayValue {
@@ -101,6 +102,7 @@ export class HaItemDisplayEditor extends LitElement {
                 icon,
                 iconPath,
                 disableSorting,
+                disableHiding,
               } = item;
               return html`
                 <ha-md-list-item
@@ -155,18 +157,21 @@ export class HaItemDisplayEditor extends LitElement {
                         </div>
                       `
                     : nothing}
-                  <ha-icon-button
-                    .path=${isVisible ? mdiEye : mdiEyeOff}
-                    slot="end"
-                    .label=${this.hass.localize(
-                      `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
-                      {
-                        label: label,
-                      }
-                    )}
-                    .value=${value}
-                    @click=${this._toggle}
-                  ></ha-icon-button>
+                  ${isVisible && !disableHiding
+                    ? html`<ha-icon-button
+                        .path=${isVisible ? mdiEye : mdiEyeOff}
+                        slot="end"
+                        .label=${this.hass.localize(
+                          `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
+                          {
+                            label: label,
+                          }
+                        )}
+                        .value=${value}
+                        @click=${this._toggle}
+                        .disabled=${disableHiding || false}
+                      ></ha-icon-button>`
+                    : nothing}
                   ${isVisible && !disableSorting
                     ? html`
                         <ha-svg-icon

src/components/ha-md-dialog.ts

@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
         }
 
         .container {
-          padding-top: var(--safe-area-inset-top);
-          padding-bottom: var(--safe-area-inset-bottom);
-          padding-left: var(--safe-area-inset-left);
-          padding-right: var(--safe-area-inset-right);
+          margin-top: var(--safe-area-inset-top, var(--ha-space-0));
+          margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-right: var(--safe-area-inset-right, var(--ha-space-0));
         }
       }
 

src/components/ha-md-menu-item.ts

@@ -36,6 +36,11 @@ export class HaMdMenuItem extends MenuItemEl {
       ::slotted([slot="headline"]) {
         text-wrap: nowrap;
       }
+      :host([disabled]) {
+        opacity: 1;
+        --md-menu-item-label-text-color: var(--disabled-text-color);
+        --md-menu-item-leading-icon-color: var(--disabled-text-color);
+      }
     `,
   ];
 }

src/components/ha-navigation-picker.ts

@@ -6,6 +6,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import { fetchConfig } from "../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
+import { getPanelIcon, getPanelTitle } from "../data/panel";
 import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
@@ -42,13 +43,8 @@ const createViewNavigationItem = (
 
 const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
   path: `/${panel.url_path}`,
-  icon: panel.icon ?? "mdi:view-dashboard",
-  title:
-    panel.url_path === hass.defaultPanel
-      ? hass.localize("panel.states")
-      : hass.localize(`panel.${panel.title}`) ||
-        panel.title ||
-        (panel.url_path ? titleCase(panel.url_path) : ""),
+  icon: getPanelIcon(panel) || "mdi:view-dashboard",
+  title: getPanelTitle(hass, panel) || "",
 });
 
 @customElement("ha-navigation-picker")

src/components/ha-service-control.ts

@@ -33,6 +33,7 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-icon-button";
+import "./ha-markdown";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-service-section-icon";
@@ -684,10 +685,14 @@ export class HaServiceControl extends LitElement {
             dataField.key}</span
           >
           <span slot="description"
-            >${this.hass.localize(
-              `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
-            ) || dataField?.description}</span
-          >
+            ><ha-markdown
+              breaks
+              allow-svg
+              .content=${this.hass.localize(
+                `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
+              ) || dataField?.description}
+            ></ha-markdown>
+          </span>
           <ha-selector
             .context=${this._selectorContext(targetEntities)}
             .disabled=${this.disabled ||

src/components/ha-sidebar.ts

@@ -16,7 +16,7 @@ import {
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import {
   customElement,
   eventOptions,
@@ -33,6 +33,14 @@ import { computeRTL } from "../common/util/compute_rtl";
 import { throttle } from "../common/util/throttle";
 import { subscribeFrontendUserData } from "../data/frontend";
 import type { ActionHandlerDetail } from "../data/lovelace/action_handler";
+import {
+  FIXED_PANELS,
+  getDefaultPanelUrlPath,
+  getPanelIcon,
+  getPanelIconPath,
+  getPanelTitle,
+  SHOW_AFTER_SPACER_PANELS,
+} from "../data/panel";
 import type { PersistentNotification } from "../data/persistent_notification";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { subscribeRepairsIssueRegistry } from "../data/repairs";
@@ -53,8 +61,6 @@ import "./ha-spinner";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config", "developer-tools"];
-
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
 const SORT_VALUE_URL_PATHS = {
@@ -66,7 +72,7 @@ const SORT_VALUE_URL_PATHS = {
   config: 11,
 };
 
-export const PANEL_ICONS = {
+export const PANEL_ICON_PATHS = {
   calendar: mdiCalendar,
   "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
@@ -142,7 +148,7 @@ const defaultPanelSorter = (
 export const computePanels = memoizeOne(
   (
     panels: HomeAssistant["panels"],
-    defaultPanel: HomeAssistant["defaultPanel"],
+    defaultPanel: string,
     panelsOrder: string[],
     hiddenPanels: string[],
     locale: HomeAssistant["locale"]
@@ -154,16 +160,23 @@ export const computePanels = memoizeOne(
     const beforeSpacer: PanelInfo[] = [];
     const afterSpacer: PanelInfo[] = [];
 
-    Object.values(panels).forEach((panel) => {
+    const allPanels = Object.values(panels).filter(
+      (panel) => !FIXED_PANELS.includes(panel.url_path)
+    );
+
+    allPanels.forEach((panel) => {
+      const isDefaultPanel = panel.url_path === defaultPanel;
+
       if (
-        hiddenPanels.includes(panel.url_path) ||
-        (!panel.title && panel.url_path !== defaultPanel) ||
-        (panel.default_visible === false &&
-          !panelsOrder.includes(panel.url_path))
+        !isDefaultPanel &&
+        (!panel.title ||
+          hiddenPanels.includes(panel.url_path) ||
+          (panel.default_visible === false &&
+            !panelsOrder.includes(panel.url_path)))
       ) {
         return;
       }
-      (SHOW_AFTER_SPACER.includes(panel.url_path)
+      (SHOW_AFTER_SPACER_PANELS.includes(panel.url_path)
         ? afterSpacer
         : beforeSpacer
       ).push(panel);
@@ -251,9 +264,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     }
 
     // Show the supervisor as being part of configuration
-    const selectedPanel = this.route.path?.startsWith("/hassio/")
-      ? "config"
-      : this.hass.panelUrl;
+    const selectedPanel = this.hass.panelUrl;
 
     // prettier-ignore
     return html`
@@ -298,7 +309,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       hass.localize !== oldHass.localize ||
       hass.locale !== oldHass.locale ||
       hass.states !== oldHass.states ||
-      hass.defaultPanel !== oldHass.defaultPanel ||
+      hass.userData !== oldHass.userData ||
+      hass.systemData !== oldHass.systemData ||
       hass.connected !== oldHass.connected
     );
   }
@@ -395,21 +407,22 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _renderAllPanels(selectedPanel: string) {
     if (!this._panelOrder || !this._hiddenPanels) {
       return html`
-        <ha-fade-in .delay=${500}
-          ><ha-spinner size="small"></ha-spinner
-        ></ha-fade-in>
+        <ha-fade-in .delay=${500}>
+          <ha-spinner size="small"></ha-spinner>
+        </ha-fade-in>
       `;
     }
 
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.defaultPanel,
+      defaultPanel,
       this._panelOrder,
       this._hiddenPanels,
       this.hass.locale
     );
 
-    // prettier-ignore
     return html`
       <ha-md-list
         class="ha-scrollbar"
@@ -421,54 +434,39 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ${this._renderPanels(beforeSpacer, selectedPanel)}
         ${this._renderSpacer()}
         ${this._renderPanels(afterSpacer, selectedPanel)}
-        ${this._renderExternalConfiguration()}
+        ${this.hass.user?.is_admin
+          ? this._renderConfiguration(selectedPanel)
+          : this._renderExternalConfiguration()}
       </ha-md-list>
     `;
   }
 
   private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
     return panels.map((panel) =>
-      this._renderPanel(
-        panel.url_path,
-        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.defaultPanel && !panel.icon
-          ? PANEL_ICONS.lovelace
-          : panel.url_path in PANEL_ICONS
-            ? PANEL_ICONS[panel.url_path]
-            : undefined,
-        selectedPanel
-      )
+      this._renderPanel(panel, panel.url_path === selectedPanel)
     );
   }
 
-  private _renderPanel(
-    urlPath: string,
-    title: string | null,
-    icon: string | null | undefined,
-    iconPath: string | null | undefined,
-    selectedPanel: string
-  ) {
-    return urlPath === "config"
-      ? this._renderConfiguration(title, selectedPanel)
-      : html`
-          <ha-md-list-item
-            .href=${`/${urlPath}`}
-            type="link"
-            class=${classMap({
-              selected: selectedPanel === urlPath,
-            })}
-            @mouseenter=${this._itemMouseEnter}
-            @mouseleave=${this._itemMouseLeave}
-          >
-            ${iconPath
-              ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
-              : html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
-            <span class="item-text" slot="headline">${title}</span>
-          </ha-md-list-item>
-        `;
+  private _renderPanel(panel: PanelInfo, isSelected: boolean) {
+    const title = getPanelTitle(this.hass, panel);
+    const urlPath = panel.url_path;
+    const icon = getPanelIcon(panel);
+    const iconPath = getPanelIconPath(panel);
+
+    return html`
+      <ha-md-list-item
+        .href=${`/${urlPath}`}
+        type="link"
+        class=${classMap({ selected: isSelected })}
+        @mouseenter=${this._itemMouseEnter}
+        @mouseleave=${this._itemMouseLeave}
+      >
+        ${iconPath
+          ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
+          : html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
+        <span class="item-text" slot="headline">${title}</span>
+      </ha-md-list-item>
+    `;
   }
 
   private _renderDivider() {
@@ -479,10 +477,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     return html`<div class="spacer" disabled></div>`;
   }
 
-  private _renderConfiguration(title: string | null, selectedPanel: string) {
+  private _renderConfiguration(selectedPanel: string) {
+    if (!this.hass.user?.is_admin) {
+      return nothing;
+    }
+    const isSelected =
+      selectedPanel === "config" || this.route.path?.startsWith("/hassio/");
     return html`
       <ha-md-list-item
-        class="configuration${selectedPanel === "config" ? " selected" : ""}"
+        class="configuration ${classMap({ selected: isSelected })}"
         type="button"
         href="/config"
         @mouseenter=${this._itemMouseEnter}
@@ -496,15 +499,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
                 ${this._updatesCount + this._issuesCount}
               </span>
             `
-          : ""}
-        <span class="item-text" slot="headline">${title}</span>
+          : nothing}
+        <span class="item-text" slot="headline"
+          >${this.hass.localize("panel.config")}</span
+        >
         ${this.alwaysExpand && (this._updatesCount > 0 || this._issuesCount > 0)
           ? html`
               <span class="badge" slot="end"
                 >${this._updatesCount + this._issuesCount}</span
               >
             `
-          : ""}
+          : nothing}
       </ha-md-list-item>
     `;
   }
@@ -527,19 +532,20 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           ? html`
               <span class="badge" slot="start"> ${notificationCount} </span>
             `
-          : ""}
+          : nothing}
         <span class="item-text" slot="headline"
           >${this.hass.localize("ui.notification_drawer.title")}</span
         >
         ${this.alwaysExpand && notificationCount > 0
           ? html`<span class="badge" slot="end">${notificationCount}</span>`
-          : ""}
+          : nothing}
       </ha-md-list-item>
     `;
   }
 
   private _renderUserItem(selectedPanel: string) {
     const isRTL = computeRTL(this.hass);
+    const isSelected = selectedPanel === "profile";
 
     return html`
       <ha-md-list-item
@@ -547,7 +553,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         type="link"
         class=${classMap({
           user: true,
-          selected: selectedPanel === "profile",
+          selected: isSelected,
           rtl: isRTL,
         })}
         @mouseenter=${this._itemMouseEnter}
@@ -558,31 +564,30 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           .user=${this.hass.user}
           .hass=${this.hass}
         ></ha-user-badge>
-
-        <span class="item-text" slot="headline"
-          >${this.hass.user ? this.hass.user.name : ""}</span
-        >
+        <span class="item-text" slot="headline">
+          ${this.hass.user ? this.hass.user.name : ""}
+        </span>
       </ha-md-list-item>
     `;
   }
 
   private _renderExternalConfiguration() {
-    return html`${!this.hass.user?.is_admin &&
-    this.hass.auth.external?.config.hasSettingsScreen
-      ? html`
-          <ha-md-list-item
-            @click=${this._handleExternalAppConfiguration}
-            type="button"
-            @mouseenter=${this._itemMouseEnter}
-            @mouseleave=${this._itemMouseLeave}
-          >
-            <ha-svg-icon slot="start" .path=${mdiCellphoneCog}></ha-svg-icon>
-            <span class="item-text" slot="headline">
-              ${this.hass.localize("ui.sidebar.external_app_configuration")}
-            </span>
-          </ha-md-list-item>
-        `
-      : ""}`;
+    if (!this.hass.auth.external?.config.hasSettingsScreen) {
+      return nothing;
+    }
+    return html`
+      <ha-md-list-item
+        @click=${this._handleExternalAppConfiguration}
+        type="button"
+        @mouseenter=${this._itemMouseEnter}
+        @mouseleave=${this._itemMouseLeave}
+      >
+        <ha-svg-icon slot="start" .path=${mdiCellphoneCog}></ha-svg-icon>
+        <span class="item-text" slot="headline">
+          ${this.hass.localize("ui.sidebar.external_app_configuration")}
+        </span>
+      </ha-md-list-item>
+    `;
   }
 
   private _handleExternalAppConfiguration(ev: Event) {

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

@@ -62,6 +62,10 @@ class HaWebRtcPlayer extends LitElement {
   private _candidatesList: RTCIceCandidate[] = [];
 
   private _handleVisibilityChange = () => {
+    if (document.pictureInPictureElement) {
+      // video is playing in picture-in-picture mode, don't do anything
+      return;
+    }
     if (document.hidden) {
       this._cleanUp();
     } else {

src/components/search-input.ts

@@ -34,6 +34,7 @@ class SearchInput extends LitElement {
     return html`
       <ha-textfield
         .autofocus=${this.autofocus}
+        autocomplete="off"
         .label=${this.label || this.hass.localize("ui.common.search")}
         .value=${this.filter || ""}
         icon

src/data/analytics.ts

@@ -5,7 +5,6 @@ export interface AnalyticsPreferences {
   diagnostics?: boolean;
   usage?: boolean;
   statistics?: boolean;
-  snapshots?: boolean;
 }
 
 export interface Analytics {

src/data/area_floor.ts

@@ -1,3 +1,4 @@
+import { getAreasFloorHierarchy } from "../common/areas/areas-floor-hierarchy";
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
@@ -12,11 +13,7 @@ import {
 } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import {
-  floorCompare,
-  getFloorAreaLookup,
-  type FloorRegistryEntry,
-} from "./floor_registry";
+import type { FloorRegistryEntry } from "./floor_registry";
 
 export interface FloorComboBoxItem extends PickerComboBoxItem {
   type: "floor" | "area";
@@ -182,68 +179,59 @@ export const getAreasAndFloors = (
     );
   }
 
-  const floorAreaLookup = getFloorAreaLookup(outputAreas);
-  const unassignedAreas = Object.values(outputAreas).filter(
-    (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-  );
-
-  const compare = floorCompare(haFloors);
-
-  // @ts-ignore
-  const floorAreaEntries: [
-    FloorRegistryEntry | undefined,
-    AreaRegistryEntry[],
-  ][] = Object.entries(floorAreaLookup)
-    .map(([floorId, floorAreas]) => {
-      const floor = floors.find((fl) => fl.floor_id === floorId)!;
-      return [floor, floorAreas] as const;
-    })
-    .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
+  const hierarchy = getAreasFloorHierarchy(floors, outputAreas);
 
   const items: FloorComboBoxItem[] = [];
 
-  floorAreaEntries.forEach(([floor, floorAreas]) => {
-    if (floor) {
-      const floorName = computeFloorName(floor);
+  hierarchy.floors.forEach((f) => {
+    const floor = haFloors[f.id];
+    const floorAreas = f.areas.map((areaId) => haAreas[areaId]);
 
-      const areaSearchLabels = floorAreas
-        .map((area) => {
-          const areaName = computeAreaName(area) || area.area_id;
-          return [area.area_id, areaName, ...area.aliases];
-        })
-        .flat();
+    const floorName = computeFloorName(floor);
+
+    const areaSearchLabels = floorAreas
+      .map((area) => {
+        const areaName = computeAreaName(area);
+        return [area.area_id, ...(areaName ? [areaName] : []), ...area.aliases];
+      })
+      .flat();
+
+    items.push({
+      id: formatId({ id: floor.floor_id, type: "floor" }),
+      type: "floor",
+      primary: floorName,
+      floor: floor,
+      icon: floor.icon || undefined,
+      search_labels: [
+        floor.floor_id,
+        floorName,
+        ...floor.aliases,
+        ...areaSearchLabels,
+      ],
+    });
 
-      items.push({
-        id: formatId({ id: floor.floor_id, type: "floor" }),
-        type: "floor",
-        primary: floorName,
-        floor: floor,
-        icon: floor.icon || undefined,
-        search_labels: [
-          floor.floor_id,
-          floorName,
-          ...floor.aliases,
-          ...areaSearchLabels,
-        ],
-      });
-    }
     items.push(
       ...floorAreas.map((area) => {
-        const areaName = computeAreaName(area) || area.area_id;
+        const areaName = computeAreaName(area);
         return {
           id: formatId({ id: area.area_id, type: "area" }),
           type: "area" as const,
-          primary: areaName,
+          primary: areaName || area.area_id,
           area: area,
           icon: area.icon || undefined,
-          search_labels: [area.area_id, areaName, ...area.aliases],
+          search_labels: [
+            area.area_id,
+            ...(areaName ? [areaName] : []),
+            ...area.aliases,
+          ],
         };
       })
     );
   });
 
   items.push(
-    ...unassignedAreas.map((area) => {
+    ...hierarchy.areas.map((areaId) => {
+      const area = haAreas[areaId];
       const areaName = computeAreaName(area) || area.area_id;
       return {
         id: formatId({ id: area.area_id, type: "area" }),

src/data/area_registry.ts

@@ -59,6 +59,15 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
     area_id: areaId,
   });
 
+export const reorderAreaRegistryEntries = (
+  hass: HomeAssistant,
+  areaIds: string[]
+) =>
+  hass.callWS({
+    type: "config/area_registry/reorder",
+    area_ids: areaIds,
+  });
+
 export const getAreaEntityLookup = (
   entities: EntityRegistryEntry[]
 ): AreaEntityLookup => {

src/data/calendar.ts

@@ -31,6 +31,7 @@ export interface CalendarEventData {
   dtend: string;
   rrule?: string;
   description?: string;
+  location?: string;
 }
 
 export interface CalendarEventMutableParams {
@@ -39,6 +40,7 @@ export interface CalendarEventMutableParams {
   dtend: string;
   rrule?: string;
   description?: string;
+  location?: string;
 }
 
 // The scope of a delete/update for a recurring event
@@ -96,6 +98,7 @@ export const fetchCalendarEvents = async (
         uid: ev.uid,
         summary: ev.summary,
         description: ev.description,
+        location: ev.location,
         dtstart: eventStart,
         dtend: eventEnd,
         recurrence_id: ev.recurrence_id,

src/data/floor_registry.ts

@@ -51,6 +51,15 @@ export const deleteFloorRegistryEntry = (
     floor_id: floorId,
   });
 
+export const reorderFloorRegistryEntries = (
+  hass: HomeAssistant,
+  floorIds: string[]
+) =>
+  hass.callWS({
+    type: "config/floor_registry/reorder",
+    floor_ids: floorIds,
+  });
+
 export const getFloorAreaLookup = (
   areas: AreaRegistryEntry[]
 ): FloorAreaLookup => {

src/data/frontend.ts

@@ -3,11 +3,16 @@ import type { Connection } from "home-assistant-js-websocket";
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
+  defaultPanel?: string;
 }
 
 export interface SidebarFrontendUserData {
-  panelOrder: string[];
-  hiddenPanels: string[];
+  panelOrder?: string[];
+  hiddenPanels?: string[];
+}
+
+export interface CoreFrontendSystemData {
+  defaultPanel?: string;
 }
 
 declare global {
@@ -15,10 +20,15 @@ declare global {
     core: CoreFrontendUserData;
     sidebar: SidebarFrontendUserData;
   }
+  interface FrontendSystemData {
+    core: CoreFrontendSystemData;
+  }
 }
 
 export type ValidUserDataKey = keyof FrontendUserData;
 
+export type ValidSystemDataKey = keyof FrontendSystemData;
+
 export const fetchFrontendUserData = async <
   UserDataKey extends ValidUserDataKey,
 >(
@@ -59,3 +69,46 @@ export const subscribeFrontendUserData = <UserDataKey extends ValidUserDataKey>(
       key: userDataKey,
     }
   );
+
+export const fetchFrontendSystemData = async <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  key: SystemDataKey
+): Promise<FrontendSystemData[SystemDataKey] | null> => {
+  const result = await conn.sendMessagePromise<{
+    value: FrontendSystemData[SystemDataKey] | null;
+  }>({
+    type: "frontend/get_system_data",
+    key,
+  });
+  return result.value;
+};
+
+export const saveFrontendSystemData = async <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  key: SystemDataKey,
+  value: FrontendSystemData[SystemDataKey]
+): Promise<void> =>
+  conn.sendMessagePromise<undefined>({
+    type: "frontend/set_system_data",
+    key,
+    value,
+  });
+
+export const subscribeFrontendSystemData = <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  systemDataKey: SystemDataKey,
+  onChange: (data: { value: FrontendSystemData[SystemDataKey] | null }) => void
+) =>
+  conn.subscribeMessage<{ value: FrontendSystemData[SystemDataKey] | null }>(
+    onChange,
+    {
+      type: "frontend/subscribe_system_data",
+      key: systemDataKey,
+    }
+  );

src/data/panel.ts

@@ -1,26 +1,36 @@
-import { fireEvent } from "../common/dom/fire_event";
+import {
+  mdiAccount,
+  mdiCalendar,
+  mdiChartBox,
+  mdiClipboardList,
+  mdiFormatListBulletedType,
+  mdiHammer,
+  mdiLightningBolt,
+  mdiPlayBoxMultiple,
+  mdiTooltipAccount,
+  mdiViewDashboard,
+} from "@mdi/js";
 import type { HomeAssistant, PanelInfo } from "../types";
 
 /** Panel to show when no panel is picked. */
 export const DEFAULT_PANEL = "lovelace";
 
-export const getStorageDefaultPanelUrlPath = (): string => {
+export const getLegacyDefaultPanelUrlPath = (): string | null => {
   const defaultPanel = window.localStorage.getItem("defaultPanel");
-
-  return defaultPanel ? JSON.parse(defaultPanel) : DEFAULT_PANEL;
+  return defaultPanel ? JSON.parse(defaultPanel) : null;
 };
 
-export const setDefaultPanel = (
-  element: HTMLElement,
-  urlPath: string
-): void => {
-  fireEvent(element, "hass-default-panel", { defaultPanel: urlPath });
-};
+export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
+  hass.userData?.defaultPanel ||
+  hass.systemData?.defaultPanel ||
+  getLegacyDefaultPanelUrlPath() ||
+  DEFAULT_PANEL;
 
-export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
-  hass.panels[hass.defaultPanel]
-    ? hass.panels[hass.defaultPanel]
-    : hass.panels[DEFAULT_PANEL];
+export const getDefaultPanel = (hass: HomeAssistant): PanelInfo => {
+  const panel = getDefaultPanelUrlPath(hass);
+
+  return (panel ? hass.panels[panel] : undefined) ?? hass.panels[DEFAULT_PANEL];
+};
 
 export const getPanelNameTranslationKey = (panel: PanelInfo) => {
   if (panel.url_path === "lovelace") {
@@ -62,7 +72,7 @@ export const getPanelTitleFromUrlPath = (
   return getPanelTitle(hass, panel);
 };
 
-export const getPanelIcon = (panel: PanelInfo): string | null => {
+export const getPanelIcon = (panel: PanelInfo): string | undefined => {
   if (!panel.icon) {
     switch (panel.component_name) {
       case "profile":
@@ -72,5 +82,24 @@ export const getPanelIcon = (panel: PanelInfo): string | null => {
     }
   }
 
-  return panel.icon;
+  return panel.icon || undefined;
 };
+
+export const PANEL_ICON_PATHS = {
+  calendar: mdiCalendar,
+  "developer-tools": mdiHammer,
+  energy: mdiLightningBolt,
+  history: mdiChartBox,
+  logbook: mdiFormatListBulletedType,
+  lovelace: mdiViewDashboard,
+  profile: mdiAccount,
+  map: mdiTooltipAccount,
+  "media-browser": mdiPlayBoxMultiple,
+  todo: mdiClipboardList,
+};
+
+export const getPanelIconPath = (panel: PanelInfo): string | undefined =>
+  PANEL_ICON_PATHS[panel.url_path];
+
+export const FIXED_PANELS = ["profile", "config"];
+export const SHOW_AFTER_SPACER_PANELS = ["developer-tools"];

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

@@ -1,5 +1,5 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
-import { mdiClose } from "@mdi/js";
+import { mdiClose, mdiDotsVertical, mdiRestart } from "@mdi/js";
 import { css, html, LitElement, nothing, type TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -9,15 +9,28 @@ import "../../components/ha-dialog-header";
 import "../../components/ha-fade-in";
 import "../../components/ha-icon-button";
 import "../../components/ha-items-display-editor";
-import type { DisplayValue } from "../../components/ha-items-display-editor";
+import type {
+  DisplayItem,
+  DisplayValue,
+} from "../../components/ha-items-display-editor";
+import "../../components/ha-md-button-menu";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
-import { computePanels, PANEL_ICONS } from "../../components/ha-sidebar";
+import "../../components/ha-md-menu-item";
+import { computePanels } from "../../components/ha-sidebar";
 import "../../components/ha-spinner";
+import "../../components/ha-svg-icon";
 import {
   fetchFrontendUserData,
   saveFrontendUserData,
 } from "../../data/frontend";
+import {
+  getDefaultPanelUrlPath,
+  getPanelIcon,
+  getPanelIconPath,
+  getPanelTitle,
+  SHOW_AFTER_SPACER_PANELS,
+} from "../../data/panel";
 import type { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 
@@ -94,56 +107,63 @@ class DialogEditSidebar extends LitElement {
 
     const panels = this._panels(this.hass.panels);
 
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.defaultPanel,
+      defaultPanel,
       this._order,
       this._hidden,
       this.hass.locale
     );
 
-    // Add default hidden panels that are missing in hidden
+    const orderSet = new Set(this._order);
+    const hiddenSet = new Set(this._hidden);
+
     for (const panel of panels) {
       if (
         panel.default_visible === false &&
-        !this._order.includes(panel.url_path) &&
-        !this._hidden.includes(panel.url_path)
+        !orderSet.has(panel.url_path) &&
+        !hiddenSet.has(panel.url_path)
       ) {
-        this._hidden.push(panel.url_path);
+        hiddenSet.add(panel.url_path);
       }
     }
 
+    if (hiddenSet.has(defaultPanel)) {
+      hiddenSet.delete(defaultPanel);
+    }
+
+    const hiddenPanels = Array.from(hiddenSet);
+
     const items = [
       ...beforeSpacer,
-      ...panels.filter((panel) => this._hidden!.includes(panel.url_path)),
-      ...afterSpacer.filter((panel) => panel.url_path !== "config"),
-    ].map((panel) => ({
+      ...panels.filter((panel) => hiddenPanels.includes(panel.url_path)),
+      ...afterSpacer,
+    ].map<DisplayItem>((panel) => ({
       value: panel.url_path,
       label:
-        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.defaultPanel && !panel.icon
-          ? PANEL_ICONS.lovelace
-          : panel.url_path in PANEL_ICONS
-            ? PANEL_ICONS[panel.url_path]
-            : undefined,
-      disableSorting: panel.url_path === "developer-tools",
+        (getPanelTitle(this.hass, panel) || panel.url_path) +
+        `${defaultPanel === panel.url_path ? " (default)" : ""}`,
+      icon: getPanelIcon(panel),
+      iconPath: getPanelIconPath(panel),
+      disableSorting: SHOW_AFTER_SPACER_PANELS.includes(panel.url_path),
+      disableHiding: panel.url_path === defaultPanel,
     }));
 
-    return html`<ha-items-display-editor
-      .hass=${this.hass}
-      .value=${{
-        order: this._order,
-        hidden: this._hidden,
-      }}
-      .items=${items}
-      @value-changed=${this._changed}
-      dont-sort-visible
-    >
-    </ha-items-display-editor>`;
+    return html`
+      <ha-items-display-editor
+        .hass=${this.hass}
+        .value=${{
+          order: this._order,
+          hidden: hiddenPanels,
+        }}
+        .items=${items}
+        @value-changed=${this._changed}
+        dont-sort-visible
+      >
+      </ha-items-display-editor>
+    `;
   }
 
   protected render() {
@@ -168,6 +188,22 @@ class DialogEditSidebar extends LitElement {
                 >${this.hass.localize("ui.sidebar.edit_subtitle")}</span
               >`
             : nothing}
+          <ha-md-button-menu
+            slot="actionItems"
+            positioning="popover"
+            anchor-corner="end-end"
+            menu-corner="start-end"
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
+            <ha-md-menu-item .clickAction=${this._resetToDefaults}>
+              <ha-svg-icon slot="start" .path=${mdiRestart}></ha-svg-icon>
+              ${this.hass.localize("ui.sidebar.reset_to_defaults")}
+            </ha-md-menu-item>
+          </ha-md-button-menu>
         </ha-dialog-header>
         <div slot="content" class="content">${this._renderContent()}</div>
         <div slot="actions">
@@ -191,6 +227,26 @@ class DialogEditSidebar extends LitElement {
     this._hidden = [...hidden];
   }
 
+  private _resetToDefaults = async () => {
+    const confirmation = await showConfirmationDialog(this, {
+      text: this.hass.localize("ui.sidebar.reset_confirmation"),
+      confirmText: this.hass.localize("ui.common.reset"),
+    });
+
+    if (!confirmation) {
+      return;
+    }
+
+    this._order = [];
+    this._hidden = [];
+    try {
+      await saveFrontendUserData(this.hass.connection, "sidebar", {});
+    } catch (err: any) {
+      this._error = err.message || err;
+    }
+    this.closeDialog();
+  };
+
   private async _save() {
     if (this._migrateToUserData) {
       const confirmation = await showConfirmationDialog(this, {

src/layouts/home-assistant-main.ts

@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
@@ -46,10 +46,13 @@ export class HomeAssistantMain extends LitElement {
   protected render(): TemplateResult {
     const sidebarNarrow = this._sidebarNarrow || this._externalSidebar;
 
+    const isPanelReady =
+      this.hass.panels && this.hass.userData && this.hass.systemData;
+
     return html`
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
-        .open=${sidebarNarrow ? this._drawerOpen : undefined}
+        .open=${sidebarNarrow ? this._drawerOpen : false}
         .direction=${computeRTLDirection(this.hass)}
         @MDCDrawer:closed=${this._drawerClosed}
       >
@@ -59,12 +62,14 @@ export class HomeAssistantMain extends LitElement {
           .route=${this.route}
           .alwaysExpand=${sidebarNarrow || this.hass.dockedSidebar === "docked"}
         ></ha-sidebar>
-        <partial-panel-resolver
-          .narrow=${this.narrow}
-          .hass=${this.hass}
-          .route=${this.route}
-          slot="appContent"
-        ></partial-panel-resolver>
+        ${isPanelReady
+          ? html`<partial-panel-resolver
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+              .route=${this.route}
+              slot="appContent"
+            ></partial-panel-resolver>`
+          : nothing}
       </ha-drawer>
     `;
   }

src/layouts/home-assistant.ts

@@ -1,10 +1,10 @@
+import type { Connection } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
-import type { Connection } from "home-assistant-js-websocket";
+import { storage } from "../common/decorators/storage";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
-import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import type { WindowWithPreloads } from "../data/preloads";
 import type { RecorderInfo } from "../data/recorder";
 import { getRecorderInfo } from "../data/recorder";
@@ -23,7 +23,6 @@ import {
 } from "../util/register-service-worker";
 import "./ha-init-page";
 import "./home-assistant-main";
-import { storage } from "../common/decorators/storage";
 
 const useHash = __DEMO__;
 const curPath = () =>
@@ -53,11 +52,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     super();
     const path = curPath();
 
-    if (["", "/"].includes(path)) {
-      navigate(`/${getStorageDefaultPanelUrlPath()}${location.search}`, {
-        replace: true,
-      });
-    }
     this._route = {
       prefix: "",
       path,

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -80,10 +80,12 @@ class DialogCalendarEventDetail extends LitElement {
               ${this._data!.rrule
                 ? this._renderRRuleAsText(this._data.rrule)
                 : ""}
+              ${this._data.location
+                ? html`${this._data.location} <br />`
+                : nothing}
               ${this._data.description
                 ? html`<br />
-                    <div class="description">${this._data.description}</div>
-                    <br />`
+                    <div class="description">${this._data.description}</div>`
                 : nothing}
             </div>
           </div>
@@ -241,7 +243,7 @@ class DialogCalendarEventDetail extends LitElement {
       haStyleDialog,
       css`
         state-info {
-          line-height: 40px;
+          margin-top: 24px;
         }
         ha-svg-icon {
           width: 40px;

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -63,6 +63,8 @@ class DialogCalendarEventEditor extends LitElement {
 
   @state() private _description? = "";
 
+  @state() private _location? = "";
+
   @state() private _rrule?: string;
 
   @state() private _allDay = false;
@@ -79,6 +81,8 @@ class DialogCalendarEventEditor extends LitElement {
   // timezone, but floating without a timezone.
   private _timeZone?: string;
 
+  private _hasLocation = false;
+
   public showDialog(params: CalendarEventEditDialogParams): void {
     this._error = undefined;
     this._info = undefined;
@@ -99,6 +103,10 @@ class DialogCalendarEventEditor extends LitElement {
       this._allDay = isDate(entry.dtstart);
       this._summary = entry.summary;
       this._description = entry.description;
+      if (entry.location) {
+        this._hasLocation = true;
+        this._location = entry.location;
+      }
       this._rrule = entry.rrule;
       if (this._allDay) {
         this._dtstart = new Date(entry.dtstart + "T00:00:00");
@@ -130,6 +138,8 @@ class DialogCalendarEventEditor extends LitElement {
     this._dtend = undefined;
     this._summary = "";
     this._description = "";
+    this._location = "";
+    this._hasLocation = false;
     this._rrule = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -181,6 +191,15 @@ class DialogCalendarEventEditor extends LitElement {
             .validationMessage=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
           ></ha-textfield>
+          <ha-textfield
+            class="location"
+            name="location"
+            .label=${this.hass.localize(
+              "ui.components.calendar.event.location"
+            )}
+            .value=${this._location}
+            @change=${this._handleLocationChanged}
+          ></ha-textfield>
           <ha-textarea
             class="description"
             name="description"
@@ -326,6 +345,10 @@ class DialogCalendarEventEditor extends LitElement {
     this._description = ev.target.value;
   }
 
+  private _handleLocationChanged(ev: Event) {
+    this._location = (ev.target as HTMLInputElement).value;
+  }
+
   private _handleRRuleChanged(ev) {
     this._rrule = ev.detail.value;
   }
@@ -399,6 +422,7 @@ class DialogCalendarEventEditor extends LitElement {
     const data: CalendarEventMutableParams = {
       summary: this._summary,
       description: this._description,
+      location: this._location || (this._hasLocation ? "" : undefined),
       rrule: this._rrule || undefined,
       dtstart: "",
       dtend: "",

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

@@ -1,21 +1,17 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
   type EntityFilter,
 } from "../../../common/entity/entity_filter";
+import { floorDefaultIcon } from "../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
-import { floorDefaultIcon } from "../../../components/ha-floor-icon";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface ClimateViewStrategyConfig {
   type: "climate";
@@ -139,9 +135,9 @@ export class ClimateViewStrategy extends ReactiveElement {
     _config: ClimateViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -153,10 +149,11 @@ export class ClimateViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, climateFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -185,7 +182,7 @@ export class ClimateViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -200,7 +197,7 @@ export class ClimateViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForClimate(home.areas, hass, entities);
+      const areaCards = processAreasForClimate(hierarchy.areas, hass, entities);
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

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

@@ -2,38 +2,47 @@ import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
+  mdiDragHorizontalVariant,
   mdiHelpCircle,
   mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import {
-  LitElement,
-  type PropertyValues,
-  type TemplateResult,
   css,
   html,
+  LitElement,
   nothing,
+  type PropertyValues,
+  type TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import {
+  getAreasFloorHierarchy,
+  getAreasOrder,
+  getFloorOrder,
+  type AreasFloorHierarchy,
+} from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
 import "../../../components/ha-fab";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-sortable";
+import type { HaSortableOptions } from "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
 import {
   createAreaRegistryEntry,
+  reorderAreaRegistryEntries,
   updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import {
   createFloorRegistryEntry,
   deleteFloorRegistryEntry,
-  getFloorAreaLookup,
+  reorderFloorRegistryEntries,
   updateFloorRegistryEntry,
 } from "../../../data/floor_registry";
 import {
@@ -42,6 +51,7 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../types";
+import { showToast } from "../../../util/toast";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import {
@@ -52,7 +62,17 @@ import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-deta
 
 const UNASSIGNED_FLOOR = "__unassigned__";
 
-const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
+const SORT_OPTIONS: HaSortableOptions = {
+  sort: true,
+  delay: 500,
+  delayOnTouchOnly: true,
+};
+
+interface AreaStats {
+  devices: number;
+  services: number;
+  entities: number;
+}
 
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends LitElement {
@@ -64,55 +84,50 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _areas: AreaRegistryEntry[] = [];
+  @state() private _hierarchy?: AreasFloorHierarchy;
 
-  private _processAreas = memoizeOne(
+  private _blockHierarchyUpdate = false;
+
+  private _blockHierarchyUpdateTimeout?: number;
+
+  private _processAreasStats = memoizeOne(
     (
-      areas: AreaRegistryEntry[],
+      areas: HomeAssistant["areas"],
       devices: HomeAssistant["devices"],
-      entities: HomeAssistant["entities"],
-      floors: HomeAssistant["floors"]
-    ) => {
-      const processArea = (area: AreaRegistryEntry) => {
-        let noDevicesInArea = 0;
-        let noServicesInArea = 0;
-        let noEntitiesInArea = 0;
+      entities: HomeAssistant["entities"]
+    ): Map<string, AreaStats> => {
+      const computeAreaStats = (area: AreaRegistryEntry) => {
+        let devicesCount = 0;
+        let servicesCount = 0;
+        let entitiesCount = 0;
 
         for (const device of Object.values(devices)) {
           if (device.area_id === area.area_id) {
             if (device.entry_type === "service") {
-              noServicesInArea++;
+              servicesCount++;
             } else {
-              noDevicesInArea++;
+              devicesCount++;
             }
           }
         }
 
         for (const entity of Object.values(entities)) {
           if (entity.area_id === area.area_id) {
-            noEntitiesInArea++;
+            entitiesCount++;
           }
         }
 
         return {
-          ...area,
-          devices: noDevicesInArea,
-          services: noServicesInArea,
-          entities: noEntitiesInArea,
+          devices: devicesCount,
+          services: servicesCount,
+          entities: entitiesCount,
         };
       };
-
-      const floorAreaLookup = getFloorAreaLookup(areas);
-      const unassignedAreas = areas.filter(
-        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-      );
-      return {
-        floors: Object.values(floors).map((floor) => ({
-          ...floor,
-          areas: (floorAreaLookup[floor.floor_id] || []).map(processArea),
-        })),
-        unassignedAreas: unassignedAreas.map(processArea),
-      };
+      const areaStats = new Map<string, AreaStats>();
+      Object.values(areas).forEach((area) => {
+        areaStats.set(area.area_id, computeAreaStats(area));
+      });
+      return areaStats;
     }
   );
 
@@ -120,25 +135,32 @@ export class HaConfigAreasDashboard extends LitElement {
     super.willUpdate(changedProperties);
     if (changedProperties.has("hass")) {
       const oldHass = changedProperties.get("hass");
-      if (this.hass.areas !== oldHass?.areas) {
-        this._areas = Object.values(this.hass.areas);
+      if (
+        (this.hass.areas !== oldHass?.areas ||
+          this.hass.floors !== oldHass?.floors) &&
+        !this._blockHierarchyUpdate
+      ) {
+        this._computeHierarchy();
       }
     }
   }
 
-  protected render(): TemplateResult {
-    const areasAndFloors =
-      !this.hass.areas ||
-      !this.hass.devices ||
-      !this.hass.entities ||
-      !this.hass.floors
-        ? undefined
-        : this._processAreas(
-            this._areas,
-            this.hass.devices,
-            this.hass.entities,
-            this.hass.floors
-          );
+  private _computeHierarchy() {
+    this._hierarchy = getAreasFloorHierarchy(
+      Object.values(this.hass.floors),
+      Object.values(this.hass.areas)
+    );
+  }
+
+  protected render(): TemplateResult<1> | typeof nothing {
+    if (!this._hierarchy) {
+      return nothing;
+    }
+    const areasStats = this._processAreasStats(
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities
+    );
 
     return html`
       <hass-tabs-subpage
@@ -157,81 +179,120 @@ export class HaConfigAreasDashboard extends LitElement {
           @click=${this._showHelp}
         ></ha-icon-button>
         <div class="container">
-          ${areasAndFloors?.floors.map(
-            (floor) =>
-              html`<div class="floor">
-                <div class="header">
-                  <h2>
-                    <ha-floor-icon .floor=${floor}></ha-floor-icon>
-                    ${floor.name}
-                  </h2>
-                  <ha-button-menu
-                    .floor=${floor}
-                    @action=${this._handleFloorAction}
+          <ha-sortable
+            handle-selector=".handle"
+            draggable-selector=".floor"
+            @item-moved=${this._floorMoved}
+            .options=${SORT_OPTIONS}
+            group="floors"
+            invert-swap
+          >
+            <div class="floors">
+              ${this._hierarchy.floors.map(({ areas, id }) => {
+                const floor = this.hass.floors[id];
+                if (!floor) {
+                  return nothing;
+                }
+                return html`
+                  <div class="floor">
+                    <div class="header">
+                      <h2>
+                        <ha-floor-icon .floor=${floor}></ha-floor-icon>
+                        ${floor.name}
+                      </h2>
+                      <div class="actions">
+                        <ha-svg-icon
+                          class="handle"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
+                        <ha-button-menu
+                          .floor=${floor}
+                          @action=${this._handleFloorAction}
+                        >
+                          <ha-icon-button
+                            slot="trigger"
+                            .path=${mdiDotsVertical}
+                          ></ha-icon-button>
+                          <ha-list-item graphic="icon"
+                            ><ha-svg-icon
+                              .path=${mdiPencil}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.edit_floor"
+                            )}</ha-list-item
+                          >
+                          <ha-list-item class="warning" graphic="icon"
+                            ><ha-svg-icon
+                              class="warning"
+                              .path=${mdiDelete}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.delete_floor"
+                            )}</ha-list-item
+                          >
+                        </ha-button-menu>
+                      </div>
+                    </div>
+                    <ha-sortable
+                      handle-selector="a"
+                      draggable-selector="a"
+                      @item-added=${this._areaAdded}
+                      @item-moved=${this._areaMoved}
+                      group="areas"
+                      .options=${SORT_OPTIONS}
+                      .floor=${floor.floor_id}
+                    >
+                      <div class="areas">
+                        ${areas.map((areaId) => {
+                          const area = this.hass.areas[areaId];
+                          if (!area) {
+                            return nothing;
+                          }
+                          const stats = areasStats.get(area.area_id);
+                          return this._renderArea(area, stats);
+                        })}
+                      </div>
+                    </ha-sortable>
+                  </div>
+                `;
+              })}
+            </div>
+          </ha-sortable>
+
+          ${this._hierarchy.areas.length
+            ? html`
+                <div class="floor">
+                  <div class="header">
+                    <h2>
+                      ${this.hass.localize(
+                        "ui.panel.config.areas.picker.unassigned_areas"
+                      )}
+                    </h2>
+                  </div>
+                  <ha-sortable
+                    handle-selector="a"
+                    draggable-selector="a"
+                    @item-added=${this._areaAdded}
+                    @item-moved=${this._areaMoved}
+                    group="areas"
+                    .options=${SORT_OPTIONS}
+                    .floor=${UNASSIGNED_FLOOR}
                   >
-                    <ha-icon-button
-                      slot="trigger"
-                      .path=${mdiDotsVertical}
-                    ></ha-icon-button>
-                    <ha-list-item graphic="icon"
-                      ><ha-svg-icon
-                        .path=${mdiPencil}
-                        slot="graphic"
-                      ></ha-svg-icon
-                      >${this.hass.localize(
-                        "ui.panel.config.areas.picker.floor.edit_floor"
-                      )}</ha-list-item
-                    >
-                    <ha-list-item class="warning" graphic="icon"
-                      ><ha-svg-icon
-                        class="warning"
-                        .path=${mdiDelete}
-                        slot="graphic"
-                      ></ha-svg-icon
-                      >${this.hass.localize(
-                        "ui.panel.config.areas.picker.floor.delete_floor"
-                      )}</ha-list-item
-                    >
-                  </ha-button-menu>
+                    <div class="areas">
+                      ${this._hierarchy.areas.map((areaId) => {
+                        const area = this.hass.areas[areaId];
+                        if (!area) {
+                          return nothing;
+                        }
+                        const stats = areasStats.get(area.area_id);
+                        return this._renderArea(area, stats);
+                      })}
+                    </div>
+                  </ha-sortable>
                 </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-added=${this._areaAdded}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .floor=${floor.floor_id}
-                >
-                  <div class="areas">
-                    ${floor.areas.map((area) => this._renderArea(area))}
-                  </div>
-                </ha-sortable>
-              </div>`
-          )}
-          ${areasAndFloors?.unassignedAreas.length
-            ? html`<div class="floor">
-                <div class="header">
-                  <h2>
-                    ${this.hass.localize(
-                      "ui.panel.config.areas.picker.unassigned_areas"
-                    )}
-                  </h2>
-                </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-added=${this._areaAdded}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .floor=${UNASSIGNED_FLOOR}
-                >
-                  <div class="areas">
-                    ${areasAndFloors?.unassignedAreas.map((area) =>
-                      this._renderArea(area)
-                    )}
-                  </div>
-                </ha-sortable>
-              </div>`
+              `
             : nothing}
         </div>
         <ha-fab
@@ -259,56 +320,60 @@ export class HaConfigAreasDashboard extends LitElement {
     `;
   }
 
-  private _renderArea(area) {
-    return html`<a
-      href=${`/config/areas/area/${area.area_id}`}
-      .sortableData=${area}
-    >
-      <ha-card outlined>
-        <div
-          style=${styleMap({
-            backgroundImage: area.picture ? `url(${area.picture})` : undefined,
-          })}
-          class="picture ${!area.picture ? "placeholder" : ""}"
-        >
-          ${!area.picture && area.icon
-            ? html`<ha-icon .icon=${area.icon}></ha-icon>`
-            : ""}
-        </div>
-        <div class="card-header">
-          ${area.name}
-          <ha-icon-button
-            .area=${area}
-            .path=${mdiPencil}
-            @click=${this._openAreaDetails}
-          ></ha-icon-button>
-        </div>
-        <div class="card-content">
-          <div>
-            ${formatListWithAnds(
-              this.hass.locale,
-              [
-                area.devices &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.devices",
-                    { count: area.devices }
-                  ),
-                area.services &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.services",
-                    { count: area.services }
-                  ),
-                area.entities &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.entities",
-                    { count: area.entities }
-                  ),
-              ].filter((v): v is string => Boolean(v))
-            )}
+  private _renderArea(
+    area: AreaRegistryEntry,
+    stats: AreaStats | undefined
+  ): TemplateResult<1> {
+    return html`
+      <a href=${`/config/areas/area/${area.area_id}`} .sortableData=${area}>
+        <ha-card outlined>
+          <div
+            style=${styleMap({
+              backgroundImage: area.picture
+                ? `url(${area.picture})`
+                : undefined,
+            })}
+            class="picture ${!area.picture ? "placeholder" : ""}"
+          >
+            ${!area.picture && area.icon
+              ? html`<ha-icon .icon=${area.icon}></ha-icon>`
+              : ""}
           </div>
-        </div>
-      </ha-card>
-    </a>`;
+          <div class="card-header">
+            ${area.name}
+            <ha-icon-button
+              .area=${area}
+              .path=${mdiPencil}
+              @click=${this._openAreaDetails}
+            ></ha-icon-button>
+          </div>
+          <div class="card-content">
+            <div>
+              ${formatListWithAnds(
+                this.hass.locale,
+                [
+                  stats?.devices &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.devices",
+                      { count: stats.devices }
+                    ),
+                  stats?.services &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.services",
+                      { count: stats.services }
+                    ),
+                  stats?.entities &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.entities",
+                      { count: stats.entities }
+                    ),
+                ].filter((v): v is string => Boolean(v))
+              )}
+            </div>
+          </div>
+        </ha-card>
+      </a>
+    `;
   }
 
   protected firstUpdated(changedProps) {
@@ -326,24 +391,170 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
+  private async _floorMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+
+    const reorderFloors = (
+      floors: AreasFloorHierarchy["floors"],
+      oldIdx: number,
+      newIdx: number
+    ) => {
+      const newFloors = [...floors];
+      const [movedFloor] = newFloors.splice(oldIdx, 1);
+      newFloors.splice(newIdx, 0, movedFloor);
+      return newFloors;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: reorderFloors(this._hierarchy.floors, oldIndex, newIndex),
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+    const floorOrder = getFloorOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await reorderFloorRegistryEntries(this.hass, floorOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.floor_reorder_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
+  private async _areaMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { floor } = ev.currentTarget;
+    const { oldIndex, newIndex } = ev.detail;
+
+    const floorId = floor === UNASSIGNED_FLOOR ? null : floor;
+
+    // Reorder areas within the same floor
+    const reorderAreas = (areas: string[], oldIdx: number, newIdx: number) => {
+      const newAreas = [...areas];
+      const [movedArea] = newAreas.splice(oldIdx, 1);
+      newAreas.splice(newIdx, 0, movedArea);
+      return newAreas;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: this._hierarchy.floors.map((f) => {
+        if (f.id === floorId) {
+          return {
+            ...f,
+            areas: reorderAreas(f.areas, oldIndex, newIndex),
+          };
+        }
+        return f;
+      }),
+      areas:
+        floorId === null
+          ? reorderAreas(this._hierarchy.areas, oldIndex, newIndex)
+          : this._hierarchy.areas,
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.area_move_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
   private async _areaAdded(ev) {
     ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
     const { floor } = ev.currentTarget;
+    const { data: area, index } = ev.detail;
 
     const newFloorId = floor === UNASSIGNED_FLOOR ? null : floor;
 
-    const { data: area } = ev.detail;
+    // Insert area at the specified index
+    const insertAtIndex = (areas: string[], areaId: string, idx: number) => {
+      const newAreas = [...areas];
+      newAreas.splice(idx, 0, areaId);
+      return newAreas;
+    };
 
-    this._areas = this._areas.map<AreaRegistryEntry>((a) => {
-      if (a.area_id === area.area_id) {
-        return { ...a, floor_id: newFloorId };
-      }
-      return a;
-    });
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: this._hierarchy.floors.map((f) => {
+        if (f.id === newFloorId) {
+          return {
+            ...f,
+            areas: insertAtIndex(f.areas, area.area_id, index),
+          };
+        }
+        return {
+          ...f,
+          areas: f.areas.filter((id) => id !== area.area_id),
+        };
+      }),
+      areas:
+        newFloorId === null
+          ? insertAtIndex(this._hierarchy.areas, area.area_id, index)
+          : this._hierarchy.areas.filter((id) => id !== area.area_id),
+    };
 
-    await updateAreaRegistryEntry(this.hass, area.area_id, {
-      floor_id: newFloorId,
-    });
+    const areaOrder = getAreasOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await updateAreaRegistryEntry(this.hass, area.area_id, {
+        floor_id: newFloorId,
+      });
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.area_move_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
+  private _blockHierarchyUpdateFor(time: number) {
+    this._blockHierarchyUpdate = true;
+    if (this._blockHierarchyUpdateTimeout) {
+      window.clearTimeout(this._blockHierarchyUpdateTimeout);
+    }
+    this._blockHierarchyUpdateTimeout = window.setTimeout(() => {
+      this._blockHierarchyUpdate = false;
+    }, time);
   }
 
   private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
@@ -463,6 +674,10 @@ export class HaConfigAreasDashboard extends LitElement {
     .header ha-icon {
       margin-inline-end: 8px;
     }
+    .header .actions {
+      display: flex;
+      align-items: center;
+    }
     .areas {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -473,6 +688,10 @@ export class HaConfigAreasDashboard extends LitElement {
     .areas > * {
       max-width: 500px;
     }
+    .handle {
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
     ha-card {
       overflow: hidden;
     }

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

@@ -1336,7 +1336,7 @@ class DialogAddAutomationElement
           --md-list-item-trailing-space: var(--md-list-item-leading-space);
           --md-list-item-bottom-space: var(--ha-space-1);
           --md-list-item-top-space: var(--md-list-item-bottom-space);
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
+          --md-list-item-supporting-text-font: var(--ha-font-family-body);
           --md-list-item-one-line-container-height: var(--ha-space-10);
         }
         ha-bottom-sheet .groups {
@@ -1400,7 +1400,7 @@ class DialogAddAutomationElement
           --md-list-item-trailing-space: var(--md-list-item-leading-space);
           --md-list-item-bottom-space: var(--ha-space-2);
           --md-list-item-top-space: var(--md-list-item-bottom-space);
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
+          --md-list-item-supporting-text-font: var(--ha-font-family-body);
           gap: var(--ha-space-2);
           padding: var(--ha-space-0) var(--ha-space-4);
         }

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

@@ -1161,6 +1161,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   private async _delete(automation) {
     try {
       await deleteAutomation(this.hass, automation.attributes.id);
+      this._selected = this._selected.filter(
+        (entityId) => entityId !== automation.entity_id
+      );
     } catch (err: any) {
       await showAlertDialog(this, {
         text:

src/panels/config/core/ha-config-analytics.ts

@@ -1,10 +1,14 @@
+import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-svg-icon";
 import type { Analytics } from "../../../data/analytics";
 import {
   getAnalyticsDetails,
@@ -13,8 +17,6 @@ import {
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { isDevVersion } from "../../../common/config/version";
-import type { HaSwitch } from "../../../components/ha-switch";
 
 @customElement("ha-config-analytics")
 class ConfigAnalytics extends LitElement {
@@ -32,22 +34,10 @@ class ConfigAnalytics extends LitElement {
         : undefined;
 
     return html`
-      <ha-card
-        outlined
-        .header=${this.hass.localize("ui.panel.config.analytics.header") ||
-        "Home Assistant analytics"}
-      >
+      <ha-card outlined>
         <div class="card-content">
-          ${error ? html`<div class="error">${error}</div>` : nothing}
-          <p>
-            ${this.hass.localize("ui.panel.config.analytics.intro")}
-            <a
-              href=${documentationUrl(this.hass, "/integrations/analytics/")}
-              target="_blank"
-              rel="noreferrer"
-              >${this.hass.localize("ui.panel.config.analytics.learn_more")}</a
-            >.
-          </p>
+          ${error ? html`<div class="error">${error}</div>` : ""}
+          <p>${this.hass.localize("ui.panel.config.analytics.intro")}</p>
           <ha-analytics
             translation_key_panel="config"
             @analytics-preferences-changed=${this._preferencesChanged}
@@ -55,50 +45,26 @@ class ConfigAnalytics extends LitElement {
             .analytics=${this._analyticsDetails}
           ></ha-analytics>
         </div>
-      </ha-card>
-      ${isDevVersion(this.hass.config.version)
-        ? html`<ha-card
-            outlined
-            .header=${this.hass.localize(
-              "ui.panel.config.analytics.preferences.snapshots.header"
+        <div class="card-actions">
+          <ha-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          >
-            <div class="card-content">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.analytics.preferences.snapshots.info"
-                )}
-                <a
-                  href=${documentationUrl(this.hass, "/device-database/")}
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.analytics.preferences.snapshots.learn_more"
-                  )}</a
-                >.
-              </p>
-              <ha-settings-row>
-                <span slot="heading" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.title`
-                  )}
-                </span>
-                <span slot="description" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.description`
-                  )}
-                </span>
-                <ha-switch
-                  @change=${this._handleDeviceRowClick}
-                  .checked=${!!this._analyticsDetails?.preferences.snapshots}
-                  .disabled=${this._analyticsDetails === undefined}
-                  name="snapshots"
-                >
-                </ha-switch>
-              </ha-settings-row>
-            </div>
-          </ha-card>`
-        : nothing}
+          </ha-button>
+        </div>
+      </ha-card>
+      <div class="footer">
+        <ha-button
+          size="small"
+          appearance="plain"
+          href=${documentationUrl(this.hass, "/integrations/analytics/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+          ${this.hass.localize("ui.panel.config.analytics.learn_more")}
+        </ha-button>
+      </div>
     `;
   }
 
@@ -130,25 +96,11 @@ class ConfigAnalytics extends LitElement {
     }
   }
 
-  private _handleDeviceRowClick(ev: Event) {
-    const target = ev.target as HaSwitch;
-
-    this._analyticsDetails = {
-      ...this._analyticsDetails!,
-      preferences: {
-        ...this._analyticsDetails!.preferences,
-        snapshots: target.checked,
-      },
-    };
-    this._save();
-  }
-
   private _preferencesChanged(event: CustomEvent): void {
     this._analyticsDetails = {
       ...this._analyticsDetails!,
       preferences: event.detail.preferences,
     };
-    this._save();
   }
 
   static get styles(): CSSResultGroup {
@@ -165,10 +117,21 @@ class ConfigAnalytics extends LitElement {
         p {
           margin-top: 0;
         }
-        ha-card:not(:first-of-type) {
-          margin-top: 24px;
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
         }
-      `,
+        .footer {
+          padding: 32px 0 16px;
+          text-align: center;
+        }
+
+        ha-button[size="small"] ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+      `, // row-reverse so we tab first to "save"
     ];
   }
 }

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -87,7 +87,7 @@ class HaConfigEntryDeviceRow extends LitElement {
       ${!this.narrow
         ? html`<ha-icon-button
             slot="end"
-            @click=${this._handleEditDevice}
+            @click=${this._handleEditDeviceButton}
             .path=${mdiPencil}
             .label=${this.hass.localize(
               "ui.panel.config.integrations.config_entry.device.edit"
@@ -106,7 +106,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           .path=${mdiDotsVertical}
         ></ha-icon-button>
         ${this.narrow
-          ? html`<ha-md-menu-item @click=${this._handleEditDevice}>
+          ? html`<ha-md-menu-item .clickAction=${this._handleEditDevice}>
               <ha-svg-icon .path=${mdiPencil} slot="start"></ha-svg-icon>
               ${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.device.edit"
@@ -115,7 +115,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           : nothing}
         ${entities.length
           ? html`
-              <ha-md-menu-item @click=${this._handleNavigateToEntities}>
+              <ha-md-menu-item .clickAction=${this._handleNavigateToEntities}>
                 <ha-svg-icon
                   .path=${mdiShapeOutline}
                   slot="start"
@@ -130,7 +130,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           : nothing}
         <ha-md-menu-item
           class=${device.disabled_by !== "user" ? "warning" : ""}
-          @click=${this._handleDisableDevice}
+          .clickAction=${this._handleDisableDevice}
           .disabled=${device.disabled_by !== "user" && device.disabled_by}
         >
           <ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
@@ -160,7 +160,7 @@ class HaConfigEntryDeviceRow extends LitElement {
         ${this.entry.supports_remove_device
           ? html`<ha-md-menu-item
               class="warning"
-              @click=${this._handleDeleteDevice}
+              .clickAction=${this._handleDeleteDevice}
             >
               <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -175,21 +175,25 @@ class HaConfigEntryDeviceRow extends LitElement {
   private _getEntities = (): EntityRegistryEntry[] =>
     this.entities?.filter((entity) => entity.device_id === this.device.id);
 
-  private _handleEditDevice(ev: MouseEvent) {
+  private _handleEditDeviceButton(ev: MouseEvent) {
     ev.stopPropagation(); // Prevent triggering the click handler on the list item
+    this._handleEditDevice();
+  }
+
+  private _handleEditDevice = () => {
     showDeviceRegistryDetailDialog(this, {
       device: this.device,
       updateEntry: async (updates) => {
         await updateDeviceRegistryEntry(this.hass, this.device.id, updates);
       },
     });
-  }
+  };
 
-  private _handleNavigateToEntities() {
+  private _handleNavigateToEntities = () => {
     navigate(`/config/entities/?historyBack=1&device=${this.device.id}`);
-  }
+  };
 
-  private async _handleDisableDevice() {
+  private _handleDisableDevice = async () => {
     const disable = this.device.disabled_by === null;
 
     if (disable) {
@@ -263,9 +267,9 @@ class HaConfigEntryDeviceRow extends LitElement {
     await updateDeviceRegistryEntry(this.hass, this.device.id, {
       disabled_by: disable ? "user" : null,
     });
-  }
+  };
 
-  private async _handleDeleteDevice() {
+  private _handleDeleteDevice = async () => {
     const entry = this.entry;
     const confirmed = await showConfirmationDialog(this, {
       text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
@@ -290,7 +294,7 @@ class HaConfigEntryDeviceRow extends LitElement {
         text: err.message,
       });
     }
-  }
+  };
 
   private _handleNavigateToDevice() {
     navigate(`/config/devices/device/${this.device.id}`);

src/panels/config/integrations/ha-config-entry-row.ts

@@ -302,7 +302,7 @@ class HaConfigEntryRow extends LitElement {
           item.supports_unload &&
           item.source !== "system"
             ? html`
-                <ha-md-menu-item @click=${this._handleReload}>
+                <ha-md-menu-item .clickAction=${this._handleReload}>
                   <ha-svg-icon slot="start" .path=${mdiReload}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.reload"
@@ -311,14 +311,14 @@ class HaConfigEntryRow extends LitElement {
               `
             : nothing}
 
-          <ha-md-menu-item @click=${this._handleRename} graphic="icon">
+          <ha-md-menu-item .clickAction=${this._handleRename} graphic="icon">
             <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
           </ha-md-menu-item>
 
-          <ha-md-menu-item @click=${this._handleCopy} graphic="icon">
+          <ha-md-menu-item .clickAction=${this._handleCopy} graphic="icon">
             <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.copy"
@@ -328,7 +328,7 @@ class HaConfigEntryRow extends LitElement {
           ${Object.keys(item.supported_subentry_types).map(
             (flowType) =>
               html`<ha-md-menu-item
-                @click=${this._addSubEntry}
+                .clickAction=${this._addSubEntry}
                 .entry=${item}
                 .flowType=${flowType}
                 graphic="icon"
@@ -360,7 +360,7 @@ class HaConfigEntryRow extends LitElement {
           item.supports_reconfigure &&
           item.source !== "system"
             ? html`
-                <ha-md-menu-item @click=${this._handleReconfigure}>
+                <ha-md-menu-item .clickAction=${this._handleReconfigure}>
                   <ha-svg-icon slot="start" .path=${mdiWrench}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.reconfigure"
@@ -369,7 +369,10 @@ class HaConfigEntryRow extends LitElement {
               `
             : nothing}
 
-          <ha-md-menu-item @click=${this._handleSystemOptions} graphic="icon">
+          <ha-md-menu-item
+            .clickAction=${this._handleSystemOptions}
+            graphic="icon"
+          >
             <ha-svg-icon slot="start" .path=${mdiCogOutline}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.system_options"
@@ -377,7 +380,7 @@ class HaConfigEntryRow extends LitElement {
           </ha-md-menu-item>
           ${item.disabled_by === "user"
             ? html`
-                <ha-md-menu-item @click=${this._handleEnable}>
+                <ha-md-menu-item .clickAction=${this._handleEnable}>
                   <ha-svg-icon
                     slot="start"
                     .path=${mdiPlayCircleOutline}
@@ -389,7 +392,7 @@ class HaConfigEntryRow extends LitElement {
               ? html`
                   <ha-md-menu-item
                     class="warning"
-                    @click=${this._handleDisable}
+                    .clickAction=${this._handleDisable}
                     graphic="icon"
                   >
                     <ha-svg-icon
@@ -403,7 +406,10 @@ class HaConfigEntryRow extends LitElement {
               : nothing}
           ${item.source !== "system"
             ? html`
-                <ha-md-menu-item class="warning" @click=${this._handleDelete}>
+                <ha-md-menu-item
+                  class="warning"
+                  .clickAction=${this._handleDelete}
+                >
                   <ha-svg-icon
                     slot="start"
                     class="warning"
@@ -611,7 +617,7 @@ class HaConfigEntryRow extends LitElement {
     }
   }
 
-  private async _handleReload() {
+  private _handleReload = async () => {
     const result = await reloadConfigEntry(this.hass, this.entry.entry_id);
     const locale_key = result.require_restart
       ? "reload_restart_confirm"
@@ -621,9 +627,9 @@ class HaConfigEntryRow extends LitElement {
         `ui.panel.config.integrations.config_entry.${locale_key}`
       ),
     });
-  }
+  };
 
-  private async _handleReconfigure() {
+  private _handleReconfigure = async () => {
     showConfigFlowDialog(this, {
       startFlowHandler: this.entry.domain,
       showAdvanced: this.hass.userData?.showAdvanced,
@@ -631,18 +637,18 @@ class HaConfigEntryRow extends LitElement {
       entryId: this.entry.entry_id,
       navigateToResult: true,
     });
-  }
+  };
 
-  private async _handleCopy() {
+  private _handleCopy = async () => {
     await copyToClipboard(this.entry.entry_id);
     showToast(this, {
       message:
         this.hass?.localize("ui.common.copied_clipboard") ||
         "Copied to clipboard",
     });
-  }
+  };
 
-  private async _handleRename() {
+  private _handleRename = async () => {
     const newName = await showPromptDialog(this, {
       title: this.hass.localize("ui.panel.config.integrations.rename_dialog"),
       defaultValue: this.entry.title,
@@ -656,7 +662,7 @@ class HaConfigEntryRow extends LitElement {
     await updateConfigEntry(this.hass, this.entry.entry_id, {
       title: newName,
     });
-  }
+  };
 
   private async _signUrl(ev) {
     const anchor = ev.currentTarget;
@@ -668,7 +674,7 @@ class HaConfigEntryRow extends LitElement {
     fileDownload(signedUrl.path);
   }
 
-  private async _handleDisable() {
+  private _handleDisable = async () => {
     const entryId = this.entry.entry_id;
 
     const confirmed = await showConfirmationDialog(this, {
@@ -706,9 +712,9 @@ class HaConfigEntryRow extends LitElement {
         ),
       });
     }
-  }
+  };
 
-  private async _handleEnable() {
+  private _handleEnable = async () => {
     const entryId = this.entry.entry_id;
 
     let result: DisableConfigEntryResult;
@@ -731,9 +737,9 @@ class HaConfigEntryRow extends LitElement {
         ),
       });
     }
-  }
+  };
 
-  private async _handleDelete() {
+  private _handleDelete = async () => {
     const entryId = this.entry.entry_id;
 
     const applicationCredentialsId =
@@ -767,20 +773,20 @@ class HaConfigEntryRow extends LitElement {
     if (applicationCredentialsId) {
       this._removeApplicationCredential(applicationCredentialsId);
     }
-  }
+  };
 
-  private _handleSystemOptions() {
+  private _handleSystemOptions = () => {
     showConfigEntrySystemOptionsDialog(this, {
       entry: this.entry,
       manifest: this.manifest,
     });
-  }
+  };
 
-  private _addSubEntry(ev) {
-    showSubConfigFlowDialog(this, this.entry, ev.target.flowType, {
+  private _addSubEntry = (item) => {
+    showSubConfigFlowDialog(this, this.entry, item.flowType, {
       startFlowHandler: this.entry.entry_id,
     });
-  }
+  };
 
   static styles = [
     haStyle,

src/panels/config/integrations/ha-config-sub-entry-row.ts

@@ -145,13 +145,16 @@ class HaConfigSubEntryRow extends LitElement {
                 </ha-md-menu-item>
               `
             : nothing}
-          <ha-md-menu-item @click=${this._handleRenameSub}>
+          <ha-md-menu-item .clickAction=${this._handleRenameSub}>
             <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
           </ha-md-menu-item>
-          <ha-md-menu-item class="warning" @click=${this._handleDeleteSub}>
+          <ha-md-menu-item
+            class="warning"
+            .clickAction=${this._handleDeleteSub}
+          >
             <ha-svg-icon
               slot="start"
               class="warning"
@@ -222,7 +225,7 @@ class HaConfigSubEntryRow extends LitElement {
     });
   }
 
-  private async _handleRenameSub(): Promise<void> {
+  private _handleRenameSub = async (): Promise<void> => {
     const newName = await showPromptDialog(this, {
       title: this.hass.localize("ui.common.rename"),
       defaultValue: this.subEntry.title,
@@ -239,9 +242,9 @@ class HaConfigSubEntryRow extends LitElement {
       this.subEntry.subentry_id,
       { title: newName }
     );
-  }
+  };
 
-  private async _handleDeleteSub(): Promise<void> {
+  private _handleDeleteSub = async (): Promise<void> => {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.integrations.config_entry.delete_confirm_title",
@@ -263,7 +266,7 @@ class HaConfigSubEntryRow extends LitElement {
       this.entry.entry_id,
       this.subEntry.subentry_id
     );
-  }
+  };
 
   static styles = css`
     .expand-button {

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

@@ -4,16 +4,15 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
+import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
-import "../../../../components/ha-button";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type {
   LovelaceDashboard,
   LovelaceDashboardCreateParams,
   LovelaceDashboardMutableParams,
 } from "../../../../data/lovelace/dashboard";
-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";
@@ -59,8 +58,8 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     if (!this._params || !this._data) {
       return nothing;
     }
-    const defaultPanelUrlPath = this.hass.defaultPanel;
     const titleInvalid = !this._data.title || !this._data.title.trim();
+    const isLovelaceDashboard = this._params.urlPath === "lovelace";
 
     return html`
       <ha-dialog
@@ -85,9 +84,9 @@ export class DialogLovelaceDashboardDetail extends LitElement {
             ? this.hass.localize(
                 "ui.panel.config.lovelace.dashboards.cant_edit_yaml"
               )
-            : this._params.urlPath === "lovelace"
+            : isLovelaceDashboard
               ? this.hass.localize(
-                  "ui.panel.config.lovelace.dashboards.cant_edit_default"
+                  "ui.panel.config.lovelace.dashboards.cant_edit_lovelace"
                 )
               : html`
                   <ha-form
@@ -116,24 +115,9 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                       )}
                     </ha-button>
                   `
-                : ""}
-              <ha-button
-                slot="secondaryAction"
-                appearance="plain"
-                @click=${this._toggleDefault}
-                .disabled=${this._params.urlPath === "lovelace" &&
-                defaultPanelUrlPath === "lovelace"}
-              >
-                ${this._params.urlPath === defaultPanelUrlPath
-                  ? this.hass.localize(
-                      "ui.panel.config.lovelace.dashboards.detail.remove_default"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.config.lovelace.dashboards.detail.set_default"
-                    )}
-              </ha-button>
+                : nothing}
             `
-          : ""}
+          : nothing}
         <ha-button
           slot="primaryAction"
           @click=${this._updateDashboard}
@@ -251,17 +235,6 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     };
   }
 
-  private _toggleDefault() {
-    const urlPath = this._params?.urlPath;
-    if (!urlPath) {
-      return;
-    }
-    setDefaultPanel(
-      this,
-      urlPath === this.hass.defaultPanel ? DEFAULT_PANEL : urlPath
-    );
-  }
-
   private async _updateDashboard() {
     if (this._params?.urlPath && !this._params.dashboard?.id) {
       this.closeDialog();

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

@@ -1,8 +1,9 @@
 import {
   mdiCheck,
-  mdiCheckCircleOutline,
   mdiDelete,
   mdiDotsVertical,
+  mdiHomeCircleOutline,
+  mdiHomeEdit,
   mdiPencil,
   mdiPlus,
 } from "@mdi/js";
@@ -10,7 +11,6 @@ import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
-import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { storage } from "../../../../common/decorators/storage";
 import { navigate } from "../../../../common/navigate";
 import { stringCompare } from "../../../../common/string/compare";
@@ -29,6 +29,7 @@ import "../../../../components/ha-md-button-menu";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tooltip";
+import { saveFrontendSystemData } from "../../../../data/frontend";
 import type { LovelacePanelConfig } from "../../../../data/lovelace";
 import type { LovelaceRawConfig } from "../../../../data/lovelace/config/types";
 import {
@@ -45,6 +46,11 @@ import {
   fetchDashboards,
   updateDashboard,
 } from "../../../../data/lovelace/dashboard";
+import {
+  DEFAULT_PANEL,
+  getPanelIcon,
+  getPanelTitle,
+} from "../../../../data/panel";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
@@ -55,12 +61,21 @@ import { lovelaceTabs } from "../ha-config-lovelace";
 import { showDashboardConfigureStrategyDialog } from "./show-dialog-lovelace-dashboard-configure-strategy";
 import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail";
 
+export const PANEL_DASHBOARDS = [
+  "home",
+  "light",
+  "security",
+  "climate",
+  "energy",
+] as string[];
+
 type DataTableItem = Pick<
   LovelaceDashboard,
   "icon" | "title" | "show_in_sidebar" | "require_admin" | "mode" | "url_path"
 > & {
   default: boolean;
   filename: string;
+  localized_type: string;
   type: string;
 };
 
@@ -111,7 +126,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
     state: false,
     subscribe: false,
   })
-  private _activeGrouping?: string = "type";
+  private _activeGrouping?: string = "localized_type";
 
   @storage({
     key: "lovelace-dashboards-table-collapsed",
@@ -166,7 +181,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
                       <ha-svg-icon
                         .id="default-icon-${dashboard.title}"
                         style="padding-left: 10px; padding-inline-start: 10px; padding-inline-end: initial; direction: var(--direction);"
-                        .path=${mdiCheckCircleOutline}
+                        .path=${mdiHomeCircleOutline}
                       ></ha-svg-icon>
                       <ha-tooltip
                         .for="default-icon-${dashboard.title}"
@@ -182,7 +197,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         },
       };
 
-      columns.type = {
+      columns.localized_type = {
         title: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.type"
         ),
@@ -252,7 +267,15 @@ export class HaConfigLovelaceDashboards extends LitElement {
             .hass=${this.hass}
             narrow
             .items=${[
-              ...(this._canEdit(dashboard.url_path)
+              {
+                path: mdiHomeEdit,
+                label: localize(
+                  "ui.panel.config.lovelace.dashboards.picker.set_as_default"
+                ),
+                action: () => this._handleSetAsDefault(dashboard),
+                disabled: dashboard.default,
+              },
+              ...(dashboard.type === "user_created"
                 ? [
                     {
                       path: mdiPencil,
@@ -261,10 +284,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
                       ),
                       action: () => this._handleEdit(dashboard),
                     },
-                  ]
-                : []),
-              ...(this._canDelete(dashboard.url_path)
-                ? [
                     {
                       label: this.hass.localize(
                         "ui.panel.config.lovelace.dashboards.picker.delete"
@@ -286,93 +305,44 @@ export class HaConfigLovelaceDashboards extends LitElement {
   );
 
   private _getItems = memoize(
-    (dashboards: LovelaceDashboard[], defaultUrlPath: string) => {
-      const defaultMode = (
-        this.hass.panels?.lovelace?.config as LovelacePanelConfig
-      ).mode;
+    (dashboards: LovelaceDashboard[], defaultUrlPath: string | null) => {
+      const mode = (this.hass.panels?.lovelace?.config as LovelacePanelConfig)
+        .mode;
       const isDefault = defaultUrlPath === "lovelace";
       const result: DataTableItem[] = [
         {
           icon: "mdi:view-dashboard",
           title: this.hass.localize("panel.states"),
           default: isDefault,
-          show_in_sidebar: isDefault,
+          show_in_sidebar: true,
           require_admin: false,
           url_path: "lovelace",
-          mode: defaultMode,
-          filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
-          type: this._localizeType("built_in"),
+          mode: mode,
+          filename: mode === "yaml" ? "ui-lovelace.yaml" : "",
+          type: "built_in",
+          localized_type: this._localizeType("built_in"),
         },
       ];
-      if (isComponentLoaded(this.hass, "energy")) {
-        result.push({
-          icon: "mdi:lightning-bolt",
-          title: this.hass.localize(`ui.panel.config.dashboard.energy.main`),
-          show_in_sidebar: true,
-          mode: "storage",
-          url_path: "energy",
-          filename: "",
-          default: false,
-          require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
 
-      if (this.hass.panels.light) {
-        result.push({
-          icon: this.hass.panels.light.icon || "mdi:lamps",
-          title: this.hass.localize("panel.light"),
+      PANEL_DASHBOARDS.forEach((panel) => {
+        const panelInfo = this.hass.panels[panel];
+        if (!panel) {
+          return;
+        }
+        const item: DataTableItem = {
+          icon: getPanelIcon(panelInfo),
+          title: getPanelTitle(this.hass, panelInfo) || panelInfo.url_path,
           show_in_sidebar: true,
           mode: "storage",
-          url_path: "light",
+          url_path: panelInfo.url_path,
           filename: "",
-          default: false,
+          default: defaultUrlPath === panelInfo.url_path,
           require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
-
-      if (this.hass.panels.security) {
-        result.push({
-          icon: this.hass.panels.security.icon || "mdi:security",
-          title: this.hass.localize("panel.security"),
-          show_in_sidebar: true,
-          mode: "storage",
-          url_path: "security",
-          filename: "",
-          default: false,
-          require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
-
-      if (this.hass.panels.climate) {
-        result.push({
-          icon: this.hass.panels.climate.icon || "mdi:home-thermometer",
-          title: this.hass.localize("panel.climate"),
-          show_in_sidebar: true,
-          mode: "storage",
-          url_path: "climate",
-          filename: "",
-          default: false,
-          require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
-
-      if (this.hass.panels.home) {
-        result.push({
-          icon: this.hass.panels.home.icon || "mdi:home",
-          title: this.hass.localize("panel.home"),
-          show_in_sidebar: true,
-          mode: "storage",
-          url_path: "home",
-          filename: "",
-          default: false,
-          require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
+          type: "built_in",
+          localized_type: this._localizeType("built_in"),
+        };
+        result.push(item);
+      });
 
       result.push(
         ...dashboards
@@ -385,7 +355,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
                 filename: "",
                 ...dashboard,
                 default: defaultUrlPath === dashboard.url_path,
-                type: this._localizeType("user_created"),
+                type: "user_created",
+                localized_type: this._localizeType("user_created"),
               }) satisfies DataTableItem
           )
       );
@@ -403,6 +374,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
+    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -416,7 +389,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards,
           this.hass.localize
         )}
-        .data=${this._getItems(this._dashboards, this.hass.defaultPanel)}
+        .data=${this._getItems(this._dashboards, defaultPanel)}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
@@ -483,20 +456,15 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._openDetailDialog(dashboard, urlPath);
   }
 
-  private _canDelete(urlPath: string) {
-    return ![
-      "lovelace",
-      "energy",
-      "light",
-      "security",
-      "climate",
-      "home",
-    ].includes(urlPath);
-  }
-
-  private _canEdit(urlPath: string) {
-    return !["light", "security", "climate", "home"].includes(urlPath);
-  }
+  private _handleSetAsDefault = async (item: DataTableItem) => {
+    if (item.default) {
+      return;
+    }
+    await saveFrontendSystemData(this.hass.connection, "core", {
+      ...this.hass.systemData,
+      defaultPanel: item.url_path === DEFAULT_PANEL ? undefined : item.url_path,
+    });
+  };
 
   private _handleDelete = async (item: DataTableItem) => {
     const dashboard = this._dashboards.find(
@@ -578,10 +546,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
   private async _deleteDashboard(
     dashboard: LovelaceDashboard
   ): Promise<boolean> {
-    if (!this._canDelete(dashboard.url_path)) {
-      return false;
-    }
-
     const confirm = await showConfirmationDialog(this, {
       title: this.hass!.localize(
         "ui.panel.config.lovelace.dashboards.confirm_delete_title",

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

@@ -1112,6 +1112,9 @@ ${rejected
   private async _delete(scene: SceneEntity): Promise<void> {
     if (scene.attributes.id) {
       await deleteScene(this.hass, scene.attributes.id);
+      this._selected = this._selected.filter(
+        (entityId) => entityId !== scene.entity_id
+      );
     }
   }
 

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

@@ -1183,6 +1183,9 @@ ${rejected
       );
       if (entry) {
         await deleteScript(this.hass, entry.unique_id);
+        this._selected = this._selected.filter(
+          (entityId) => entityId !== script.entity_id
+        );
       }
     } catch (err: any) {
       await showAlertDialog(this, {

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

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { mdiPencil, mdiDownload } from "@mdi/js";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +6,7 @@ import "../../components/ha-menu-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-top-app-bar-fixed";
+import "../../components/ha-alert";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -21,6 +22,7 @@ import type {
   GasSourceTypeEnergyPreference,
   WaterSourceTypeEnergyPreference,
   DeviceConsumptionEnergyPreference,
+  EnergyCollection,
 } from "../../data/energy";
 import {
   computeConsumptionData,
@@ -30,13 +32,28 @@ import {
 import { fileDownload } from "../../util/file_download";
 import type { StatisticValue } from "../../data/recorder";
 
+export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+
 const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
   views: [
     {
       strategy: {
-        type: "energy",
+        type: "energy-overview",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
       },
     },
+    {
+      strategy: {
+        type: "energy-electricity",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+      },
+      path: "electricity",
+    },
+    {
+      type: "panel",
+      path: "setup",
+      cards: [{ type: "custom:energy-setup-wizard-card" }],
+    },
   ],
 };
 
@@ -46,13 +63,30 @@ class PanelEnergy extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @state() private _viewIndex = 0;
-
   @state() private _lovelace?: Lovelace;
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  public willUpdate(changedProps: PropertyValues) {
+  @state() private _error?: string;
+
+  @property({ attribute: false }) public route?: {
+    path: string;
+    prefix: string;
+  };
+
+  private _energyCollection?: EnergyCollection;
+
+  get _viewPath(): string | undefined {
+    const viewPath: string | undefined = this.route!.path.split("/")[1];
+    return viewPath ? decodeURI(viewPath) : undefined;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._loadPrefs();
+  }
+
+  public async willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
     }
@@ -62,22 +96,71 @@ class PanelEnergy extends LitElement {
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass?.locale !== this.hass.locale) {
       this._setLovelace();
-    }
-    if (oldHass && oldHass.localize !== this.hass.localize) {
+    } else if (oldHass && oldHass.localize !== this.hass.localize) {
       this._reloadView();
     }
   }
 
+  private async _loadPrefs() {
+    if (this._viewPath === "setup") {
+      await import("./cards/energy-setup-wizard-card");
+    } else {
+      this._energyCollection = getEnergyDataCollection(this.hass, {
+        key: DEFAULT_ENERGY_COLLECTION_KEY,
+      });
+      try {
+        // Have to manually refresh here as we don't want to subscribe yet
+        await this._energyCollection.refresh();
+      } catch (err: any) {
+        if (err.code === "not_found") {
+          navigate("/energy/setup");
+        }
+        this._error = err.message;
+        return;
+      }
+      const prefs = this._energyCollection.prefs!;
+      if (
+        prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0
+      ) {
+        // No energy sources available, start from scratch
+        navigate("/energy/setup");
+      }
+    }
+  }
+
   private _back(ev) {
     ev.stopPropagation();
     goBack();
   }
 
-  protected render(): TemplateResult {
+  protected render() {
+    if (!this._energyCollection?.prefs) {
+      // Still loading
+      return html`<div class="centered">
+        <ha-spinner size="large"></ha-spinner>
+      </div>`;
+    }
+    const { prefs } = this._energyCollection;
+    const isSingleView = prefs.energy_sources.every((source) =>
+      ["grid", "solar", "battery"].includes(source.type)
+    );
+    let viewPath = this._viewPath;
+    if (isSingleView) {
+      // if only electricity sources, show electricity view directly
+      viewPath = "electricity";
+    }
+    const viewIndex = Math.max(
+      ENERGY_LOVELACE_CONFIG.views.findIndex((view) => view.path === viewPath),
+      0
+    );
+    const showBack =
+      this._searchParms.has("historyBack") || (!isSingleView && viewIndex > 0);
+
     return html`
       <div class="header">
         <div class="toolbar">
-          ${this._searchParms.has("historyBack")
+          ${showBack
             ? html`
                 <ha-icon-button-arrow-prev
                   @click=${this._back}
@@ -99,7 +182,7 @@ class PanelEnergy extends LitElement {
 
           <hui-energy-period-selector
             .hass=${this.hass}
-            collection-key="energy_dashboard"
+            .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
           >
             ${this.hass.user?.is_admin
               ? html` <ha-list-item
@@ -127,12 +210,21 @@ class PanelEnergy extends LitElement {
         .hass=${this.hass}
         @reload-energy-panel=${this._reloadView}
       >
-        <hui-view
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-          .lovelace=${this._lovelace}
-          .index=${this._viewIndex}
-        ></hui-view>
+        ${this._error
+          ? html`<div class="centered">
+              <ha-alert alert-type="error">
+                An error occurred while fetching your energy preferences:
+                ${this._error}
+              </ha-alert>
+            </div>`
+          : this._lovelace
+            ? html`<hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${viewIndex}
+              ></hui-view>`
+            : nothing}
       </hui-view-container>
     `;
   }
@@ -160,9 +252,7 @@ class PanelEnergy extends LitElement {
 
   private async _dumpCSV(ev) {
     ev.stopPropagation();
-    const energyData = getEnergyDataCollection(this.hass, {
-      key: "energy_dashboard",
-    });
+    const energyData = this._energyCollection!;
 
     if (!energyData.prefs || !energyData.state.stats) {
       return;
@@ -459,11 +549,11 @@ class PanelEnergy extends LitElement {
   }
 
   private _reloadView() {
-    // Force strategy to be re-run by make a copy of the view
+    // Force strategy to be re-run by making a copy of the view
     const config = this._lovelace!.config;
     this._lovelace = {
       ...this._lovelace!,
-      config: { ...config, views: [{ ...config.views[0] }] },
+      config: { ...config, views: config.views.map((view) => ({ ...view })) },
     };
   }
 
@@ -565,6 +655,13 @@ class PanelEnergy extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
+        .centered {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       `,
     ];
   }

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

@@ -1,55 +1,35 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import type {
-  EnergyPreferences,
-  GridSourceTypeEnergyPreference,
-} from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
-
-@customElement("energy-view-strategy")
-export class EnergyViewStrategy extends ReactiveElement {
+@customElement("energy-electricity-view-strategy")
+export class EnergyElectricityViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const view: LovelaceViewConfig = { cards: [] };
 
-    let prefs: EnergyPreferences;
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.cards!.push({
-        type: "markdown",
-        content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-      });
-      return view;
-    }
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
 
-    // No energy sources available, start from scratch
+    // No energy sources available
     if (
-      prefs!.device_consumption.length === 0 &&
-      prefs!.energy_sources.length === 0
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
     ) {
-      return setupWizard();
+      return view;
     }
 
     view.type = "sidebar";
@@ -63,13 +43,9 @@ export class EnergyViewStrategy extends ReactiveElement {
     const hasSolar = prefs.energy_sources.some(
       (source) => source.type === "solar"
     );
-    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
 
     view.cards!.push({
       type: "energy-compare",
@@ -94,24 +70,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    // Only include if we have a gas source.
-    if (hasGas) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-        type: "energy-gas-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    // Only include if we have a water source.
-    if (hasWater) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -122,13 +80,14 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
+    if (hasGrid || hasSolar || hasBattery) {
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
         type: "energy-sources-table",
         collection_key: "energy_dashboard",
+        types: ["grid", "solar", "battery"],
       });
     }
 
@@ -170,20 +129,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_detail_graph_title"
-        ),
-        type: "energy-devices-detail-graph",
-        collection_key: "energy_dashboard",
-      });
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_graph_title"
-        ),
-        type: "energy-devices-graph",
-        collection_key: "energy_dashboard",
-      });
       const showFloorsNAreas = !prefs.device_consumption.some(
         (d) => d.included_in_stat
       );
@@ -194,6 +139,20 @@ export class EnergyViewStrategy extends ReactiveElement {
         group_by_floor: showFloorsNAreas,
         group_by_area: showFloorsNAreas,
       });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_graph_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: "energy_dashboard",
+      });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
+        collection_key: "energy_dashboard",
+      });
     }
 
     return view;
@@ -202,6 +161,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "energy-view-strategy": EnergyViewStrategy;
+    "energy-electricity-view-strategy": EnergyElectricityViewStrategy;
   }
 }

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

@@ -0,0 +1,218 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
+
+@customElement("energy-overview-view-strategy")
+export class EnergyViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [],
+      dense_section_placement: true,
+      max_columns: 2,
+    };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
+
+    // No energy sources available
+    if (
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
+    ) {
+      return view;
+    }
+
+    const hasGrid = prefs.energy_sources.find(
+      (source) =>
+        source.type === "grid" &&
+        (source.flow_from?.length || source.flow_to?.length)
+    ) as GridSourceTypeEnergyPreference;
+    const hasReturn = hasGrid && hasGrid.flow_to.length > 0;
+    const hasSolar = prefs.energy_sources.some(
+      (source) => source.type === "solar"
+    );
+    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
+    const hasBattery = prefs.energy_sources.some(
+      (source) => source.type === "battery"
+    );
+    const hasWater = prefs.energy_sources.some(
+      (source) => source.type === "water"
+    );
+    const hasPowerSources = prefs.energy_sources.find(
+      (source) =>
+        (source.type === "solar" && source.stat_rate) ||
+        (source.type === "battery" && source.stat_rate) ||
+        (source.type === "grid" && source.power?.length)
+    );
+    const hasPowerDevices = prefs.device_consumption.find(
+      (device) => device.stat_rate
+    );
+
+    const overviewSection: LovelaceSectionConfig = {
+      type: "grid",
+      column_span: 24,
+      cards: [],
+    };
+    if (hasPowerSources && hasPowerDevices) {
+      overviewSection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
+        type: "power-sankey",
+        collection_key: collectionKey,
+        grid_options: {
+          columns: 24,
+        },
+      });
+    }
+    // Only include if we have a grid or battery.
+    if (hasGrid || hasBattery) {
+      overviewSection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
+        type: "energy-distribution",
+        collection_key: collectionKey,
+      });
+    }
+    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
+      overviewSection.cards!.push({
+        type: "energy-sources-table",
+        collection_key: collectionKey,
+      });
+    }
+    view.sections!.push(overviewSection);
+
+    const electricitySection: LovelaceSectionConfig = {
+      type: "grid",
+      cards: [
+        {
+          type: "heading",
+          heading: hass.localize("ui.panel.energy.overview.electricity"),
+          tap_action: {
+            action: "navigate",
+            navigation_path: "/energy/electricity",
+          },
+        },
+      ],
+    };
+
+    if (hasPowerSources) {
+      electricitySection.cards!.push({
+        type: "power-sources-graph",
+        collection_key: collectionKey,
+      });
+    }
+    if (prefs!.device_consumption.length > 3) {
+      electricitySection.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_top_consumers_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: collectionKey,
+        max_devices: 3,
+        modes: ["bar"],
+      });
+    } else if (hasGrid) {
+      const gauges: LovelaceCardConfig[] = [];
+      // Only include if we have a grid source & return.
+      if (hasReturn) {
+        gauges.push({
+          type: "energy-grid-neutrality-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      gauges.push({
+        type: "energy-carbon-consumed-gauge",
+        view_layout: { position: "sidebar" },
+        collection_key: collectionKey,
+      });
+
+      // Only include if we have a solar source.
+      if (hasSolar) {
+        if (hasReturn) {
+          gauges.push({
+            type: "energy-solar-consumed-gauge",
+            view_layout: { position: "sidebar" },
+            collection_key: collectionKey,
+          });
+        }
+        gauges.push({
+          type: "energy-self-sufficiency-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      electricitySection.cards!.push({
+        type: "grid",
+        columns: 2,
+        square: false,
+        cards: gauges,
+      });
+    }
+
+    view.sections!.push(electricitySection);
+
+    if (hasGas) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.gas"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_gas_graph_title"
+            ),
+            type: "energy-gas-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    if (hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.water"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_water_graph_title"
+            ),
+            type: "energy-water-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "energy-overview-view-strategy": EnergyViewStrategy;
+  }
+}

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

@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
@@ -10,12 +11,7 @@ import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface LightViewStrategyConfig {
   type: "light";
@@ -85,9 +81,9 @@ export class LightViewStrategy extends ReactiveElement {
     _config: LightViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -99,10 +95,11 @@ export class LightViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, lightFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -131,7 +128,7 @@ export class LightViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -146,7 +143,7 @@ export class LightViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForLight(home.areas, hass, entities);
+      const areaCards = processAreasForLight(hierarchy.areas, hass, entities);
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

src/panels/lovelace/card-features/hui-bar-gauge-card-feature.ts

@@ -1,8 +1,9 @@
 import { css, LitElement, nothing, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { isNumericFromAttributes } from "../../../common/number/format_number";
 import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import type {
   LovelaceCardFeatureContext,
   BarGaugeCardFeatureConfig,
@@ -17,7 +18,7 @@ export const supportsBarGaugeCardFeature = (
     : undefined;
   if (!stateObj) return false;
   const domain = computeDomain(stateObj.entity_id);
-  return domain === "sensor" && stateObj.attributes.unit_of_measurement === "%";
+  return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
 };
 
 @customElement("hui-bar-gauge-card-feature")
@@ -34,6 +35,11 @@ class HuiBarGaugeCardFeature extends LitElement implements LovelaceCardFeature {
     };
   }
 
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import("../editor/config-elements/hui-bar-gauge-card-feature-editor");
+    return document.createElement("hui-bar-gauge-card-feature-editor");
+  }
+
   public setConfig(config: BarGaugeCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
@@ -53,8 +59,20 @@ class HuiBarGaugeCardFeature extends LitElement implements LovelaceCardFeature {
       return nothing;
     }
     const stateObj = this.hass.states[this.context.entity_id];
-    const value = stateObj.state;
-    return html`<div style="width: ${value}%"></div>
+    const min = this._config.min ?? 0;
+    const max = this._config.max ?? 100;
+    const value = parseFloat(stateObj.state);
+
+    if (isNaN(value) || min >= max) {
+      return nothing;
+    }
+
+    const percentage = Math.max(
+      0,
+      Math.min(100, ((value - min) / (max - min)) * 100)
+    );
+
+    return html`<div style="width: ${percentage}%"></div>
       <div class="bar-gauge-background"></div>`;
   }
 

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -124,16 +124,24 @@ class HuiHistoryChartCardFeature
     }
 
     const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+    const detail = this._config.detail !== false; // default to true (high detail)
 
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
+        // sample to 1 point per hour for low detail or 1 point per 5 pixels for high detail
+        const maxDetails = detail
+          ? Math.max(10, this.clientWidth / 5, hourToShow)
+          : Math.max(10, hourToShow);
+        const useMean = !detail;
         const { points, yAxisOrigin } =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
             this.clientWidth,
             this.clientHeight,
-            this.clientWidth / 5 // sample to 1 point per 5 pixels
+            maxDetails,
+            undefined,
+            useMean
           );
         this._coordinates = points;
         this._yAxisOrigin = yAxisOrigin;

src/panels/lovelace/card-features/types.ts

@@ -199,6 +199,7 @@ export interface UpdateActionsCardFeatureConfig {
 export interface TrendGraphCardFeatureConfig {
   type: "trend-graph";
   hours_to_show?: number;
+  detail?: boolean;
 }
 
 export const AREA_CONTROLS = [
@@ -226,6 +227,8 @@ export interface AreaControlsCardFeatureConfig {
 
 export interface BarGaugeCardFeatureConfig {
   type: "bar-gauge";
+  min?: number;
+  max?: number;
 }
 
 export type LovelaceCardFeaturePosition = "bottom" | "inline";

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

@@ -203,7 +203,7 @@ function formatTooltip(
           countNegative++;
         }
       }
-      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
+      return `${param.marker} ${filterXSS(param.seriesName!)}: <div style="direction:ltr; display: inline;">${value} ${unit}</div>`;
     })
     .filter(Boolean);
   let footer = "";

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

@@ -135,11 +135,13 @@ export class HuiEnergyDevicesGraphCard
       return nothing;
     }
 
+    const modes = this._getAllowedModes();
+
     return html`
       <ha-card>
         <div class="card-header">
           <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._getAllowedModes().length > 1
+          ${modes.length > 1
             ? html`
                 <ha-icon-button
                   .path=${this._chartType === "pie"
@@ -166,7 +168,7 @@ export class HuiEnergyDevicesGraphCard
               this._chartType,
               this._legendData
             )}
-            .height=${`${Math.max(300, (this._legendData?.length || 0) * 28 + 50)}px`}
+            .height=${`${Math.max(modes.includes("pie") ? 300 : 100, (this._legendData?.length || 0) * 28 + 50)}px`}
             .extraComponents=${[PieChart]}
             @chart-click=${this._handleChartClick}
             @dataset-hidden=${this._datasetHidden}
@@ -185,7 +187,7 @@ export class HuiEnergyDevicesGraphCard
       this.hass.locale,
       params.value < 0.1 ? { maximumFractionDigits: 3 } : undefined
     )} kWh`;
-    return `${title}${params.marker} ${params.seriesName}: ${value}`;
+    return `${title}${params.marker} ${params.seriesName}: <div style="direction:ltr; display: inline;">${value}</div>`;
   }
 
   private _createOptions = memoizeOne(
@@ -492,7 +494,7 @@ export class HuiEnergyDevicesGraphCard
           show: true,
           position: "center",
           color: computedStyle.getPropertyValue("--secondary-text-color"),
-          fontSize: computedStyle.getPropertyValue("--ha-font-size-l"),
+          fontSize: computedStyle.getPropertyValue("--ha-font-size-m"),
           lineHeight: 24,
           fontWeight: "bold",
           formatter: `{a}\n${formatNumber(totalChart, this.hass.locale)} kWh`,

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

@@ -2,6 +2,7 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 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 "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../../data/energy";
@@ -38,6 +39,8 @@ class HuiEnergySankeyCard
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public layout?: string;
+
   @state() private _config?: EnergySankeyCardConfig;
 
   @state() private _data?: EnergyData;
@@ -385,7 +388,14 @@ class HuiEnergySankeyCard
       (this._config.layout !== "horizontal" && this._isMobileSize);
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card
+        .header=${this._config.title}
+        class=${classMap({
+          "is-grid": this.layout === "grid",
+          "is-panel": this.layout === "panel",
+          "is-vertical": vertical,
+        })}
+      >
         <div class="card-content">
           ${hasData
             ? html`<ha-sankey-chart
@@ -402,7 +412,9 @@ class HuiEnergySankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)} kWh`;
+    `<div style="direction:ltr; display: inline;">
+      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
+      kWh</div>`;
 
   protected _groupByFloorAndArea(deviceNodes: Node[]) {
     const areas: Record<string, { value: number; devices: Node[] }> = {
@@ -508,17 +520,18 @@ class HuiEnergySankeyCard
   }
 
   static styles = css`
-    :host {
-      display: block;
-      height: calc(
-        var(--row-size, 8) *
-          (var(--row-height, 50px) + var(--row-gap, 0px)) - var(--row-gap, 0px)
-      );
-    }
     ha-card {
-      height: 100%;
+      height: 400px;
       display: flex;
       flex-direction: column;
+      --chart-max-height: none;
+    }
+    ha-card.is-vertical {
+      height: 500px;
+    }
+    ha-card.is-grid,
+    ha-card.is-panel {
+      height: 100%;
     }
     .card-content {
       flex: 1;

src/panels/lovelace/cards/energy/hui-power-sankey-card.ts

@@ -0,0 +1,739 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+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 "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
+import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
+import { getEnergyDataCollection } from "../../../../data/energy";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCard, LovelaceGridOptions } from "../../types";
+import type { PowerSankeyCardConfig } from "../types";
+import "../../../../components/chart/ha-sankey-chart";
+import type { Link, Node } from "../../../../components/chart/ha-sankey-chart";
+import { getGraphColorByIndex } from "../../../../common/color/colors";
+import { formatNumber } from "../../../../common/number/format_number";
+import { getEntityContext } from "../../../../common/entity/context/get_entity_context";
+import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
+
+const DEFAULT_CONFIG: Partial<PowerSankeyCardConfig> = {
+  group_by_floor: true,
+  group_by_area: true,
+};
+
+interface PowerData {
+  solar: number;
+  from_grid: number;
+  to_grid: number;
+  from_battery: number;
+  to_battery: number;
+  grid_to_battery: number;
+  battery_to_grid: number;
+  solar_to_battery: number;
+  solar_to_grid: number;
+  used_solar: number;
+  used_grid: number;
+  used_battery: number;
+  used_total: number;
+}
+
+@customElement("hui-power-sankey-card")
+class HuiPowerSankeyCard
+  extends SubscribeMixin(MobileAwareMixin(LitElement))
+  implements LovelaceCard
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public layout?: string;
+
+  @state() private _config?: PowerSankeyCardConfig;
+
+  @state() private _data?: EnergyData;
+
+  private _entities = new Set<string>();
+
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
+  public setConfig(config: PowerSankeyCardConfig): void {
+    this._config = { ...DEFAULT_CONFIG, ...config };
+  }
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass, {
+        key: this._config?.collection_key,
+      }).subscribe((data) => {
+        this._data = data;
+      }),
+    ];
+  }
+
+  public getCardSize(): Promise<number> | number {
+    return 5;
+  }
+
+  getGridOptions(): LovelaceGridOptions {
+    return {
+      columns: 12,
+      min_columns: 6,
+      rows: 6,
+      min_rows: 2,
+    };
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (
+      changedProps.has("_config") ||
+      changedProps.has("_data") ||
+      changedProps.has("_isMobileSize")
+    ) {
+      return true;
+    }
+
+    // Check if any of the tracked entity states have changed
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!oldHass || !this._entities.size) {
+        return true;
+      }
+
+      // Only update if one of our tracked entities changed
+      for (const entityId of this._entities) {
+        if (oldHass.states[entityId] !== this.hass.states[entityId]) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  protected render() {
+    if (!this._config) {
+      return nothing;
+    }
+
+    if (!this._data) {
+      return html`${this.hass.localize(
+        "ui.panel.lovelace.cards.energy.loading"
+      )}`;
+    }
+
+    const prefs = this._data.prefs;
+    const powerData = this._computePowerData(prefs);
+    const computedStyle = getComputedStyle(this);
+
+    const nodes: Node[] = [];
+    const links: Link[] = [];
+
+    // Create home node
+    const homeNode: Node = {
+      id: "home",
+      label: this.hass.localize(
+        "ui.panel.lovelace.cards.energy.energy_distribution.home"
+      ),
+      value: Math.max(0, powerData.used_total),
+      color: computedStyle.getPropertyValue("--primary-color").trim(),
+      index: 1,
+    };
+    nodes.push(homeNode);
+
+    // Add battery source and sink if available
+    if (powerData.from_battery > 0) {
+      nodes.push({
+        id: "battery",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.battery"
+        ),
+        value: powerData.from_battery,
+        color: computedStyle
+          .getPropertyValue("--energy-battery-out-color")
+          .trim(),
+        index: 0,
+      });
+      links.push({
+        source: "battery",
+        target: "home",
+      });
+    }
+
+    if (powerData.to_battery > 0) {
+      nodes.push({
+        id: "battery_in",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.battery"
+        ),
+        value: powerData.to_battery,
+        color: computedStyle
+          .getPropertyValue("--energy-battery-in-color")
+          .trim(),
+        index: 1,
+      });
+      if (powerData.grid_to_battery > 0) {
+        links.push({
+          source: "grid",
+          target: "battery_in",
+        });
+      }
+      if (powerData.solar_to_battery > 0) {
+        links.push({
+          source: "solar",
+          target: "battery_in",
+        });
+      }
+    }
+
+    // Add grid source if available
+    if (powerData.from_grid > 0) {
+      nodes.push({
+        id: "grid",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.grid"
+        ),
+        value: powerData.from_grid,
+        color: computedStyle
+          .getPropertyValue("--energy-grid-consumption-color")
+          .trim(),
+        index: 0,
+      });
+      links.push({
+        source: "grid",
+        target: "home",
+      });
+    }
+
+    // Add solar if available
+    if (powerData.solar > 0) {
+      nodes.push({
+        id: "solar",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.solar"
+        ),
+        value: powerData.solar,
+        color: computedStyle.getPropertyValue("--energy-solar-color").trim(),
+        index: 0,
+      });
+      links.push({
+        source: "solar",
+        target: "home",
+      });
+    }
+
+    // Add grid return if available
+    if (powerData.to_grid > 0) {
+      nodes.push({
+        id: "grid_return",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.grid"
+        ),
+        value: powerData.to_grid,
+        color: computedStyle
+          .getPropertyValue("--energy-grid-return-color")
+          .trim(),
+        index: 2,
+      });
+      if (powerData.battery_to_grid > 0) {
+        links.push({
+          source: "battery",
+          target: "grid_return",
+        });
+      }
+      if (powerData.solar_to_grid > 0) {
+        links.push({
+          source: "solar",
+          target: "grid_return",
+        });
+      }
+    }
+
+    let untrackedConsumption = homeNode.value;
+    const deviceNodes: Node[] = [];
+    const parentLinks: Record<string, string> = {};
+    prefs.device_consumption.forEach((device, idx) => {
+      if (!device.stat_rate) {
+        return;
+      }
+      const value = this._getCurrentPower(device.stat_rate);
+
+      if (value < 0.01) {
+        return;
+      }
+
+      const node = {
+        id: device.stat_rate,
+        label: device.name || this._getEntityLabel(device.stat_rate),
+        value,
+        color: getGraphColorByIndex(idx, computedStyle),
+        index: 4,
+        parent: device.included_in_stat,
+      };
+      if (node.parent) {
+        parentLinks[node.id] = node.parent;
+        links.push({
+          source: node.parent,
+          target: node.id,
+        });
+      } else {
+        untrackedConsumption -= value;
+      }
+      deviceNodes.push(node);
+    });
+    const devicesWithoutParent = deviceNodes.filter(
+      (node) => !parentLinks[node.id]
+    );
+
+    const { group_by_area, group_by_floor } = this._config;
+    if (group_by_area || group_by_floor) {
+      const { areas, floors } = this._groupByFloorAndArea(devicesWithoutParent);
+
+      Object.keys(floors)
+        .sort(
+          (a, b) =>
+            (this.hass.floors[b]?.level ?? -Infinity) -
+            (this.hass.floors[a]?.level ?? -Infinity)
+        )
+        .forEach((floorId) => {
+          let floorNodeId = `floor_${floorId}`;
+          if (floorId === "no_floor" || !group_by_floor) {
+            // link "no_floor" areas to home
+            floorNodeId = "home";
+          } else {
+            nodes.push({
+              id: floorNodeId,
+              label: this.hass.floors[floorId].name,
+              value: floors[floorId].value,
+              index: 2,
+              color: computedStyle.getPropertyValue("--primary-color").trim(),
+            });
+            links.push({
+              source: "home",
+              target: floorNodeId,
+            });
+          }
+          floors[floorId].areas.forEach((areaId) => {
+            let targetNodeId: string;
+
+            if (areaId === "no_area" || !group_by_area) {
+              // If group_by_area is false, link devices to floor or home
+              targetNodeId = floorNodeId;
+            } else {
+              // Create area node and link it to floor
+              const areaNodeId = `area_${areaId}`;
+              nodes.push({
+                id: areaNodeId,
+                label: this.hass.areas[areaId]?.name || areaId,
+                value: areas[areaId].value,
+                index: 3,
+                color: computedStyle.getPropertyValue("--primary-color").trim(),
+              });
+              links.push({
+                source: floorNodeId,
+                target: areaNodeId,
+                value: areas[areaId].value,
+              });
+              targetNodeId = areaNodeId;
+            }
+
+            // Link devices to the appropriate target (area, floor, or home)
+            areas[areaId].devices.forEach((device) => {
+              links.push({
+                source: targetNodeId,
+                target: device.id,
+                value: device.value,
+              });
+            });
+          });
+        });
+    } else {
+      devicesWithoutParent.forEach((deviceNode) => {
+        links.push({
+          source: "home",
+          target: deviceNode.id,
+          value: deviceNode.value,
+        });
+      });
+    }
+    const deviceSections = this._getDeviceSections(parentLinks, deviceNodes);
+    deviceSections.forEach((section, index) => {
+      section.forEach((node: Node) => {
+        nodes.push({ ...node, index: 4 + index });
+      });
+    });
+
+    // untracked consumption
+    if (untrackedConsumption > 0) {
+      nodes.push({
+        id: "untracked",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
+        ),
+        value: untrackedConsumption,
+        color: computedStyle
+          .getPropertyValue("--state-unavailable-color")
+          .trim(),
+        index: 3 + deviceSections.length,
+      });
+      links.push({
+        source: "home",
+        target: "untracked",
+        value: untrackedConsumption,
+      });
+    }
+
+    const hasData = nodes.some((node) => node.value > 0);
+
+    const vertical =
+      this._config.layout === "vertical" ||
+      (this._config.layout !== "horizontal" && this._isMobileSize);
+
+    return html`
+      <ha-card
+        .header=${this._config.title}
+        class=${classMap({
+          "is-grid": this.layout === "grid",
+          "is-panel": this.layout === "panel",
+          "is-vertical": vertical,
+        })}
+      >
+        <div class="card-content">
+          ${hasData
+            ? html`<ha-sankey-chart
+                .data=${{ nodes, links }}
+                .vertical=${vertical}
+                .valueFormatter=${this._valueFormatter}
+              ></ha-sankey-chart>`
+            : html`${this.hass.localize(
+                "ui.panel.lovelace.cards.energy.no_data"
+              )}`}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _valueFormatter = (value: number) =>
+    `<div style="direction:ltr; display: inline;">
+      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
+      kW</div>`;
+
+  /**
+   * Compute real-time power data from current entity states.
+   * Similar to computeConsumptionData but for instantaneous power.
+   */
+  private _computePowerData(prefs: EnergyPreferences): PowerData {
+    // Clear tracked entities and rebuild the set
+    this._entities.clear();
+
+    let solar = 0;
+    let from_grid = 0;
+    let to_grid = 0;
+    let from_battery = 0;
+    let to_battery = 0;
+
+    // Collect solar power
+    prefs.energy_sources
+      .filter((source) => source.type === "solar")
+      .forEach((source) => {
+        if (source.type === "solar" && source.stat_rate) {
+          const value = this._getCurrentPower(source.stat_rate);
+          if (value > 0) {
+            solar += value;
+          }
+        }
+      });
+
+    // Collect grid power (positive = import, negative = export)
+    prefs.energy_sources
+      .filter((source) => source.type === "grid" && source.power)
+      .forEach((source) => {
+        if (source.type === "grid" && source.power) {
+          source.power.forEach((powerSource) => {
+            const value = this._getCurrentPower(powerSource.stat_rate);
+            if (value > 0) {
+              from_grid += value;
+            } else if (value < 0) {
+              to_grid += Math.abs(value);
+            }
+          });
+        }
+      });
+
+    // Collect battery power (positive = discharge, negative = charge)
+    prefs.energy_sources
+      .filter((source) => source.type === "battery")
+      .forEach((source) => {
+        if (source.type === "battery" && source.stat_rate) {
+          const value = this._getCurrentPower(source.stat_rate);
+          if (value > 0) {
+            from_battery += value;
+          } else if (value < 0) {
+            to_battery += Math.abs(value);
+          }
+        }
+      });
+
+    // Calculate total consumption
+    const used_total = from_grid + solar + from_battery - to_grid - to_battery;
+
+    // Determine power routing using priority logic
+    // Priority: Solar -> Battery_In, Solar -> Grid_Out, Battery_Out -> Grid_Out,
+    // Grid_In -> Battery_In, Solar -> Consumption, Battery_Out -> Consumption, Grid_In -> Consumption
+
+    let solar_remaining = solar;
+    let grid_remaining = from_grid;
+    let battery_remaining = from_battery;
+    let to_battery_remaining = to_battery;
+    let to_grid_remaining = to_grid;
+    let used_total_remaining = Math.max(used_total, 0);
+
+    let grid_to_battery = 0;
+    let battery_to_grid = 0;
+    let solar_to_battery = 0;
+    let solar_to_grid = 0;
+    let used_solar = 0;
+    let used_battery = 0;
+    let used_grid = 0;
+
+    // Handle excess grid input to battery first
+    const excess_grid_in_after_consumption = Math.max(
+      0,
+      Math.min(to_battery_remaining, grid_remaining - used_total_remaining)
+    );
+    grid_to_battery += excess_grid_in_after_consumption;
+    to_battery_remaining -= excess_grid_in_after_consumption;
+    grid_remaining -= excess_grid_in_after_consumption;
+
+    // Solar -> Battery_In
+    solar_to_battery = Math.min(solar_remaining, to_battery_remaining);
+    to_battery_remaining -= solar_to_battery;
+    solar_remaining -= solar_to_battery;
+
+    // Solar -> Grid_Out
+    solar_to_grid = Math.min(solar_remaining, to_grid_remaining);
+    to_grid_remaining -= solar_to_grid;
+    solar_remaining -= solar_to_grid;
+
+    // Battery_Out -> Grid_Out
+    battery_to_grid = Math.min(battery_remaining, to_grid_remaining);
+    battery_remaining -= battery_to_grid;
+    to_grid_remaining -= battery_to_grid;
+
+    // Grid_In -> Battery_In (second pass)
+    const grid_to_battery_2 = Math.min(grid_remaining, to_battery_remaining);
+    grid_to_battery += grid_to_battery_2;
+    grid_remaining -= grid_to_battery_2;
+    to_battery_remaining -= grid_to_battery_2;
+
+    // Solar -> Consumption
+    used_solar = Math.min(used_total_remaining, solar_remaining);
+    used_total_remaining -= used_solar;
+    solar_remaining -= used_solar;
+
+    // Battery_Out -> Consumption
+    used_battery = Math.min(battery_remaining, used_total_remaining);
+    battery_remaining -= used_battery;
+    used_total_remaining -= used_battery;
+
+    // Grid_In -> Consumption
+    used_grid = Math.min(used_total_remaining, grid_remaining);
+    grid_remaining -= used_grid;
+    used_total_remaining -= used_grid;
+
+    return {
+      solar,
+      from_grid,
+      to_grid,
+      from_battery,
+      to_battery,
+      grid_to_battery,
+      battery_to_grid,
+      solar_to_battery,
+      solar_to_grid,
+      used_solar,
+      used_grid,
+      used_battery,
+      used_total: Math.max(0, used_total),
+    };
+  }
+
+  protected _groupByFloorAndArea(deviceNodes: Node[]) {
+    const areas: Record<string, { value: number; devices: Node[] }> = {
+      no_area: {
+        value: 0,
+        devices: [],
+      },
+    };
+    const floors: Record<string, { value: number; areas: string[] }> = {
+      no_floor: {
+        value: 0,
+        areas: ["no_area"],
+      },
+    };
+    deviceNodes.forEach((deviceNode) => {
+      const entity = this.hass.states[deviceNode.id];
+      const { area, floor } = entity
+        ? getEntityContext(
+            entity,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.floors
+          )
+        : { area: null, floor: null };
+      if (area) {
+        if (area.area_id in areas) {
+          areas[area.area_id].value += deviceNode.value;
+          areas[area.area_id].devices.push(deviceNode);
+        } else {
+          areas[area.area_id] = {
+            value: deviceNode.value,
+            devices: [deviceNode],
+          };
+        }
+        // see if the area has a floor
+        if (floor) {
+          if (floor.floor_id in floors) {
+            floors[floor.floor_id].value += deviceNode.value;
+            if (!floors[floor.floor_id].areas.includes(area.area_id)) {
+              floors[floor.floor_id].areas.push(area.area_id);
+            }
+          } else {
+            floors[floor.floor_id] = {
+              value: deviceNode.value,
+              areas: [area.area_id],
+            };
+          }
+        } else {
+          floors.no_floor.value += deviceNode.value;
+          if (!floors.no_floor.areas.includes(area.area_id)) {
+            floors.no_floor.areas.unshift(area.area_id);
+          }
+        }
+      } else {
+        areas.no_area.value += deviceNode.value;
+        areas.no_area.devices.push(deviceNode);
+      }
+    });
+    return { areas, floors };
+  }
+
+  /**
+   * Organizes device nodes into hierarchical sections based on parent-child relationships.
+   */
+  protected _getDeviceSections(
+    parentLinks: Record<string, string>,
+    deviceNodes: Node[]
+  ): Node[][] {
+    const parentSection: Node[] = [];
+    const childSection: Node[] = [];
+    const parentIds = Object.values(parentLinks);
+    const remainingLinks: typeof parentLinks = {};
+
+    deviceNodes.forEach((deviceNode) => {
+      const isChild = deviceNode.id in parentLinks;
+      const isParent = parentIds.includes(deviceNode.id);
+      if (isParent && !isChild) {
+        // Top-level parents (have children but no parents themselves)
+        parentSection.push(deviceNode);
+      } else {
+        childSection.push(deviceNode);
+      }
+    });
+
+    // Filter out links where parent is already in current parent section
+    Object.entries(parentLinks).forEach(([child, parent]) => {
+      if (!parentSection.some((node) => node.id === parent)) {
+        remainingLinks[child] = parent;
+      }
+    });
+
+    if (parentSection.length > 0) {
+      // Recursively process child section with remaining links
+      return [
+        parentSection,
+        ...this._getDeviceSections(remainingLinks, childSection),
+      ];
+    }
+
+    // Base case: no more parent-child relationships to process
+    return [deviceNodes];
+  }
+
+  /**
+   * Get current power value from entity state, normalized to kW
+   * @param entityId - The entity ID to get power value from
+   * @returns Power value in kW, or 0 if entity not found or invalid
+   */
+  private _getCurrentPower(entityId: string): number {
+    // Track this entity for state change detection
+    this._entities.add(entityId);
+
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj) {
+      return 0;
+    }
+    const value = parseFloat(stateObj.state);
+    if (isNaN(value)) {
+      return 0;
+    }
+
+    // Normalize to kW based on unit of measurement (case-sensitive)
+    // Supported units: GW, kW, MW, mW, TW, W
+    const unit = stateObj.attributes.unit_of_measurement;
+    switch (unit) {
+      case "W":
+        return value / 1000;
+      case "mW":
+        return value / 1000000;
+      case "MW":
+        return value * 1000;
+      case "GW":
+        return value * 1000000;
+      case "TW":
+        return value * 1000000000;
+      default:
+        // Assume kW if no unit or unit is kW
+        return value;
+    }
+  }
+
+  /**
+   * Get entity label (friendly name or entity ID)
+   * @param entityId - The entity ID to get label for
+   * @returns Friendly name if available, otherwise the entity ID
+   */
+  private _getEntityLabel(entityId: string): string {
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj) {
+      return entityId;
+    }
+    return stateObj.attributes.friendly_name || entityId;
+  }
+
+  static styles = css`
+    ha-card {
+      height: 400px;
+      display: flex;
+      flex-direction: column;
+      --chart-max-height: none;
+    }
+    ha-card.is-vertical {
+      height: 500px;
+    }
+    ha-card.is-grid,
+    ha-card.is-panel {
+      height: 100%;
+    }
+    .card-content {
+      flex: 1;
+      display: flex;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-power-sankey-card": HuiPowerSankeyCard;
+  }
+}

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

@@ -21,6 +21,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import { getCommonOptions, fillLineGaps } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts/echarts";
 import { hex2rgb } from "../../../../common/color/convert-color";
+import type { CustomLegendOption } from "../../../../components/chart/ha-chart-base";
 
 @customElement("hui-power-sources-graph-card")
 export class HuiPowerSourcesGraphCard
@@ -33,6 +34,8 @@ export class HuiPowerSourcesGraphCard
 
   @state() private _chartData: LineSeriesOption[] = [];
 
+  @state() private _legendData?: CustomLegendOption["data"];
+
   @state() private _start = startOfToday();
 
   @state() private _end = endOfToday();
@@ -91,7 +94,8 @@ export class HuiPowerSourcesGraphCard
               this.hass.locale,
               this.hass.config,
               this._compareStart,
-              this._compareEnd
+              this._compareEnd,
+              this._legendData
             )}
           ></ha-chart-base>
           ${!this._chartData.some((dataset) => dataset.data!.length)
@@ -115,9 +119,10 @@ export class HuiPowerSourcesGraphCard
       locale: FrontendLocaleData,
       config: HassConfig,
       compareStart?: Date,
-      compareEnd?: Date
-    ): ECOption =>
-      getCommonOptions(
+      compareEnd?: Date,
+      legendData?: CustomLegendOption["data"]
+    ): ECOption => ({
+      ...getCommonOptions(
         start,
         end,
         locale,
@@ -125,11 +130,18 @@ export class HuiPowerSourcesGraphCard
         "kW",
         compareStart,
         compareEnd
-      )
+      ),
+      legend: {
+        show: true,
+        type: "custom",
+        data: legendData,
+      },
+    })
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
     const datasets: LineSeriesOption[] = [];
+    this._legendData = [];
 
     const statIds = {
       solar: {
@@ -238,6 +250,15 @@ export class HuiPowerSourcesGraphCard
             z: 4 - keyIndex, // draw in reverse order but above positive series
           });
         }
+        this._legendData!.push({
+          id: key,
+          secondaryIds: key !== "solar" ? [`${key}-negative`] : [],
+          name: statIds[key].name,
+          itemStyle: {
+            color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
+            borderColor: colorHex,
+          },
+        });
       }
     });
 
@@ -268,11 +289,23 @@ export class HuiPowerSourcesGraphCard
       name: this.hass.localize(
         "ui.panel.lovelace.cards.energy.power_graph.usage"
       ),
-      color: computedStyles.getPropertyValue("--primary-color"),
-      lineStyle: { width: 2 },
+      color: computedStyles.getPropertyValue("--primary-text-color"),
+      lineStyle: {
+        type: [7, 2],
+        width: 1.5,
+      },
       data: usageData,
       z: 5,
     });
+    this._legendData!.push({
+      id: "usage",
+      name: this.hass.localize(
+        "ui.panel.lovelace.cards.energy.power_graph.usage"
+      ),
+      itemStyle: {
+        color: computedStyles.getPropertyValue("--primary-text-color"),
+      },
+    });
   }
 
   private _processData(stats: StatisticValue[][]) {

src/panels/lovelace/cards/types.ts

@@ -150,11 +150,6 @@ export interface EnergyCardBaseConfig extends LovelaceCardConfig {
   collection_key?: string;
 }
 
-export interface EnergySummaryCardConfig extends EnergyCardBaseConfig {
-  type: "energy-summary";
-  title?: string;
-}
-
 export interface EnergyDistributionCardConfig extends EnergyCardBaseConfig {
   type: "energy-distribution";
   title?: string;
@@ -236,6 +231,14 @@ export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
   title?: string;
 }
 
+export interface PowerSankeyCardConfig extends EnergyCardBaseConfig {
+  type: "power-sankey";
+  title?: string;
+  layout?: "vertical" | "horizontal" | "auto";
+  group_by_floor?: boolean;
+  group_by_area?: boolean;
+}
+
 export interface EntityFilterCardConfig extends LovelaceCardConfig {
   type: "entity-filter";
   entities: (EntityFilterEntityConfig | string)[];

src/panels/lovelace/create-element/create-card-element.ts

@@ -68,6 +68,7 @@ const LAZY_LOAD_TYPES = {
   "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"),
   "power-sources-graph": () =>
     import("../cards/energy/hui-power-sources-graph-card"),
+  "power-sankey": () => import("../cards/energy/hui-power-sankey-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
   error: () => import("../cards/hui-error-card"),
   "home-summary": () => import("../cards/hui-home-summary-card"),

src/panels/lovelace/editor/config-elements/hui-bar-gauge-card-feature-editor.ts

@@ -0,0 +1,87 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import type {
+  BarGaugeCardFeatureConfig,
+  LovelaceCardFeatureContext,
+} from "../../card-features/types";
+import type { LovelaceCardFeatureEditor } from "../../types";
+
+@customElement("hui-bar-gauge-card-feature-editor")
+export class HuiBarGaugeCardFeatureEditor
+  extends LitElement
+  implements LovelaceCardFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: BarGaugeCardFeatureConfig;
+
+  public setConfig(config: BarGaugeCardFeatureConfig): void {
+    this._config = config;
+  }
+
+  private _schema = memoizeOne(
+    () =>
+      [
+        {
+          name: "min",
+          default: 0,
+          selector: {
+            number: {
+              mode: "box",
+            },
+          },
+        },
+        {
+          name: "max",
+          default: 100,
+          selector: {
+            number: {
+              mode: "box",
+            },
+          },
+        },
+      ] as const
+  );
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const schema = this._schema();
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.features.types.bar-gauge.${schema.name}`
+    );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-bar-gauge-card-feature-editor": HuiBarGaugeCardFeatureEditor;
+  }
+}

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

@@ -123,6 +123,7 @@ type UiFeatureTypes = (typeof UI_FEATURE_TYPES)[number];
 const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "alarm-modes",
   "area-controls",
+  "bar-gauge",
   "button",
   "climate-fan-modes",
   "climate-hvac-modes",

src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts

@@ -20,6 +20,10 @@ const SCHEMA = [
     default: DEFAULT_HOURS_TO_SHOW,
     selector: { number: { min: 1, mode: "box" } },
   },
+  {
+    name: "detail",
+    selector: { boolean: {} },
+  },
 ] as const satisfies HaFormSchema[];
 
 @customElement("hui-trend-graph-card-feature-editor")
@@ -48,6 +52,10 @@ export class HuiTrendGraphCardFeatureEditor
       data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
     }
 
+    if (this._config.detail === undefined) {
+      data.detail = true;
+    }
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -69,6 +77,10 @@ export class HuiTrendGraphCardFeatureEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`
         );
+      case "detail":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.features.types.trend-graph.detail"
+        );
       default:
         return "";
     }

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

@@ -3,20 +3,21 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-md-dialog";
+import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-select";
 import "../../../../components/ha-md-select-option";
-import "../../../../components/ha-button";
 import "../../../../components/ha-spinner";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../../../data/lovelace/dashboard";
+import { getDefaultPanelUrlPath } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 
 @customElement("hui-dialog-select-dashboard")
 export class HuiDialogSelectDashboard extends LitElement {
@@ -143,7 +144,9 @@ export class HuiDialogSelectDashboard extends LitElement {
       ...(this._params!.dashboards || (await fetchDashboards(this.hass))),
     ];
 
-    const currentPath = this._fromUrlPath || this.hass.defaultPanel;
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
+    const currentPath = this._fromUrlPath || 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

@@ -16,6 +16,7 @@ import { fetchConfig } from "../../../../data/lovelace/config/types";
 import { isStrategyView } from "../../../../data/lovelace/config/view";
 import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../../../data/lovelace/dashboard";
+import { getDefaultPanelUrlPath } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { SelectViewDialogParams } from "./show-select-view-dialog";
@@ -60,6 +61,9 @@ export class HuiDialogSelectView extends LitElement {
     if (!this._params) {
       return nothing;
     }
+
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     return html`
       <ha-dialog
         open
@@ -76,7 +80,7 @@ export class HuiDialogSelectView extends LitElement {
                 "ui.panel.lovelace.editor.select_view.dashboard_label"
               )}
               .disabled=${!this._dashboards.length}
-              .value=${this._urlPath || this.hass.defaultPanel}
+              .value=${this._urlPath || defaultPanel}
               @selected=${this._dashboardChanged}
               @closed=${stopPropagation}
               fixedMenuPosition

src/panels/lovelace/strategies/get-strategy.ts

@@ -38,7 +38,10 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
   view: {
     "original-states": () =>
       import("./original-states/original-states-view-strategy"),
-    energy: () => import("../../energy/strategies/energy-view-strategy"),
+    "energy-overview": () =>
+      import("../../energy/strategies/energy-overview-view-strategy"),
+    "energy-electricity": () =>
+      import("../../energy/strategies/energy-electricity-view-strategy"),
     map: () => import("./map/map-view-strategy"),
     iframe: () => import("./iframe/iframe-view-strategy"),
     area: () => import("./areas/area-view-strategy"),

src/panels/lovelace/strategies/home/helpers/home-structure.ts

@@ -1,39 +0,0 @@
-import type { AreaRegistryEntry } from "../../../../../data/area_registry";
-import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
-
-interface HomeStructure {
-  floors: {
-    id: string;
-    areas: string[];
-  }[];
-  areas: string[];
-}
-
-export const getHomeStructure = (
-  floors: FloorRegistryEntry[],
-  areas: AreaRegistryEntry[]
-): HomeStructure => {
-  const floorAreas = new Map<string, string[]>();
-  const unassignedAreas: string[] = [];
-
-  for (const area of areas) {
-    if (area.floor_id) {
-      if (!floorAreas.has(area.floor_id)) {
-        floorAreas.set(area.floor_id, []);
-      }
-      floorAreas.get(area.floor_id)!.push(area.area_id);
-    } else {
-      unassignedAreas.push(area.area_id);
-    }
-  }
-
-  const homeStructure: HomeStructure = {
-    floors: floors.map((floor) => ({
-      id: floor.floor_id,
-      areas: floorAreas.get(floor.floor_id) || [],
-    })),
-    areas: unassignedAreas,
-  };
-
-  return homeStructure;
-};

src/panels/lovelace/strategies/home/home-dashboard-strategy.ts

@@ -4,7 +4,6 @@ import { customElement } from "lit/decorators";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
-import { getAreas } from "../areas/helpers/areas-strategy-helper";
 import type { LovelaceStrategyEditor } from "../types";
 import {
   getSummaryLabel,
@@ -46,7 +45,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
       };
     }
 
-    const areas = getAreas(hass.areas);
+    const areas = Object.values(hass.areas);
 
     const areaViews = areas.map<LovelaceViewRawConfig>((area) => {
       const path = `areas-${area.area_id}`;

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -22,9 +22,8 @@ import type {
   MarkdownCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
-import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
 import type { CommonControlSectionStrategyConfig } from "../usage_prediction/common-controls-section-strategy";
-import { getHomeStructure } from "./helpers/home-structure";
+import { getAreasFloorHierarchy } from "../../../../common/areas/areas-floor-hierarchy";
 import { HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeMainViewStrategyConfig {
@@ -64,10 +63,10 @@ export class HomeMainViewStrategy extends ReactiveElement {
     config: HomeMainViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
 
-    const home = getHomeStructure(floors, areas);
+    const home = getAreasFloorHierarchy(floors, areas);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -10,8 +10,7 @@ import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import type { MediaControlCardConfig } from "../../cards/types";
-import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "./helpers/home-structure";
+import { getAreasFloorHierarchy } from "../../../../common/areas/areas-floor-hierarchy";
 import { HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeMediaPlayersViewStrategyConfig {
@@ -85,9 +84,9 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
     _config: HomeMediaPlayersViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const home = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 

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

@@ -365,7 +365,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     @media (max-width: 600px) {
       :host {
-        --column-gap: var(--row-gap);
+        --column-gap: var(--ha-view-sections-narrow-column-gap, var(--row-gap));
       }
     }
 

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

@@ -6,8 +6,13 @@ 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";
+import { PANEL_DASHBOARDS } from "../config/lovelace/dashboards/ha-config-lovelace-dashboards";
+import { getPanelTitle } from "../../data/panel";
+import "../../components/ha-divider";
+
+const USE_SYSTEM_VALUE = "___use_system___";
 
 @customElement("ha-pick-dashboard-row")
 class HaPickDashboardRow extends LitElement {
@@ -23,6 +28,7 @@ class HaPickDashboardRow extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const value = this.hass.userData?.defaultPanel || USE_SYSTEM_VALUE;
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading">
@@ -37,15 +43,26 @@ class HaPickDashboardRow extends LitElement {
                 "ui.panel.profile.dashboard.dropdown_label"
               )}
               .disabled=${!this._dashboards?.length}
-              .value=${this.hass.defaultPanel}
+              .value=${value}
               @selected=${this._dashboardChanged}
               naturalMenuWidth
             >
-              <ha-list-item value="lovelace">
-                ${this.hass.localize(
-                  "ui.panel.profile.dashboard.default_dashboard_label"
-                )}
+              <ha-list-item .value=${USE_SYSTEM_VALUE}>
+                ${this.hass.localize("ui.panel.profile.dashboard.system")}
               </ha-list-item>
+              <ha-divider></ha-divider>
+              <ha-list-item value="lovelace">
+                ${this.hass.localize("ui.panel.profile.dashboard.lovelace")}
+              </ha-list-item>
+              ${PANEL_DASHBOARDS.map((panel) => {
+                const panelInfo = this.hass.panels[panel];
+                return html`
+                  <ha-list-item value="lovelace">
+                    ${panelInfo ? getPanelTitle(this.hass, panelInfo) : panel}
+                  </ha-list-item>
+                `;
+              })}
+              <ha-divider></ha-divider>
               ${this._dashboards.map((dashboard) => {
                 if (!this.hass.user!.is_admin && dashboard.require_admin) {
                   return "";
@@ -72,11 +89,18 @@ class HaPickDashboardRow extends LitElement {
   }
 
   private _dashboardChanged(ev) {
-    const urlPath = ev.target.value;
-    if (!urlPath || urlPath === this.hass.defaultPanel) {
+    const value = ev.target.value as string;
+    if (!value) {
       return;
     }
-    setDefaultPanel(this, urlPath);
+    const urlPath = value === USE_SYSTEM_VALUE ? undefined : value;
+    if (urlPath === this.hass.userData?.defaultPanel) {
+      return;
+    }
+    saveFrontendUserData(this.hass.connection, "core", {
+      ...this.hass.userData,
+      defaultPanel: urlPath,
+    });
   }
 }
 

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

@@ -154,6 +154,10 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
+            <ha-pick-dashboard-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-dashboard-row>
             <ha-settings-row .narrow=${this.narrow}>
               <span slot="heading">
                 ${this.hass.localize(
@@ -208,10 +212,6 @@ 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/panels/security/strategies/security-view-strategy.ts

@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
@@ -10,12 +11,7 @@ import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface SecurityViewStrategyConfig {
   type: "security";
@@ -127,9 +123,9 @@ export class SecurityViewStrategy extends ReactiveElement {
     _config: SecurityViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -141,10 +137,11 @@ export class SecurityViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, securityFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -173,7 +170,7 @@ export class SecurityViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -188,7 +185,11 @@ export class SecurityViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForSecurity(home.areas, hass, entities);
+      const areaCards = processAreasForSecurity(
+        hierarchy.areas,
+        hass,
+        entities
+      );
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

src/state/connection-mixin.ts

@@ -8,13 +8,16 @@ import {
   subscribeServices,
 } from "home-assistant-js-websocket";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeStateName } from "../common/entity/compute_state_name";
 import { promiseTimeout } from "../common/util/promise-timeout";
 import { subscribeAreaRegistry } from "../data/area_registry";
 import { broadcastConnectionStatus } from "../data/connection-status";
 import { subscribeDeviceRegistry } from "../data/device_registry";
-import { subscribeFrontendUserData } from "../data/frontend";
+import {
+  subscribeFrontendSystemData,
+  subscribeFrontendUserData,
+} from "../data/frontend";
 import { forwardHaptic } from "../data/haptics";
-import { DEFAULT_PANEL } from "../data/panel";
 import { serviceCallWillDisconnect } from "../data/service";
 import {
   DateFormat,
@@ -33,7 +36,6 @@ import { fetchWithAuth } from "../util/fetch-with-auth";
 import { getState } from "../util/ha-pref-storage";
 import hassCallApi, { hassCallApiRaw } from "../util/hass-call-api";
 import type { HassBaseEl } from "./hass-base-mixin";
-import { computeStateName } from "../common/entity/compute_state_name";
 
 export const connectionMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
@@ -59,8 +61,9 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         panels: null as any,
         services: null as any,
         user: null as any,
+        userData: undefined,
+        systemData: undefined,
         panelUrl: (this as any)._panelUrl,
-        defaultPanel: DEFAULT_PANEL,
         language,
         selectedLanguage: null,
         locale: {
@@ -73,7 +76,6 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         },
         resources: null as any,
         localize: () => "",
-
         translationMetadata,
         dockedSidebar: "docked",
         vibrate: true,
@@ -209,9 +211,9 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         formatEntityAttributeName: (_stateObj, attribute) => attribute,
         formatEntityAttributeValue: (stateObj, attribute, value) =>
           value != null ? value : (stateObj.attributes[attribute] ?? ""),
+        formatEntityName: (stateObj) => computeStateName(stateObj),
         ...getState(),
         ...this._pendingHass,
-        formatEntityName: (stateObj) => computeStateName(stateObj),
       };
 
       this.hassConnected();
@@ -282,10 +284,26 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
       subscribeConfig(conn, (config) => this._updateHass({ config }));
       subscribeServices(conn, (services) => this._updateHass({ services }));
       subscribePanels(conn, (panels) => this._updateHass({ panels }));
-      subscribeFrontendUserData(conn, "core", ({ value: userData }) => {
-        this._updateHass({ userData });
+      // Catch errors to userData and systemData subscription (e.g. if the
+      // backend isn't up to date) and set to null so frontend can continue
+      subscribeFrontendUserData(conn, "core", ({ value: userData }) =>
+        this._updateHass({ userData: userData || {} })
+      ).catch(() => {
+        // eslint-disable-next-line no-console
+        console.error(
+          "Failed to subscribe to user data, setting to empty object"
+        );
+        this._updateHass({ userData: {} });
+      });
+      subscribeFrontendSystemData(conn, "core", ({ value: systemData }) =>
+        this._updateHass({ systemData: systemData || {} })
+      ).catch(() => {
+        // eslint-disable-next-line no-console
+        console.error(
+          "Failed to subscribe to system data, setting to empty object"
+        );
+        this._updateHass({ systemData: {} });
       });
-
       clearInterval(this.__backendPingInterval);
       this.__backendPingInterval = setInterval(() => {
         if (this.hass?.connected) {

src/state/quick-bar-mixin.ts

@@ -1,5 +1,4 @@
 import type { PropertyValues } from "lit";
-import { tinykeys } from "tinykeys";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { mainWindow } from "../common/dom/get_main_window";
@@ -12,9 +11,9 @@ import type { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { showToast } from "../util/toast";
 import type { HassElement } from "./hass-element";
+import { ShortcutManager } from "../common/keyboard/shortcuts";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import { showVoiceCommandDialog } from "../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";
 import { showShortcutsDialog } from "../dialogs/shortcuts/show-shortcuts-dialog";
 import type { Redirects } from "../panels/my/ha-panel-my";
 
@@ -62,21 +61,22 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _registerShortcut() {
-      tinykeys(window, {
+      const shortcutManager = new ShortcutManager();
+      shortcutManager.add({
         // Those are for latin keyboards that have e, c, m keys
-        e: (ev) => this._showQuickBar(ev),
-        c: (ev) => this._showQuickBar(ev, QuickBarMode.Command),
-        m: (ev) => this._createMyLink(ev),
-        a: (ev) => this._showVoiceCommandDialog(ev),
-        d: (ev) => this._showQuickBar(ev, QuickBarMode.Device),
+        e: { handler: (ev) => this._showQuickBar(ev) },
+        c: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Command) },
+        m: { handler: (ev) => this._createMyLink(ev) },
+        a: { handler: (ev) => this._showVoiceCommandDialog(ev) },
+        d: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Device) },
         // Workaround see https://github.com/jamiebuilds/tinykeys/issues/130
-        "Shift+?": (ev) => this._showShortcutDialog(ev),
+        "Shift+?": { handler: (ev) => this._showShortcutDialog(ev) },
         // Those are fallbacks for non-latin keyboards that don't have e, c, m keys (qwerty-based shortcuts)
-        KeyE: (ev) => this._showQuickBar(ev),
-        KeyC: (ev) => this._showQuickBar(ev, QuickBarMode.Command),
-        KeyM: (ev) => this._createMyLink(ev),
-        KeyA: (ev) => this._showVoiceCommandDialog(ev),
-        KeyD: (ev) => this._showQuickBar(ev, QuickBarMode.Device),
+        KeyE: { handler: (ev) => this._showQuickBar(ev) },
+        KeyC: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Command) },
+        KeyM: { handler: (ev) => this._createMyLink(ev) },
+        KeyA: { handler: (ev) => this._showVoiceCommandDialog(ev) },
+        KeyD: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Device) },
       });
     }
 
@@ -87,7 +87,6 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     private _showVoiceCommandDialog(e: KeyboardEvent) {
       if (
         !this.hass?.enableShortcuts ||
-        !canOverrideAlphanumericInput(e.composedPath()) ||
         !this._conversation(this.hass.config.components)
       ) {
         return;
@@ -105,7 +104,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       e: KeyboardEvent,
       mode: QuickBarMode = QuickBarMode.Entity
     ) {
-      if (!this._canShowQuickBar(e)) {
+      if (!this._canShowQuickBar()) {
         return;
       }
 
@@ -118,7 +117,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _showShortcutDialog(e: KeyboardEvent) {
-      if (!this._canShowQuickBar(e)) {
+      if (!this._canShowQuickBar()) {
         return;
       }
 
@@ -131,10 +130,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private async _createMyLink(e: KeyboardEvent) {
-      if (
-        !this.hass?.enableShortcuts ||
-        !canOverrideAlphanumericInput(e.composedPath())
-      ) {
+      if (!this.hass?.enableShortcuts) {
         return;
       }
 
@@ -193,11 +189,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       });
     }
 
-    private _canShowQuickBar(e: KeyboardEvent) {
-      return (
-        this.hass?.user?.is_admin &&
-        this.hass.enableShortcuts &&
-        canOverrideAlphanumericInput(e.composedPath())
-      );
+    private _canShowQuickBar() {
+      return this.hass?.user?.is_admin && this.hass.enableShortcuts;
     }
   };

src/state/sidebar-mixin.ts

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

src/translations/en.json

@@ -1237,7 +1237,8 @@
             "times": "times"
           },
           "summary": "Summary",
-          "description": "Description"
+          "description": "Description",
+          "location": "Location"
         },
         "views": {
           "dayGridMonth": "[%key:ui::panel::lovelace::editor::card::calendar::views::dayGridMonth%]",
@@ -2216,7 +2217,9 @@
       "sidebar_toggle": "Sidebar toggle",
       "edit_sidebar": "Edit sidebar",
       "edit_subtitle": "Synced on all devices",
-      "migrate_to_user_data": "This will change the sidebar on all the devices you are logged in to. To create a sidebar per device, you should use a different user for that device."
+      "migrate_to_user_data": "This will change the sidebar on all the devices you are logged in to. To create a sidebar per device, you should use a different user for that device.",
+      "reset_to_defaults": "Reset to defaults",
+      "reset_confirmation": "Are you sure you want to reset the sidebar to its default configuration? This will restore the original order and visibility of all panels."
     },
     "panel": {
       "my": {
@@ -2456,7 +2459,10 @@
               "delete_floor": "Delete floor",
               "confirm_delete": "Delete floor?",
               "confirm_delete_text": "Deleting the floor will unassign all areas from it."
-            }
+            },
+            "area_reorder_failed": "Failed to reorder areas",
+            "area_move_failed": "Failed to move area",
+            "floor_reorder_failed": "Failed to reorder floors"
           },
           "editor": {
             "create_area": "Create area",
@@ -3493,6 +3499,7 @@
               "edit": "Edit",
               "delete": "Delete",
               "add_dashboard": "Add dashboard",
+              "set_as_default": "Set as default",
               "type": {
                 "user_created": "User created",
                 "built_in": "Built-in"
@@ -3501,7 +3508,7 @@
             "confirm_delete_title": "Delete {dashboard_title}?",
             "confirm_delete_text": "This dashboard will be permanently deleted.",
             "cant_edit_yaml": "Dashboards created in YAML cannot be edited from the UI. Change them in configuration.yaml.",
-            "cant_edit_default": "The default dashboard, Overview, cannot be edited from the UI. You can hide it by setting another dashboard as default.",
+            "cant_edit_lovelace": "The Overview dashboard title and icon cannot be changed. You can create a new dashboard to get more customization options.",
             "detail": {
               "edit_dashboard": "Edit dashboard",
               "new_dashboard": "Add new dashboard",
@@ -3515,8 +3522,12 @@
               "delete": "Delete",
               "update": "Update",
               "create": "Create",
-              "set_default": "Set as default on this device",
-              "remove_default": "Remove as default on this device"
+              "set_default": "Set as default",
+              "remove_default": "Remove as default",
+              "set_default_confirm_title": "Set as default dashboard?",
+              "set_default_confirm_text": "This will replace the current default dashboard. Users can still override their default dashboard in their profile settings.",
+              "remove_default_confirm_title": "Remove default dashboard?",
+              "remove_default_confirm_text": "The default dashboard will be changed to Overview for every user. Users can still override their default dashboard in their profile settings."
             }
           },
           "resources": {
@@ -6760,7 +6771,6 @@
         },
         "analytics": {
           "caption": "Analytics",
-          "header": "Home Assistant analytics",
           "description": "Learn how to share data to improve Home Assistant",
           "preferences": {
             "base": {
@@ -6778,17 +6788,10 @@
             "diagnostics": {
               "title": "Diagnostics",
               "description": "Share crash reports when unexpected errors occur."
-            },
-            "snapshots": {
-              "title": "Devices",
-              "description": "Generic information about your devices.",
-              "header": "Device analytics",
-              "info": "Anonymously share data about your devices to help build the Open Home Foundation’s device database. This free, open source resource helps users find useful information about smart home devices. Only device-specific details (like model or manufacturer) are shared — never personally identifying information (like the names you assign).",
-              "learn_more": "Learn more about the device database and how we process your data"
             }
           },
           "need_base_enabled": "You need to enable basic analytics for this option to be available",
-          "learn_more": "Learn how we process your data",
+          "learn_more": "How we process your data",
           "intro": "Share anonymized information from your installation to help make Home Assistant better and help us convince manufacturers to add local control and privacy-focused features.",
           "download_device_info": "Preview device analytics"
         },
@@ -7174,7 +7177,7 @@
               "grid": "Grid",
               "solar": "Solar",
               "battery": "Battery",
-              "usage": "Used"
+              "usage": "Consumption"
             },
             "energy_compare": {
               "info": "You are comparing the period {start} with the period {end}",
@@ -8432,10 +8435,13 @@
                 "no_compatible_controls": "No compatible controls available for this area"
               },
               "bar-gauge": {
-                "label": "Bar gauge"
+                "label": "Bar gauge",
+                "min": "Minimum value",
+                "max": "Maximum value"
               },
               "trend-graph": {
-                "label": "Trend graph"
+                "label": "Trend graph",
+                "detail": "Show more detail"
               }
             }
           },
@@ -8671,9 +8677,11 @@
         },
         "dashboard": {
           "header": "Dashboard",
-          "description": "Pick a default dashboard for this device.",
+          "description": "Pick a default dashboard to show.",
           "dropdown_label": "Dashboard",
-          "default_dashboard_label": "Overview (default)"
+          "lovelace": "Overview",
+          "home": "Home",
+          "system": "Auto (use system settings)"
         },
         "change_password": {
           "header": "Change password",
@@ -9434,6 +9442,11 @@
         }
       },
       "energy": {
+        "overview": {
+          "electricity": "Electricity",
+          "gas": "Gas",
+          "water": "Water"
+        },
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",
         "setup": {
@@ -9458,7 +9471,9 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Individual devices total usage",
           "energy_devices_detail_graph_title": "Individual devices detail usage",
-          "energy_sankey_title": "Energy flow"
+          "energy_sankey_title": "Energy flow",
+          "energy_top_consumers_title": "Top consumers",
+          "power_sankey_title": "Current power flow"
         }
       },
       "history": {

src/types.ts

@@ -18,7 +18,10 @@ import type { AreaRegistryEntry } from "./data/area_registry";
 import type { DeviceRegistryEntry } from "./data/device_registry";
 import type { EntityRegistryDisplayEntry } from "./data/entity_registry";
 import type { FloorRegistryEntry } from "./data/floor_registry";
-import type { CoreFrontendUserData } from "./data/frontend";
+import type {
+  CoreFrontendSystemData,
+  CoreFrontendUserData,
+} from "./data/frontend";
 import type {
   FrontendLocaleData,
   getHassTranslations,
@@ -248,10 +251,10 @@ export interface HomeAssistant {
   vibrate: boolean;
   debugConnection: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
-  defaultPanel: string;
   moreInfoEntityId: string | null;
   user?: CurrentUser;
-  userData?: CoreFrontendUserData | null;
+  userData?: CoreFrontendUserData;
+  systemData?: CoreFrontendSystemData;
   hassUrl(path?): string;
   callService<T = any>(
     domain: ServiceCallRequest["domain"],

src/util/ha-pref-storage.ts

@@ -8,8 +8,9 @@ const STORED_STATE = [
   "debugConnection",
   "suspendWhenHidden",
   "enableShortcuts",
-  "defaultPanel",
-];
+] as const;
+
+type StoredHomeAssistant = Pick<HomeAssistant, (typeof STORED_STATE)[number]>;
 
 export function storeState(hass: HomeAssistant) {
   try {
@@ -31,8 +32,8 @@ export function storeState(hass: HomeAssistant) {
   }
 }
 
-export function getState() {
-  const state = {};
+export function getState(): Partial<StoredHomeAssistant> {
+  const state = {} as Partial<StoredHomeAssistant>;
 
   STORED_STATE.forEach((key) => {
     const storageItem = window.localStorage.getItem(key);

test/util/ha-pref-storage.test.ts

@@ -24,7 +24,7 @@ describe("ha-pref-storage", () => {
     window.localStorage.setItem = vi.fn();
 
     storeState(mockHass as unknown as HomeAssistant);
-    expect(window.localStorage.setItem).toHaveBeenCalledTimes(8);
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(7);
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
       "dockedSidebar",
       JSON.stringify("auto")

yarn.lock

@@ -8869,25 +8869,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:11.0.3":
-  version: 11.0.3
-  resolution: "glob@npm:11.0.3"
+"glob@npm:12.0.0":
+  version: 12.0.0
+  resolution: "glob@npm:12.0.0"
   dependencies:
     foreground-child: "npm:^3.3.1"
     jackspeak: "npm:^4.1.1"
-    minimatch: "npm:^10.0.3"
+    minimatch: "npm:^10.1.1"
     minipass: "npm:^7.1.2"
     package-json-from-dist: "npm:^1.0.0"
     path-scurry: "npm:^2.0.0"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/2ae536c1360c0266b523b2bfa6aadc10144a8b7e08869b088e37ac3c27cd30774f82e4bfb291cde796776e878f9e13200c7ff44010eb7054e00f46f649397893
+  checksum: 10/6e21b3f1f1fa635836d45e54bbe50704884cc3e310e0cc011cfb5429db65a030e12936d99b07e66236370efe45dc8c8b26fa5334dbf555d6f8709e0315c77c30
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2":
-  version: 10.4.5
-  resolution: "glob@npm:10.4.5"
+"glob@npm:^10.5.0":
+  version: 10.5.0
+  resolution: "glob@npm:10.5.0"
   dependencies:
     foreground-child: "npm:^3.1.0"
     jackspeak: "npm:^3.1.2"
@@ -8897,7 +8897,7 @@ __metadata:
     path-scurry: "npm:^1.11.1"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  checksum: 10/ab3bccfefcc0afaedbd1f480cd0c4a2c0e322eb3f0aa7ceaa31b3f00b825069f17cf0f1fc8b6f256795074b903f37c0ade37ddda6a176aa57f1c2bbfe7240653
   languageName: node
   linkType: hard
 
@@ -9324,7 +9324,7 @@ __metadata:
     fancy-log: "npm:2.0.0"
     fs-extra: "npm:11.3.2"
     fuse.js: "npm:7.1.0"
-    glob: "npm:11.0.3"
+    glob: "npm:12.0.0"
     google-timezones-json: "npm:1.2.0"
     gulp: "npm:5.0.1"
     gulp-brotli: "npm:3.0.0"
@@ -9337,7 +9337,7 @@ __metadata:
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
     intl-messageformat: "npm:10.7.18"
-    js-yaml: "npm:4.1.0"
+    js-yaml: "npm:4.1.1"
     jsdom: "npm:27.1.0"
     jszip: "npm:3.10.1"
     leaflet: "npm:1.9.4"
@@ -10407,14 +10407,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:4.1.0, js-yaml@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "js-yaml@npm:4.1.0"
+"js-yaml@npm:4.1.1, js-yaml@npm:^4.1.0":
+  version: 4.1.1
+  resolution: "js-yaml@npm:4.1.1"
   dependencies:
     argparse: "npm:^2.0.1"
   bin:
     js-yaml: bin/js-yaml.js
-  checksum: 10/c138a34a3fd0d08ebaf71273ad4465569a483b8a639e0b118ff65698d257c2791d3199e3f303631f2cb98213fa7b5f5d6a4621fd0fff819421b990d30d967140
+  checksum: 10/a52d0519f0f4ef5b4adc1cde466cb54c50d56e2b4a983b9d5c9c0f2f99462047007a6274d7e95617a21d3c91fde3ee6115536ed70991cd645ba8521058b78f77
   languageName: node
   linkType: hard
 
@@ -11167,12 +11167,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^10.0.3":
-  version: 10.0.3
-  resolution: "minimatch@npm:10.0.3"
+"minimatch@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "minimatch@npm:10.1.1"
   dependencies:
     "@isaacs/brace-expansion": "npm:^5.0.0"
-  checksum: 10/d5b8b2538b367f2cfd4aeef27539fddeee58d1efb692102b848e4a968a09780a302c530eb5aacfa8c57f7299155fb4b4e85219ad82664dcef5c66f657111d9b8
+  checksum: 10/110f38921ea527022e90f7a5f43721838ac740d0a0c26881c03b57c261354fb9a0430e40b2c56dfcea2ef3c773768f27210d1106f1f2be19cde3eea93f26f45e
   languageName: node
   linkType: hard