From dff2c036bc6915b37aac2c5bf5bce004d4c13350 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 15:59:36 +0000
Subject: [PATCH 01/11] add basic keyboard shortcuts popover

---
 app/components/AppFooter.vue | 142 +++++++++++++++++++++++++++++++++++
 i18n/locales/en.json         |  17 ++++-
 lunaria/files/en-GB.json     |  17 ++++-
 lunaria/files/en-US.json     |  17 ++++-
 4 files changed, 190 insertions(+), 3 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 83491bf70..8ed3b31dc 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,6 +1,38 @@
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+
+const triggerRef = ref<HTMLElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
+const showPopover = ref(false)
+
+const togglePopover = (e?: Event) => {
+  e?.stopPropagation()
+  showPopover.value = !showPopover.value
+}
+
+const onDocClick = (e: Event) => {
+  const t = e.target as Node
+  if (!popoverRef.value || !triggerRef.value) return
+  if (!popoverRef.value.contains(t) && !triggerRef.value.contains(t)) {
+    showPopover.value = false
+  }
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') showPopover.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocClick)
+  document.addEventListener('keydown', onKeydown)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocClick)
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>
@@ -33,6 +65,116 @@ 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="showPopover ? 'true' : 'false'"
+            aria-haspopup="dialog"
+          >
+            {{ $t('footer.keyboard_shortcuts') }}
+          </button>
+
+          <Teleport to="body">
+            <Transition
+              enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+              leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+              enter-from-class="opacity-0"
+              leave-to-class="opacity-0"
+            >
+              <div v-if="showPopover">
+                <div
+                  class="fixed inset-0 bg-bg-elevated/70 dark:bg-bg-elevated/90 z-40"
+                  @click="showPopover = false"
+                  aria-hidden="true"
+                ></div>
+
+                <div class="fixed inset-0 z-50 flex items-center justify-center">
+                  <div
+                    ref="popoverRef"
+                    class="mx-4 max-w-lg w-full p-6 bg-bg border border-border rounded-lg shadow-xl text-sm text-fg"
+                    role="dialog"
+                    :aria-label="$t('footer.keyboard_shortcuts')"
+                  >
+                    <div class="flex justify-between mb-8">
+                      <p class="m-0 font-mono text-fg-subtle">
+                        {{ $t('footer.keyboard_shortcuts') }}
+                      </p>
+                      <button
+                        class="text-xs text-link hover:underline flex items-center gap-2"
+                        @click="showPopover = false"
+                      >
+                        <span aria-hidden="true" class="size-5 i-lucide-x" />
+                        <span class="sr-only">{{ $t('close') }}</span>
+                      </button>
+                    </div>
+                    <p class="mb-2 font-mono text-fg-subtle">
+                      {{ $t('shortcuts.section.global') }}
+                    </p>
+                    <ul class="mb-8 flex flex-col gap-2">
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >,</kbd
+                        ><span>{{ $t('shortcuts.settings') }}</span>
+                      </li>
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >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-8 flex flex-col gap-2">
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >↑</kbd
+                        >/<kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >↓</kbd
+                        ><span>{{ $t('shortcuts.navigate_results') }}</span>
+                      </li>
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >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-0 flex flex-col gap-2">
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >.</kbd
+                        ><span>{{ $t('shortcuts.open_code_view') }}</span>
+                      </li>
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >d</kbd
+                        ><span>{{ $t('shortcuts.open_docs') }}</span>
+                      </li>
+                      <li class="flex gap-2 items-center">
+                        <kbd
+                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                          >c</kbd
+                        ><span>{{ $t('shortcuts.open_compare_prefilled') }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </Teleport>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7518f7024..4115c8ef9 100644
--- a/i18n/locales/en.json
+++ b/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",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index fe8c669e7..4b9f29546 100644
--- a/lunaria/files/en-GB.json
+++ b/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",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 7518f7024..4115c8ef9 100644
--- a/lunaria/files/en-US.json
+++ b/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",

From 23ad75917fa91ba52f434d9bace8165b2a95f586 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 16:08:43 +0000
Subject: [PATCH 02/11] use better patterns?

---
 app/components/AppFooter.vue | 56 +++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 8ed3b31dc..d10af9d69 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick } from 'vue'
+import { onClickOutside, onKeyDown } from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
@@ -13,25 +15,32 @@ const togglePopover = (e?: Event) => {
   showPopover.value = !showPopover.value
 }
 
-const onDocClick = (e: Event) => {
-  const t = e.target as Node
-  if (!popoverRef.value || !triggerRef.value) return
-  if (!popoverRef.value.contains(t) && !triggerRef.value.contains(t)) {
+onClickOutside(
+  popoverRef,
+  () => {
     showPopover.value = false
-  }
-}
+  },
+  { ignore: [triggerRef] },
+)
 
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') showPopover.value = false
-}
+onKeyDown(
+  'Escape',
+  () => {
+    if (showPopover.value) showPopover.value = false
+  },
+  { dedupe: true },
+)
 
-onMounted(() => {
-  document.addEventListener('click', onDocClick)
-  document.addEventListener('keydown', onKeydown)
-})
-onBeforeUnmount(() => {
-  document.removeEventListener('click', onDocClick)
-  document.removeEventListener('keydown', onKeydown)
+const { activate, deactivate } = useFocusTrap(popoverRef, { allowOutsideClick: true })
+watch(showPopover, async open => {
+  if (open) {
+    await nextTick()
+    activate()
+    popoverRef.value?.focus?.()
+  } else {
+    deactivate()
+    triggerRef.value?.focus?.()
+  }
 })
 </script>
 
@@ -79,21 +88,22 @@ onBeforeUnmount(() => {
 
           <Teleport to="body">
             <Transition
-              enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
-              leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+              enter-active-class="transition-opacity duration-0 motion-reduce:transition-none"
+              leave-active-class="transition-opacity duration-0 motion-reduce:transition-none"
               enter-from-class="opacity-0"
               leave-to-class="opacity-0"
             >
-              <div v-if="showPopover">
+              <div v-show="showPopover">
                 <div
-                  class="fixed inset-0 bg-bg-elevated/70 dark:bg-bg-elevated/90 z-40"
+                  class="fixed inset-0 bg-bg-elevated/70 dark:bg-bg-elevated/90 z-[9998]"
                   @click="showPopover = false"
                   aria-hidden="true"
                 ></div>
 
-                <div class="fixed inset-0 z-50 flex items-center justify-center">
+                <div class="fixed inset-0 z-[9999] flex items-center justify-center">
                   <div
                     ref="popoverRef"
+                    tabindex="-1"
                     class="mx-4 max-w-lg w-full p-6 bg-bg border border-border rounded-lg shadow-xl text-sm text-fg"
                     role="dialog"
                     :aria-label="$t('footer.keyboard_shortcuts')"
@@ -107,7 +117,7 @@ onBeforeUnmount(() => {
                         @click="showPopover = false"
                       >
                         <span aria-hidden="true" class="size-5 i-lucide-x" />
-                        <span class="sr-only">{{ $t('close') }}</span>
+                        <span class="sr-only">{{ $t('common.close') }}</span>
                       </button>
                     </div>
                     <p class="mb-2 font-mono text-fg-subtle">

From df43725eaf53499a027b0379d2b31dd4f2e49f38 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 16:18:45 +0000
Subject: [PATCH 03/11] add type button to popover close button for kb
 shortcuts

---
 app/components/AppFooter.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index d10af9d69..957ca3f79 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -114,6 +114,7 @@ watch(showPopover, async open => {
                       </p>
                       <button
                         class="text-xs text-link hover:underline flex items-center gap-2"
+                        type="button"
                         @click="showPopover = false"
                       >
                         <span aria-hidden="true" class="size-5 i-lucide-x" />

From 3f03145094de469e52808c2545d67fdacaf4cd1e Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 16:22:45 +0000
Subject: [PATCH 04/11] prefer useTemplateRef

---
 app/components/AppFooter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 957ca3f79..d9f40b306 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -7,7 +7,7 @@ const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
 const triggerRef = ref<HTMLElement | null>(null)
-const popoverRef = ref<HTMLElement | null>(null)
+const popoverRef = useTemplateRef<HTMLElement>('popoverRef')
 const showPopover = ref(false)
 
 const togglePopover = (e?: Event) => {

From 09f4f3da299e4421f09263bf1624c05e1a931fac Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 16:26:41 +0000
Subject: [PATCH 05/11] account for being on settings page when pressing escape

---
 app/components/AppFooter.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index d9f40b306..45d2eea64 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -25,8 +25,11 @@ onClickOutside(
 
 onKeyDown(
   'Escape',
-  () => {
-    if (showPopover.value) showPopover.value = false
+  (e: KeyboardEvent) => {
+    if (!showPopover.value) return
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    showPopover.value = false
   },
   { dedupe: true },
 )

From 4f37e03a3cb42f0f51bfc1e16c47321b6857630c Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 16:52:27 +0000
Subject: [PATCH 06/11] use modal component

---
 app/components/AppFooter.vue | 215 ++++++++++++++---------------------
 1 file changed, 87 insertions(+), 128 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 45d2eea64..96875b5ae 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,50 +1,42 @@
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
-import { onClickOutside, onKeyDown } from '@vueuse/core'
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { ref, computed } from 'vue'
+import { onKeyDown } from '@vueuse/core'
+import Modal from './Modal.client.vue'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
 const triggerRef = ref<HTMLElement | null>(null)
-const popoverRef = useTemplateRef<HTMLElement>('popoverRef')
-const showPopover = ref(false)
+const modalRef = ref<any>(null)
+const modalOpen = ref(false)
 
 const togglePopover = (e?: Event) => {
   e?.stopPropagation()
-  showPopover.value = !showPopover.value
+  if (!modalOpen.value) {
+    modalRef.value?.showModal?.()
+    modalOpen.value = true
+  } else {
+    modalRef.value?.close?.()
+    modalOpen.value = false
+  }
 }
 
-onClickOutside(
-  popoverRef,
-  () => {
-    showPopover.value = false
-  },
-  { ignore: [triggerRef] },
-)
-
 onKeyDown(
   'Escape',
   (e: KeyboardEvent) => {
-    if (!showPopover.value) return
+    if (!modalOpen.value) return
     e.preventDefault()
     e.stopImmediatePropagation()
-    showPopover.value = false
+    modalRef.value?.close?.()
+    modalOpen.value = false
   },
   { dedupe: true },
 )
 
-const { activate, deactivate } = useFocusTrap(popoverRef, { allowOutsideClick: true })
-watch(showPopover, async open => {
-  if (open) {
-    await nextTick()
-    activate()
-    popoverRef.value?.focus?.()
-  } else {
-    deactivate()
-    triggerRef.value?.focus?.()
-  }
-})
+function onModalClosed() {
+  modalOpen.value = false
+  triggerRef.value?.focus?.()
+}
 </script>
 
 <template>
@@ -83,112 +75,79 @@ watch(showPopover, async open => {
             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="showPopover ? 'true' : 'false'"
+            :aria-expanded="modalOpen ? 'true' : 'false'"
             aria-haspopup="dialog"
           >
             {{ $t('footer.keyboard_shortcuts') }}
           </button>
 
-          <Teleport to="body">
-            <Transition
-              enter-active-class="transition-opacity duration-0 motion-reduce:transition-none"
-              leave-active-class="transition-opacity duration-0 motion-reduce:transition-none"
-              enter-from-class="opacity-0"
-              leave-to-class="opacity-0"
-            >
-              <div v-show="showPopover">
-                <div
-                  class="fixed inset-0 bg-bg-elevated/70 dark:bg-bg-elevated/90 z-[9998]"
-                  @click="showPopover = false"
-                  aria-hidden="true"
-                ></div>
-
-                <div class="fixed inset-0 z-[9999] flex items-center justify-center">
-                  <div
-                    ref="popoverRef"
-                    tabindex="-1"
-                    class="mx-4 max-w-lg w-full p-6 bg-bg border border-border rounded-lg shadow-xl text-sm text-fg"
-                    role="dialog"
-                    :aria-label="$t('footer.keyboard_shortcuts')"
-                  >
-                    <div class="flex justify-between mb-8">
-                      <p class="m-0 font-mono text-fg-subtle">
-                        {{ $t('footer.keyboard_shortcuts') }}
-                      </p>
-                      <button
-                        class="text-xs text-link hover:underline flex items-center gap-2"
-                        type="button"
-                        @click="showPopover = false"
-                      >
-                        <span aria-hidden="true" class="size-5 i-lucide-x" />
-                        <span class="sr-only">{{ $t('common.close') }}</span>
-                      </button>
-                    </div>
-                    <p class="mb-2 font-mono text-fg-subtle">
-                      {{ $t('shortcuts.section.global') }}
-                    </p>
-                    <ul class="mb-8 flex flex-col gap-2">
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >,</kbd
-                        ><span>{{ $t('shortcuts.settings') }}</span>
-                      </li>
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >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-8 flex flex-col gap-2">
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >↑</kbd
-                        >/<kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >↓</kbd
-                        ><span>{{ $t('shortcuts.navigate_results') }}</span>
-                      </li>
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >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-0 flex flex-col gap-2">
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >.</kbd
-                        ><span>{{ $t('shortcuts.open_code_view') }}</span>
-                      </li>
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >d</kbd
-                        ><span>{{ $t('shortcuts.open_docs') }}</span>
-                      </li>
-                      <li class="flex gap-2 items-center">
-                        <kbd
-                          class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                          >c</kbd
-                        ><span>{{ $t('shortcuts.open_compare_prefilled') }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </Transition>
-          </Teleport>
+          <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="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >,</kbd
+                ><span>{{ $t('shortcuts.settings') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd
+                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >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="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >↑</kbd
+                >/<kbd
+                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >↓</kbd
+                ><span>{{ $t('shortcuts.navigate_results') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd
+                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >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="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >.</kbd
+                ><span>{{ $t('shortcuts.open_code_view') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd
+                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >d</kbd
+                ><span>{{ $t('shortcuts.open_docs') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd
+                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
+                  >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">

From 406169b0b53aedf685f7ac7d5d57572c8900c163 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 17:31:59 +0000
Subject: [PATCH 07/11] fix

---
 app/components/AppFooter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 96875b5ae..f512b1298 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -7,7 +7,7 @@ const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
 const triggerRef = ref<HTMLElement | null>(null)
-const modalRef = ref<any>(null)
+const modalRef = useTemplateRef<HTMLElement>('modalRef')
 const modalOpen = ref(false)
 
 const togglePopover = (e?: Event) => {

From d6c6810cc040d2caa07347c1629f15a2adeea512 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 17:44:59 +0000
Subject: [PATCH 08/11] usetemplateref again and do not import modal

---
 app/components/AppFooter.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index f512b1298..2a38d730f 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { onKeyDown } from '@vueuse/core'
-import Modal from './Modal.client.vue'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
-const triggerRef = ref<HTMLElement | null>(null)
-const modalRef = useTemplateRef<HTMLElement>('modalRef')
+const triggerRef = useTemplateRef('triggerRef')
+const modalRef = useTemplateRef('modalRef')
 const modalOpen = ref(false)
 
 const togglePopover = (e?: Event) => {

From e644788fa436115ce2d747c478776aed2e7ee9ba Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Sun, 8 Feb 2026 17:55:15 +0000
Subject: [PATCH 09/11] use utility class for kbd elements for better
 readbility

---
 app/components/AppFooter.vue | 51 ++++++++++++++----------------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 2a38d730f..9869ee9dc 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -91,16 +91,12 @@ function onModalClosed() {
             </p>
             <ul class="mb-6 flex flex-col gap-2">
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >,</kbd
-                ><span>{{ $t('shortcuts.settings') }}</span>
+                <kbd class="kbd">,</kbd>
+                <span>{{ $t('shortcuts.settings') }}</span>
               </li>
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >c</kbd
-                ><span>{{ $t('shortcuts.compare') }}</span>
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare') }}</span>
               </li>
             </ul>
             <p class="mb-2 font-mono text-fg-subtle">
@@ -108,19 +104,12 @@ function onModalClosed() {
             </p>
             <ul class="mb-6 flex flex-col gap-2">
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >↑</kbd
-                >/<kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >↓</kbd
-                ><span>{{ $t('shortcuts.navigate_results') }}</span>
+                <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
+                <span>{{ $t('shortcuts.navigate_results') }}</span>
               </li>
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >Enter</kbd
-                ><span>{{ $t('shortcuts.go_to_result') }}</span>
+                <kbd class="kbd">Enter</kbd>
+                <span>{{ $t('shortcuts.go_to_result') }}</span>
               </li>
             </ul>
             <p class="mb-2 font-mono text-fg-subtle">
@@ -128,22 +117,16 @@ function onModalClosed() {
             </p>
             <ul class="mb-6 flex flex-col gap-2">
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >.</kbd
-                ><span>{{ $t('shortcuts.open_code_view') }}</span>
+                <kbd class="kbd">.</kbd>
+                <span>{{ $t('shortcuts.open_code_view') }}</span>
               </li>
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >d</kbd
-                ><span>{{ $t('shortcuts.open_docs') }}</span>
+                <kbd class="kbd">d</kbd>
+                <span>{{ $t('shortcuts.open_docs') }}</span>
               </li>
               <li class="flex gap-2 items-center">
-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >c</kbd
-                ><span>{{ $t('shortcuts.open_compare_prefilled') }}</span>
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.open_compare_prefilled') }}</span>
               </li>
             </ul>
           </Modal>
@@ -156,3 +139,9 @@ function onModalClosed() {
     </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>

From 6c541e7d6973e148f58259de60112449027ce726 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 8 Feb 2026 18:19:15 +0000
Subject: [PATCH 10/11] fix: remove things handled by modal

---
 app/components/AppFooter.vue | 39 ++----------------------------------
 1 file changed, 2 insertions(+), 37 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 9869ee9dc..6372e63f7 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,41 +1,9 @@
 <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?.()
-}
+const showModal = () => modalRef.value?.showModal?.()
 </script>
 
 <template>
@@ -70,11 +38,9 @@ function onModalClosed() {
           </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'"
+            @click.prevent="showModal"
             aria-haspopup="dialog"
           >
             {{ $t('footer.keyboard_shortcuts') }}
@@ -82,7 +48,6 @@ function onModalClosed() {
 
           <Modal
             ref="modalRef"
-            @close="onModalClosed"
             :modalTitle="$t('footer.keyboard_shortcuts')"
             class="w-auto max-w-lg"
           >

From 4c0e9b1967dc225e5ab2799da6fd3edbf7705fa7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 8 Feb 2026 18:25:21 +0000
Subject: [PATCH 11/11] chore: add missing keyboard shortcuts

---
 app/components/AppFooter.vue | 10 +++++++++-
 i18n/locales/en.json         |  6 ++++--
 lunaria/files/en-GB.json     |  6 ++++--
 lunaria/files/en-US.json     |  6 ++++--
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6372e63f7..443b68c0f 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -55,6 +55,14 @@ const showModal = () => modalRef.value?.showModal?.()
               {{ $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>
@@ -91,7 +99,7 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
               <li class="flex gap-2 items-center">
                 <kbd class="kbd">c</kbd>
-                <span>{{ $t('shortcuts.open_compare_prefilled') }}</span>
+                <span>{{ $t('shortcuts.compare_from_package') }}</span>
               </li>
             </ul>
           </Modal>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1098ced06..7fb0060ef 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -24,13 +24,15 @@
       "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",
-    "open_compare_prefilled": "Open compare (prefilled with current package)"
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index d370a2050..0655549a9 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -24,13 +24,15 @@
       "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",
-    "open_compare_prefilled": "Open compare (prefilled with current package)"
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 1098ced06..7fb0060ef 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -24,13 +24,15 @@
       "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",
-    "open_compare_prefilled": "Open compare (prefilled with current package)"
+    "open_docs": "Open docs"
   },
   "search": {
     "label": "Search npm packages",