feat: introduce lru cache for requests

pages/@[account]/followers.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const params = useRoute().params
-const user = $computed(() => params.user as string)
+const accountName = $computed(() => params.account as string)
 
-const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const account = await fetchAccountByName(accountName)
 const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
 </script>
 

pages/@[account]/following.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const params = useRoute().params
-const user = $computed(() => params.user as string)
+const accountName = $computed(() => params.account as string)
 
-const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const account = await fetchAccountByName(accountName)
 const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
 </script>
 

pages/@[account]/index.vue

@@ -4,10 +4,9 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
-const user = $computed(() => params.user as string)
-
-const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const accountName = $computed(() => params.account as string)
 
+const account = await fetchAccountByName(accountName)
 const tabNames = ['Posts', 'Posts and replies'] as const
 
 // Don't use local storage because it is better to default to Posts every time you visit a user's profile.

pages/status/[status].vue

@@ -2,22 +2,22 @@
 import type { Component } from 'vue'
 
 const params = useRoute().params
-const id = computed(() => params.post as string)
+const id = $computed(() => params.status as string)
 const main = ref<Component | null>(null)
 
-const { data: status } = await useAsyncData(`status-${id}`, () => masto.statuses.fetch(params.post as string))
-const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fetchContext(params.post as string))
+const status = await fetchStatus(id)
+const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
 </script>
 
 <template>
   <template v-if="status">
     <template v-if="context">
       <template v-for="comment of context?.ancestors" :key="comment.id">
-        <StatusCard :status="comment" border="t base" pt-4 />
+        <StatusCard :status="comment" border="t base" py3 />
       </template>
     </template>
 
-    <StatusDetails ref="main" :status="status" border="t base" pt-4 />
+    <StatusDetails ref="main" :status="status" border="t base" />
     <div v-if="currentUser" border="t base" p6 flex gap-4>
       <AccountAvatar :account="currentUser.account" w-10 h-10 />
       <PublishWidget
@@ -30,7 +30,7 @@ const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fet
 
     <template v-if="context">
       <template v-for="comment of context?.descendants" :key="comment.id">
-        <StatusCard :status="comment" border="t base" pt-4 />
+        <StatusCard :status="comment" border="t base" py3 />
       </template>
     </template>
   </template>