feat: allow searching for statuses (#632)

components/search/SearchResult.vue

@@ -11,6 +11,7 @@ const onActivate = () => {
   <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>
       {{ result.action!.label }}
     </div>

components/search/SearchWidget.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const query = ref('')
-const { accounts, hashtags, loading } = useSearch(query)
+const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
 
 const { t } = useI18n()
@@ -13,8 +13,9 @@ const results = computed(() => {
     return []
 
   const results = [
-    ...hashtags.value.slice(0, 3).map(hashtag => ({ type: 'hashtag', hashtag, to: `/tags/${hashtag.name}` })),
-    ...accounts.value.map(account => ({ type: 'account', account, to: `/@${account.acct}` })),
+    ...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) })),
 
     // Disable until search page is implemented
     // {

components/search/types.ts

@@ -1,10 +1,11 @@
-import type { Account } from 'masto'
+import type { Account, Status } from 'masto'
 
 export interface SearchResult {
-  type: 'account' | 'hashtag' | 'action'
+  type: 'account' | 'hashtag' | 'action' | 'status'
   to: string
   label?: string
   account?: Account
+  status?: Status
   hashtag?: any
   action?: {
     label: string

components/status/StatusCard.vue

@@ -145,7 +145,7 @@ const isDM = $computed(() => status.visibility === 'direct')
               <StatusEditIndicator :status="status" inline />
             </div>
           </div>
-          <StatusActionsMore :status="status" mr--2 />
+          <StatusActionsMore v-if="actions !== false" :status="status" mr--2 />
         </div>
         <StatusContent :status="status" :context="context" mb2 :class="{ mt2: isDM }" />
         <div>

composables/masto.ts

@@ -111,6 +111,16 @@ export function getStatusRoute(status: Status) {
   })
 }
 
+export function getTagRoute(tag: string) {
+  return useRouter().resolve({
+    name: 'tag',
+    params: {
+      server: currentServer.value,
+      tag,
+    },
+  })
+}
+
 export function getStatusPermalinkRoute(status: Status) {
   return status.url ? withoutProtocol(status.url) : null
 }

composables/search.ts

@@ -7,6 +7,7 @@ export interface UseSearchOptions {
 
 export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
   const done = ref(false)
+  const masto = useMasto()
   const loading = ref(false)
   const statuses = ref<Status[]>([])
   const accounts = ref<Account[]>([])
@@ -24,7 +25,7 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
      * Based on the source it seems like modifying the params when calling next would result in a new search,
      * but that doesn't seem to be the case. So instead we just create a new paginator with the new params.
      */
-    paginator = useMasto().search({ q: unref(query), type: unref(options?.type) })
+    paginator = masto.search({ q: unref(query), resolve: true, type: unref(options?.type) })
     const nextResults = await paginator.next()
 
     done.value = nextResults.done || false

pages/[[server]]/tags/[tag].vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  name: 'tag',
+})
+
 const params = useRoute().params
 const tagName = $(computedEager(() => params.tag as string))