From 3c63c7c0893eb956b82e678eaf173f90074e0091 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sun, 29 Dec 2024 14:31:33 +0100
Subject: [PATCH 1/2] (search) add keyboard navigation to the search dialogue

---
 components/search/SearchDialogue.vue | 43 ++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/search/SearchDialogue.vue b/components/search/SearchDialogue.vue
index eb5aedbb5..836927d7f 100644
--- a/components/search/SearchDialogue.vue
+++ b/components/search/SearchDialogue.vue
@@ -14,6 +14,7 @@ const queryValidation = computed(() => {
 });
 
 const searchAsyncData = useAsyncData('search', async () => {
+    selected.value = null;
     if (queryValidation.value !== undefined) {
         return [];
     }
@@ -41,6 +42,7 @@ const open = () => {
     query.value = '';
     searchAsyncData.clear();
     dialogue.value?.showModal();
+    selected.value = null;
 };
 
 const close = () => {
@@ -65,6 +67,34 @@ const onMousedown = (event: MouseEvent) => {
     }
 };
 
+const selected = ref<number | null>(null);
+const router = useRouter();
+onKeyStroke('ArrowDown', () => {
+    selected.value = Math.min(
+        (selected.value ?? -1) + 1,
+        (searchAsyncData.data?.value?.length ?? 0) - 1,
+    );
+});
+onKeyStroke('ArrowUp', () => {
+    selected.value = Math.max(
+        (selected.value ?? -1) - 1,
+        0,
+    );
+});
+onKeyStroke('Enter', () => {
+    if (selected.value === null) {
+        return;
+    }
+
+    const document = searchAsyncData.data.value?.[selected.value];
+    if (!document) {
+        return;
+    }
+
+    router.push(document.url);
+    close();
+});
+
 defineExpose({ open, close });
 </script>
 
@@ -93,9 +123,9 @@ defineExpose({ open, close });
             class="list-group"
         >
             <li
-                v-for="document of searchAsyncData.data.value"
+                v-for="(document, index) of searchAsyncData.data.value"
                 :key="`${document.kind}-${document.id}`"
-                class="list-group-item list-group-item-action p-0"
+                :class="['list-group-item list-group-item-action p-0', selected === index ? 'list-group-item-hover' : '']"
             >
                 <SearchItem :document="document" @click="close()" />
             </li>
@@ -105,3 +135,12 @@ defineExpose({ open, close });
         </div>
     </dialog>
 </template>
+
+<style lang="scss">
+@import "assets/variables";
+
+.list-group-item-hover {
+    background-color: $list-group-hover-bg !important;
+    border-left: 3px solid $primary !important;
+}
+</style>

From 1b2e2fbbf2f5535a2dd8266b34e5af64ad933475 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sun, 29 Dec 2024 15:30:23 +0100
Subject: [PATCH 2/2] (styling)(search)

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

diff --git a/components/search/SearchDialogue.vue b/components/search/SearchDialogue.vue
index 836927d7f..44e2578d9 100644
--- a/components/search/SearchDialogue.vue
+++ b/components/search/SearchDialogue.vue
@@ -125,7 +125,7 @@ defineExpose({ open, close });
             <li
                 v-for="(document, index) of searchAsyncData.data.value"
                 :key="`${document.kind}-${document.id}`"
-                :class="['list-group-item list-group-item-action p-0', selected === index ? 'list-group-item-hover' : '']"
+                :class="['list-group-item list-group-item-action p-0', selected === index ? 'list-group-item-active' : '']"
             >
                 <SearchItem :document="document" @click="close()" />
             </li>
@@ -139,8 +139,9 @@ defineExpose({ open, close });
 <style lang="scss">
 @import "assets/variables";
 
-.list-group-item-hover {
+.list-group-item-active {
     background-color: $list-group-hover-bg !important;
     border-left: 3px solid $primary !important;
+    margin-inline-start: -2px; /** compensate for the border mark, minus 1px (regular border) */
 }
 </style>