QUick Fix from a review

src/components/ha-form/ha-form.ts

@@ -87,7 +87,7 @@ export class HaForm extends LitElement implements HaFormElement {
                   .value=${getValue(this.data, item)}
                   .label=${this._computeLabel(item)}
                   .disabled=${this.disabled}
-                  .required=${item.required || false}
+                  .required=${item.required}
                 ></ha-selector>`
               : dynamicElement(`ha-form-${item.type}`, {
                   schema: item,

src/layouts/home-assistant-main.ts

@@ -18,7 +18,6 @@ import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
-import "../panels/developer-tools/ha-panel-developer-tools";
 
 const NON_SWIPABLE_PANELS = ["map"];
 
@@ -46,8 +45,6 @@ export class HomeAssistantMain extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ type: Boolean }) public showDevToolsDrawer?: boolean;
-
   @state() private _sidebarEditMode = false;
 
   @state() private _externalSidebar = false;
@@ -83,7 +80,7 @@ export class HomeAssistantMain extends LitElement {
         responsive-width="0"
       >
         <app-drawer
-          id="sidebarDrawer"
+          id="drawer"
           align="start"
           slot="drawer"
           .disableSwipe=${disableSwipe}
@@ -101,18 +98,6 @@ export class HomeAssistantMain extends LitElement {
           ></ha-sidebar>
         </app-drawer>
 
-        <app-drawer
-          id="devToolsDrawer"
-          align="end"
-          slot="drawer"
-          .disableSwipe=${true}
-          .swipeOpen=${false}
-          .persistent=${true}
-          .opened=${this.showDevToolsDrawer}
-        >
-          <div>test</div>
-        </app-drawer>
-
         <partial-panel-resolver
           .narrow=${this.narrow}
           .hass=${hass}
@@ -140,7 +125,7 @@ export class HomeAssistantMain extends LitElement {
 
         if (this._sidebarEditMode) {
           if (this._sidebarNarrow) {
-            this.sidebarDrawer.open();
+            this.drawer.open();
           } else {
             fireEvent(this, "hass-dock-sidebar", {
               dock: "docked",
@@ -162,10 +147,10 @@ export class HomeAssistantMain extends LitElement {
         return;
       }
       if (this._sidebarNarrow) {
-        if (this.sidebarDrawer.opened) {
-          this.sidebarDrawer.close();
+        if (this.drawer.opened) {
+          this.drawer.close();
         } else {
-          this.sidebarDrawer.open();
+          this.drawer.open();
         }
       } else {
         fireEvent(this, "hass-dock-sidebar", {
@@ -192,14 +177,14 @@ export class HomeAssistantMain extends LitElement {
     );
 
     if (changedProps.has("route") && this._sidebarNarrow) {
-      this.sidebarDrawer.close();
+      this.drawer.close();
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
 
     // Make app-drawer adjust to a potential LTR/RTL change
     if (oldHass && oldHass.language !== this.hass!.language) {
-      this.sidebarDrawer._resetPosition();
+      this.drawer._resetPosition();
     }
   }
 
@@ -207,8 +192,8 @@ export class HomeAssistantMain extends LitElement {
     return this.narrow || this.hass.dockedSidebar === "always_hidden";
   }
 
-  private get sidebarDrawer(): AppDrawerElement {
-    return this.shadowRoot!.querySelector("#sidebarDrawer")!;
+  private get drawer(): AppDrawerElement {
+    return this.shadowRoot!.querySelector("app-drawer")!;
   }
 
   private get appLayout(): AppDrawerLayoutElement {

src/layouts/home-assistant.ts

@@ -5,7 +5,7 @@ import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
 import { HassElement } from "../state/hass-element";
-import ShortcutsMixin from "../state/shortcuts-mixin";
+import QuickBarMixin from "../state/quick-bar-mixin";
 import { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import {
@@ -29,7 +29,7 @@ const panelUrl = (path: string) => {
 };
 
 @customElement("home-assistant")
-export class HomeAssistantAppEl extends ShortcutsMixin(HassElement) {
+export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
   @state() private _route: Route;
 
   private _panelUrl: string;
@@ -85,16 +85,6 @@ export class HomeAssistantAppEl extends ShortcutsMixin(HassElement) {
       storeState(this.hass!);
     });
 
-    this.addEventListener("dev-tools-toggle", () => {
-      const main = this.shadowRoot?.querySelector("home-assistant-main");
-
-      if (!main) {
-        return;
-      }
-
-      main.showDevToolsDrawer = !main.showDevToolsDrawer;
-    });
-
     // Navigation
     const updateRoute = (path = curPath()) => {
       if (this._route && path === this._route.path) {

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -1,12 +1,13 @@
-import "../../../../../components/ha-form/ha-form";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/entity/ha-entity-picker";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import { handleChangeEvent } from "../ha-automation-trigger-row";
+
+const includeDomains = ["zone"];
 
 @customElement("ha-automation-trigger-geo_location")
 export class HaGeolocationTrigger extends LitElement {
@@ -14,30 +15,6 @@ export class HaGeolocationTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: GeoLocationTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    { name: "source", selector: { text: {} } },
-    { name: "zone", selector: { entity: { domain: "zone" } } },
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "enter",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
-          ),
-        ],
-        [
-          "leave",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
-          ),
-        ],
-      ],
-    },
-  ]);
-
   public static get defaultConfig() {
     return {
       source: "",
@@ -47,27 +24,86 @@ export class HaGeolocationTrigger extends LitElement {
   }
 
   protected render() {
+    const { source, zone, event } = this.trigger;
+
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.source"
+        )}
+        name="source"
+        .value=${source}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <ha-entity-picker
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.zone"
+        )}
+        .value=${zone}
+        @value-changed=${this._zonePicked}
+        .hass=${this.hass}
+        allow-custom-entity
+        .includeDomains=${includeDomains}
+      ></ha-entity-picker>
+      <label>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="enter"
+            .checked=${event === "enter"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="leave"
+            .checked=${event === "leave"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-    );
+  private _zonePicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: { ...this.trigger, zone: ev.detail.value },
+    });
+  }
+
+  private _radioGroupPicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
+  }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -1,12 +1,11 @@
-import "../../../../../components/ha-form/ha-form";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 
 @customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -14,28 +13,6 @@ export class HaHassTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: HassTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "start",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
-          ),
-        ],
-        [
-          "shutdown",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
-          ),
-        ],
-      ],
-    },
-  ]);
-
   public static get defaultConfig() {
     return {
       event: "start" as HassTrigger["event"],
@@ -43,28 +20,50 @@ export class HaHassTrigger extends LitElement {
   }
 
   protected render() {
+    const { event } = this.trigger;
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
+      <label id="eventlabel">
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="start"
+            .checked=${event === "start"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="shutdown"
+            .checked=${event === "shutdown"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _radioGroupPicked(ev) {
     ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-    );
-
   static styles = css`
     label {
       display: flex;

src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts

@@ -1,15 +1,12 @@
+import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-
-const SCHEMA: HaFormSchema[] = [
-  { name: "topic", required: true, selector: { text: {} } },
-  { name: "payload", selector: { text: {} } },
-];
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
@@ -22,27 +19,30 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { topic, payload } = this.trigger;
     return html`
-      <ha-form
-        .schema=${SCHEMA}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.mqtt.topic"
+        )}
+        name="topic"
+        .value=${topic}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.mqtt.payload"
+        )}
+        name="payload"
+        .value=${payload}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
-
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
-    );
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -91,7 +91,7 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
   protected render() {
     const trgFor = createDurationData(this.trigger.for);
 
-    const data = { ...this.trigger, ...{ for: trgFor } };
+    const data = { ...this.trigger, for: trgFor };
     const schema = this._schema(this.trigger.entity_id);
 
     return html`

src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts

@@ -1,12 +1,16 @@
-import { html, LitElement } from "lit";
+import "@polymer/paper-input/paper-input";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-radio";
+import "../../../../../components/ha-formfield";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -14,29 +18,6 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: SunTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "sunrise",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
-          ),
-        ],
-        [
-          "sunset",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
-          ),
-        ],
-      ],
-    },
-    { name: "offset", selector: { text: {} } },
-  ]);
-
   public static get defaultConfig() {
     return {
       event: "sunrise" as SunTrigger["event"],
@@ -45,27 +26,69 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { offset, event } = this.trigger;
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <label>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.sun.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="sunrise"
+            .checked=${event === "sunrise"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="sunset"
+            .checked=${event === "sunset"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
+
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.sun.offset"
+        )}
+        name="offset"
+        .value=${offset}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
-    );
+  private _radioGroupPicked(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
+  }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts

@@ -1,16 +1,12 @@
+import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { TimePatternTrigger } from "../../../../../data/automation";
-import type { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-
-const SCHEMA: HaFormSchema[] = [
-  { name: "hours", selector: { text: {} } },
-  { name: "minutes", selector: { text: {} } },
-  { name: "seconds", selector: { text: {} } },
-];
+import { TimePatternTrigger } from "../../../../../data/automation";
+import { HomeAssistant } from "../../../../../types";
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-time_pattern")
 export class HaTimePatternTrigger extends LitElement implements TriggerElement {
@@ -23,27 +19,38 @@ export class HaTimePatternTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { hours, minutes, seconds } = this.trigger;
     return html`
-      <ha-form
-        .hass=${this.hass}
-        .schema=${SCHEMA}
-        .data=${this.trigger}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
+        )}
+        name="hours"
+        .value=${hours}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
+        )}
+        name="minutes"
+        .value=${minutes}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
+        )}
+        name="seconds"
+        .value=${seconds}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
-
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.time_pattern.${schema.name}`
-    );
 }
 
 declare global {

src/panels/lovelace/hui-root.ts

@@ -276,153 +276,137 @@ class HUIRoot extends LitElement {
                         ></ha-icon-button>
                       `
                     : ""}
-                  ${this._showButtonMenu
-                    ? html`
-                        <ha-button-menu corner="BOTTOM_START">
-                          <ha-icon-button
-                            slot="trigger"
+                  <ha-button-menu corner="BOTTOM_START">
+                    <ha-icon-button
+                      slot="trigger"
+                      .label=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                      .path=${mdiDotsVertical}
+                    ></ha-icon-button>
+                    ${this.narrow &&
+                    this._conversation(this.hass.config.components)
+                      ? html`
+                          <mwc-list-item
                             .label=${this.hass!.localize(
-                              "ui.panel.lovelace.editor.menu.open"
+                              "ui.panel.lovelace.menu.start_conversation"
                             )}
-                            .path=${mdiDotsVertical}
-                          ></ha-icon-button>
-                          ${this.narrow &&
-                          this._conversation(this.hass.config.components)
-                            ? html`
-                                <mwc-list-item
-                                  .label=${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.start_conversation"
-                                  )}
-                                  graphic="icon"
-                                  @request-selected=${this
-                                    ._showVoiceCommandDialog}
-                                >
-                                  <span
-                                    >${this.hass!.localize(
-                                      "ui.panel.lovelace.menu.start_conversation"
-                                    )}</span
-                                  >
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiMicrophone}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
-                          ${this._yamlMode
-                            ? html`
-                                <mwc-list-item
-                                  aria-label=${this.hass!.localize(
-                                    "ui.common.refresh"
-                                  )}
-                                  graphic="icon"
-                                  @request-selected=${this._handleRefresh}
-                                >
-                                  <span
-                                    >${this.hass!.localize(
-                                      "ui.common.refresh"
-                                    )}</span
-                                  >
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiRefresh}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                                <mwc-list-item
-                                  aria-label=${this.hass!.localize(
-                                    "ui.panel.lovelace.unused_entities.title"
-                                  )}
-                                  graphic="icon"
-                                  @request-selected=${this
-                                    ._handleUnusedEntities}
-                                >
-                                  <span
-                                    >${this.hass!.localize(
-                                      "ui.panel.lovelace.unused_entities.title"
-                                    )}</span
-                                  >
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiShape}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
-                          ${(
-                            this.hass.panels.lovelace
-                              ?.config as LovelacePanelConfig
-                          )?.mode === "yaml"
-                            ? html`
-                                <mwc-list-item
-                                  graphic="icon"
-                                  aria-label=${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.reload_resources"
-                                  )}
-                                  @request-selected=${this
-                                    ._handleReloadResources}
-                                >
-                                  ${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.reload_resources"
-                                  )}
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiRefresh}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
-                          ${this.hass!.user?.is_admin &&
-                          !this.hass!.config.safe_mode
-                            ? html`
-                                <mwc-list-item
-                                  graphic="icon"
-                                  aria-label=${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.configure_ui"
-                                  )}
-                                  @request-selected=${this
-                                    ._handleEnableEditMode}
-                                >
-                                  ${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.configure_ui"
-                                  )}
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiPencil}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
-                          ${this._editMode
-                            ? html`
-                                <a
-                                  href=${documentationUrl(
-                                    this.hass,
-                                    "/lovelace/"
-                                  )}
-                                  rel="noreferrer"
-                                  class="menu-link"
-                                  target="_blank"
-                                >
-                                  <mwc-list-item
-                                    graphic="icon"
-                                    aria-label=${this.hass!.localize(
-                                      "ui.panel.lovelace.menu.help"
-                                    )}
-                                  >
-                                    ${this.hass!.localize(
-                                      "ui.panel.lovelace.menu.help"
-                                    )}
-                                    <ha-svg-icon
-                                      slot="graphic"
-                                      .path=${mdiHelp}
-                                    ></ha-svg-icon>
-                                  </mwc-list-item>
-                                </a>
-                              `
-                            : ""}
-                        </ha-button-menu>
-                      `
-                    : ""}
+                            graphic="icon"
+                            @request-selected=${this._showVoiceCommandDialog}
+                          >
+                            <span
+                              >${this.hass!.localize(
+                                "ui.panel.lovelace.menu.start_conversation"
+                              )}</span
+                            >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiMicrophone}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : ""}
+                    ${this._yamlMode
+                      ? html`
+                          <mwc-list-item
+                            aria-label=${this.hass!.localize(
+                              "ui.common.refresh"
+                            )}
+                            graphic="icon"
+                            @request-selected=${this._handleRefresh}
+                          >
+                            <span
+                              >${this.hass!.localize("ui.common.refresh")}</span
+                            >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiRefresh}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                          <mwc-list-item
+                            aria-label=${this.hass!.localize(
+                              "ui.panel.lovelace.unused_entities.title"
+                            )}
+                            graphic="icon"
+                            @request-selected=${this._handleUnusedEntities}
+                          >
+                            <span
+                              >${this.hass!.localize(
+                                "ui.panel.lovelace.unused_entities.title"
+                              )}</span
+                            >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiShape}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : ""}
+                    ${(this.hass.panels.lovelace?.config as LovelacePanelConfig)
+                      ?.mode === "yaml"
+                      ? html`
+                          <mwc-list-item
+                            graphic="icon"
+                            aria-label=${this.hass!.localize(
+                              "ui.panel.lovelace.menu.reload_resources"
+                            )}
+                            @request-selected=${this._handleReloadResources}
+                          >
+                            ${this.hass!.localize(
+                              "ui.panel.lovelace.menu.reload_resources"
+                            )}
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiRefresh}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : ""}
+                    ${this.hass!.user?.is_admin && !this.hass!.config.safe_mode
+                      ? html`
+                          <mwc-list-item
+                            graphic="icon"
+                            aria-label=${this.hass!.localize(
+                              "ui.panel.lovelace.menu.configure_ui"
+                            )}
+                            @request-selected=${this._handleEnableEditMode}
+                          >
+                            ${this.hass!.localize(
+                              "ui.panel.lovelace.menu.configure_ui"
+                            )}
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiPencil}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : ""}
+                    ${this._editMode
+                      ? html`
+                          <a
+                            href=${documentationUrl(this.hass, "/lovelace/")}
+                            rel="noreferrer"
+                            class="menu-link"
+                            target="_blank"
+                          >
+                            <mwc-list-item
+                              graphic="icon"
+                              aria-label=${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                            >
+                              ${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                              <ha-svg-icon
+                                slot="graphic"
+                                .path=${mdiHelp}
+                              ></ha-svg-icon>
+                            </mwc-list-item>
+                          </a>
+                        `
+                      : ""}
+                  </ha-button-menu>
                 </app-toolbar>
               `}
           ${this._editMode
@@ -637,17 +621,6 @@ class HUIRoot extends LitElement {
     return this.shadowRoot!.getElementById("view") as HTMLDivElement;
   }
 
-  private get _showButtonMenu(): boolean {
-    return (
-      (this.narrow && this._conversation(this.hass.config.components)) ||
-      this._editMode ||
-      (this.hass!.user?.is_admin && !this.hass!.config.safe_mode) ||
-      (this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
-        "yaml" ||
-      this._yamlMode
-    );
-  }
-
   private _handleRefresh(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;

src/state/quick-bar-mixin.ts

@@ -1,6 +1,5 @@
 import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
-import { fireEvent } from "../common/dom/fire_event";
 import {
   QuickBarParams,
   showQuickBar,
@@ -13,7 +12,6 @@ declare global {
   interface HASSDomEvents {
     "hass-quick-bar": QuickBarParams;
     "hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
-    "dev-tools-toggle": never;
   }
 }
 
@@ -34,7 +32,6 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       tinykeys(window, {
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, true),
-        d: () => this._toggleDeveloperToolsSidebar(),
       });
     }
 
@@ -54,13 +51,6 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       );
     }
 
-    private _toggleDeveloperToolsSidebar(): void {
-      localStorage.showDeveloperTools =
-        localStorage.showDeveloperTools !== "true";
-      fireEvent(this, "dev-tools-toggle");
-      this.requestUpdate();
-    }
-
     private _canOverrideAlphanumericInput(e: KeyboardEvent) {
       const el = e.composedPath()[0] as any;