Open more info from voice settings (#16392)

* Open more info from voice settings

* review

src/panels/config/voice-assistants/dialog-voice-settings.ts

@@ -1,9 +1,10 @@
 import "@material/mwc-button/mwc-button";
+import { mdiClose, mdiTuneVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import "./entity-voice-settings";
@@ -24,22 +25,41 @@ class DialogVoiceSettings extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private _viewMoreInfo(): void {
+    showMoreInfoDialog(this, {
+      entityId: this._params!.entityId,
+    });
+    this.closeDialog();
+  }
+
   protected render() {
     if (!this._params) {
       return nothing;
     }
 
+    const title =
+      computeStateName(this.hass.states[this._params.entityId]) ||
+      this.hass.localize("ui.panel.config.entities.picker.unnamed_entity");
+
     return html`
-      <ha-dialog
+      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
-        open
+        <ha-header-bar slot="heading">
-        @closed=${this.closeDialog}
+          <ha-icon-button
-        hideActions
+            slot="navigationIcon"
-        .heading=${createCloseHeading(
+            dialogAction="cancel"
-          this.hass,
+            .label=${this.hass.localize("ui.common.close")}
-          computeStateName(this.hass.states[this._params.entityId]) ||
+            .path=${mdiClose}
-            this.hass.localize("ui.panel.config.entities.picker.unnamed_entity")
+          ></ha-icon-button>
-        )}
+          <div slot="title" class="main-title" .title=${title}>${title}</div>
-      >
+          <ha-icon-button
+            slot="actionItems"
+            .label=${this.hass.localize(
+              "ui.dialogs.voice-settings.view_entity"
+            )}
+            .path=${mdiTuneVertical}
+            @click=${this._viewMoreInfo}
+          ></ha-icon-button>
+        </ha-header-bar>
         <div>
           <entity-voice-settings
             .hass=${this.hass}
@@ -67,6 +87,15 @@ class DialogVoiceSettings extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          display: block;
+        }
+        .main-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         ha-dialog {
           --dialog-content-padding: 0;
         }

src/translations/en.json

@@ -1088,7 +1088,8 @@
         "aliases_no_unique_id": "Aliases are not supported for entities without an unique id. See the {faq_link} for more detail.",
         "ask_pin": "Ask for PIN",
         "manual_config": "Managed in configuration.yaml",
-        "unsupported": "Unsupported"
+        "unsupported": "Unsupported",
+        "view_entity": "More info about entity"
       },
       "restart": {
         "heading": "Restart Home Assistant",