Improve area registry dialog user experience (#24086)

* Improve area registry dialog user experience

* Simplify expanded

* Improve heading and description

* Fix padding and remove secondary

* Process code review

* Remove more unused imports

* Re-add alias description

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

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-import "@material/mwc-list/mwc-list";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
@@ -7,7 +5,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
-import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
@@ -17,7 +14,11 @@ import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-textfield";
 import "../../../components/ha-labels-picker";
-import type { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
+import type {
+  AreaRegistryEntry,
+  AreaRegistryEntryMutableParams,
+} from "../../../data/area_registry";
+import { deleteAreaRegistryEntry } from "../../../data/area_registry";
 import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant, ValueChangedEvent } from "../../../types";
@@ -26,6 +27,8 @@ import {
   SENSOR_DEVICE_CLASS_HUMIDITY,
   SENSOR_DEVICE_CLASS_TEMPERATURE,
 } from "../../../data/sensor";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { createCloseHeading } from "../../../components/ha-dialog";
 
 const cropOptions: CropOptions = {
   round: false,
@@ -97,36 +100,13 @@ class DialogAreaDetail extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  protected render() {
+  private _renderSettings(entry: AreaRegistryEntry | undefined) {
-    if (!this._params) {
-      return nothing;
-    }
-    const entry = this._params.entry;
-    const nameInvalid = !this._isNameValid();
-    const isNew = !entry;
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          entry
-            ? this.hass.localize("ui.panel.config.areas.editor.update_area")
-            : this.hass.localize("ui.panel.config.areas.editor.create_area")
-        )}
-      >
-        <div>
-          ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""}
-          <div class="form">
       ${entry
         ? html`
             <ha-settings-row>
               <span slot="heading">
-                      ${this.hass.localize(
+                ${this.hass.localize("ui.panel.config.areas.editor.area_id")}
-                        "ui.panel.config.areas.editor.area_id"
-                      )}
               </span>
               <span slot="description"> ${entry.area_id} </span>
             </ha-settings-row>
@@ -172,13 +152,19 @@ class DialogAreaDetail extends LitElement {
         .cropOptions=${cropOptions}
         @change=${this._pictureChanged}
       ></ha-picture-upload>
+    `;
+  }
 
-            <h3 class="header">
+  private _renderAliasExpansion() {
-              ${this.hass.localize(
+    return html`
+      <ha-expansion-panel
+        outlined
+        .header=${this.hass.localize(
           "ui.panel.config.areas.editor.aliases_section"
         )}
-            </h3>
+        expanded
-
+      >
+        <div class="content">
           <p class="description">
             ${this.hass.localize(
               "ui.panel.config.areas.editor.aliases_description"
@@ -189,9 +175,21 @@ class DialogAreaDetail extends LitElement {
             .aliases=${this._aliases}
             @value-changed=${this._aliasesChanged}
           ></ha-aliases-editor>
+        </div>
+      </ha-expansion-panel>
+    `;
+  }
 
-            ${!isNew
+  private _renderRelatedEntitiesExpansion() {
-              ? html`
+    return html`
+      <ha-expansion-panel
+        outlined
+        .header=${this.hass.localize(
+          "ui.panel.config.areas.editor.related_entities_section"
+        )}
+        expanded
+      >
+        <div class="content">
           <ha-entity-picker
             .hass=${this.hass}
             .label=${this.hass.localize(
@@ -221,22 +219,61 @@ class DialogAreaDetail extends LitElement {
             .entityFilter=${this._areaEntityFilter}
             @value-changed=${this._sensorChanged}
           ></ha-entity-picker>
-                `
+        </div>
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+    const entry = this._params.entry;
+    const nameInvalid = !this._isNameValid();
+    const isNew = !entry;
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          entry
+            ? this.hass.localize("ui.panel.config.areas.editor.update_area")
+            : this.hass.localize("ui.panel.config.areas.editor.create_area")
+        )}
+      >
+        <div>
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
+          <div class="form">
+            ${this._renderSettings(entry)} ${this._renderAliasExpansion()}
+            ${!isNew ? this._renderRelatedEntitiesExpansion() : nothing}
           </div>
         </div>
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        ${!isNew
+          ? html`<ha-button
+              slot="secondaryAction"
+              destructive
+              @click=${this._deleteArea}
+            >
+              ${this.hass.localize("ui.common.delete")}
+            </ha-button>`
+          : nothing}
+        <div slot="primaryAction">
+          <ha-button @click=${this.closeDialog}>
             ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+          </ha-button>
-        <mwc-button
+          <ha-button
-          slot="primaryAction"
             @click=${this._updateEntry}
             .disabled=${nameInvalid || this._submitting}
           >
             ${entry
               ? this.hass.localize("ui.common.save")
               : this.hass.localize("ui.common.create")}
-        </mwc-button>
+          </ha-button>
+        </div>
       </ha-dialog>
     `;
   }
@@ -325,6 +362,31 @@ class DialogAreaDetail extends LitElement {
     }
   }
 
+  private async _deleteArea() {
+    if (!this._params?.entry) {
+      return;
+    }
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.areas.delete.confirmation_title",
+        { name: this._params.entry.name }
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.areas.delete.confirmation_text"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    await deleteAreaRegistryEntry(this.hass!, this._params!.entry!.area_id);
+    this.closeDialog();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
@@ -332,15 +394,28 @@ class DialogAreaDetail extends LitElement {
         ha-textfield {
           display: block;
         }
+        ha-expansion-panel {
+          --expansion-panel-content-padding: 0;
+        }
         ha-aliases-editor,
         ha-entity-picker,
         ha-floor-picker,
         ha-icon-picker,
         ha-labels-picker,
-        ha-picture-upload {
+        ha-picture-upload,
+        ha-expansion-panel {
           display: block;
           margin-bottom: 16px;
         }
+        ha-dialog {
+          --mdc-dialog-min-width: min(600px, 100vw);
+        }
+        .content {
+          padding: 12px;
+        }
+        .description {
+          margin: 0 0 16px 0;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -2211,7 +2211,8 @@
             "temperature_entity": "Temperature sensor",
             "temperature_entity_description": "Sensor that represents the area temperature.",
             "humidity_entity": "Humidity sensor",
-            "humidity_entity_description": "Sensor that represents the area humidity."
+            "humidity_entity_description": "Sensor that represents the area humidity.",
+            "related_entities_section": "Related sensors"
           },
           "delete": {
             "confirmation_title": "Delete {name}?",