add help window

src/App.vue

@@ -1,25 +1,43 @@
 <script>
 import { RouterLink, RouterView } from 'vue-router';
 import { defineComponent } from 'vue';
+import Help from './components/Help.vue';
 
 export default defineComponent({
+  components: {
+    Help,
+  },
   data() {
     window.addEventListener('keydown', e => {
       if (!e) e = event;
       const COMMA_CODE = 188;
-      if ((e.ctrlKey || e.metaKey) && e.keyCode === COMMA_CODE) {
+      const QUESTION_MARK_CODE = 191;
+
+      const cmdCtrl = e.ctrlKey || e.metaKey;
+
+      if (cmdCtrl && e.keyCode === COMMA_CODE) {
         this.$router.push({ name: 'settings' });
         e.preventDefault();
       }
+      if (cmdCtrl && e.shiftKey && e.keyCode === QUESTION_MARK_CODE) {
+        this.showHelp = !this.showHelp;
+        e.preventDefault();
+      }
+      if (e.keyCode === 27) {
+        this.showHelp = false;
+      }
     });
-    return {};
+    return {
+      showHelp: false,
+    };
   },
 });
 </script>
 
-<template>
-  <RouterView />
-</template>
-
 <style scoped>
 </style>
+
+<template>
+  <Help :visible="showHelp" @close="showHelp = false"/>
+  <RouterView />
+</template>

src/components/Help.vue

@@ -0,0 +1,86 @@
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Help',
+  props: {
+    visible: Boolean,
+  },
+});
+</script>
+
+<style scoped>
+.help {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  padding: 0;
+  backdrop-filter: blur(4px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.help.visible {
+  visibility: visible;
+}
+
+.window {
+  padding: 12px 24px;
+  border-radius: 24px;
+  height: calc(100% - 100px);
+  width: calc(100% - 100px);
+  line-height: 1.5;
+  font-family: monospace;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(32, 32, 32, 0.6);
+  overflow-y: auto;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+b {
+  color: #8f8;
+}
+</style>
+
+<template>
+  <div
+    class="help"
+    :class="{ visible: this.visible }"
+    @click="$emit('close')"
+  >
+    <div class="window" @click.stop>
+      <div class="header">
+        <h3>Keyboard Shorcuts</h3>
+      </div>
+      <div class="content">
+        <!-- ⌘ ⇧ ⌥ ⌃ ⇪ -->
+        <ul>
+          <li>
+            <b>⌘Command-Comma (,)</b> - open app settings
+          </li>
+          <li>
+            <b>⌘Command-Shift-?</b> - show this help window
+          </li>
+          <li>
+            <b>⌃Control-Comma (,)</b> - open app settings
+          </li>
+          <li>
+            <b>⌃Control-Shift-?</b> - show this help window
+          </li>
+          <li>
+            <b>ESC</b> - close window
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>