feat: resolve status paths with router (#258)

pages/@[account]/[status].vue

@@ -2,12 +2,16 @@
 import type { Status } from 'masto'
 import type { ComponentPublicInstance } from 'vue'
 
+definePageMeta({
+  name: 'status',
+})
+
 const route = useRoute()
 const id = $(computedEager(() => route.params.status as string))
 const main = ref<ComponentPublicInstance | null>(null)
 let bottomSpace = $ref(0)
 
-const { data: status, pending, refresh: refreshStatus } = useAsyncData(async () => (
+const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
   window.history.state?.status as Status | undefined)
   ?? await fetchStatus(id),
 )

pages/@[account]/index/followers.vue

@@ -2,6 +2,8 @@
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
+definePageMeta({ name: 'account-followers' })
+
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().accounts.getFollowersIterable(account.id, {}) : null
 </script>

pages/@[account]/index/following.vue

@@ -2,6 +2,8 @@
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
+definePageMeta({ name: 'account-following' })
+
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().accounts.getFollowingIterable(account.id, {}) : null
 </script>

pages/@[account]/index/index.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import type { Account } from 'masto'
+
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
-const account = await fetchAccountByHandle(handle)
+definePageMeta({ name: 'account-index' })
+
+const { data: account } = await useAsyncData(`account:${handle}`, async () => (
+  window.history.state?.account as Account | undefined)
+  ?? await fetchAccountByHandle(handle),
+)
 const { t } = useI18n()
 
-const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true })
-const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false })
-const paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
+const paginatorPosts = useMasto().accounts.getStatusesIterable(account.value!.id, { excludeReplies: true })
+const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.value!.id, { excludeReplies: false })
+const paginatorMedia = useMasto().accounts.getStatusesIterable(account.value!.id, { onlyMedia: true, excludeReplies: false })
 
 const tabs = $computed(() => [
   {

pages/[...permalink].vue

@@ -2,6 +2,7 @@
 import { parseURL } from 'ufo'
 
 definePageMeta({
+  name: 'permalink',
   middleware: async (to) => {
     const HANDLED_MASTO_URL = /^(https?:\/\/)?(\w+\.)+\w+\/(@[@\w\d\.]+)(\/\d+)?$/
     try {
@@ -24,16 +25,11 @@ definePageMeta({
       const { value } = await useMasto().search({ q: permalink, resolve: true, limit: 1 }).next()
 
       const { accounts, statuses } = value
-      if (statuses[0]) {
-        return {
-          path: getStatusPath(statuses[0]),
-          state: {
-            status: statuses[0] as any,
-          },
-        }
-      }
+      if (statuses[0])
+        return getStatusRoute(statuses[0])
+
       if (accounts[0])
-        return getAccountPath(accounts[0])
+        return getAccountRoute(accounts[0])
     }
     catch {}
 

pages/status/[status].vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 definePageMeta({
+  name: 'status-by-id',
   middleware: async (to) => {
     const params = to.params
     const id = params.status as string
     const status = await fetchStatus(id)
-    return {
-      path: getStatusPath(status),
-      state: {
-        status: status as any,
-      },
-    }
+    return getStatusRoute(status)
   },
 })
 </script>