fix: type errors (#802)

components/search/SearchResult.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { SearchResult } from './types'
-defineProps<{ result: SearchResult; active: boolean }>()
+
+defineProps<{
+  result: SearchResult
+  active: boolean
+}>()
 
 const onActivate = () => {
   (document.activeElement as HTMLElement).blur()
@@ -10,10 +14,10 @@ const onActivate = () => {
 <template>
   <CommonScrollIntoView as="RouterLink" :active="active" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()">
     <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
-    <AccountInfo v-else-if="result.type === 'account'" :account="result.account" />
-    <StatusCard v-else-if="result.type === 'status'" :status="result.status" :actions="false" :show-reply-to="false" />
-    <div v-else-if="result.type === 'action'" text-center>
+    <AccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" />
+    <StatusCard v-else-if="result.type === 'status' && result.status" :status="result.status" :actions="false" :show-reply-to="false" />
+    <!-- <div v-else-if="result.type === 'action'" text-center>
       {{ result.action!.label }}
-    </div>
+    </div> -->
   </CommonScrollIntoView>
 </template>

components/search/SearchWidget.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { AccountResult, HashTagResult, StatusResult } from './types'
+
 const query = ref('')
 const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
@@ -13,9 +15,24 @@ const results = computed(() => {
     return []
 
   const results = [
-    ...hashtags.value.slice(0, 3).map(hashtag => ({ type: 'hashtag', hashtag, to: getTagRoute(hashtag.name) })),
-    ...accounts.value.map(account => ({ type: 'account', account, to: getAccountRoute(account) })),
-    ...statuses.value.map(status => ({ type: 'status', status, to: getStatusRoute(status) })),
+    ...hashtags.value.slice(0, 3).map<HashTagResult>(hashtag => ({
+      type: 'hashtag',
+      id: hashtag.id,
+      hashtag,
+      to: getTagRoute(hashtag.name),
+    })),
+    ...accounts.value.map<AccountResult>(account => ({
+      type: 'account',
+      id: account.id,
+      account,
+      to: getAccountRoute(account),
+    })),
+    ...statuses.value.map<StatusResult>(status => ({
+      type: 'status',
+      id: status.id,
+      status,
+      to: getStatusRoute(status),
+    })),
 
     // Disable until search page is implemented
     // {
@@ -79,7 +96,12 @@ const activate = () => {
           {{ t('search.search_desc') }}
         </span>
         <template v-if="!loading">
-          <SearchResult v-for="(result, i) in results" :key="result.to" :active="index === parseInt(i.toString())" :result="result" :tabindex="focused ? 0 : -1" />
+          <SearchResult
+            v-for="(result, i) in results" :key="result.id"
+            :active="index === parseInt(i.toString())"
+            :result="result"
+            :tabindex="focused ? 0 : -1"
+          />
         </template>
         <div v-else>
           <SearchResultSkeleton />

components/search/types.ts

@@ -1,13 +1,17 @@
 import type { Account, Status } from 'masto'
+import type { RouteLocation } from 'vue-router'
 
-export interface SearchResult {
-  type: 'account' | 'hashtag' | 'action' | 'status'
-  to: string
-  label?: string
-  account?: Account
-  status?: Status
-  hashtag?: any
-  action?: {
-    label: string
+export type BuildResult<K extends keyof any, T> = {
+  [P in K]: T
+} & {
+  id: string
+  type: K
+  to: RouteLocation & {
+    href: string
   }
 }
+export type HashTagResult = BuildResult<'hashtag', any>
+export type AccountResult = BuildResult<'account', Account>
+export type StatusResult = BuildResult<'status', Status>
+
+export type SearchResult = HashTagResult | AccountResult | StatusResult