From 03917a5e1c76e88141c677dad2579d5571151909 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Wed, 11 Feb 2026 11:51:57 +0000
Subject: [PATCH] Migrate energy config dialogs to wa (#29565)

Migrate config-energy dialog(s) to wa
---
 .../dialogs/dialog-energy-battery-settings.ts | 66 ++++++++--------
 .../dialog-energy-device-settings-water.ts    | 65 +++++++++-------
 .../dialogs/dialog-energy-device-settings.ts  | 65 +++++++++-------
 .../dialogs/dialog-energy-gas-settings.ts     | 66 ++++++++--------
 .../dialog-energy-grid-flow-settings.ts       | 76 ++++++++++---------
 .../dialog-energy-grid-power-settings.ts      | 72 +++++++++---------
 .../dialogs/dialog-energy-solar-settings.ts   | 67 ++++++++--------
 .../dialogs/dialog-energy-water-settings.ts   | 66 ++++++++--------
 8 files changed, 295 insertions(+), 248 deletions(-)

diff --git a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
index 0f35f27d82..3133044a78 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
@@ -1,13 +1,13 @@
-import { mdiBatteryHigh } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 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-statistic-picker";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   BatterySourceTypeEnergyPreference,
@@ -37,6 +37,8 @@ export class DialogEnergyBatterySettings
 
   @state() private _params?: EnergySettingsBatteryDialogParams;
 
+  @state() private _open = false;
+
   @state() private _source?: BatterySourceTypeEnergyPreference;
 
   @state() private _powerType: PowerType = "none";
@@ -129,9 +131,16 @@ export class DialogEnergyBatterySettings
     this._excludeListPower = powerIds.filter(
       (id) => !currentPowerIds.includes(id)
     );
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._source = undefined;
     this._powerType = "none";
@@ -140,7 +149,6 @@ export class DialogEnergyBatterySettings
     this._excludeList = undefined;
     this._excludeListPower = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -149,14 +157,13 @@ export class DialogEnergyBatterySettings
     }
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiBatteryHigh}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.energy.battery.dialog.header")}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.battery.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
 
@@ -177,7 +184,7 @@ export class DialogEnergyBatterySettings
             "ui.panel.config.energy.battery.dialog.energy_helper_into",
             { unit: this._energy_units?.join(", ") || "" }
           )}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <ha-statistic-picker
@@ -320,21 +327,23 @@ export class DialogEnergyBatterySettings
             `
           : nothing}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._isValid()}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._isValid()}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -427,9 +436,6 @@ export class DialogEnergyBatterySettings
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-statistic-picker {
           display: block;
           margin-bottom: var(--ha-space-4);
diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts
index c522d25661..55e7412b8b 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts
@@ -1,4 +1,3 @@
-import { mdiWater } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,9 +5,10 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-select";
+import "../../../../components/ha-wa-dialog";
 import type { HaSelectSelectEvent } from "../../../../components/ha-select";
 import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
 import { energyStatisticHelpUrl } from "../../../../data/energy";
@@ -30,6 +30,8 @@ export class DialogEnergyDeviceSettingsWater
 
   @state() private _params?: EnergySettingsDeviceWaterDialogParams;
 
+  @state() private _open = false;
+
   @state() private _device?: DeviceConsumptionEnergyPreference;
 
   @state() private _volume_units?: string[];
@@ -52,6 +54,8 @@ export class DialogEnergyDeviceSettingsWater
     this._excludeList = this._params.device_consumptions
       .map((entry) => entry.stat_consumption)
       .filter((id) => id !== this._device?.stat_consumption);
+
+    this._open = true;
   }
 
   private _computePossibleParents() {
@@ -79,12 +83,16 @@ export class DialogEnergyDeviceSettingsWater
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._device = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -116,16 +124,13 @@ export class DialogEnergyDeviceSettingsWater
         }));
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiWater}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.header"
-          )}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.device_consumption_water.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <div>
@@ -145,7 +150,7 @@ export class DialogEnergyDeviceSettingsWater
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <ha-textfield
@@ -181,21 +186,23 @@ export class DialogEnergyDeviceSettingsWater
         >
         </ha-select>
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._device}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._device}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
index 910d5f4922..8e85f48772 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
@@ -1,4 +1,3 @@
-import { mdiDevices } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,9 +5,10 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-select";
+import "../../../../components/ha-wa-dialog";
 import type {
   HaSelectOption,
   HaSelectSelectEvent,
@@ -34,6 +34,8 @@ export class DialogEnergyDeviceSettings
 
   @state() private _params?: EnergySettingsDeviceDialogParams;
 
+  @state() private _open = false;
+
   @state() private _device?: DeviceConsumptionEnergyPreference;
 
   @state() private _energy_units?: string[];
@@ -66,6 +68,8 @@ export class DialogEnergyDeviceSettings
     this._excludeListPower = this._params.device_consumptions
       .map((entry) => entry.stat_rate)
       .filter((id) => id && id !== this._device?.stat_rate) as string[];
+
+    this._open = true;
   }
 
   private _computePossibleParents() {
@@ -93,12 +97,16 @@ export class DialogEnergyDeviceSettings
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._device = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -129,16 +137,13 @@ export class DialogEnergyDeviceSettings
         ];
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiDevices}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.header"
-          )}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.device_consumption.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
@@ -156,7 +161,7 @@ export class DialogEnergyDeviceSettings
             "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
             { unit: this._energy_units?.join(", ") || "" }
           )}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <ha-statistic-picker
@@ -207,21 +212,23 @@ export class DialogEnergyDeviceSettings
         >
         </ha-select>
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._device}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._device}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
diff --git a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
index 44fb3a3887..d78170db3d 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
@@ -1,15 +1,15 @@
-import { mdiFire } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 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-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
-import "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-button";
 import "../../../../components/ha-markdown";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 import type { GasSourceTypeEnergyPreference } from "../../../../data/energy";
@@ -40,6 +40,8 @@ export class DialogEnergyGasSettings
 
   @state() private _params?: EnergySettingsGasDialogParams;
 
+  @state() private _open = false;
+
   @state() private _source?: GasSourceTypeEnergyPreference;
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
@@ -82,16 +84,22 @@ export class DialogEnergyGasSettings
     this._excludeList = this._params.gas_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._source = undefined;
     this._pickedDisplayUnit = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -124,14 +132,13 @@ export class DialogEnergyGasSettings
       isExternalStatistic(this._source.stat_energy_from);
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiFire}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.energy.gas.dialog.header")}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.gas.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <div>
@@ -161,7 +168,7 @@ export class DialogEnergyGasSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <p>
@@ -281,21 +288,23 @@ export class DialogEnergyGasSettings
             </ha-textfield>`
           : ""}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._source.stat_energy_from}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._source.stat_energy_from}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -370,9 +379,6 @@ export class DialogEnergyGasSettings
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-formfield {
           display: block;
         }
diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts
index 25bf92153a..68555cfd2b 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts
@@ -1,15 +1,15 @@
-import { mdiTransmissionTower } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 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-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-markdown";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   FlowFromGridSourceEnergyPreference,
@@ -38,6 +38,8 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _params?: EnergySettingsGridFlowDialogParams;
 
+  @state() private _open = false;
+
   @state() private _source?:
     | FlowFromGridSourceEnergyPreference
     | FlowToGridSourceEnergyPreference;
@@ -88,15 +90,21 @@ export class DialogEnergyGridFlowSettings
         (entry) => entry.stat_energy_to
       ) || []),
     ].filter((id) => id !== initialSourceId);
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._source = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -121,16 +129,13 @@ export class DialogEnergyGridFlowSettings
       );
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiTransmissionTower}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon
-          >${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.header`
-          )}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.header`
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <p>
@@ -157,7 +162,7 @@ export class DialogEnergyGridFlowSettings
             `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
             { unit: this._energy_units?.join(", ") || "" }
           )}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <p>
@@ -265,25 +270,27 @@ export class DialogEnergyGridFlowSettings
             </ha-textfield>`
           : ""}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._source[
-            this._params!.direction === "from"
-              ? "stat_energy_from"
-              : "stat_energy_to"
-          ]}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._source[
+              this._params!.direction === "from"
+                ? "stat_energy_from"
+                : "stat_energy_to"
+            ]}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -359,9 +366,6 @@ export class DialogEnergyGridFlowSettings
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-statistic-picker {
           display: block;
           margin: var(--ha-space-4) 0;
diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts
index 55f89c7c2f..0807653edc 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts
@@ -1,13 +1,13 @@
-import { mdiTransmissionTower } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 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-statistic-picker";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   GridPowerSourceInput,
@@ -33,6 +33,8 @@ export class DialogEnergyGridPowerSettings
 
   @state() private _params?: EnergySettingsGridPowerDialogParams;
 
+  @state() private _open = false;
+
   @state() private _sensorType: SensorType = "standard";
 
   @state() private _powerConfig: PowerConfig = {};
@@ -100,16 +102,22 @@ export class DialogEnergyGridPowerSettings
     this._excludeListPower = excludeIds.filter(
       (id) => !currentIds.includes(id)
     );
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._powerConfig = {};
     this._sensorType = "standard";
     this._error = undefined;
     this._excludeListPower = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -118,16 +126,13 @@ export class DialogEnergyGridPowerSettings
     }
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiTransmissionTower}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon
-          >${this.hass.localize(
-            "ui.panel.config.energy.grid.power_dialog.header"
-          )}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.grid.power_dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
 
@@ -190,7 +195,7 @@ export class DialogEnergyGridPowerSettings
                   "ui.panel.config.energy.grid.power_dialog.power_helper",
                   { unit: this._power_units?.join(", ") || "" }
                 )}
-                dialogInitialFocus
+                autofocus
               ></ha-statistic-picker>
             `
           : nothing}
@@ -209,7 +214,7 @@ export class DialogEnergyGridPowerSettings
                 .helper=${this.hass.localize(
                   "ui.panel.config.energy.grid.power_dialog.type_inverted_description"
                 )}
-                dialogInitialFocus
+                autofocus
               ></ha-statistic-picker>
             `
           : nothing}
@@ -228,7 +233,7 @@ export class DialogEnergyGridPowerSettings
                   this._powerConfig.stat_rate_to,
                 ].filter((id): id is string => Boolean(id))}
                 @value-changed=${this._fromStatisticChanged}
-                dialogInitialFocus
+                autofocus
               ></ha-statistic-picker>
               <ha-statistic-picker
                 .hass=${this.hass}
@@ -247,21 +252,23 @@ export class DialogEnergyGridPowerSettings
             `
           : nothing}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._isValid()}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._isValid()}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -329,9 +336,6 @@ export class DialogEnergyGridPowerSettings
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-formfield {
           display: block;
         }
diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
index 7798477db1..d1f32e172e 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
@@ -1,4 +1,4 @@
-import { mdiPlus, mdiSolarPower } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,11 +6,12 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../components/ha-checkbox";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type { ConfigEntry } from "../../../../data/config_entries";
 import { getConfigEntries } from "../../../../data/config_entries";
@@ -39,6 +40,8 @@ export class DialogEnergySolarSettings
 
   @state() private _params?: EnergySettingsSolarDialogParams;
 
+  @state() private _open = false;
+
   @state() private _source?: SolarSourceTypeEnergyPreference;
 
   @state() private _configEntries?: ConfigEntry[];
@@ -76,15 +79,21 @@ export class DialogEnergySolarSettings
     this._excludeListPower = this._params.solar_sources
       .map((entry) => entry.stat_rate)
       .filter((id) => id && id !== this._source?.stat_rate) as string[];
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._source = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -93,14 +102,13 @@ export class DialogEnergySolarSettings
     }
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiSolarPower}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.energy.solar.dialog.header")}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.solar.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
@@ -118,7 +126,7 @@ export class DialogEnergySolarSettings
             "ui.panel.config.energy.solar.dialog.entity_para",
             { unit: this._energy_units?.join(", ") || "" }
           )}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <ha-statistic-picker
@@ -215,21 +223,23 @@ export class DialogEnergySolarSettings
             </div>`
           : ""}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="secondaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._source.stat_energy_from}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._source.stat_energy_from}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -310,9 +320,6 @@ export class DialogEnergySolarSettings
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-statistic-picker {
           display: block;
           margin-bottom: var(--ha-space-4);
diff --git a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
index e81328fa35..4d71095328 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
@@ -1,15 +1,15 @@
-import { mdiWater } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 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-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-markdown";
+import "../../../../components/ha-wa-dialog";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 import type { WaterSourceTypeEnergyPreference } from "../../../../data/energy";
@@ -33,6 +33,8 @@ export class DialogEnergyWaterSettings
 
   @state() private _params?: EnergySettingsWaterDialogParams;
 
+  @state() private _open = false;
+
   @state() private _source?: WaterSourceTypeEnergyPreference;
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
@@ -63,15 +65,21 @@ export class DialogEnergyWaterSettings
     this._excludeList = this._params.water_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
+
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._source = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -90,14 +98,13 @@ export class DialogEnergyWaterSettings
       isExternalStatistic(this._source.stat_energy_from);
 
     return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiWater}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.energy.water.dialog.header")}`}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.energy.water.dialog.header"
+        )}
+        @closed=${this._dialogClosed}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <div>
@@ -125,7 +132,7 @@ export class DialogEnergyWaterSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          dialogInitialFocus
+          autofocus
         ></ha-statistic-picker>
 
         <p>
@@ -227,21 +234,23 @@ export class DialogEnergyWaterSettings
             </ha-textfield>`
           : ""}
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._source.stat_energy_from}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            @click=${this._save}
+            .disabled=${!this._source.stat_energy_from}
+            slot="primaryAction"
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -310,9 +319,6 @@ export class DialogEnergyWaterSettings
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
         ha-formfield {
           display: block;
         }