From 28ad0345f393e4391da830cbe866ab7cd7deb23a Mon Sep 17 00:00:00 2001
From: Duarte Dias <duarte.dd.dias@gmail.com>
Date: Tue, 9 Feb 2021 20:01:08 +0000
Subject: [PATCH] create modal for keyboard shortcuts

---
 src/assets/graphicarts/help-circle.svg |  1 +
 src/assets/index.html                  | 64 ++++++++++++++++++++++++++
 src/assets/javascripts/keybindings.js  |  1 +
 3 files changed, 66 insertions(+)
 create mode 100644 src/assets/graphicarts/help-circle.svg

diff --git a/src/assets/graphicarts/help-circle.svg b/src/assets/graphicarts/help-circle.svg
new file mode 100644
index 0000000..51fddd8
--- /dev/null
+++ b/src/assets/graphicarts/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/src/assets/index.html b/src/assets/index.html
index aacf4c4..047d5a2 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -94,6 +94,11 @@
                         <span class="icon mr-1">{% inline "upload.svg" %}</span>
                         Export
                     </b-dropdown-item>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <b-dropdown-item-button @click="showSettings('shortcuts')">
+                        <span class="icon mr-1">{% inline "help-circle.svg" %}</span>
+                        Shortcuts
+                    </b-dropdown-item-button>
                     <b-dropdown-divider v-if="authenticated"></b-dropdown-divider>
                     <b-dropdown-item-button v-if="authenticated" @click="logout()">
                         <span class="icon mr-1">{% inline "log-out.svg" %}</span>
@@ -379,6 +384,65 @@
                     </div>
                 </div>
             </div>
+            <div v-else-if="settings=='shortcuts'">
+                <p class="cursor-default"><b>Keyboard shortuts (case-sensitive)</b></p>
+<div>
+  <b-table-simple striped bordered responsive>
+    <b-thead>
+      <b-tr>
+        <b-th>Key</b-th>
+        <b-th>Action</b-th>
+      </b-tr>
+    </b-thead>
+    <b-tbody>
+      <b-tr>
+        <b-td>r</b-td>
+        <b-td>toggle item as read / unread</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>R</b-td>
+          <b-td>mark all items as read</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>s</b-td>
+          <b-td>star / unstar item</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>?</b-td>
+          <b-td>focus the search bar</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>A</b-td>
+          <b-td>view All items</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>U</b-td>
+          <b-td>view Unread items</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>S</b-td>
+          <b-td>view Starred items</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>j</b-td>
+          <b-td>go to next feed item</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>k</b-td>
+          <b-td>go to previous feed item</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>l</b-td>
+          <b-td>go to next feed</b-td>
+      </b-tr>
+      <b-tr>
+          <b-td>h</b-td>
+          <b-td>go to previous feed</b-td>
+      </b-tr>
+    </b-tbody>
+  </b-table-simple>
+</div>
+            </div>
         </div>
     </div>
     <!-- polyfill -->
diff --git a/src/assets/javascripts/keybindings.js b/src/assets/javascripts/keybindings.js
index 2640711..7c84641 100644
--- a/src/assets/javascripts/keybindings.js
+++ b/src/assets/javascripts/keybindings.js
@@ -86,6 +86,7 @@ const shortcutFunctions = {
   },
 }
 
+// If you edit, make sure you update README.md and the help modal
 const keybindings = {
   "r": shortcutFunctions.toggleItemRead,
   "R": shortcutFunctions.markAllRead,