✨ Keyboard shortcuts

layouts/default.vue

@@ -40,6 +40,16 @@
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  @click="showShortcuts = true"
+                  v-close-popover
+                >
+                  <i class="material-icons">keyboard</i>
+                  <span>Shortcuts</span>
+                </button>
+              </div>
               <div>
                 <a
                   href="https://opencollective.com/postwoman"
@@ -210,6 +220,33 @@
         >
       </p>
     </footer>
+    <modal v-if="showShortcuts" @close="showShortcuts = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">Shortcuts</h3>
+              <div>
+                <button class="icon" @click="showShortcuts = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <ul>
+          <li>
+            <span>
+              <kbd>Save to Collection:</kbd>
+              <kbd>Ctrl</kbd><kbd>S</kbd>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div slot="footer"></div>
+    </modal>
   </div>
 </template>
 
@@ -219,10 +256,12 @@
 import intializePwa from "../assets/js/pwa";
 import logo from "../components/logo";
 import * as version from "../.postwoman/version.json";
+import modal from "../components/modal";
 
 export default {
   components: {
-    logo
+    logo,
+    modal
   },
 
   methods: {
@@ -240,7 +279,8 @@ export default {
       // that can be called to show the user the installation
       // prompt.
       showInstallPrompt: null,
-      version: {}
+      version: {},
+      showShortcuts: false
     };
   },