Add toggle for disabling quick bar shortcuts (#7495)

* Add toggle for disabling quick bar shortcuts

* Remove accidentally included code

* Change copy for toggle

* Rename hass property to be for generic shortcuts

src/panels/profile/ha-enable-shortcuts-row.ts

@@ -0,0 +1,51 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-switch";
+import type { HaSwitch } from "../../components/ha-switch";
+import type { HomeAssistant } from "../../types";
+import "../../components/ha-settings-row";
+
+@customElement("ha-enable-shortcuts-row")
+class HaEnableShortcutsRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.enable_shortcuts.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.enable_shortcuts.description")}
+        </span>
+        <ha-switch
+          .checked=${this.hass.enableShortcuts}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _checkedChanged(ev: Event) {
+    const enabled = (ev.target as HaSwitch).checked;
+    if (enabled === this.hass.enableShortcuts) {
+      return;
+    }
+
+    fireEvent(this, "hass-enable-shortcuts", enabled);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-enable-shortcuts-row": HaEnableShortcutsRow;
+  }
+}

src/panels/profile/ha-panel-profile.ts

@@ -38,6 +38,7 @@ import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
+import "./ha-enable-shortcuts-row";
 
 class HaPanelProfile extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -161,7 +162,10 @@ class HaPanelProfile extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-set-suspend-row>
-
+            <ha-enable-shortcuts-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-enable-shortcuts-row>
             <div class="card-actions">
               <mwc-button class="warning" @click=${this._handleLogOut}>
                 ${this.hass.localize("ui.panel.profile.logout")}

src/state/connection-mixin.ts

@@ -48,6 +48,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         dockedSidebar: "docked",
         vibrate: true,
         suspendWhenHidden: true,
+        enableShortcuts: true,
         moreInfoEntityId: null,
         hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(),
         callService: async (domain, service, serviceData = {}) => {

src/state/quick-bar-mixin.ts

@@ -4,10 +4,13 @@ import {
   QuickBarParams,
   showQuickBar,
 } from "../dialogs/quick-bar/show-dialog-quick-bar";
+import { HomeAssistant } from "../types";
+import { storeState } from "../util/ha-pref-storage";
 
 declare global {
   interface HASSDomEvents {
     "hass-quick-bar": QuickBarParams;
+    "hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
   }
 }
 
@@ -18,12 +21,17 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     protected firstUpdated(changedProps: PropertyValues) {
       super.firstUpdated(changedProps);
 
+      this.addEventListener("hass-enable-shortcuts", (ev) => {
+        this._updateHass({ enableShortcuts: ev.detail });
+        storeState(this.hass!);
+      });
+
       this._registerShortcut();
     }
 
     private _registerShortcut() {
       document.addEventListener("keydown", (e: KeyboardEvent) => {
-        if (!this.hass?.user?.is_admin) {
+        if (!this.hass?.user?.is_admin || !this.hass.enableShortcuts) {
           return;
         }
         if (this.isOSCtrlKey(e) && e.code === "KeyP") {

src/translations/en.json

@@ -2666,6 +2666,10 @@
           "header": "Vibrate",
           "description": "Enable or disable vibration on this device when controlling devices."
         },
+        "enable_shortcuts": {
+          "header": "Keyboard Shortcuts",
+          "description": "Enable or disable keyboard shortcuts for performing various actions in the UI."
+        },
         "suspend": {
           "header": "Automatically close connection",
           "description": "Should we close the connection to the server after being hidden for 5 minutes?"

src/types.ts

@@ -237,6 +237,7 @@ export interface HomeAssistant {
   localize: LocalizeFunc;
   translationMetadata: TranslationMetadata;
   suspendWhenHidden: boolean;
+  enableShortcuts: boolean;
   vibrate: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
   defaultPanel: string;

src/util/ha-pref-storage.ts

@@ -6,6 +6,7 @@ const STORED_STATE = [
   "selectedLanguage",
   "vibrate",
   "suspendWhenHidden",
+  "enableShortcuts",
   "defaultPanel",
 ];
 const STORAGE = window.localStorage || {};