chore: cleanup, typescript

components/app/Lunr.vue

@@ -1,35 +1,11 @@
 <template>
   <div key="outputHash">
-    <div
+    <AppSearchEntry
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
-      class="
-        cursor-pointer
-        flex
-        py-2
-        px-4
-        transition
-        items-center
-        group
-        hover:bg-primaryLight
-      "
-      @click="$emit('action', shortcut.action)"
-    >
-      <SmartIcon
-        class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
-        :name="shortcut.icon"
-      />
-      <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
-        {{ $t(shortcut.label) }}
-      </span>
-      <span
-        v-for="(key, keyIndex) in shortcut.keys"
-        :key="`shortcut-${shortcutIndex}-key-${keyIndex}`"
-        class="shortcut-key"
-      >
-        {{ key }}
-      </span>
-    </div>
+      :shortcut="shortcut"
+      @action="$emit('action', shortcut.action)"
+    />
     <div
       v-if="theOutput.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
@@ -223,14 +199,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

components/app/Search.vue

@@ -13,9 +13,7 @@
           border-b border-dividerLight
           flex flex-shrink-0
           text-secondaryDark text-base
-          leading-normal
-          py-4
-          px-6
+          p-6
         "
       />
       <AppLunr
@@ -40,53 +38,21 @@
           <h5 class="my-2 text-secondaryLight py-2 px-6">
             {{ $t(map.section) }}
           </h5>
-          <div
+          <AppSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            class="
-              cursor-pointer
-              flex
-              py-2
-              px-6
-              transition
-              items-center
-              group
-              hover:bg-primaryLight
-            "
-            @click="runAction(shortcut.action)"
-          >
-            <SmartIcon
-              class="
-                mr-4
-                opacity-75
-                transition
-                svg-icons
-                group-hover:opacity-100
-              "
-              :name="shortcut.icon"
-            />
-            <span
-              class="flex flex-1 mr-4 transition group-hover:text-secondaryDark"
-            >
-              {{ $t(shortcut.label) }}
-            </span>
-            <span
-              v-for="(key, keyIndex) in shortcut.keys"
-              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
-              class="shortcut-key"
-            >
-              {{ key }}
-            </span>
-          </div>
+            :shortcut="shortcut"
+            @action="runAction"
+          />
         </div>
       </div>
     </template>
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { invokeAction } from "~/helpers/actions"
+import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight, lunr } from "~/helpers/shortcuts"
 
 export default defineComponent({
@@ -105,21 +71,10 @@ export default defineComponent({
       this.search = ""
       this.$emit("hide-modal")
     },
-    runAction(command) {
-      invokeAction(command, "path_from_invokeAction")
+    runAction(command: HoppAction) {
+      invokeAction(command)
       this.hideModal()
     },
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

components/app/SearchEntry.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="
+      cursor-pointer
+      flex
+      py-2
+      px-6
+      transition
+      items-center
+      group
+      hover:bg-primaryLight
+    "
+    @click="$emit('action', shortcut.action)"
+  >
+    <SmartIcon
+      class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
+      :name="shortcut.icon"
+    />
+    <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
+      {{ $t(shortcut.label) }}
+    </span>
+    <span
+      v-for="(key, keyIndex) in shortcut.keys"
+      :key="`key-${keyIndex}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  shortcut: Object
+}>()
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>