refactor: search

components/search/SearchHashtagInfo.vue

@@ -22,7 +22,10 @@ const totalTrend = $computed(() =>
       <CommonTrending :history="hashtag.history" text-xs text-secondary truncate />
     </div>
     <div v-if="totalTrend" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
-      <CommonTrendingCharts :history="hashtag.history" text-xs text-secondary width="150" height="20" h-full w-full />
+      <CommonTrendingCharts
+        :history="hashtag.history" :width="150" :height="20"
+        text-xs text-secondary h-full w-full
+      />
     </div>
   </div>
 </template>

components/search/SearchResult.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SearchResult } from './types'
+import type { SearchResult } from '~/composables/masto/search'
 
 defineProps<{
   result: SearchResult
@@ -21,9 +21,9 @@ const onActivate = () => {
     :class="{ 'bg-active': active }"
     @click="() => onActivate()"
   >
-    <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
-    <SearchAccountInfo 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" />
+    <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.data" />
+    <SearchAccountInfo v-else-if="result.type === 'account'" :account="result.data" />
+    <StatusCard v-else-if="result.type === 'status'" :status="result.data" :actions="false" :show-reply-to="false" />
     <!-- <div v-else-if="result.type === 'action'" text-center>
       {{ result.action!.label }}
     </div> -->

components/search/SearchWidget.vue

@@ -1,6 +1,4 @@
 <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)
@@ -15,24 +13,9 @@ const results = computed(() => {
     return []
 
   const results = [
-    ...hashtags.value.slice(0, 3).map<HashTagResult>(hashtag => ({
-      type: 'hashtag',
-      id: `hashtag-${hashtag.name}`,
-      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),
-    })),
+    ...hashtags.value.slice(0, 3),
+    ...accounts.value,
+    ...statuses.value,
 
     // Disable until search page is implemented
     // {

components/search/types.ts

@@ -1,17 +0,0 @@
-import type { Account, Status, Tag } from 'masto'
-import type { RouteLocation } from 'vue-router'
-
-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', Tag>
-export type AccountResult = BuildResult<'account', Account>
-export type StatusResult = BuildResult<'status', Status>
-
-export type SearchResult = HashTagResult | AccountResult | StatusResult