From c7f3293c1dc5acde7a127e560dac4ee5df2df3f0 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 11 Jan 2023 14:18:55 +0100
Subject: [PATCH] Add close button to fullscreen conversation dialog (on
 mobile) (#15058)

* Add close button to fullscreen conversation dialog (on mobile)

* Remove hardcoded heading
---
 .../ha-voice-command-dialog.ts                | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 91577f65e8..fa2ae543cc 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -1,6 +1,6 @@
 /* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button/mwc-button";
-import { mdiMicrophone } from "@mdi/js";
+import { mdiClose, mdiMicrophone } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -15,6 +15,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { SpeechRecognition } from "../../common/dom/speech-recognition";
 import "../../components/ha-dialog";
 import type { HaDialog } from "../../components/ha-dialog";
+import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
@@ -83,6 +84,16 @@ export class HaVoiceCommandDialog extends LitElement {
     }
     return html`
       <ha-dialog open @closed=${this.closeDialog}>
+        <div slot="heading" class="heading">
+          <ha-header-bar>
+            <ha-icon-button
+              slot="navigationIcon"
+              dialogAction="cancel"
+              .label=${this.hass.localize("ui.common.close")}
+              .path=${mdiClose}
+            ></ha-icon-button>
+          </ha-header-bar>
+        </div>
         <div>
           ${this._agentInfo && this._agentInfo.onboarding
             ? html`
@@ -357,6 +368,18 @@ export class HaVoiceCommandDialog extends LitElement {
           --secondary-action-button-flex: 0;
           --mdc-dialog-max-width: 450px;
         }
+        ha-header-bar {
+          display: none;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-header-bar {
+            --mdc-theme-on-primary: var(--primary-text-color);
+            --mdc-theme-primary: var(--mdc-theme-surface);
+            flex-shrink: 0;
+            display: block;
+          }
+        }
+
         ha-textfield {
           display: block;
         }