From f4848964c3d7ab9c09009503a85cb2fb8880c0e6 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 27 Feb 2023 12:00:02 +0100
Subject: [PATCH] Restart dialog improvements (#15611)

---
 src/components/ha-list-item.ts        |  24 +++++
 src/dialogs/restart/dialog-restart.ts | 125 +++++++++++++++-----------
 src/translations/en.json              |   4 +-
 3 files changed, 101 insertions(+), 52 deletions(-)

diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts
index df3a2e80ee..0331381a0c 100644
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@@ -30,6 +30,30 @@ export class HaListItem extends ListItemBase {
           margin-inline-end: 0px !important;
           direction: var(--direction);
         }
+        :host([multiline-secondary]) {
+          height: auto;
+        }
+        :host([multiline-secondary]) .mdc-deprecated-list-item__text {
+          padding: 8px 0;
+        }
+        :host([multiline-secondary]) .mdc-deprecated-list-item__secondary-text {
+          text-overflow: initial;
+          white-space: normal;
+          overflow: auto;
+          display: inline-block;
+          margin-top: 10px;
+        }
+        :host([multiline-secondary]) .mdc-deprecated-list-item__primary-text {
+          margin-top: 10px;
+        }
+        :host([multiline-secondary])
+          .mdc-deprecated-list-item__secondary-text::before {
+          display: none;
+        }
+        :host([multiline-secondary])
+          .mdc-deprecated-list-item__primary-text::before {
+          display: none;
+        }
       `,
     ];
   }
diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index 62f8232000..cc712f4839 100644
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -7,6 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import "../../components/ha-circular-progress";
 import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-expansion-panel";
 import "../../components/ha-list-item";
 import {
   extractApiErrorMessage,
@@ -106,6 +107,7 @@ class DialogRestart extends LitElement {
                       <ha-list-item
                         graphic="avatar"
                         twoline
+                        multiline-secondary
                         hasMeta
                         @request-selected=${this._reload}
                       >
@@ -128,6 +130,7 @@ class DialogRestart extends LitElement {
                 <ha-list-item
                   graphic="avatar"
                   twoline
+                  multiline-secondary
                   hasMeta
                   @request-selected=${this._restart}
                 >
@@ -143,57 +146,62 @@ class DialogRestart extends LitElement {
                     )}
                   </span>
                 </ha-list-item>
-                ${showRebootShutdown
-                  ? html`
-                      <div class="divider"></div>
-                      <p class="section">
-                        ${this.hass.localize(
-                          "ui.dialogs.restart.advanced_options"
-                        )}
-                      </p>
-                      <ha-list-item
-                        graphic="avatar"
-                        twoline
-                        hasMeta
-                        @request-selected=${this._hostReboot}
-                      >
-                        <div slot="graphic" class="icon-background reboot">
-                          <ha-svg-icon .path=${mdiPowerCycle}></ha-svg-icon>
-                        </div>
-                        <span>
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reboot.title"
-                          )}
-                        </span>
-                        <span slot="secondary">
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reboot.description"
-                          )}
-                        </span>
-                      </ha-list-item>
-                      <ha-list-item
-                        graphic="avatar"
-                        twoline
-                        hasMeta
-                        @request-selected=${this._hostShutdown}
-                      >
-                        <div slot="graphic" class="icon-background shutdown">
-                          <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
-                        </div>
-                        <span>
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.shutdown.title"
-                          )}
-                        </span>
-                        <span slot="secondary">
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.shutdown.description"
-                          )}
-                        </span>
-                      </ha-list-item>
-                    `
-                  : null}
               </mwc-list>
+
+              ${showRebootShutdown
+                ? html`
+                    <ha-expansion-panel
+                      .header=${this.hass.localize(
+                        "ui.dialogs.restart.advanced_options"
+                      )}
+                    >
+                      <mwc-list>
+                        <ha-list-item
+                          graphic="avatar"
+                          twoline
+                          multiline-secondary
+                          hasMeta
+                          @request-selected=${this._hostReboot}
+                        >
+                          <div slot="graphic" class="icon-background reboot">
+                            <ha-svg-icon .path=${mdiPowerCycle}></ha-svg-icon>
+                          </div>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.dialogs.restart.reboot.title"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.dialogs.restart.reboot.description"
+                            )}
+                          </span>
+                        </ha-list-item>
+                        <ha-list-item
+                          graphic="avatar"
+                          twoline
+                          multiline-secondary
+                          hasMeta
+                          @request-selected=${this._hostShutdown}
+                        >
+                          <div slot="graphic" class="icon-background shutdown">
+                            <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
+                          </div>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.dialogs.restart.shutdown.title"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.dialogs.restart.shutdown.description"
+                            )}
+                          </span>
+                        </ha-list-item>
+                      </mwc-list>
+                    </ha-expansion-panel>
+                  `
+                : null}
             `}
       </ha-dialog>
     `;
@@ -340,6 +348,23 @@ class DialogRestart extends LitElement {
         ha-dialog {
           --dialog-content-padding: 0;
         }
+        @media all and (min-width: 550px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 500px;
+            --mdc-dialog-max-width: 500px;
+          }
+        }
+
+        ha-expansion-panel {
+          border-top: 1px solid var(--divider-color);
+          margin-bottom: 10px;
+          box-shadow: none;
+          --expansion-panel-content-padding: 0;
+          --expansion-panel-summary-padding: 0
+            var(--mdc-list-side-padding, 20px);
+          --ha-card-border-radius: 0;
+        }
+
         .icon-background {
           border-radius: 50%;
           color: #fff;
diff --git a/src/translations/en.json b/src/translations/en.json
index 95875837c8..f461f01578 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1038,9 +1038,9 @@
         "restart": {
           "title": "Restart Home Assistant",
           "description": "Interrupts all running automations and scripts.",
-          "confirm_title": "Restart?",
+          "confirm_title": "Restart  Home Assistant?",
           "confirm_description": "This will interrupt all running automations and scripts.",
-          "confirm_action": "Restart Home Assistant",
+          "confirm_action": "Restart",
           "failed": "Failed to restart Home Assistant"
         },
         "reboot": {