feat: surface kb shortcuts (#1221)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: whitep4nth3r

app/components/AppFooter.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+
+const modalRef = useTemplateRef('modalRef')
+const showModal = () => modalRef.value?.showModal?.()
 </script>
 
 <template>
@@ -33,6 +36,73 @@ const isHome = computed(() => route.name === 'index')
           <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
           </LinkBase>
+
+          <button
+            type="button"
+            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            @click.prevent="showModal"
+            aria-haspopup="dialog"
+          >
+            {{ $t('footer.keyboard_shortcuts') }}
+          </button>
+
+          <Modal
+            ref="modalRef"
+            :modalTitle="$t('footer.keyboard_shortcuts')"
+            class="w-auto max-w-lg"
+          >
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.global') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">/</kbd>
+                <span>{{ $t('shortcuts.focus_search') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">?</kbd>
+                <span>{{ $t('shortcuts.show_kbd_hints') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">,</kbd>
+                <span>{{ $t('shortcuts.settings') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.search') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
+                <span>{{ $t('shortcuts.navigate_results') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">Enter</kbd>
+                <span>{{ $t('shortcuts.go_to_result') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.package') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">.</kbd>
+                <span>{{ $t('shortcuts.open_code_view') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">d</kbd>
+                <span>{{ $t('shortcuts.open_docs') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare_from_package') }}</span>
+              </li>
+            </ul>
+          </Modal>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
@@ -42,3 +112,9 @@ const isHome = computed(() => route.name === 'index')
     </div>
   </footer>
 </template>
+
+<style scoped>
+.kbd {
+  @apply items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
+}
+</style>

i18n/locales/en.json

@@ -15,7 +15,24 @@
     "docs": "docs",
     "source": "source",
     "social": "social",
-    "chat": "chat"
+    "chat": "chat",
+    "keyboard_shortcuts": "keyboard shortcuts"
+  },
+  "shortcuts": {
+    "section": {
+      "global": "Global",
+      "search": "Search",
+      "package": "Package"
+    },
+    "focus_search": "Focus search",
+    "show_kbd_hints": "Highlight keyboard hints",
+    "settings": "Open settings",
+    "compare": "Open compare",
+    "compare_from_package": "Open compare (prefilled with current package)",
+    "navigate_results": "Navigate results",
+    "go_to_result": "Go to result",
+    "open_code_view": "Open code view",
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",

lunaria/files/en-GB.json

@@ -15,7 +15,24 @@
     "docs": "docs",
     "source": "source",
     "social": "social",
-    "chat": "chat"
+    "chat": "chat",
+    "keyboard_shortcuts": "keyboard shortcuts"
+  },
+  "shortcuts": {
+    "section": {
+      "global": "Global",
+      "search": "Search",
+      "package": "Package"
+    },
+    "focus_search": "Focus search",
+    "show_kbd_hints": "Highlight keyboard hints",
+    "settings": "Open settings",
+    "compare": "Open compare",
+    "compare_from_package": "Open compare (prefilled with current package)",
+    "navigate_results": "Navigate results",
+    "go_to_result": "Go to result",
+    "open_code_view": "Open code view",
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",

lunaria/files/en-US.json

@@ -15,7 +15,24 @@
     "docs": "docs",
     "source": "source",
     "social": "social",
-    "chat": "chat"
+    "chat": "chat",
+    "keyboard_shortcuts": "keyboard shortcuts"
+  },
+  "shortcuts": {
+    "section": {
+      "global": "Global",
+      "search": "Search",
+      "package": "Package"
+    },
+    "focus_search": "Focus search",
+    "show_kbd_hints": "Highlight keyboard hints",
+    "settings": "Open settings",
+    "compare": "Open compare",
+    "compare_from_package": "Open compare (prefilled with current package)",
+    "navigate_results": "Navigate results",
+    "go_to_result": "Go to result",
+    "open_code_view": "Open code view",
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",