Change Quick Bar shortcuts to "e" and "c" (#7496)

* Add toggle for disabling quick bar shortcuts

* Change shortcut from Ctrl+P and Ctrl+Shift+P to qe and qc (Quick Entity, Quick Command)

* Remove accidentally included code

* Use tinykeys for handling shortcuts

* Change shortcuts to e and c. And fix small typo.

* Change copy for toggle

* Rename hass property to be for generic shortcuts

* Minor tweaks to address review comments

package.json

@@ -119,6 +119,7 @@
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
     "superstruct": "^0.10.12",
+    "tinykeys": "^1.1.1",
     "unfetch": "^4.1.0",
     "vue": "^2.6.11",
     "vue2-daterange-picker": "^0.5.1",

src/state/quick-bar-mixin.ts

@@ -1,3 +1,4 @@
+import tinykeys from "tinykeys";
 import type { Constructor, PropertyValues } from "lit-element";
 import { HassElement } from "./hass-element";
 import {
@@ -14,8 +15,6 @@ declare global {
   }
 }
 
-const isMacOS = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-
 export default <T extends Constructor<HassElement>>(superClass: T) =>
   class extends superClass {
     protected firstUpdated(changedProps: PropertyValues) {
@@ -30,23 +29,27 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _registerShortcut() {
-      document.addEventListener("keydown", (e: KeyboardEvent) => {
+      tinykeys(window, {
-        if (!this.hass?.user?.is_admin || !this.hass.enableShortcuts) {
+        e: (ev) => this._showQuickBar(ev),
-          return;
+        c: (ev) => this._showQuickBar(ev, true),
-        }
-        if (this.isOSCtrlKey(e) && e.code === "KeyP") {
-          e.preventDefault();
-          const eventParams: QuickBarParams = {};
-          if (e.shiftKey) {
-            eventParams.commandMode = true;
-          }
-
-          showQuickBar(this, eventParams);
-        }
       });
     }
 
-    private isOSCtrlKey(e: KeyboardEvent) {
+    private _showQuickBar(e: KeyboardEvent, commandMode = false) {
-      return isMacOS ? e.metaKey : e.ctrlKey;
+      if (
+        !this.hass?.user?.is_admin ||
+        !this.hass.enableShortcuts ||
+        this._inInputField(e)
+      ) {
+        return;
+      }
+
+      showQuickBar(this, { commandMode });
+    }
+
+    private _inInputField(e: KeyboardEvent) {
+      return ["INPUT", "TEXTAREA"].includes(
+        (e.composedPath()[0] as HTMLElement).tagName
+      );
     }
   };

yarn.lock

@@ -12230,6 +12230,11 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+tinykeys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.1.1.tgz#2535e8b24c8e2be447dd0ee1cff656ef435cd63d"
+  integrity sha512-YEA1TGMlkMabXI0NGddRFti+c1eMO2QP7wefwibSz0Pip8sA+d99yX5Pp7pK7wUeTKmrF4ys4XZVz44YydlTYg==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"