Bumped version to 20251202.0

Fix floor compare

pyproject.toml

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

src/common/auth/token_storage.ts

@@ -1,5 +1,6 @@
 import type { AuthData } from "home-assistant-js-websocket";
 import { extractSearchParam } from "../url/search-params";
+import { hassUrl } from "../../data/auth";
 
 declare global {
   interface Window {
@@ -30,7 +31,11 @@ export function askWrite() {
 export function saveTokens(tokens: AuthData | null) {
   tokenCache.tokens = tokens;
 
-  if (!tokenCache.writeEnabled && extractSearchParam("storeToken") === "true") {
+  if (
+    !tokenCache.writeEnabled &&
+    (extractSearchParam("storeToken") === "true" ||
+      hassUrl !== `${location.protocol}//${location.host}`)
+  ) {
     tokenCache.writeEnabled = true;
   }
 

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

@@ -593,6 +593,7 @@ export class HaChartBase extends LitElement {
     }
     const options = {
       animation: !this._reducedMotion,
+      animationDuration: 500,
       darkMode: this._themes.darkMode ?? false,
       aria: { show: true },
       dataZoom: this._getDataZoomConfig(),

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

@@ -167,6 +167,7 @@ export class HaSankeyChart extends LitElement {
         curveness: 0.5,
       },
       layoutIterations: 0,
+      animationDuration: 500,
       label: {
         formatter: (params) =>
           data.nodes.find((node) => node.id === (params.data as Node).id)
@@ -279,6 +280,7 @@ export class HaSankeyChart extends LitElement {
     :host {
       display: block;
       flex: 1;
+      max-width: 100%;
       background: var(--ha-card-background, var(--card-background-color));
     }
     ha-chart-base {

src/components/ha-assist-chat.ts

@@ -659,6 +659,7 @@ export class HaAssistChat extends LitElement {
       --markdown-table-border-color: var(--divider-color);
       --markdown-code-background-color: var(--primary-background-color);
       --markdown-code-text-color: var(--primary-text-color);
+      --markdown-list-indent: 1rem;
       &:not(:has(ha-markdown-element)) {
         min-height: 1lh;
         min-width: 1lh;

src/components/ha-bottom-sheet.ts

@@ -21,7 +21,8 @@ export class HaBottomSheet extends LitElement {
 
   private _isDragging = false;
 
-  private _handleAfterHide() {
+  private _handleAfterHide(afterHideEvent: Event) {
+    afterHideEvent.stopPropagation();
     this.open = false;
     const ev = new Event("closed", {
       bubbles: true,

src/components/ha-control-select.ts

@@ -202,6 +202,7 @@ export class HaControlSelect extends LitElement {
       color: var(--primary-text-color);
       user-select: none;
       -webkit-tap-highlight-color: transparent;
+      border-radius: var(--control-select-border-radius);
     }
     :host([vertical]) {
       width: var(--control-select-thickness);
@@ -211,7 +212,6 @@ export class HaControlSelect extends LitElement {
       position: relative;
       height: 100%;
       width: 100%;
-      border-radius: var(--control-select-border-radius);
       transform: translateZ(0);
       display: flex;
       flex-direction: row;

src/components/ha-generic-picker.ts

@@ -248,7 +248,7 @@ export class HaGenericPicker extends LitElement {
     });
   };
 
-  private _hidePicker(ev) {
+  private _hidePicker(ev: Event) {
     ev.stopPropagation();
     if (this._newValue) {
       fireEvent(this, "value-changed", { value: this._newValue });

src/components/ha-language-picker.ts

@@ -73,6 +73,8 @@ export class HaLanguagePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property() public helper?: string;
+
   @property({ attribute: "native-name", type: Boolean })
   public nativeName = false;
 
@@ -135,6 +137,7 @@ export class HaLanguagePicker extends LitElement {
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}
+        .helper=${this.helper}
         .getItems=${this._getItems}
         @value-changed=${this._changed}
         hide-clear-icon

src/components/ha-markdown-element.ts

@@ -71,7 +71,7 @@ class HaMarkdownElement extends ReactiveElement {
     if (!this.innerHTML && this.cache) {
       const key = this._computeCacheKey();
       if (markdownCache.has(key)) {
-        render(markdownCache.get(key)!, this.renderRoot);
+        render(h(unsafeHTML(markdownCache.get(key))), this.renderRoot);
         this._resize();
       }
     }

src/components/ha-markdown.ts

@@ -71,13 +71,11 @@ export class HaMarkdown extends LitElement {
       color: var(--markdown-link-color, var(--primary-color));
     }
     img {
-      background-color: rgba(10, 10, 10, 0.15);
+      background-color: var(--markdown-image-background-color);
       border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
-      min-height: 2lh;
       height: auto;
       width: auto;
-      text-indent: 4px;
       transition: height 0.2s ease-in-out;
     }
     p:first-child > img:first-child {
@@ -86,10 +84,9 @@ export class HaMarkdown extends LitElement {
     p:first-child > img:last-child {
       vertical-align: top;
     }
-    ol,
-    ul {
-      list-style-position: inside;
-      padding-inline-start: 0;
+    :host > ul,
+    :host > ol {
+      padding-inline-start: var(--markdown-list-indent, revert);
     }
     li {
       &:has(input[type="checkbox"]) {
@@ -140,16 +137,19 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-4) 0;
     }
     table {
-      border-collapse: collapse;
-      display: block;
-      overflow-x: auto;
+      border-collapse: var(--markdown-table-border-collapse, collapse);
+    }
+    div:has(> table) {
+      overflow: auto;
     }
     th {
       text-align: start;
     }
     td,
     th {
-      border: 1px solid var(--markdown-table-border-color, transparent);
+      border-width: var(--markdown-table-border-width, 1px);
+      border-style: var(--markdown-table-border-style, solid);
+      border-color: var(--markdown-table-border-color, var(--divider-color));
       padding: 0.25em 0.5em;
     }
     blockquote {

src/components/ha-service-control.ts

@@ -467,7 +467,7 @@ export class HaServiceControl extends LitElement {
 
     const descriptionPlaceholders =
       domain && serviceName
-        ? this.hass.services[domain][serviceName].description_placeholders
+        ? this.hass.services[domain]?.[serviceName]?.description_placeholders
         : undefined;
 
     const description =

src/components/ha-sidebar.ts

@@ -197,6 +197,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private _mouseLeaveTimeout?: number;
 
+  private _touchendTimeout?: number;
+
   private _tooltipHideTimeout?: number;
 
   private _recentKeydownActiveUntil = 0;
@@ -237,6 +239,18 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     ];
   }
 
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    // clear timeouts
+    clearTimeout(this._mouseLeaveTimeout);
+    clearTimeout(this._tooltipHideTimeout);
+    clearTimeout(this._touchendTimeout);
+    // set undefined values
+    this._mouseLeaveTimeout = undefined;
+    this._tooltipHideTimeout = undefined;
+    this._touchendTimeout = undefined;
+  }
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -406,6 +420,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         class="ha-scrollbar"
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
+        @touchend=${this._listboxTouchend}
         @scroll=${this._listboxScroll}
         @keydown=${this._listboxKeydown}
       >
@@ -620,6 +635,14 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     this._hideTooltip();
   }
 
+  private _listboxTouchend() {
+    clearTimeout(this._touchendTimeout);
+    this._touchendTimeout = window.setTimeout(() => {
+      // Allow 1 second for users to read the tooltip on touch devices
+      this._hideTooltip();
+    }, 1000);
+  }
+
   @eventOptions({
     passive: true,
   })

src/components/ha-trigger-icon.ts

@@ -6,7 +6,6 @@ import {
   mdiDevices,
   mdiFormatListBulleted,
   mdiGestureDoubleTap,
-  mdiHomeAssistant,
   mdiMapMarker,
   mdiMapMarkerRadius,
   mdiMessageAlert,
@@ -23,6 +22,7 @@ import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
 import { computeDomain } from "../common/entity/compute_domain";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
+import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";

src/components/ha-wa-dialog.ts

@@ -1,3 +1,5 @@
+import "@home-assistant/webawesome/dist/components/dialog/dialog";
+import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import {
   customElement,
@@ -7,8 +9,6 @@ import {
   state,
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import { mdiClose } from "@mdi/js";
-import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -53,6 +53,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
  *
  * @attr {boolean} open - Controls the dialog open state.
+ * @attr {("alert"|"standard")} type - Dialog type. Defaults to "standard".
  * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
  * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
  * @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
@@ -84,6 +85,9 @@ export class HaWaDialog extends LitElement {
   @property({ type: Boolean, reflect: true })
   public open = false;
 
+  @property({ reflect: true })
+  public type: "alert" | "standard" = "standard";
+
   @property({ type: String, reflect: true, attribute: "width" })
   public width: DialogWidth = "medium";
 
@@ -172,7 +176,9 @@ export class HaWaDialog extends LitElement {
 
     await this.updateComplete;
 
-    (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
+    requestAnimationFrame(() => {
+      (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
+    });
   };
 
   private _handleAfterShow = () => {
@@ -198,18 +204,7 @@ export class HaWaDialog extends LitElement {
     haStyleScrollbar,
     css`
       wa-dialog {
-        --full-width: var(
-          --ha-dialog-width-full,
-          min(
-            95vw,
-            calc(
-              100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
-                  --safe-area-inset-right,
-                  var(--ha-space-0)
-                )
-            )
-          )
-        );
+        --full-width: var(--ha-dialog-width-full, min(95vw, var(--safe-width)));
         --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
         --spacing: var(--dialog-content-padding, var(--ha-space-6));
         --show-duration: var(--ha-dialog-show-duration, 200ms);
@@ -226,8 +221,7 @@ export class HaWaDialog extends LitElement {
           --ha-dialog-border-radius,
           var(--ha-border-radius-3xl)
         );
-        max-width: var(--ha-dialog-max-width, 100vw);
-        max-width: var(--ha-dialog-max-width, 100svw);
+        max-width: var(--ha-dialog-max-width, var(--safe-width));
       }
 
       :host([width="small"]) wa-dialog {
@@ -247,34 +241,57 @@ export class HaWaDialog extends LitElement {
         max-width: var(--width, var(--full-width));
         max-height: var(
           --ha-dialog-max-height,
-          calc(100% - var(--ha-space-20))
+          calc(var(--safe-height) - var(--ha-space-20))
         );
         min-height: var(--ha-dialog-min-height);
         position: var(--dialog-surface-position, relative);
         margin-top: var(--dialog-surface-margin-top, auto);
+        /* Used to offset the dialog from the safe areas when space is limited */
+        transform: translate(
+          calc(
+            var(--safe-area-offset-left, var(--ha-space-0)) - var(
+                --safe-area-offset-right,
+                var(--ha-space-0)
+              )
+          ),
+          calc(
+            var(--safe-area-offset-top, var(--ha-space-0)) - var(
+                --safe-area-offset-bottom,
+                var(--ha-space-0)
+              )
+          )
+        );
         display: flex;
         flex-direction: column;
         overflow: hidden;
       }
 
       @media all and (max-width: 450px), all and (max-height: 500px) {
-        :host {
+        :host([type="standard"]) {
           --ha-dialog-border-radius: var(--ha-space-0);
-        }
 
-        wa-dialog {
-          --full-width: var(--ha-dialog-width-full, 100vw);
-        }
+          wa-dialog {
+            /* Make the container fill the whole screen width and not the safe width */
+            --full-width: var(--ha-dialog-width-full, 100vw);
+            --width: var(--full-width);
+          }
 
-        wa-dialog::part(dialog) {
-          min-height: var(--ha-dialog-min-height, 100vh);
-          min-height: var(--ha-dialog-min-height, 100svh);
-          max-height: var(--ha-dialog-max-height, 100vh);
-          max-height: var(--ha-dialog-max-height, 100svh);
-          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
-          padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
-          padding-left: var(--safe-area-inset-left, var(--ha-space-0));
-          padding-right: var(--safe-area-inset-right, var(--ha-space-0));
+          wa-dialog::part(dialog) {
+            /* Make the dialog fill the whole screen height and not the safe height */
+            min-height: var(--ha-dialog-min-height, 100vh);
+            min-height: var(--ha-dialog-min-height, 100dvh);
+            max-height: var(--ha-dialog-max-height, 100vh);
+            max-height: var(--ha-dialog-max-height, 100dvh);
+            margin-top: 0;
+            margin-bottom: 0;
+            /* Use safe area as padding instead of the container size */
+            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);
+            /* Reset the transform to center the dialog */
+            transform: none;
+          }
         }
       }
 

src/data/area_registry.ts

@@ -75,17 +75,11 @@ export const reorderAreaRegistryEntries = (
   });
 
 export const getAreaEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
-  filterHidden = false
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
 ): AreaEntityLookup => {
   const areaEntityLookup: AreaEntityLookup = {};
   for (const entity of entities) {
-    if (
-      !entity.area_id ||
-      (filterHidden &&
-        ((entity as EntityRegistryDisplayEntry).hidden ||
-          (entity as EntityRegistryEntry).hidden_by))
-    ) {
+    if (!entity.area_id) {
       continue;
     }
     if (!(entity.area_id in areaEntityLookup)) {

src/data/automation_i18n.ts

@@ -144,9 +144,7 @@ const tryDescribeTrigger = (
   const type = getTriggerObjectId(trigger.trigger);
 
   return (
-    hass.localize(
-      `component.${domain}.triggers.${type}.description_configured`
-    ) ||
+    hass.localize(`component.${domain}.triggers.${type}.name`) ||
     hass.localize(
       `ui.panel.config.automation.editor.triggers.type.${triggerType as LegacyTrigger["trigger"]}.label`
     ) ||
@@ -919,9 +917,7 @@ const tryDescribeCondition = (
   const type = getConditionObjectId(condition.condition);
 
   return (
-    hass.localize(
-      `component.${domain}.conditions.${type}.description_configured`
-    ) ||
+    hass.localize(`component.${domain}.conditions.${type}.name`) ||
     hass.localize(
       `ui.panel.config.automation.editor.conditions.type.${conditionType as LegacyCondition["condition"]}.label`
     ) ||

src/data/device_registry.ts

@@ -111,17 +111,11 @@ export const sortDeviceRegistryByName = (
   );
 
 export const getDeviceEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
-  filterHidden = false
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
 ): DeviceEntityLookup => {
   const deviceEntityLookup: DeviceEntityLookup = {};
   for (const entity of entities) {
-    if (
-      !entity.device_id ||
-      (filterHidden &&
-        ((entity as EntityRegistryDisplayEntry).hidden ||
-          (entity as EntityRegistryEntry).hidden_by))
-    ) {
+    if (!entity.device_id) {
       continue;
     }
     if (!(entity.device_id in deviceEntityLookup)) {

src/data/floor_registry.ts

@@ -1,4 +1,3 @@
-import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area_registry";
 import type { RegistryEntry } from "./registry";
@@ -75,27 +74,3 @@ export const getFloorAreaLookup = (
   }
   return floorAreaLookup;
 };
-
-export const floorCompare =
-  (entries?: HomeAssistant["floors"], order?: string[]) =>
-  (a: string, b: string) => {
-    const indexA = order ? order.indexOf(a) : -1;
-    const indexB = order ? order.indexOf(b) : -1;
-    if (indexA === -1 && indexB === -1) {
-      const floorA = entries?.[a];
-      const floorB = entries?.[b];
-      if (floorA && floorB && floorA.level !== floorB.level) {
-        return (floorB.level ?? -9999) - (floorA.level ?? -9999);
-      }
-      const nameA = floorA?.name ?? a;
-      const nameB = floorB?.name ?? b;
-      return stringCompare(nameA, nameB);
-    }
-    if (indexA === -1) {
-      return 1;
-    }
-    if (indexB === -1) {
-      return -1;
-    }
-    return indexA - indexB;
-  };

src/dialogs/generic/dialog-box.ts

@@ -1,6 +1,7 @@
 import { mdiAlertOutline, mdiClose } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
@@ -64,6 +65,7 @@ class DialogBox extends LitElement {
       <ha-wa-dialog
         .hass=${this.hass}
         .open=${this._open}
+        type=${confirmPrompt ? "alert" : "standard"}
         ?prevent-scrim-close=${confirmPrompt}
         @closed=${this._dialogClosed}
         aria-labelledby="dialog-box-title"
@@ -79,7 +81,11 @@ class DialogBox extends LitElement {
                 ></ha-icon-button
               ></slot>`
             : nothing}
-          <span slot="title" id="dialog-box-title">
+          <span
+            class=${classMap({ title: true, alert: confirmPrompt })}
+            slot="title"
+            id="dialog-box-title"
+          >
             ${this._params.warning
               ? html`<ha-svg-icon
                   .path=${mdiAlertOutline}
@@ -199,6 +205,14 @@ class DialogBox extends LitElement {
     ha-textfield {
       width: 100%;
     }
+    .title.alert {
+      padding: 0 var(--ha-space-2);
+    }
+    @media all and (min-width: 450px) and (min-height: 500px) {
+      .title.alert {
+        padding: 0 var(--ha-space-1);
+      }
+    }
   `;
 }
 

src/dialogs/make-dialog-manager.ts

@@ -1,9 +1,9 @@
-import type { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
-import { mainWindow } from "../common/dom/get_main_window";
-import type { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
 import { ancestorsWithProperty } from "../common/dom/ancestors-with-property";
 import { deepActiveElement } from "../common/dom/deep-active-element";
+import type { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
+import { mainWindow } from "../common/dom/get_main_window";
 import { nextRender } from "../common/util/render-status";
+import type { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
 
 declare global {
   // for fire event
@@ -22,7 +22,7 @@ declare global {
 export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
   extends HTMLElement {
   showDialog(params: T);
-  closeDialog?: () => boolean;
+  closeDialog?: (historyState?: any) => boolean;
 }
 
 interface ShowDialogParams<T> {
@@ -143,27 +143,32 @@ export const showDialog = async (
   return true;
 };
 
-export const closeDialog = async (dialogTag: string): Promise<boolean> => {
+export const closeDialog = async (
+  dialogTag: string,
+  historyState?: any
+): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;
   }
   const dialogElement = await LOADED[dialogTag].element;
   if (dialogElement.closeDialog) {
-    return dialogElement.closeDialog() !== false;
+    return dialogElement.closeDialog(historyState) !== false;
   }
   return true;
 };
 
 // called on back()
-export const closeLastDialog = async () => {
+export const closeLastDialog = async (historyState?: any) => {
   if (OPEN_DIALOG_STACK.length) {
-    const lastDialog = OPEN_DIALOG_STACK.pop();
-    const closed = await closeDialog(lastDialog!.dialogTag);
+    const lastDialog = OPEN_DIALOG_STACK.pop() as DialogState;
+    const closed = await closeDialog(lastDialog.dialogTag, historyState);
     if (!closed) {
       // if the dialog was not closed, put it back on the stack
-      OPEN_DIALOG_STACK.push(lastDialog!);
-    }
-    if (OPEN_DIALOG_STACK.length && mainWindow.history.state?.opensDialog) {
+      OPEN_DIALOG_STACK.push(lastDialog);
+    } else if (
+      OPEN_DIALOG_STACK.length &&
+      mainWindow.history.state?.opensDialog
+    ) {
       // if there are more dialogs open, push a new state so back() will close the next top dialog
       mainWindow.history.pushState(
         { dialog: OPEN_DIALOG_STACK[OPEN_DIALOG_STACK.length - 1].dialogTag },

src/layouts/hass-subpage.ts

@@ -143,7 +143,6 @@ class HassSubpage extends LitElement {
           -webkit-box-orient: vertical;
           overflow: hidden;
           text-overflow: ellipsis;
-          padding-bottom: 1px;
         }
 
         .content {

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

@@ -13,6 +13,7 @@ import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strateg
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
+import "../lovelace/views/hui-view-background";
 
 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -115,6 +116,7 @@ class PanelClimate extends LitElement {
         this._lovelace
           ? html`
               <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
                 <hui-view
                   .hass=${this.hass}
                   .narrow=${this.narrow}

src/panels/config/areas/dialog-areas-floors-order.ts

@@ -0,0 +1,494 @@
+import { mdiClose, mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import {
+  type AreasFloorHierarchy,
+  getAreasFloorHierarchy,
+  getAreasOrder,
+  getFloorOrder,
+} from "../../../common/areas/areas-floor-hierarchy";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-button";
+import "../../../components/ha-dialog-header";
+import "../../../components/ha-floor-icon";
+import "../../../components/ha-icon";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../components/ha-md-dialog";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
+import "../../../components/ha-sortable";
+import "../../../components/ha-svg-icon";
+import type { AreaRegistryEntry } from "../../../data/area_registry";
+import {
+  reorderAreaRegistryEntries,
+  updateAreaRegistryEntry,
+} from "../../../data/area_registry";
+import { reorderFloorRegistryEntries } from "../../../data/floor_registry";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { showToast } from "../../../util/toast";
+import type { AreasFloorsOrderDialogParams } from "./show-dialog-areas-floors-order";
+
+const UNASSIGNED_FLOOR = "__unassigned__";
+
+interface FloorChange {
+  areaId: string;
+  floorId: string | null;
+}
+
+@customElement("dialog-areas-floors-order")
+class DialogAreasFloorsOrder extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _open = false;
+
+  @state() private _hierarchy?: AreasFloorHierarchy;
+
+  @state() private _saving = false;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  public async showDialog(
+    _params: AreasFloorsOrderDialogParams
+  ): Promise<void> {
+    this._open = true;
+    this._computeHierarchy();
+  }
+
+  private _computeHierarchy(): void {
+    this._hierarchy = getAreasFloorHierarchy(
+      Object.values(this.hass.floors),
+      Object.values(this.hass.areas)
+    );
+  }
+
+  public closeDialog(): void {
+    this._dialog?.close();
+  }
+
+  private _dialogClosed(): void {
+    this._open = false;
+    this._hierarchy = undefined;
+    this._saving = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._open || !this._hierarchy) {
+      return nothing;
+    }
+
+    const dialogTitle = this.hass.localize(
+      "ui.panel.config.areas.dialog.reorder_title"
+    );
+
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span slot="title" .title=${dialogTitle}>${dialogTitle}</span>
+        </ha-dialog-header>
+        <div slot="content" class="content">
+          <ha-sortable
+            handle-selector=".floor-handle"
+            draggable-selector=".floor"
+            @item-moved=${this._floorMoved}
+            invert-swap
+          >
+            <div class="floors">
+              ${repeat(
+                this._hierarchy.floors,
+                (floor) => floor.id,
+                (floor) => this._renderFloor(floor)
+              )}
+            </div>
+          </ha-sortable>
+          ${this._renderUnassignedAreas()}
+        </div>
+        <div slot="actions">
+          <ha-button @click=${this.closeDialog} appearance="plain">
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button @click=${this._save} .disabled=${this._saving}>
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private _renderFloor(floor: { id: string; areas: string[] }) {
+    const floorEntry = this.hass.floors[floor.id];
+    if (!floorEntry) {
+      return nothing;
+    }
+
+    return html`
+      <div class="floor">
+        <div class="floor-header">
+          <ha-floor-icon .floor=${floorEntry}></ha-floor-icon>
+          <span class="floor-name">${floorEntry.name}</span>
+          <ha-svg-icon
+            class="floor-handle"
+            .path=${mdiDragHorizontalVariant}
+          ></ha-svg-icon>
+        </div>
+        <ha-sortable
+          handle-selector=".area-handle"
+          draggable-selector="ha-md-list-item"
+          @item-moved=${this._areaMoved}
+          @item-added=${this._areaAdded}
+          group="areas"
+          .floor=${floor.id}
+        >
+          <ha-md-list>
+            ${floor.areas.length > 0
+              ? floor.areas.map((areaId) => this._renderArea(areaId))
+              : html`<p class="empty">
+                  ${this.hass.localize(
+                    "ui.panel.config.areas.dialog.empty_floor"
+                  )}
+                </p>`}
+          </ha-md-list>
+        </ha-sortable>
+      </div>
+    `;
+  }
+
+  private _renderUnassignedAreas() {
+    const hasFloors = this._hierarchy!.floors.length > 0;
+
+    return html`
+      <div class="floor unassigned">
+        ${hasFloors
+          ? html`<div class="floor-header">
+              <span class="floor-name">
+                ${this.hass.localize(
+                  "ui.panel.config.areas.dialog.unassigned_areas"
+                )}
+              </span>
+            </div>`
+          : nothing}
+        <ha-sortable
+          handle-selector=".area-handle"
+          draggable-selector="ha-md-list-item"
+          @item-moved=${this._areaMoved}
+          @item-added=${this._areaAdded}
+          group="areas"
+          .floor=${UNASSIGNED_FLOOR}
+        >
+          <ha-md-list>
+            ${this._hierarchy!.areas.length > 0
+              ? this._hierarchy!.areas.map((areaId) => this._renderArea(areaId))
+              : html`<p class="empty">
+                  ${this.hass.localize(
+                    "ui.panel.config.areas.dialog.empty_unassigned"
+                  )}
+                </p>`}
+          </ha-md-list>
+        </ha-sortable>
+      </div>
+    `;
+  }
+
+  private _renderArea(areaId: string) {
+    const area = this.hass.areas[areaId];
+    if (!area) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-list-item .sortableData=${area}>
+        ${area.icon
+          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+          : html`<ha-svg-icon
+              slot="start"
+              .path=${mdiTextureBox}
+            ></ha-svg-icon>`}
+        <span slot="headline">${area.name}</span>
+        <ha-svg-icon
+          class="area-handle"
+          slot="end"
+          .path=${mdiDragHorizontalVariant}
+        ></ha-svg-icon>
+      </ha-md-list-item>
+    `;
+  }
+
+  private _floorMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._hierarchy) {
+      return;
+    }
+
+    const { oldIndex, newIndex } = ev.detail;
+    const newFloors = [...this._hierarchy.floors];
+    const [movedFloor] = newFloors.splice(oldIndex, 1);
+    newFloors.splice(newIndex, 0, movedFloor);
+
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: newFloors,
+    };
+  }
+
+  private _areaMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._hierarchy) {
+      return;
+    }
+
+    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
+    const { oldIndex, newIndex } = ev.detail;
+    const floorId = floor === UNASSIGNED_FLOOR ? null : floor;
+
+    if (floorId === null) {
+      // Reorder unassigned areas
+      const newAreas = [...this._hierarchy.areas];
+      const [movedArea] = newAreas.splice(oldIndex, 1);
+      newAreas.splice(newIndex, 0, movedArea);
+
+      this._hierarchy = {
+        ...this._hierarchy,
+        areas: newAreas,
+      };
+    } else {
+      // Reorder areas within a floor
+      this._hierarchy = {
+        ...this._hierarchy,
+        floors: this._hierarchy.floors.map((f) => {
+          if (f.id === floorId) {
+            const newAreas = [...f.areas];
+            const [movedArea] = newAreas.splice(oldIndex, 1);
+            newAreas.splice(newIndex, 0, movedArea);
+            return { ...f, areas: newAreas };
+          }
+          return f;
+        }),
+      };
+    }
+  }
+
+  private _areaAdded(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._hierarchy) {
+      return;
+    }
+
+    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
+    const { data: area, index } = ev.detail as {
+      data: AreaRegistryEntry;
+      index: number;
+    };
+
+    const newFloorId = floor === UNASSIGNED_FLOOR ? null : floor;
+
+    // Update hierarchy
+    const newUnassignedAreas = this._hierarchy.areas.filter(
+      (id) => id !== area.area_id
+    );
+    if (newFloorId === null) {
+      // Add to unassigned at the specified index
+      newUnassignedAreas.splice(index, 0, area.area_id);
+    }
+
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: this._hierarchy.floors.map((f) => {
+        if (f.id === newFloorId) {
+          // Add to new floor at the specified index
+          const newAreas = [...f.areas];
+          newAreas.splice(index, 0, area.area_id);
+          return { ...f, areas: newAreas };
+        }
+        // Remove from old floor
+        return {
+          ...f,
+          areas: f.areas.filter((id) => id !== area.area_id),
+        };
+      }),
+      areas: newUnassignedAreas,
+    };
+  }
+
+  private _computeFloorChanges(): FloorChange[] {
+    if (!this._hierarchy) {
+      return [];
+    }
+
+    const changes: FloorChange[] = [];
+
+    // Check areas assigned to floors
+    for (const floor of this._hierarchy.floors) {
+      for (const areaId of floor.areas) {
+        const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
+        if (floor.id !== originalFloorId) {
+          changes.push({ areaId, floorId: floor.id });
+        }
+      }
+    }
+
+    // Check unassigned areas
+    for (const areaId of this._hierarchy.areas) {
+      const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
+      if (originalFloorId !== null) {
+        changes.push({ areaId, floorId: null });
+      }
+    }
+
+    return changes;
+  }
+
+  private async _save(): Promise<void> {
+    if (!this._hierarchy || this._saving) {
+      return;
+    }
+
+    this._saving = true;
+
+    try {
+      const areaOrder = getAreasOrder(this._hierarchy);
+      const floorOrder = getFloorOrder(this._hierarchy);
+
+      // Update floor assignments for areas that changed floors
+      const floorChanges = this._computeFloorChanges();
+      const floorChangePromises = floorChanges.map(({ areaId, floorId }) =>
+        updateAreaRegistryEntry(this.hass, areaId, {
+          floor_id: floorId,
+        })
+      );
+
+      await Promise.all(floorChangePromises);
+
+      // Reorder areas and floors
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await reorderFloorRegistryEntries(this.hass, floorOrder);
+
+      this.closeDialog();
+    } catch (err: any) {
+      showToast(this, {
+        message:
+          err.message ||
+          this.hass.localize("ui.panel.config.areas.dialog.reorder_failed"),
+      });
+      this._saving = false;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-md-dialog {
+          min-width: 600px;
+          max-height: 90%;
+          --dialog-content-padding: 8px 24px;
+        }
+
+        @media all and (max-width: 600px), all and (max-height: 500px) {
+          ha-md-dialog {
+            --md-dialog-container-shape: 0;
+            min-width: 100%;
+            min-height: 100%;
+          }
+        }
+
+        .floors {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .floor {
+          border: 1px solid var(--divider-color);
+          border-radius: var(
+            --ha-card-border-radius,
+            var(--ha-border-radius-lg)
+          );
+          overflow: hidden;
+        }
+
+        .floor.unassigned {
+          border-style: dashed;
+          margin-top: 16px;
+        }
+
+        .floor-header {
+          display: flex;
+          align-items: center;
+          padding: 12px 16px;
+          background-color: var(--secondary-background-color);
+          gap: 12px;
+        }
+
+        .floor-name {
+          flex: 1;
+          font-weight: var(--ha-font-weight-medium);
+        }
+
+        .floor-handle {
+          cursor: grab;
+          color: var(--secondary-text-color);
+        }
+
+        ha-md-list {
+          padding: 0;
+          --md-list-item-leading-space: 16px;
+          --md-list-item-trailing-space: 16px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        ha-md-list-item {
+          --md-list-item-one-line-container-height: 48px;
+          --md-list-item-container-shape: 0;
+        }
+
+        ha-md-list-item.sortable-ghost {
+          border-radius: calc(
+            var(--ha-card-border-radius, var(--ha-border-radius-lg)) - 1px
+          );
+          box-shadow: inset 0 0 0 2px var(--primary-color);
+        }
+
+        .area-handle {
+          cursor: grab;
+          color: var(--secondary-text-color);
+        }
+
+        .empty {
+          text-align: center;
+          color: var(--secondary-text-color);
+          font-style: italic;
+          margin: 0;
+          padding: 12px 16px;
+          order: 1;
+        }
+
+        ha-md-list:has(ha-md-list-item) .empty {
+          display: none;
+        }
+
+        .content {
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-areas-floors-order": DialogAreasFloorsOrder;
+  }
+}

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

@@ -144,6 +144,10 @@ class DialogFloorDetail extends LitElement {
                 "ui.panel.config.floors.editor.level"
               )}
               type="number"
+              .helper=${this.hass.localize(
+                "ui.panel.config.floors.editor.level_helper"
+              )}
+              helperPersistent
             ></ha-textfield>
 
             <ha-icon-picker

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

@@ -2,10 +2,10 @@ import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
-  mdiDragHorizontalVariant,
   mdiHelpCircle,
   mdiPencil,
   mdiPlus,
+  mdiSort,
 } from "@mdi/js";
 import {
   css,
@@ -21,7 +21,6 @@ import memoizeOne from "memoize-one";
 import {
   getAreasFloorHierarchy,
   getAreasOrder,
-  getFloorOrder,
   type AreasFloorHierarchy,
 } from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
@@ -42,7 +41,6 @@ import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import {
   createFloorRegistryEntry,
   deleteFloorRegistryEntry,
-  reorderFloorRegistryEntries,
   updateFloorRegistryEntry,
 } from "../../../data/floor_registry";
 import {
@@ -58,6 +56,7 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
+import { showAreasFloorsOrderDialog } from "./show-dialog-areas-floors-order";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
 
 const UNASSIGNED_FLOOR = "__unassigned__";
@@ -84,6 +83,8 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  private _searchParms = new URLSearchParams(window.location.search);
+
   @state() private _hierarchy?: AreasFloorHierarchy;
 
   private _blockHierarchyUpdate = false;
@@ -167,99 +168,97 @@ export class HaConfigAreasDashboard extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .isWide=${this.isWide}
-        back-path="/config"
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         .tabs=${configSections.areas}
         .route=${this.route}
         has-fab
       >
-        <ha-icon-button
-          slot="toolbar-icon"
-          .label=${this.hass.localize("ui.common.help")}
-          .path=${mdiHelpCircle}
-          @click=${this._showHelp}
-        ></ha-icon-button>
+        <ha-button-menu slot="toolbar-icon">
+          <ha-icon-button
+            slot="trigger"
+            .label=${this.hass.localize("ui.common.menu")}
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+          <ha-list-item graphic="icon" @click=${this._showReorderDialog}>
+            <ha-svg-icon .path=${mdiSort} slot="graphic"></ha-svg-icon>
+            ${this.hass.localize("ui.panel.config.areas.picker.reorder")}
+          </ha-list-item>
+          <ha-list-item graphic="icon" @click=${this._showHelp}>
+            <ha-svg-icon .path=${mdiHelpCircle} slot="graphic"></ha-svg-icon>
+            ${this.hass.localize("ui.common.help")}
+          </ha-list-item>
+        </ha-button-menu>
         <div class="container">
-          <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}
+          <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-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-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>
+                        <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>
-                    <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>
+                  <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>
 
           ${this._hierarchy.areas.length
             ? html`
@@ -391,51 +390,6 @@ 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) {
@@ -598,6 +552,10 @@ export class HaConfigAreasDashboard extends LitElement {
     this._openAreaDialog();
   }
 
+  private _showReorderDialog() {
+    showAreasFloorsOrderDialog(this, {});
+  }
+
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.areas.caption"),

src/panels/config/areas/show-dialog-areas-floors-order.ts

@@ -0,0 +1,17 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+
+export interface AreasFloorsOrderDialogParams {}
+
+export const loadAreasFloorsOrderDialog = () =>
+  import("./dialog-areas-floors-order");
+
+export const showAreasFloorsOrderDialog = (
+  element: HTMLElement,
+  params: AreasFloorsOrderDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-areas-floors-order",
+    dialogImport: loadAreasFloorsOrderDialog,
+    dialogParams: params,
+  });
+};

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

@@ -16,6 +16,7 @@ import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { mainWindow } from "../../../common/dom/get_main_window";
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -118,7 +119,6 @@ import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import "./add-automation-element/ha-automation-add-from-target";
-import type HaAutomationAddFromTarget from "./add-automation-element/ha-automation-add-from-target";
 import "./add-automation-element/ha-automation-add-items";
 import "./add-automation-element/ha-automation-add-search";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
@@ -216,10 +216,6 @@ class DialogAddAutomationElement
   // #endregion state
 
   // #region queries
-
-  @query("ha-automation-add-from-target")
-  private _targetPickerElement?: HaAutomationAddFromTarget;
-
   @query("ha-automation-add-items")
   private _itemsListElement?: HTMLDivElement;
 
@@ -294,13 +290,18 @@ class DialogAddAutomationElement
               feature.domain === "automation" &&
               feature.preview_feature === "new_triggers_conditions"
           )?.enabled ?? false;
-        this._tab =
-          this._newTriggersAndConditions && this._params?.type !== "condition"
-            ? "targets"
-            : "groups";
+        this._tab = this._newTriggersAndConditions ? "targets" : "groups";
       }
     );
 
+    // add initial dialog view state to history
+    mainWindow.history.pushState(
+      {
+        dialogData: {},
+      },
+      ""
+    );
+
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
       getServiceIcons(this.hass);
@@ -321,7 +322,41 @@ class DialogAddAutomationElement
     this._bottomSheetMode = this._narrow;
   }
 
-  public closeDialog() {
+  public closeDialog(historyState?: any) {
+    // prevent closing when come from popstate event and root level isn't active
+    if (
+      this._open &&
+      historyState &&
+      (this._selectedTarget || this._selectedGroup)
+    ) {
+      if (historyState.dialogData?.target) {
+        this._selectedTarget = historyState.dialogData.target;
+        this._getItemsByTarget();
+        this._tab = "targets";
+        return false;
+      }
+      if (historyState.dialogData?.group) {
+        this._selectedCollectionIndex = historyState.dialogData.collectionIndex;
+        this._selectedGroup = historyState.dialogData.group;
+        this._tab = "groups";
+        return false;
+      }
+
+      // return to home on mobile
+      if (this._narrow) {
+        this._selectedTarget = undefined;
+        this._selectedGroup = undefined;
+        return false;
+      }
+    }
+
+    // if dialog is closed, but root level isn't active, clean up history state
+    if (mainWindow.history.state?.dialogData) {
+      this._open = false;
+      mainWindow.history.back();
+      return false;
+    }
+
     this.removeKeyboardShortcuts();
     this._unsubscribe();
     if (this._params) {
@@ -408,7 +443,7 @@ class DialogAddAutomationElement
       return html`
         <ha-bottom-sheet
           .open=${this._open}
-          @closed=${this.closeDialog}
+          @closed=${this._handleClosed}
           flexcontent
         >
           ${this._renderContent()}
@@ -420,7 +455,7 @@ class DialogAddAutomationElement
       <ha-wa-dialog
         width="large"
         .open=${this._open}
-        @closed=${this.closeDialog}
+        @closed=${this._handleClosed}
         flexcontent
       >
         ${this._renderContent()}
@@ -558,8 +593,7 @@ class DialogAddAutomationElement
                           interactive
                           type="button"
                           class="paste"
-                          .value=${PASTE_VALUE}
-                          @click=${this._selected}
+                          @click=${this._paste}
                         >
                           <div class="shortcut-label">
                             <div class="label">
@@ -730,15 +764,26 @@ class DialogAddAutomationElement
       );
 
       if (targetId) {
-        if (targetType === "area" && this.hass.areas[targetId]?.floor_id) {
-          const floorId = this.hass.areas[targetId].floor_id;
-          subtitle = computeFloorName(this.hass.floors[floorId]) || floorId;
-        }
-        if (targetType === "device" && this.hass.devices[targetId]?.area_id) {
-          const areaId = this.hass.devices[targetId].area_id;
-          subtitle = computeAreaName(this.hass.areas[areaId]) || areaId;
-        }
-        if (targetType === "entity" && this.hass.states[targetId]) {
+        if (targetType === "area") {
+          const floorId = this.hass.areas[targetId]?.floor_id;
+          if (floorId) {
+            subtitle = computeFloorName(this.hass.floors[floorId]) || floorId;
+          } else {
+            subtitle = this.hass.localize(
+              "ui.panel.config.automation.editor.other_areas"
+            );
+          }
+        } else if (targetType === "device") {
+          const areaId = this.hass.devices[targetId]?.area_id;
+          if (areaId) {
+            subtitle = computeAreaName(this.hass.areas[areaId]) || areaId;
+          } else {
+            const device = this.hass.devices[targetId];
+            subtitle = this.hass.localize(
+              `ui.panel.config.automation.editor.${device?.entry_type === "service" ? "services" : "unassigned_devices"}`
+            );
+          }
+        } else if (targetType === "entity" && this.hass.states[targetId]) {
           const entity = this.hass.entities[targetId];
           if (entity && !entity.device_id && !entity.area_id) {
             const domain = targetId.split(".", 2)[0];
@@ -763,10 +808,10 @@ class DialogAddAutomationElement
               .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
           }
         }
-      }
 
-      if (subtitle) {
-        return html`<span slot="subtitle">${subtitle}</span>`;
+        if (subtitle) {
+          return html`<span slot="subtitle">${subtitle}</span>`;
+        }
       }
     }
 
@@ -1353,6 +1398,61 @@ class DialogAddAutomationElement
     this._labelRegistry?.find(({ label_id }) => label_id === labelId)
   );
 
+  private _getDomainType(domain: string) {
+    return ENTITY_DOMAINS_MAIN.has(domain) ||
+      (this._manifests?.[domain].integration_type === "entity" &&
+        !ENTITY_DOMAINS_OTHER.has(domain))
+      ? "dynamicGroups"
+      : this._manifests?.[domain].integration_type === "helper"
+        ? "helpers"
+        : "other";
+  }
+
+  private _sortDomainsByCollection(
+    type: AddAutomationElementDialogParams["type"],
+    entries: [
+      string,
+      { title: string; items: AddAutomationElementListItem[] },
+    ][]
+  ): { title: string; items: AddAutomationElementListItem[] }[] {
+    const order: string[] = [];
+
+    TYPES[type].collections.forEach((collection) => {
+      order.push(...Object.keys(collection.groups));
+    });
+
+    return entries
+      .sort((a, b) => {
+        const domainA = a[0];
+        const domainB = b[0];
+
+        if (order.includes(domainA) && order.includes(domainB)) {
+          return order.indexOf(domainA) - order.indexOf(domainB);
+        }
+
+        let typeA = domainA;
+        let typeB = domainB;
+
+        if (!order.includes(domainA)) {
+          typeA = this._getDomainType(domainA);
+        }
+
+        if (!order.includes(domainB)) {
+          typeB = this._getDomainType(domainB);
+        }
+
+        if (typeA === typeB) {
+          return stringCompare(
+            a[1].title,
+            b[1].title,
+            this.hass.locale.language
+          );
+        }
+        return order.indexOf(typeA) - order.indexOf(typeB);
+      })
+      .map((entry) => entry[1]);
+  }
+
   // #endregion data
 
   // #region data memoize
@@ -1368,12 +1468,12 @@ class DialogAddAutomationElement
 
   private _getAreaEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getAreaEntityLookup(Object.values(entities), true)
+      getAreaEntityLookup(Object.values(entities))
   );
 
   private _getDeviceEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getDeviceEntityLookup(Object.values(entities), true)
+      getDeviceEntityLookup(Object.values(entities))
   );
 
   private _extractTypeAndIdFromTarget = memoizeOne(
@@ -1438,8 +1538,9 @@ class DialogAddAutomationElement
       );
     });
 
-    return Object.values(items).sort((a, b) =>
-      stringCompare(a.title, b.title, this.hass.locale.language)
+    return this._sortDomainsByCollection(
+      this._params!.type,
+      Object.entries(items)
     );
   }
 
@@ -1548,8 +1649,9 @@ class DialogAddAutomationElement
       );
     });
 
-    return Object.values(items).sort((a, b) =>
-      stringCompare(a.title, b.title, this.hass.locale.language)
+    return this._sortDomainsByCollection(
+      this._params!.type,
+      Object.entries(items)
     );
   }
 
@@ -1580,8 +1682,9 @@ class DialogAddAutomationElement
       );
     });
 
-    return Object.values(items).sort((a, b) =>
-      stringCompare(a.title, b.title, this.hass.locale.language)
+    return this._sortDomainsByCollection(
+      this._params!.type,
+      Object.entries(items)
     );
   }
 
@@ -1594,11 +1697,7 @@ class DialogAddAutomationElement
   }
 
   private _back() {
-    if (this._selectedTarget) {
-      this._targetPickerElement?.navigateBack();
-      return;
-    }
-    this._selectedGroup = undefined;
+    mainWindow.history.back();
   }
 
   private _groupSelected(ev) {
@@ -1610,11 +1709,26 @@ class DialogAddAutomationElement
     }
     this._selectedGroup = group.value;
     this._selectedCollectionIndex = ev.currentTarget.index;
+
+    mainWindow.history.pushState(
+      {
+        dialogData: {
+          group: this._selectedGroup,
+          collectionIndex: this._selectedCollectionIndex,
+        },
+      },
+      ""
+    );
     requestAnimationFrame(() => {
       this._itemsListElement?.scrollTo(0, 0);
     });
   }
 
+  private _paste() {
+    this._params!.add(PASTE_VALUE);
+    this.closeDialog();
+  }
+
   private _selected(ev: CustomEvent<{ value: string }>) {
     let target: HassServiceTarget | undefined;
     if (
@@ -1634,6 +1748,14 @@ class DialogAddAutomationElement
     this._targetItems = undefined;
     this._loadItemsError = false;
     this._selectedTarget = ev.detail.value;
+    mainWindow.history.pushState(
+      {
+        dialogData: {
+          target: this._selectedTarget,
+        },
+      },
+      ""
+    );
 
     requestAnimationFrame(() => {
       if (this._narrow) {
@@ -1678,14 +1800,19 @@ class DialogAddAutomationElement
       }
 
       if (this._params!.type === "action") {
-        const items = await getServicesForTarget(
+        const items: string[] = await getServicesForTarget(
           this.hass.callWS,
           this._selectedTarget
         );
 
+        const filteredItems = items.filter(
+          // homeassistant services are too generic to be applied on the selected target
+          (service) => !service.startsWith("homeassistant.")
+        );
+
         this._targetItems = this._getDomainGroupedActionListItems(
           this.hass.localize,
-          items
+          filteredItems
         );
       }
     } catch (err) {
@@ -1748,6 +1875,10 @@ class DialogAddAutomationElement
     this._tab = "targets";
   }
 
+  private _handleClosed() {
+    this.closeDialog();
+  }
+
   // #region interaction
 
   // #region render helpers
@@ -1913,7 +2044,7 @@ class DialogAddAutomationElement
         ha-wa-dialog {
           --dialog-content-padding: var(--ha-space-0);
           --ha-dialog-min-height: min(
-            648px,
+            800px,
             calc(
               100vh - max(
                   var(--safe-area-inset-bottom),
@@ -1922,7 +2053,7 @@ class DialogAddAutomationElement
             )
           );
           --ha-dialog-min-height: min(
-            648px,
+            800px,
             calc(
               100dvh - max(
                   var(--safe-area-inset-bottom),

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -553,9 +553,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
           area.icon,
         ] as [string, string, string | undefined, string | undefined];
       })
-      .sort(([, nameA], [, nameB]) =>
-        stringCompare(nameA, nameB, this.hass.locale.language)
-      )
       .map(([areaTargetId, areaName, floorId, areaIcon]) => {
         const { open, devices, entities } =
           this._entries[`floor${TARGET_SEPARATOR}${floorId || ""}`].areas![
@@ -708,7 +705,11 @@ export default class HaAutomationAddFromTarget extends LitElement {
           this.floors
         );
 
-        const label = entityName || deviceName || entityId;
+        let label = entityName || deviceName || entityId;
+
+        if (this.entities[entityId]?.hidden) {
+          label += ` (${this.localize("ui.panel.config.automation.editor.entity_hidden")})`;
+        }
 
         return [entityId, label, stateObj] as [string, string, HassEntity];
       })
@@ -837,12 +838,12 @@ export default class HaAutomationAddFromTarget extends LitElement {
 
   private _getAreaEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getAreaEntityLookup(Object.values(entities), true)
+      getAreaEntityLookup(Object.values(entities))
   );
 
   private _getDeviceEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getDeviceEntityLookup(Object.values(entities), true)
+      getDeviceEntityLookup(Object.values(entities))
   );
 
   private _getSelectedTargetId = memoizeOne(
@@ -1382,92 +1383,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
     );
   }
 
-  public navigateBack() {
-    if (!this.value) {
-      return;
-    }
-
-    const valueType = Object.keys(this.value)[0].replace("_id", "");
-    const valueId = this.value[`${valueType}_id`];
-
-    if (
-      valueType === "floor" ||
-      valueType === "label" ||
-      (!valueId &&
-        (valueType === "device" ||
-          valueType === "helper" ||
-          valueType === "service" ||
-          valueType === "area"))
-    ) {
-      fireEvent(this, "value-changed", { value: undefined });
-      return;
-    }
-
-    if (valueType === "area") {
-      fireEvent(this, "value-changed", {
-        value: { floor_id: this.areas[valueId].floor_id || undefined },
-      });
-      return;
-    }
-
-    if (valueType === "device") {
-      if (
-        !this.devices[valueId].area_id &&
-        this.devices[valueId].entry_type === "service"
-      ) {
-        fireEvent(this, "value-changed", {
-          value: { service_id: undefined },
-        });
-        return;
-      }
-
-      fireEvent(this, "value-changed", {
-        value: { area_id: this.devices[valueId].area_id || undefined },
-      });
-      return;
-    }
-
-    if (valueType === "entity" && valueId) {
-      const deviceId = this.entities[valueId].device_id;
-      if (deviceId) {
-        fireEvent(this, "value-changed", {
-          value: { device_id: deviceId },
-        });
-        return;
-      }
-
-      const areaId = this.entities[valueId].area_id;
-      if (areaId) {
-        fireEvent(this, "value-changed", {
-          value: { area_id: areaId },
-        });
-        return;
-      }
-
-      const domain = valueId.split(".", 2)[0];
-      const manifest = this.manifests ? this.manifests[domain] : undefined;
-      if (manifest?.integration_type === "helper") {
-        fireEvent(this, "value-changed", {
-          value: { [`helper_${domain}_id`]: undefined },
-        });
-        return;
-      }
-
-      fireEvent(this, "value-changed", {
-        value: { [`entity_${domain}_id`]: undefined },
-      });
-    }
-
-    if (valueType.startsWith("helper_") || valueType.startsWith("entity_")) {
-      fireEvent(this, "value-changed", {
-        value: {
-          [`${valueType.startsWith("helper_") ? "helper" : "device"}_id`]:
-            undefined,
-        },
-      });
-    }
-  }
-
   private _expandHeight() {
     this._fullHeight = true;
     this.style.setProperty("--max-height", "none");

src/panels/config/automation/add-automation-element/ha-automation-add-items.ts

@@ -273,7 +273,7 @@ export class HaAutomationAddItems extends LitElement {
       align-items: center;
       color: var(--ha-color-text-secondary);
       padding: var(--ha-space-0);
-      margin: var(--ha-space-3) var(--ha-space-4)
+      margin: var(--ha-space-0) var(--ha-space-4)
         max(var(--safe-area-inset-bottom), var(--ha-space-3));
       line-height: var(--ha-line-height-expanded);
       justify-content: center;
@@ -306,7 +306,7 @@ export class HaAutomationAddItems extends LitElement {
     .items .item-headline {
       display: flex;
       align-items: center;
-      gap: var(--ha-space-1);
+      gap: var(--ha-space-2);
       min-height: var(--ha-space-9);
       flex-wrap: wrap;
     }
@@ -366,12 +366,16 @@ export class HaAutomationAddItems extends LitElement {
     }
 
     .selected-target state-badge {
-      --mdc-icon-size: 20px;
+      --mdc-icon-size: 24px;
     }
     .selected-target state-badge,
+    .selected-target ha-floor-icon {
+      display: flex;
+      height: 32px;
+      width: 32px;
+      align-items: center;
+    }
     .selected-target ha-domain-icon {
-      width: 24px;
-      height: 24px;
       filter: grayscale(100%);
     }
   `;

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -393,6 +393,10 @@ export class HaPlatformCondition extends LitElement {
   }
 
   static styles = css`
+    :host {
+      display: block;
+      margin: 0px calc(-1 * var(--ha-space-4));
+    }
     ha-settings-row {
       padding: 0 var(--ha-space-4);
     }

src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts

@@ -429,6 +429,10 @@ export class HaPlatformTrigger extends LitElement {
   }
 
   static styles = css`
+    :host {
+      display: block;
+      margin: 0px calc(-1 * var(--ha-space-4));
+    }
     ha-settings-row {
       padding: 0 var(--ha-space-4);
     }

src/panels/config/labs/dialog-labs-preview-feature-enable.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
@@ -11,6 +12,7 @@ import type { HaSwitch } from "../../../components/ha-switch";
 import "../../../components/ha-switch";
 import type { BackupConfig } from "../../../data/backup";
 import { fetchBackupConfig } from "../../../data/backup";
+import { getSupervisorUpdateConfig } from "../../../data/supervisor/update";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../types";
 import type { LabsPreviewFeatureEnableDialogParams } from "./show-dialog-labs-preview-feature-enable";
@@ -35,7 +37,10 @@ export class DialogLabsPreviewFeatureEnable
   ): Promise<void> {
     this._params = params;
     this._createBackup = false;
-    await this._fetchBackupConfig();
+    this._fetchBackupConfig();
+    if (isComponentLoaded(this.hass, "hassio")) {
+      this._fetchUpdateBackupConfig();
+    }
   }
 
   public closeDialog(): boolean {
@@ -54,15 +59,21 @@ export class DialogLabsPreviewFeatureEnable
     try {
       const { config } = await fetchBackupConfig(this.hass);
       this._backupConfig = config;
+    } catch (err) {
+      // Ignore error, user will get manual backup option
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+  }
 
-      // Default to enabled if automatic backups are configured, disabled otherwise
-      this._createBackup =
-        config.automatic_backups_configured &&
-        !!config.create_backup.password &&
-        config.create_backup.agent_ids.length > 0;
-    } catch {
-      // User will get manual backup option if fetch fails
-      this._createBackup = false;
+  private async _fetchUpdateBackupConfig() {
+    try {
+      const config = await getSupervisorUpdateConfig(this.hass);
+      this._createBackup = config.core_backup_before_update;
+    } catch (err) {
+      // Ignore error, user can still toggle the switch manually
+      // eslint-disable-next-line no-console
+      console.error(err);
     }
   }
 

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

@@ -94,7 +94,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        back-path="/config"
+        back-path="/config/system"
         .header=${this.hass.localize("ui.panel.config.labs.caption")}
       >
         ${sortedFeatures.length
@@ -385,6 +385,10 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
         display: block;
       }
 
+      a[slot="toolbar-icon"] {
+        color: var(--sidebar-icon-color);
+      }
+
       .content {
         max-width: 800px;
         margin: 0 auto;

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

@@ -137,7 +137,7 @@ class HaPanelDevAction extends LitElement {
 
     const descriptionPlaceholders =
       domain && serviceName
-        ? this.hass.services[domain][serviceName].description_placeholders
+        ? this.hass.services[domain]?.[serviceName]?.description_placeholders
         : undefined;
 
     return html`

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

@@ -1,11 +1,10 @@
-import { mdiDownload, mdiPencil } from "@mdi/js";
+import { mdiDownload } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { goBack, navigate } from "../../common/navigate";
+import { navigate } from "../../common/navigate";
 import "../../components/ha-alert";
 import "../../components/ha-icon-button-arrow-prev";
-import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-top-app-bar-fixed";
 import type {
@@ -26,40 +25,64 @@ import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../data/lovelace/config/view";
 import type { StatisticValue } from "../../data/recorder";
 import { haStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, PanelInfo } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import "../lovelace/components/hui-energy-period-selector";
+import "../lovelace/hui-root";
+import type { ExtraActionItem } from "../lovelace/hui-root";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
+import type { LocalizeKeys } from "../../common/translations/localize";
 
 export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
 
+const EMPTY_PREFERENCES: EnergyPreferences = {
+  energy_sources: [],
+  device_consumption: [],
+  device_consumption_water: [],
+};
+
 const OVERVIEW_VIEW = {
+  path: "overview",
   strategy: {
     type: "energy-overview",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
 } as LovelaceViewConfig;
 
-const ELECTRICITY_VIEW = {
-  back_path: "/energy",
+const ENERGY_VIEW = {
   path: "electricity",
   strategy: {
-    type: "energy-electricity",
+    type: "energy",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
 } as LovelaceViewConfig;
 
 const WATER_VIEW = {
-  back_path: "/energy",
   path: "water",
   strategy: {
-    type: "energy-water",
+    type: "water",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
 } as LovelaceViewConfig;
 
+const GAS_VIEW = {
+  path: "gas",
+  strategy: {
+    type: "gas",
+    collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+  },
+} as LovelaceViewConfig;
+
+const POWER_VIEW = {
+  path: "now",
+  strategy: {
+    type: "power",
+    collection_key: "energy_dashboard_now",
+  },
+} as LovelaceViewConfig;
+
 const WIZARD_VIEW = {
   type: "panel",
   path: "setup",
@@ -72,153 +95,50 @@ class PanelEnergy extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ attribute: false }) public panel?: PanelInfo;
+
   @state() private _lovelace?: Lovelace;
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
-
-  @state() private _error?: string;
-
   @property({ attribute: false }) public route?: {
     path: string;
     prefix: string;
   };
 
   @state()
-  private _config?: LovelaceConfig;
+  private _prefs?: EnergyPreferences;
 
-  get _viewPath(): string | undefined {
-    const viewPath: string | undefined = this.route!.path.split("/")[1];
-    return viewPath ? decodeURI(viewPath) : undefined;
+  @state()
+  private _error?: string;
+
+  private get _extraActionItems(): ExtraActionItem[] {
+    return [
+      {
+        icon: mdiDownload,
+        labelKey: "ui.panel.energy.download_data",
+        action: this._dumpCSV,
+      },
+    ];
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    this._loadLovelaceConfig();
-  }
-
-  public async willUpdate(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    // Initial setup
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
+      this._loadConfig();
+      return;
     }
+
     if (!changedProps.has("hass")) {
       return;
     }
+
     const oldHass = changedProps.get("hass") as this["hass"];
-    if (oldHass?.locale !== this.hass.locale) {
+    if (oldHass && oldHass.localize !== this.hass.localize) {
       this._setLovelace();
-    } else if (oldHass && oldHass.localize !== this.hass.localize) {
-      this._reloadView();
     }
   }
 
-  private async _loadLovelaceConfig() {
-    try {
-      this._config = undefined;
-      this._config = await this._generateLovelaceConfig();
-    } catch (err) {
-      this._error = (err as Error).message;
-    }
-
-    this._setLovelace();
-  }
-
-  private _back(ev) {
-    ev.stopPropagation();
-    goBack();
-  }
-
-  protected render() {
-    if (!this._config && !this._error) {
-      // Still loading
-      return html`
-        <div class="centered">
-          <ha-spinner size="large"></ha-spinner>
-        </div>
-      `;
-    }
-    const isSingleView = this._config?.views.length === 1;
-    const viewPath = this._viewPath;
-    const viewIndex = this._config
-      ? Math.max(
-          this._config.views.findIndex((view) => view.path === viewPath),
-          0
-        )
-      : 0;
-    const showBack =
-      this._searchParms.has("historyBack") || (!isSingleView && viewIndex > 0);
-
-    return html`
-      <div class="header">
-        <div class="toolbar">
-          ${showBack
-            ? html`
-                <ha-icon-button-arrow-prev
-                  @click=${this._back}
-                  slot="navigationIcon"
-                ></ha-icon-button-arrow-prev>
-              `
-            : html`
-                <ha-menu-button
-                  slot="navigationIcon"
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                ></ha-menu-button>
-              `}
-          ${!this.narrow
-            ? html`<div class="main-title">
-                ${this.hass.localize("panel.energy")}
-              </div>`
-            : nothing}
-
-          <hui-energy-period-selector
-            .hass=${this.hass}
-            .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
-          >
-            ${this.hass.user?.is_admin
-              ? html` <ha-list-item
-                  slot="overflow-menu"
-                  graphic="icon"
-                  @request-selected=${this._navigateConfig}
-                >
-                  <ha-svg-icon slot="graphic" .path=${mdiPencil}> </ha-svg-icon>
-                  ${this.hass!.localize("ui.panel.energy.configure")}
-                </ha-list-item>`
-              : nothing}
-            <ha-list-item
-              slot="overflow-menu"
-              graphic="icon"
-              @request-selected=${this._dumpCSV}
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiDownload}> </ha-svg-icon>
-              ${this.hass!.localize("ui.panel.energy.download_data")}
-            </ha-list-item>
-          </hui-energy-period-selector>
-        </div>
-      </div>
-
-      <hui-view-container
-        .hass=${this.hass}
-        @reload-energy-panel=${this._reloadView}
-      >
-        ${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>
-    `;
-  }
-
   private _fetchEnergyPrefs = async (): Promise<
     EnergyPreferences | undefined
   > => {
@@ -236,46 +156,37 @@ class PanelEnergy extends LitElement {
     return collection.prefs;
   };
 
-  private async _generateLovelaceConfig(): Promise<LovelaceConfig> {
-    const prefs = await this._fetchEnergyPrefs();
-    if (
-      !prefs ||
-      (prefs.device_consumption.length === 0 &&
-        prefs.energy_sources.length === 0)
-    ) {
-      await import("./cards/energy-setup-wizard-card");
-      return {
-        views: [WIZARD_VIEW],
-      };
+  private async _loadConfig() {
+    try {
+      this._error = undefined;
+      const prefs = await this._fetchEnergyPrefs();
+      this._prefs = prefs || EMPTY_PREFERENCES;
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to load prefs:", err);
+      this._prefs = EMPTY_PREFERENCES;
+      this._error = (err as Error).message || "Unknown error";
     }
+    await this._setLovelace();
 
-    const isElectricityOnly = prefs.energy_sources.every((source) =>
-      ["grid", "solar", "battery"].includes(source.type)
-    );
-    if (isElectricityOnly) {
-      return {
-        views: [ELECTRICITY_VIEW],
-      };
+    // Check if current path is valid, navigate to first view if not
+    const views = this._lovelace!.config?.views || [];
+    const validPaths = views.map((view) => view.path);
+    const viewPath: string | undefined = this.route!.path.split("/")[1];
+    if (!viewPath || !validPaths.includes(viewPath)) {
+      navigate(`${this.route!.prefix}/${validPaths[0]}`);
+    } else {
+      // Force hui-root to re-process the route by creating a new route object
+      this.route = { ...this.route! };
     }
-
-    const hasWater =
-      prefs.energy_sources.some((source) => source.type === "water") ||
-      prefs.device_consumption_water?.length > 0;
-
-    const views: LovelaceViewConfig[] = [OVERVIEW_VIEW, ELECTRICITY_VIEW];
-    if (hasWater) {
-      views.push(WATER_VIEW);
-    }
-    return { views };
   }
 
-  private _setLovelace() {
-    if (!this._config) {
-      return;
-    }
+  private async _setLovelace() {
+    const config = await this._generateLovelaceConfig();
+
     this._lovelace = {
-      config: this._config,
-      rawConfig: this._config,
+      config: config,
+      rawConfig: config,
       editMode: false,
       urlPath: "energy",
       mode: "generated",
@@ -283,18 +194,114 @@ class PanelEnergy extends LitElement {
       enableFullEditMode: () => undefined,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
-      setEditMode: () => undefined,
+      setEditMode: () => this._navigateConfig(),
       showToast: () => undefined,
     };
   }
 
-  private _navigateConfig(ev) {
-    ev.stopPropagation();
+  protected render() {
+    if (this._error) {
+      return html`
+        <div class="centered">
+          <ha-alert alert-type="error">
+            An error occurred loading energy preferences: ${this._error}
+          </ha-alert>
+        </div>
+      `;
+    }
+
+    if (!this._prefs) {
+      // Still loading
+      return html`
+        <div class="centered">
+          <ha-spinner size="large"></ha-spinner>
+        </div>
+      `;
+    }
+
+    if (!this._lovelace) {
+      return nothing;
+    }
+
+    return html`
+      <hui-root
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .lovelace=${this._lovelace}
+        .route=${this.route}
+        .panel=${this.panel}
+        .extraActionItems=${this._extraActionItems}
+        @reload-energy-panel=${this._reloadConfig}
+      ></hui-root>
+    `;
+  }
+
+  private async _generateLovelaceConfig(): Promise<LovelaceConfig> {
+    if (
+      !this._prefs ||
+      (this._prefs.device_consumption.length === 0 &&
+        this._prefs.energy_sources.length === 0)
+    ) {
+      await import("./cards/energy-setup-wizard-card");
+      return {
+        views: [WIZARD_VIEW],
+      };
+    }
+
+    const hasEnergy = this._prefs.energy_sources.some((source) =>
+      ["grid", "solar", "battery"].includes(source.type)
+    );
+
+    const hasPower =
+      this._prefs.energy_sources.some(
+        (source) =>
+          (source.type === "solar" && source.stat_rate) ||
+          (source.type === "battery" && source.stat_rate) ||
+          (source.type === "grid" && source.power?.length)
+      ) || this._prefs.device_consumption.some((device) => device.stat_rate);
+
+    const hasWater =
+      this._prefs.energy_sources.some((source) => source.type === "water") ||
+      this._prefs.device_consumption_water?.length > 0;
+
+    const hasGas = this._prefs.energy_sources.some(
+      (source) => source.type === "gas"
+    );
+
+    const views: LovelaceViewConfig[] = [];
+    if (hasEnergy) {
+      views.push(ENERGY_VIEW);
+    }
+    if (hasGas) {
+      views.push(GAS_VIEW);
+    }
+    if (hasWater) {
+      views.push(WATER_VIEW);
+    }
+    if (hasPower) {
+      views.push(POWER_VIEW);
+    }
+    if (views.length > 1) {
+      views.unshift(OVERVIEW_VIEW);
+    }
+    return {
+      views: views.map((view) => ({
+        ...view,
+        title:
+          view.title ||
+          this.hass.localize(
+            `ui.panel.energy.title.${view.path}` as LocalizeKeys
+          ),
+      })),
+    };
+  }
+
+  private _navigateConfig(ev?: Event) {
+    ev?.stopPropagation();
     navigate("/config/energy?historyBack=1");
   }
 
-  private async _dumpCSV(ev) {
-    ev.stopPropagation();
+  private _dumpCSV = async () => {
     const energyData = getEnergyDataCollection(this.hass, {
       key: "energy_dashboard",
     });
@@ -308,6 +315,7 @@ class PanelEnergy extends LitElement {
 
     const energy_sources = energyData.prefs.energy_sources;
     const device_consumption = energyData.prefs.device_consumption;
+    const device_consumption_water = energyData.prefs.device_consumption_water;
     const stats = energyData.state.stats;
 
     const timeSet = new Set<number>();
@@ -493,6 +501,20 @@ class PanelEnergy extends LitElement {
 
     printCategory("device_consumption", devices, electricUnit);
 
+    if (device_consumption_water) {
+      const waterDevices: string[] = [];
+      device_consumption_water.forEach((source) => {
+        source = source as DeviceConsumptionEnergyPreference;
+        waterDevices.push(source.stat_consumption);
+      });
+
+      printCategory(
+        "device_consumption_water",
+        waterDevices,
+        energyData.state.waterUnit
+      );
+    }
+
     const { summedData, compareSummedData: _ } = getSummedData(
       energyData.state
     );
@@ -591,74 +613,22 @@ class PanelEnergy extends LitElement {
     });
     const url = window.URL.createObjectURL(blob);
     fileDownload(url, "energy.csv");
-  }
+  };
 
-  private _reloadView() {
-    this._loadLovelaceConfig();
+  private _reloadConfig() {
+    this._loadConfig();
   }
 
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        :host hui-energy-period-selector {
-          flex-grow: 1;
-          padding-left: 32px;
-          padding-inline-start: 32px;
-          padding-inline-end: initial;
-          --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
-          direction: var(--direction);
-          --date-range-picker-max-height: calc(100vh - 80px);
-        }
-        :host([narrow]) hui-energy-period-selector {
-          padding-left: 0px;
-          padding-inline-start: 0px;
-          padding-inline-end: initial;
-        }
         :host {
+          --ha-view-sections-column-max-width: 100%;
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;
         }
-        .header {
-          background-color: var(--app-header-background-color);
-          color: var(--app-header-text-color, white);
-          border-bottom: var(--app-header-border-bottom, none);
-          position: fixed;
-          top: 0;
-          width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
-                --safe-area-inset-right,
-                0px
-              )
-          );
-          padding-top: var(--safe-area-inset-top);
-          z-index: 4;
-          transition: box-shadow 200ms linear;
-          display: flex;
-          flex-direction: row;
-          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
-          backdrop-filter: var(--app-header-backdrop-filter, none);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .header {
-          width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
-                --safe-area-inset-left,
-                0px
-              ) - var(--safe-area-inset-right, 0px)
-          );
-          padding-left: var(--safe-area-inset-left);
-        }
-        :host([scrolled]) .header {
-          box-shadow: var(
-            --mdc-top-app-bar-fixed-box-shadow,
-            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-          );
-        }
         .toolbar {
           height: var(--header-height);
           display: flex;
@@ -677,24 +647,6 @@ class PanelEnergy extends LitElement {
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
-        hui-view-container {
-          position: relative;
-          display: flex;
-          min-height: 100vh;
-          box-sizing: border-box;
-          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-right: var(--safe-area-inset-right);
-          padding-inline-end: var(--safe-area-inset-right);
-          padding-bottom: var(--safe-area-inset-bottom);
-        }
-        :host([narrow]) hui-view-container {
-          padding-left: var(--safe-area-inset-left);
-          padding-inline-start: var(--safe-area-inset-left);
-        }
-        hui-view {
-          flex: 1 1 100%;
-          max-width: 100%;
-        }
         .centered {
           width: 100%;
           height: 100%;

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

@@ -6,7 +6,6 @@ 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";
 
 const sourceHasCost = (source: Record<string, any>): boolean =>
@@ -18,7 +17,7 @@ const sourceHasCost = (source: Record<string, any>): boolean =>
   );
 
 @customElement("energy-overview-view-strategy")
-export class EnergyViewStrategy extends ReactiveElement {
+export class EnergyOverviewViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
@@ -52,26 +51,23 @@ export class EnergyViewStrategy extends ReactiveElement {
         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(
+    const hasSolar = prefs.energy_sources.some(
+      (source) => source.type === "solar"
+    );
+    const hasWaterSources = prefs.energy_sources.some(
       (source) => source.type === "water"
     );
+    const hasWaterDevices = prefs.device_consumption_water?.length;
     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 hasCost = prefs.energy_sources.some(
       (source) =>
         sourceHasCost(source) ||
@@ -82,117 +78,74 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     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,
+      cards: [
+        {
+          type: "energy-date-selection",
+          collection_key: collectionKey,
+          allow_compare: false,
         },
-      });
-    }
-    // Only include if we have a grid or battery.
-    if (hasGrid || hasBattery) {
+      ],
+    };
+    if (hasGrid || hasBattery || hasSolar) {
       overviewSection.cards!.push({
         title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
         type: "energy-distribution",
         collection_key: collectionKey,
       });
     }
-    if (hasCost) {
-      overviewSection.cards!.push({
-        type: "energy-sources-table",
-        collection_key: collectionKey,
-        show_only_totals: true,
-      });
-    }
     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 (hasCost) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_sources_table_title"
+            ),
+            type: "energy-sources-table",
+            collection_key: collectionKey,
+            show_only_totals: true,
           },
-        },
-      ],
-    };
+        ],
+      });
+    }
 
     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({
+      view.sections!.push({
         type: "grid",
-        columns: 2,
-        square: false,
-        cards: gauges,
+        cards: [
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.power_sources_graph_title"
+            ),
+            type: "power-sources-graph",
+            collection_key: collectionKey,
+            show_legend: false,
+          },
+        ],
       });
     }
 
-    view.sections!.push(electricitySection);
+    if (hasGrid || hasBattery) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_usage_graph_title"
+            ),
+            type: "energy-usage-graph",
+            collection_key: "energy_dashboard",
+          },
+        ],
+      });
+    }
 
     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"
@@ -204,25 +157,25 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasWater) {
+    if (hasWaterSources || hasWaterDevices) {
       view.sections!.push({
         type: "grid",
         cards: [
-          {
-            type: "heading",
-            heading: hass.localize("ui.panel.energy.overview.water"),
-            tap_action: {
-              action: "navigate",
-              navigation_path: "/energy/water",
-            },
-          },
-          {
-            title: hass.localize(
-              "ui.panel.energy.cards.energy_water_graph_title"
-            ),
-            type: "energy-water-graph",
-            collection_key: collectionKey,
-          },
+          hasWaterSources
+            ? {
+                title: hass.localize(
+                  "ui.panel.energy.cards.energy_water_graph_title"
+                ),
+                type: "energy-water-graph",
+                collection_key: collectionKey,
+              }
+            : {
+                title: hass.localize(
+                  "ui.panel.energy.cards.water_sankey_title"
+                ),
+                type: "water-sankey",
+                collection_key: collectionKey,
+              },
         ],
       });
     }
@@ -233,6 +186,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "energy-overview-view-strategy": EnergyViewStrategy;
+    "energy-overview-view-strategy": EnergyOverviewViewStrategy;
   }
 }

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

@@ -7,8 +7,8 @@ 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";
 
-@customElement("energy-electricity-view-strategy")
-export class EnergyElectricityViewStrategy extends ReactiveElement {
+@customElement("energy-view-strategy")
+export class EnergyViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
@@ -46,39 +46,19 @@ export class EnergyElectricityViewStrategy extends ReactiveElement {
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    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 showFloorsNAreas = !prefs.device_consumption.some(
+      (d) => d.included_in_stat
     );
 
+    view.cards!.push({
+      type: "energy-date-selection",
+      collection_key: collectionKey,
+    });
     view.cards!.push({
       type: "energy-compare",
       collection_key: "energy_dashboard",
     });
 
-    if (hasPowerSources) {
-      if (hasPowerDevices) {
-        view.cards!.push({
-          title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
-          type: "power-sankey",
-          collection_key: collectionKey,
-          grid_options: {
-            columns: 24,
-          },
-        });
-      }
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
-        type: "power-sources-graph",
-        collection_key: collectionKey,
-      });
-    }
-
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -156,15 +136,12 @@ export class EnergyElectricityViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
-      const showFloorsNAreas = !prefs.device_consumption.some(
-        (d) => d.included_in_stat
-      );
       view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
-        type: "energy-sankey",
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
         collection_key: "energy_dashboard",
-        group_by_floor: showFloorsNAreas,
-        group_by_area: showFloorsNAreas,
       });
       view.cards!.push({
         title: hass.localize(
@@ -174,11 +151,11 @@ export class EnergyElectricityViewStrategy extends ReactiveElement {
         collection_key: "energy_dashboard",
       });
       view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_detail_graph_title"
-        ),
-        type: "energy-devices-detail-graph",
+        title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
+        type: "energy-sankey",
         collection_key: "energy_dashboard",
+        group_by_floor: showFloorsNAreas,
+        group_by_area: showFloorsNAreas,
       });
     }
 
@@ -188,6 +165,6 @@ export class EnergyElectricityViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "energy-electricity-view-strategy": EnergyElectricityViewStrategy;
+    "energy-view-strategy": EnergyViewStrategy;
   }
 }

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

@@ -0,0 +1,70 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+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";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+
+@customElement("gas-view-strategy")
+export class GasViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [{ type: "grid", cards: [] }],
+    };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
+
+    const hasGasSources = prefs?.energy_sources.some(
+      (source) => source.type === "gas"
+    );
+
+    // No gas sources available
+    if (!prefs || !hasGasSources) {
+      return view;
+    }
+
+    const section = view.sections![0] as LovelaceSectionConfig;
+
+    section.cards!.push({
+      type: "energy-date-selection",
+      collection_key: collectionKey,
+    });
+    section.cards!.push({
+      type: "energy-compare",
+      collection_key: collectionKey,
+    });
+
+    section.cards!.push({
+      title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
+      type: "energy-gas-graph",
+      collection_key: collectionKey,
+    });
+
+    section.cards!.push({
+      title: hass.localize("ui.panel.energy.cards.energy_sources_table_title"),
+      type: "energy-sources-table",
+      collection_key: collectionKey,
+      types: ["gas"],
+    });
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "gas-view-strategy": GasViewStrategy;
+  }
+}

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

@@ -0,0 +1,82 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+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";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+
+@customElement("power-view-strategy")
+export class PowerViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [{ type: "grid", cards: [] }],
+    };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    await energyCollection.refresh();
+    const prefs = energyCollection.prefs;
+
+    const hasPowerSources = prefs?.energy_sources.some(
+      (source) =>
+        (source.type === "solar" && source.stat_rate) ||
+        (source.type === "battery" && source.stat_rate) ||
+        (source.type === "grid" && source.power?.length)
+    );
+    const hasPowerDevices = prefs?.device_consumption.some(
+      (device) => device.stat_rate
+    );
+
+    // No power sources configured
+    if (!prefs || (!hasPowerSources && !hasPowerDevices)) {
+      return view;
+    }
+
+    const section = view.sections![0] as LovelaceSectionConfig;
+
+    if (hasPowerSources) {
+      section.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
+        type: "power-sources-graph",
+        collection_key: collectionKey,
+        grid_options: {
+          columns: 36,
+        },
+      });
+    }
+
+    if (hasPowerDevices) {
+      const showFloorsNAreas = !prefs.device_consumption.some(
+        (d) => d.included_in_stat
+      );
+      section.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
+        type: "power-sankey",
+        collection_key: collectionKey,
+        group_by_floor: showFloorsNAreas,
+        group_by_area: showFloorsNAreas,
+        grid_options: {
+          columns: 36,
+        },
+      });
+    }
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "power-view-strategy": PowerViewStrategy;
+  }
+}

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

@@ -5,14 +5,18 @@ 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";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 
-@customElement("energy-water-view-strategy")
-export class EnergyWaterViewStrategy extends ReactiveElement {
+@customElement("water-view-strategy")
+export class WaterViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = { cards: [] };
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [{ type: "grid", cards: [] }],
+    };
 
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
@@ -22,36 +26,37 @@ export class EnergyWaterViewStrategy extends ReactiveElement {
     });
     const prefs = energyCollection.prefs;
 
+    const hasWaterSources = prefs?.energy_sources.some(
+      (source) => source.type === "water"
+    );
+    const hasWaterDevices = prefs?.device_consumption_water?.length;
+
     // No water sources available
-    if (
-      !prefs ||
-      (!prefs.device_consumption_water?.length &&
-        !prefs.energy_sources.some((source) => source.type === "water"))
-    ) {
+    if (!prefs || (!hasWaterDevices && !hasWaterSources)) {
       return view;
     }
 
-    view.type = "sidebar";
+    const section = view.sections![0] as LovelaceSectionConfig;
 
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
-
-    view.cards!.push({
+    section.cards!.push({
+      type: "energy-date-selection",
+      collection_key: collectionKey,
+    });
+    section.cards!.push({
       type: "energy-compare",
       collection_key: collectionKey,
     });
 
-    if (hasWater) {
-      view.cards!.push({
+    if (hasWaterSources) {
+      section.cards!.push({
         title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
         type: "energy-water-graph",
         collection_key: collectionKey,
       });
     }
 
-    if (hasWater) {
-      view.cards!.push({
+    if (hasWaterSources) {
+      section.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
@@ -62,11 +67,11 @@ export class EnergyWaterViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have at least 1 water device in the config.
-    if (prefs.device_consumption_water?.length) {
+    if (hasWaterDevices) {
       const showFloorsNAreas = !prefs.device_consumption_water.some(
         (d) => d.included_in_stat
       );
-      view.cards!.push({
+      section.cards!.push({
         title: hass.localize("ui.panel.energy.cards.water_sankey_title"),
         type: "water-sankey",
         collection_key: collectionKey,
@@ -81,6 +86,6 @@ export class EnergyWaterViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "energy-water-view-strategy": EnergyWaterViewStrategy;
+    "water-view-strategy": WaterViewStrategy;
   }
 }

src/panels/home/dialogs/dialog-edit-home.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
+import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-wa-dialog";
@@ -78,6 +79,16 @@ export class DialogEditHome
           @value-changed=${this._favoriteEntitiesChanged}
         ></ha-entities-picker>
 
+        <ha-alert alert-type="info">
+          ${this.hass.localize("ui.panel.home.editor.areas_hint", {
+            areas_page: html`<a
+              href="/config/areas?historyBack=1"
+              @click=${this.closeDialog}
+              >${this.hass.localize("ui.panel.home.editor.areas_page")}</a
+            >`,
+          })}
+        </ha-alert>
+
         <ha-dialog-footer slot="footer">
           <ha-button
             appearance="plain"
@@ -140,6 +151,11 @@ export class DialogEditHome
       ha-entities-picker {
         display: block;
       }
+
+      ha-alert {
+        display: block;
+        margin-top: var(--ha-space-4);
+      }
     `,
   ];
 }

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

@@ -13,6 +13,7 @@ import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strateg
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
+import "../lovelace/views/hui-view-background";
 
 const LIGHT_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -115,6 +116,7 @@ class PanelLight extends LitElement {
         this._lovelace
           ? html`
               <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
                 <hui-view
                   .hass=${this.hass}
                   .narrow=${this.narrow}

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

@@ -217,6 +217,9 @@ export class HuiEnergyDevicesGraphCard
           show: true,
           type: "value",
           name: "kWh",
+          axisPointer: {
+            show: false,
+          },
         };
         options.yAxis = {
           show: true,
@@ -551,9 +554,12 @@ export class HuiEnergyDevicesGraphCard
       e.detail.seriesType === "pie" &&
       e.detail.event?.target?.type === "tspan" // label
     ) {
-      fireEvent(this, "hass-more-info", {
-        entityId: (e.detail.data as any).id as string,
-      });
+      const id = (e.detail.data as any).id as string;
+      if (id !== "untracked") {
+        fireEvent(this, "hass-more-info", {
+          entityId: id,
+        });
+      }
     }
   }
 

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

@@ -23,6 +23,9 @@ const DEFAULT_CONFIG: Partial<PowerSankeyCardConfig> = {
   group_by_area: true,
 };
 
+// Minimum power threshold in kW to display a device node
+const MIN_POWER_THRESHOLD = 0.01;
+
 interface PowerData {
   solar: number;
   from_grid: number;
@@ -232,7 +235,7 @@ class HuiPowerSankeyCard
         color: computedStyle
           .getPropertyValue("--energy-grid-return-color")
           .trim(),
-        index: 2,
+        index: 1,
       });
       if (powerData.battery_to_grid > 0) {
         links.push({
@@ -251,23 +254,75 @@ class HuiPowerSankeyCard
     let untrackedConsumption = homeNode.value;
     const deviceNodes: Node[] = [];
     const parentLinks: Record<string, string> = {};
+
+    // Build a map of device relationships for hierarchy resolution
+    // Key: stat_consumption (energy), Value: { stat_rate, included_in_stat }
+    const deviceMap = new Map<
+      string,
+      { stat_rate?: string; included_in_stat?: string }
+    >();
+    prefs.device_consumption.forEach((device) => {
+      deviceMap.set(device.stat_consumption, {
+        stat_rate: device.stat_rate,
+        included_in_stat: device.included_in_stat,
+      });
+    });
+
+    // Set of stat_rate entities that will be rendered as nodes
+    const renderedStatRates = new Set<string>();
+    prefs.device_consumption.forEach((device) => {
+      if (device.stat_rate) {
+        const value = this._getCurrentPower(device.stat_rate);
+        if (value >= MIN_POWER_THRESHOLD) {
+          renderedStatRates.add(device.stat_rate);
+        }
+      }
+    });
+
+    // Find the effective parent for power hierarchy
+    // Walks up the chain to find an ancestor with stat_rate that will be rendered
+    const findEffectiveParent = (
+      includedInStat: string | undefined
+    ): string | undefined => {
+      let currentParent = includedInStat;
+      while (currentParent) {
+        const parentDevice = deviceMap.get(currentParent);
+        if (!parentDevice) {
+          return undefined;
+        }
+        // If this parent has a stat_rate and will be rendered, use it
+        if (
+          parentDevice.stat_rate &&
+          renderedStatRates.has(parentDevice.stat_rate)
+        ) {
+          return parentDevice.stat_rate;
+        }
+        // Otherwise, continue up the chain
+        currentParent = parentDevice.included_in_stat;
+      }
+      return undefined;
+    };
+
     prefs.device_consumption.forEach((device, idx) => {
       if (!device.stat_rate) {
         return;
       }
       const value = this._getCurrentPower(device.stat_rate);
 
-      if (value < 0.01) {
+      if (value < MIN_POWER_THRESHOLD) {
         return;
       }
 
+      // Find the effective parent (may be different from direct parent if parent has no stat_rate)
+      const effectiveParent = findEffectiveParent(device.included_in_stat);
+
       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,
+        parent: effectiveParent,
       };
       if (node.parent) {
         parentLinks[node.id] = node.parent;

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

@@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { LineSeriesOption } from "echarts/charts";
-import { graphic } from "echarts";
+import { LinearGradient } from "../../../../resources/echarts/echarts";
 import "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
 import type { EnergyData } from "../../../../data/energy";
@@ -132,7 +132,7 @@ export class HuiPowerSourcesGraphCard
         compareEnd
       ),
       legend: {
-        show: true,
+        show: this._config?.show_legend !== false,
         type: "custom",
         data: legendData,
       },
@@ -213,7 +213,7 @@ export class HuiPowerSourcesGraphCard
           color: colorHex,
           stack: "positive",
           areaStyle: {
-            color: new graphic.LinearGradient(0, 0, 0, 1, [
+            color: new LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
@@ -235,7 +235,7 @@ export class HuiPowerSourcesGraphCard
             color: colorHex,
             stack: "negative",
             areaStyle: {
-              color: new graphic.LinearGradient(0, 1, 0, 0, [
+              color: new LinearGradient(0, 1, 0, 0, [
                 {
                   offset: 0,
                   color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
@@ -323,9 +323,9 @@ export class HuiPowerSourcesGraphCard
     const negative: [number, number][] = [];
     Object.entries(data).forEach(([x, y]) => {
       const ts = Number(x);
-      const meanY = y.reduce((a, b) => a + b, 0) / y.length;
-      positive.push([ts, Math.max(0, meanY)]);
-      negative.push([ts, Math.min(0, meanY)]);
+      const sumY = y.reduce((a, b) => a + b, 0);
+      positive.push([ts, Math.max(0, sumY)]);
+      negative.push([ts, Math.min(0, sumY)]);
     });
     return { positive, negative };
   }

src/panels/lovelace/cards/types.ts

@@ -238,6 +238,7 @@ export interface WaterSankeyCardConfig extends EnergyCardBaseConfig {
 export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
   type: "power-sources-graph";
   title?: string;
+  show_legend?: boolean;
 }
 
 export interface PowerSankeyCardConfig extends EnergyCardBaseConfig {

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

@@ -98,17 +98,32 @@ class HuiWaterSankeyCard
     const nodes: Node[] = [];
     const links: Link[] = [];
 
-    // Calculate total water consumption from all devices
-    let totalWaterConsumption = 0;
-    prefs.device_consumption_water.forEach((device) => {
+    // Calculate total water consumption from all sources or devices
+    const totalDownstreamConsumption = prefs.device_consumption_water.reduce(
+      (total, device) => {
+        const value =
+          device.stat_consumption in this._data!.stats
+            ? calculateStatisticSumGrowth(
+                this._data!.stats[device.stat_consumption]
+              ) || 0
+            : 0;
+        return total + value;
+      },
+      0
+    );
+    const totalSourceSupply = waterSources.reduce((total, source) => {
       const value =
-        device.stat_consumption in this._data!.stats
+        source.stat_energy_from in this._data!.stats
           ? calculateStatisticSumGrowth(
-              this._data!.stats[device.stat_consumption]
+              this._data!.stats[source.stat_energy_from]
             ) || 0
           : 0;
-      totalWaterConsumption += value;
-    });
+      return total + value;
+    }, 0);
+    const totalWaterConsumption = Math.max(
+      totalDownstreamConsumption,
+      totalSourceSupply
+    );
 
     // Create home/consumption node
     const homeNode: Node = {

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

@@ -66,6 +66,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow?;
 
+  @property({ type: Boolean, attribute: "allow-compare" }) public allowCompare =
+    true;
+
   @state() _startDate?: Date;
 
   @state() _endDate?: Date;
@@ -222,15 +225,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
-          <ha-check-list-item
-            left
-            @request-selected=${this._toggleCompare}
-            .selected=${this._compare}
-          >
-            ${this.hass.localize(
-              "ui.panel.lovelace.components.energy_period_selector.compare"
-            )}
-          </ha-check-list-item>
+          ${this.allowCompare
+            ? html`<ha-check-list-item
+                left
+                @request-selected=${this._toggleCompare}
+                .selected=${this._compare}
+              >
+                ${this.hass.localize(
+                  "ui.panel.lovelace.components.energy_period_selector.compare"
+                )}
+              </ha-check-list-item>`
+            : nothing}
           <slot name="overflow-menu"></slot>
         </ha-button-menu>
       </div>

src/panels/lovelace/hui-root.ts

@@ -112,6 +112,12 @@ interface ActionItem {
   subItems?: SubActionItem[];
 }
 
+export interface ExtraActionItem {
+  icon: string;
+  labelKey: LocalizeKeys;
+  action: () => void;
+}
+
 interface SubActionItem {
   icon: string;
   key: LocalizeKeys;
@@ -127,7 +133,7 @@ interface UndoStackItem {
 
 @customElement("hui-root")
 class HUIRoot extends LitElement {
-  @property({ attribute: false }) public panel?: PanelInfo<LovelacePanelConfig>;
+  @property({ attribute: false }) public panel?: PanelInfo;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -140,6 +146,8 @@ class HUIRoot extends LitElement {
     prefix: string;
   };
 
+  @property({ attribute: false }) public extraActionItems?: ExtraActionItem[];
+
   @state() private _curView?: number | "hass-unused-entities";
 
   private _configChangedByUndo = false;
@@ -347,6 +355,25 @@ class HUIRoot extends LitElement {
       },
     ];
 
+    // Add extra action items from parent components
+    if (this.extraActionItems) {
+      this.extraActionItems.forEach((extraItem) => {
+        items.push({
+          icon: extraItem.icon,
+          key: extraItem.labelKey,
+          buttonAction: extraItem.action,
+          overflowAction: (ev: CustomEvent<RequestSelectedDetail>) => {
+            if (!shouldHandleRequestSelectedEvent(ev)) {
+              return;
+            }
+            extraItem.action();
+          },
+          visible: true,
+          overflow: this.narrow,
+        });
+      });
+    }
+
     const overflowItems = items.filter((i) => i.visible && i.overflow);
     const overflowCanPromote =
       overflowItems.length === 1 && overflowItems[0].overflow_can_promote;
@@ -543,68 +570,72 @@ class HUIRoot extends LitElement {
         })}
       >
         <div class="header">
-          <div class="toolbar">
+          <slot name="toolbar">
+            <div class="toolbar">
+              ${this._editMode
+                ? html`
+                    <div class="main-title">
+                      ${dashboardTitle ||
+                      this.hass!.localize("ui.panel.lovelace.editor.header")}
+                      <ha-icon-button
+                        slot="actionItems"
+                        .label=${this.hass!.localize(
+                          "ui.panel.lovelace.editor.edit_lovelace.edit_title"
+                        )}
+                        .path=${mdiPencil}
+                        class="edit-icon"
+                        @click=${this._editDashboard}
+                      ></ha-icon-button>
+                    </div>
+                    <div class="action-items">${this._renderActionItems()}</div>
+                  `
+                : html`
+                    ${isSubview
+                      ? html`
+                          <ha-icon-button-arrow-prev
+                            .hass=${this.hass}
+                            slot="navigationIcon"
+                            @click=${this._goBack}
+                          ></ha-icon-button-arrow-prev>
+                        `
+                      : html`
+                          <ha-menu-button
+                            slot="navigationIcon"
+                            .hass=${this.hass}
+                            .narrow=${this.narrow}
+                          ></ha-menu-button>
+                        `}
+                    ${isSubview
+                      ? html`
+                          <div class="main-title">${curViewConfig.title}</div>
+                        `
+                      : hasTabViews
+                        ? tabs
+                        : html`
+                            <div class="main-title">
+                              ${views[0]?.title ?? dashboardTitle}
+                            </div>
+                          `}
+                    <div class="action-items">${this._renderActionItems()}</div>
+                  `}
+            </div>
             ${this._editMode
               ? html`
-                  <div class="main-title">
-                    ${dashboardTitle ||
-                    this.hass!.localize("ui.panel.lovelace.editor.header")}
+                  <div class="tab-bar">
+                    ${tabs}
                     <ha-icon-button
-                      slot="actionItems"
+                      slot="nav"
+                      id="add-view"
+                      @click=${this._addView}
                       .label=${this.hass!.localize(
-                        "ui.panel.lovelace.editor.edit_lovelace.edit_title"
+                        "ui.panel.lovelace.editor.edit_view.add"
                       )}
-                      .path=${mdiPencil}
-                      class="edit-icon"
-                      @click=${this._editDashboard}
+                      .path=${mdiPlus}
                     ></ha-icon-button>
                   </div>
-                  <div class="action-items">${this._renderActionItems()}</div>
                 `
-              : html`
-                  ${isSubview
-                    ? html`
-                        <ha-icon-button-arrow-prev
-                          .hass=${this.hass}
-                          slot="navigationIcon"
-                          @click=${this._goBack}
-                        ></ha-icon-button-arrow-prev>
-                      `
-                    : html`
-                        <ha-menu-button
-                          slot="navigationIcon"
-                          .hass=${this.hass}
-                          .narrow=${this.narrow}
-                        ></ha-menu-button>
-                      `}
-                  ${isSubview
-                    ? html`<div class="main-title">${curViewConfig.title}</div>`
-                    : hasTabViews
-                      ? tabs
-                      : html`
-                          <div class="main-title">
-                            ${views[0]?.title ?? dashboardTitle}
-                          </div>
-                        `}
-                  <div class="action-items">${this._renderActionItems()}</div>
-                `}
-          </div>
-          ${this._editMode
-            ? html`
-                <div class="tab-bar">
-                  ${tabs}
-                  <ha-icon-button
-                    slot="nav"
-                    id="add-view"
-                    @click=${this._addView}
-                    .label=${this.hass!.localize(
-                      "ui.panel.lovelace.editor.edit_view.add"
-                    )}
-                    .path=${mdiPlus}
-                  ></ha-icon-button>
-                </div>
-              `
-            : nothing}
+              : nothing}
+          </slot>
         </div>
         <hui-view-container
           class=${this._editMode ? "has-tab-bar" : ""}

src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts

@@ -7,7 +7,6 @@ import { orderCompare } from "../../../../../common/string/compare";
 import type { AreaRegistryEntry } from "../../../../../data/area_registry";
 import { areaCompare } from "../../../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
-import { floorCompare } from "../../../../../data/floor_registry";
 import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../../types";
 import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature";
@@ -302,7 +301,12 @@ export const getFloors = (
   floorsOrder?: string[]
 ): FloorRegistryEntry[] => {
   const floors = Object.values(entries);
-  const compare = floorCompare(entries, floorsOrder);
+
+  if (!floorsOrder) {
+    return floors;
+  }
+
+  const compare = orderCompare(floorsOrder);
 
   return floors.sort((floorA, floorB) =>
     compare(floorA.floor_id, floorB.floor_id)

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

@@ -40,10 +40,10 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
       import("./original-states/original-states-view-strategy"),
     "energy-overview": () =>
       import("../../energy/strategies/energy-overview-view-strategy"),
-    "energy-electricity": () =>
-      import("../../energy/strategies/energy-electricity-view-strategy"),
-    "energy-water": () =>
-      import("../../energy/strategies/energy-water-view-strategy"),
+    energy: () => import("../../energy/strategies/energy-view-strategy"),
+    water: () => import("../../energy/strategies/water-view-strategy"),
+    gas: () => import("../../energy/strategies/gas-view-strategy"),
+    power: () => import("../../energy/strategies/power-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/home-overview-view-strategy.ts

@@ -254,7 +254,12 @@ export class HomeOverviewViewStrategy extends ReactiveElement {
       widgetSection.cards!.push({
         type: "weather-forecast",
         entity: weatherEntity,
-        forecast_type: "daily",
+        show_forecast: false,
+        show_current: true,
+        grid_options: {
+          columns: 12,
+          rows: "auto",
+        },
       } as WeatherForecastCardConfig);
     }
 

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

@@ -123,6 +123,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       "section-visibility-changed",
       this._sectionVisibilityChanged
     );
+    this._showSidebar = Boolean(window.history.state?.sidebar);
   }
 
   disconnectedCallback(): void {
@@ -428,6 +429,12 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     this._showSidebar = !this._showSidebar;
 
+    // Add sidebar state to history
+    window.history.replaceState(
+      { ...window.history.state, sidebar: this._showSidebar },
+      ""
+    );
+
     // Restore scroll position after view updates
     this.updateComplete.then(() => {
       const scrollY = this._showSidebar
@@ -487,6 +494,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         );
       gap: var(--row-gap) var(--column-gap);
       padding: var(--row-gap) 0;
+      align-items: flex-start;
     }
 
     .wrapper.has-sidebar .container {
@@ -507,8 +515,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     .wrapper.narrow hui-view-sidebar {
       grid-column: 1 / -1;
       padding-bottom: calc(
-        var(--ha-space-4) + 56px + var(--ha-space-4) +
-          env(safe-area-inset-bottom)
+        var(--ha-space-14) + var(--ha-space-3) + var(--safe-area-inset-bottom)
       );
     }
 
@@ -518,25 +525,24 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     .mobile-tabs {
       position: fixed;
-      bottom: calc(var(--ha-space-4) + env(safe-area-inset-bottom));
+      bottom: calc(var(--ha-space-3) + var(--safe-area-inset-bottom));
       left: 50%;
       transform: translateX(-50%);
       padding: 0;
       z-index: 1;
-      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))
-        drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
     }
 
     .mobile-tabs ha-control-select {
       width: max-content;
       min-width: 280px;
       max-width: 90%;
-      --control-select-thickness: 56px;
-      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-thickness: var(--ha-space-14);
+      --control-select-border-radius: var(--ha-border-radius-pill);
       --control-select-background: var(--card-background-color);
       --control-select-background-opacity: 1;
       --control-select-color: var(--primary-color);
       --control-select-padding: 6px;
+      box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px;
     }
 
     ha-sortable {
@@ -560,8 +566,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     .wrapper.narrow.has-sidebar .content {
       padding-bottom: calc(
-        var(--ha-space-4) + 56px + var(--ha-space-4) +
-          env(safe-area-inset-bottom)
+        var(--ha-space-14) + var(--ha-space-3) + var(--safe-area-inset-bottom)
       );
     }
 

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

@@ -1,14 +1,17 @@
+import { mdiViewDashboard } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-divider";
+import "../../components/ha-icon";
 import "../../components/ha-list-item";
 import "../../components/ha-select";
 import "../../components/ha-settings-row";
+import "../../components/ha-svg-icon";
 import { saveFrontendUserData } from "../../data/frontend";
 import type { LovelaceDashboard } from "../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../data/lovelace/dashboard";
-import { getPanelTitle } from "../../data/panel";
+import { getPanelIcon, getPanelTitle } from "../../data/panel";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { PANEL_DASHBOARDS } from "../config/lovelace/dashboards/ha-config-lovelace-dashboards";
 
@@ -37,54 +40,57 @@ class HaPickDashboardRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.dashboard.description")}
         </span>
-        ${this._dashboards
-          ? html`<ha-select
-              .label=${this.hass.localize(
-                "ui.panel.profile.dashboard.dropdown_label"
-              )}
-              .disabled=${!this._dashboards?.length}
-              .value=${value}
-              @selected=${this._dashboardChanged}
-              naturalMenuWidth
-            >
-              <ha-list-item .value=${USE_SYSTEM_VALUE}>
-                ${this.hass.localize("ui.panel.profile.dashboard.system")}
+        <ha-select
+          .label=${this.hass.localize(
+            "ui.panel.profile.dashboard.dropdown_label"
+          )}
+          .value=${value}
+          @selected=${this._dashboardChanged}
+          naturalMenuWidth
+        >
+          <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" graphic="icon">
+            <ha-svg-icon slot="graphic" .path=${mdiViewDashboard}></ha-svg-icon>
+            ${this.hass.localize("ui.panel.profile.dashboard.lovelace")}
+          </ha-list-item>
+          ${PANEL_DASHBOARDS.map((panel) => {
+            const panelInfo = this.hass.panels[panel] as PanelInfo | undefined;
+            if (!panelInfo) {
+              return nothing;
+            }
+            return html`
+              <ha-list-item value=${panelInfo.url_path} graphic="icon">
+                <ha-icon
+                  slot="graphic"
+                  .icon=${getPanelIcon(panelInfo)}
+                ></ha-icon>
+                ${getPanelTitle(this.hass, panelInfo)}
               </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] as
-                  | PanelInfo
-                  | undefined;
-                if (!panelInfo) {
-                  return nothing;
-                }
-                return html`
-                  <ha-list-item value=${panelInfo.url_path}>
-                    ${getPanelTitle(this.hass, panelInfo)}
-                  </ha-list-item>
-                `;
-              })}
-              <ha-divider></ha-divider>
-              ${this._dashboards.map((dashboard) => {
-                if (!this.hass.user!.is_admin && dashboard.require_admin) {
-                  return "";
-                }
-                return html`
-                  <ha-list-item .value=${dashboard.url_path}>
-                    ${dashboard.title}
-                  </ha-list-item>
-                `;
-              })}
-            </ha-select>`
-          : html`<ha-select
-              .label=${this.hass.localize(
-                "ui.panel.profile.dashboard.dropdown_label"
-              )}
-              disabled
-            ></ha-select>`}
+            `;
+          })}
+          ${this._dashboards?.length
+            ? html`
+                <ha-divider></ha-divider>
+                ${this._dashboards.map((dashboard) => {
+                  if (!this.hass.user!.is_admin && dashboard.require_admin) {
+                    return "";
+                  }
+                  return html`
+                    <ha-list-item .value=${dashboard.url_path} graphic="icon">
+                      <ha-icon
+                        slot="graphic"
+                        .icon=${dashboard.icon || "mdi:view-dashboard"}
+                      ></ha-icon>
+                      ${dashboard.title}
+                    </ha-list-item>
+                  `;
+                })}
+              `
+            : nothing}
+        </ha-select>
       </ha-settings-row>
     `;
   }

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

@@ -13,6 +13,7 @@ import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strateg
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
+import "../lovelace/views/hui-view-background";
 
 const SECURITY_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -115,6 +116,7 @@ class PanelSecurity extends LitElement {
         this._lovelace
           ? html`
               <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
                 <hui-view
                   .hass=${this.hass}
                   .narrow=${this.narrow}

src/resources/echarts/echarts.ts

@@ -23,6 +23,12 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 // Note that including the CanvasRenderer or SVGRenderer is a required step
 import { CanvasRenderer } from "echarts/renderers";
 
+// Import graphic utilities from zrender for use in charts
+// This avoids importing from the full "echarts" package which has a separate registry
+// zrender is a direct dependency of echarts and always available
+// eslint-disable-next-line import/no-extraneous-dependencies
+import LinearGradient from "zrender/lib/graphic/LinearGradient";
+
 import type {
   // The series option types are defined with the SeriesOption suffix
   BarSeriesOption,
@@ -75,4 +81,6 @@ echarts.use([
   ToolboxComponent,
 ]);
 
+export { LinearGradient };
+
 export default echarts;

src/resources/markdown-worker.ts

@@ -55,6 +55,18 @@ const renderMarkdown = async (
 
   marked.setOptions(markedOptions);
 
+  marked.use({
+    renderer: {
+      table(...args) {
+        const defaultRenderer = new marked.Renderer();
+        // Wrap the table with block element because the property 'overflow'
+        // cannot be applied to elements of display type 'table'.
+        // https://www.w3.org/TR/css-overflow-3/#overflow-control
+        return `<div>${defaultRenderer.table.apply(this, args)}</div>`;
+      },
+    },
+  });
+
   const tokens = marked.lexer(content);
   return tokens.map((token) =>
     filterXSS(marked.parser([token]), {

src/resources/theme/main.globals.ts

@@ -27,14 +27,27 @@ export const mainStyles = css`
     --margin-title-ltr: 0 0 0 24px;
     --margin-title-rtl: 0 24px 0 0;
 
-    /* safe-area-insets */
-    --safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
-    --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
-    --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0));
-    --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0));
+    /* Safe area insets */
+    --safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0px));
+    --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0px));
+    --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0px));
 
-    --safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px));
+    /* Safe area inset x and y */
     --safe-area-inset-x: calc(var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px));
+    --safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px));
+
+    /* Offsets for centering elements within asymmetric safe areas */
+    --safe-area-offset-left: calc(max(var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px), 0px) / 2);
+    --safe-area-offset-right: calc(max(var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px), 0px) / 2);
+    --safe-area-offset-top: calc(max(var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px), 0px) / 2);
+    --safe-area-offset-bottom: calc(max(var(--safe-area-inset-bottom, 0px) - var(--safe-area-inset-top, 0px), 0px) / 2);
+
+    /* Safe width and height for use instead of 100vw and 100vh
+     * when working with areas like dialogs which need to fill the entire safe area.
+     */
+    --safe-width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right));
+    --safe-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
   }
 `;
 

src/state/url-sync-mixin.ts

@@ -56,7 +56,11 @@ export const urlSyncMixin = <
               // if we are instead navigating forward, the dialogs are already closed
               closeLastDialog();
             }
-            if ("dialog" in ev.state) {
+            if ("dialogData" in ev.state) {
+              // if we have dialog data we are closing a dialog with appended state
+              // so dialog has the change to navigate back to the previous state
+              closeLastDialog(ev.state);
+            } else if ("dialog" in ev.state) {
               // coming to a dialog
               // the dialog stack must be empty in this case so this state should be cleaned up
               mainWindow.history.back();

src/translations/en.json

@@ -1392,7 +1392,8 @@
             "addon_dashboard": "Add-on dashboard",
             "addon_store": "Add-on store",
             "addon_info": "{addon} info",
-            "shortcuts": "[%key:ui::panel::config::info::shortcuts%]"
+            "shortcuts": "[%key:ui::panel::config::info::shortcuts%]",
+            "labs": "[%key:ui::panel::config::labs::caption%]"
           }
         },
         "filter_placeholder": "Search entities",
@@ -2227,7 +2228,9 @@
           "title": "Edit home page",
           "description": "Configure your home page display preferences.",
           "favorite_entities_helper": "Display your favorite entities. Home Assistant will still suggest based on commonly used up to 8 slots.",
-          "save_failed": "Failed to save home page configuration"
+          "save_failed": "Failed to save home page configuration",
+          "areas_hint": "You can rearrange your floors and areas in the order that best represents your house on the {areas_page}.",
+          "areas_page": "areas page"
         }
       },
       "my": {
@@ -2380,6 +2383,7 @@
             "name": "Name",
             "icon": "Icon",
             "level": "Level",
+            "level_helper": "Used to determine the default floor icon. Does not influence the floor order.",
             "name_required": "Name is required",
             "floor_id": "Floor ID",
             "unknown_error": "Unknown error",
@@ -2470,7 +2474,15 @@
             },
             "area_reorder_failed": "Failed to reorder areas",
             "area_move_failed": "Failed to move area",
-            "floor_reorder_failed": "Failed to reorder floors"
+            "floor_reorder_failed": "Failed to reorder floors",
+            "reorder": "Reorder floors and areas"
+          },
+          "dialog": {
+            "reorder_title": "Reorder floors and areas",
+            "unassigned_areas": "Unassigned areas",
+            "reorder_failed": "Failed to save order",
+            "empty_floor": "No areas on this floor",
+            "empty_unassigned": "All your areas are assigned to floors"
           },
           "editor": {
             "create_area": "Create area",
@@ -4045,6 +4057,7 @@
             "other_areas": "Other areas",
             "services": "Services",
             "helpers": "Helpers",
+            "entity_hidden": "[%key:ui::panel::config::devices::entities::hidden%]",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -9564,10 +9577,12 @@
         }
       },
       "energy": {
-        "overview": {
-          "electricity": "Electricity",
+        "title": {
+          "overview": "Summary",
+          "electricity": "Energy",
           "gas": "Gas",
-          "water": "Water"
+          "water": "Water",
+          "now": "Now"
         },
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",

test/common/auth/token_storage/askWrite.test.ts

@@ -1,8 +1,14 @@
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 let askWrite;
 
+const HASS_URL = `${location.protocol}//${location.host}`;
+
 describe("token_storage.askWrite", () => {
+  beforeEach(() => {
+    vi.stubGlobal("__HASS_URL__", HASS_URL);
+  });
+
   afterEach(() => {
     vi.resetModules();
   });

test/common/auth/token_storage/saveTokens.test.ts

@@ -4,9 +4,12 @@ import { FallbackStorage } from "../../../test_helper/local-storage-fallback";
 
 let saveTokens;
 
+const HASS_URL = `${location.protocol}//${location.host}`;
+
 describe("token_storage.saveTokens", () => {
   beforeEach(() => {
     window.localStorage = new FallbackStorage();
+    vi.stubGlobal("__HASS_URL__", HASS_URL);
   });
 
   afterEach(() => {

test/common/auth/token_storage/token_storage.test.ts

@@ -2,6 +2,8 @@ import { describe, it, expect, test, vi, afterEach, beforeEach } from "vitest";
 import type { AuthData } from "home-assistant-js-websocket";
 import { FallbackStorage } from "../../../test_helper/local-storage-fallback";
 
+const HASS_URL = `${location.protocol}//${location.host}`;
+
 describe("token_storage", () => {
   beforeEach(() => {
     vi.stubGlobal(
@@ -11,6 +13,7 @@ describe("token_storage", () => {
         writeEnabled: undefined,
       })
     );
+    vi.stubGlobal("__HASS_URL__", HASS_URL);
     window.localStorage = new FallbackStorage();
   });
 

test/data/floor_registry.test.ts

@@ -1,116 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { floorCompare } from "../../src/data/floor_registry";
-import type { FloorRegistryEntry } from "../../src/data/floor_registry";
-
-describe("floorCompare", () => {
-  describe("floorCompare()", () => {
-    it("sorts by floor ID alphabetically", () => {
-      const floors = ["basement", "attic", "ground"];
-
-      expect(floors.sort(floorCompare())).toEqual([
-        "attic",
-        "basement",
-        "ground",
-      ]);
-    });
-
-    it("handles numeric strings in natural order", () => {
-      const floors = ["floor10", "floor2", "floor1"];
-
-      expect(floors.sort(floorCompare())).toEqual([
-        "floor1",
-        "floor2",
-        "floor10",
-      ]);
-    });
-  });
-
-  describe("floorCompare(entries)", () => {
-    it("sorts by level descending (highest to lowest), then by name", () => {
-      const entries = {
-        floor1: { name: "Ground Floor", level: 0 } as FloorRegistryEntry,
-        floor2: { name: "First Floor", level: 1 } as FloorRegistryEntry,
-        floor3: { name: "Basement", level: -1 } as FloorRegistryEntry,
-      };
-      const floors = ["floor1", "floor2", "floor3"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "floor2",
-        "floor1",
-        "floor3",
-      ]);
-    });
-
-    it("treats null level as -9999, placing it at the end", () => {
-      const entries = {
-        floor1: { name: "Ground Floor", level: 0 } as FloorRegistryEntry,
-        floor2: { name: "First Floor", level: 1 } as FloorRegistryEntry,
-        floor3: { name: "Unassigned", level: null } as FloorRegistryEntry,
-      };
-      const floors = ["floor2", "floor3", "floor1"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "floor2",
-        "floor1",
-        "floor3",
-      ]);
-    });
-
-    it("sorts by name when levels are equal", () => {
-      const entries = {
-        floor1: { name: "Suite B", level: 1 } as FloorRegistryEntry,
-        floor2: { name: "Suite A", level: 1 } as FloorRegistryEntry,
-      };
-      const floors = ["floor1", "floor2"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual(["floor2", "floor1"]);
-    });
-
-    it("falls back to floor ID when entry not found", () => {
-      const entries = {
-        floor1: { name: "Ground Floor" } as FloorRegistryEntry,
-      };
-      const floors = ["xyz", "floor1", "abc"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "abc",
-        "floor1",
-        "xyz",
-      ]);
-    });
-  });
-
-  describe("floorCompare(entries, order)", () => {
-    it("follows order array", () => {
-      const entries = {
-        basement: { name: "Basement" } as FloorRegistryEntry,
-        ground: { name: "Ground Floor" } as FloorRegistryEntry,
-        first: { name: "First Floor" } as FloorRegistryEntry,
-      };
-      const order = ["first", "ground", "basement"];
-      const floors = ["basement", "first", "ground"];
-
-      expect(floors.sort(floorCompare(entries, order))).toEqual([
-        "first",
-        "ground",
-        "basement",
-      ]);
-    });
-
-    it("places items not in order array at the end, sorted by name", () => {
-      const entries = {
-        floor1: { name: "First Floor" } as FloorRegistryEntry,
-        floor2: { name: "Ground Floor" } as FloorRegistryEntry,
-        floor3: { name: "Basement" } as FloorRegistryEntry,
-      };
-      const order = ["floor1"];
-      const floors = ["floor3", "floor2", "floor1"];
-
-      expect(floors.sort(floorCompare(entries, order))).toEqual([
-        "floor1",
-        "floor3",
-        "floor2",
-      ]);
-    });
-  });
-});