chore: cleanup, typescript

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>