feat: surface kb shortcuts

app/components/AppFooter.vue

@@ -1,6 +1,41 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onKeyDown } from '@vueuse/core'
+
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+
+const triggerRef = useTemplateRef('triggerRef')
+const modalRef = useTemplateRef('modalRef')
+const modalOpen = ref(false)
+
+const togglePopover = (e?: Event) => {
+  e?.stopPropagation()
+  if (!modalOpen.value) {
+    modalRef.value?.showModal?.()
+    modalOpen.value = true
+  } else {
+    modalRef.value?.close?.()
+    modalOpen.value = false
+  }
+}
+
+onKeyDown(
+  'Escape',
+  (e: KeyboardEvent) => {
+    if (!modalOpen.value) return
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    modalRef.value?.close?.()
+    modalOpen.value = false
+  },
+  { dedupe: true },
+)
+
+function onModalClosed() {
+  modalOpen.value = false
+  triggerRef.value?.focus?.()
+}
 </script>
 
 <template>
@@ -33,6 +68,68 @@ const isHome = computed(() => route.name === 'index')
           <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
           </LinkBase>
+
+          <button
+            ref="triggerRef"
+            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="togglePopover"
+            :aria-expanded="modalOpen ? 'true' : 'false'"
+            aria-haspopup="dialog"
+          >
+            {{ $t('footer.keyboard_shortcuts') }}
+          </button>
+
+          <Modal
+            ref="modalRef"
+            @close="onModalClosed"
+            :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.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.open_compare_prefilled') }}</span>
+              </li>
+            </ul>
+          </Modal>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
@@ -42,3 +139,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,22 @@
     "docs": "docs",
     "source": "source",
     "social": "social",
-    "chat": "chat"
+    "chat": "chat",
+    "keyboard_shortcuts": "keyboard shortcuts"
+  },
+  "shortcuts": {
+    "section": {
+      "global": "Global",
+      "search": "Search",
+      "package": "Package"
+    },
+    "settings": "Open settings",
+    "compare": "Open compare",
+    "navigate_results": "Navigate results",
+    "go_to_result": "Go to result",
+    "open_code_view": "Open code view",
+    "open_docs": "Open docs",
+    "open_compare_prefilled": "Open compare (prefilled with current package)"
   },
   "search": {
     "label": "Search npm packages",

lunaria/files/en-GB.json

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

lunaria/files/en-US.json

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