feat: introduce lru cache for requests

components/status/StatusCard.vue

@@ -30,8 +30,7 @@ function onclick(e: MouseEvent) {
 }
 
 function go() {
-  // cache data
-  useNuxtApp().payload.data[`status-${status.id}`] = status
+  cacheStatus(status)
   router.push(getStatusPath(status))
 }
 
@@ -85,7 +84,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
         </div>
       </template>
     </AccountInfo>
-    <StatusReplyingTo :status="status" ml5 mt--1 />
+    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
     <div pl15>
       <StatusBody :status="status" />
       <StatusMedia

components/status/StatusDetails.vue

@@ -16,9 +16,9 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
 </script>
 
 <template>
-  <div flex flex-col gap-2 my-4 px-4>
+  <div flex flex-col gap-2 py3 px-4>
     <AccountInfo :account="status.account" />
-    <StatusReplyingTo :status="status" />
+    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusBody :status="status" text-2xl />
     <StatusMedia
       v-if="status.mediaAttachments?.length"

components/status/StatusReplyingTo.vue

@@ -5,21 +5,17 @@ const { status } = defineProps<{
   status: Status
 }>()
 
-const replyingTo = asyncComputed(async () => {
-  if (status.inReplyToAccountId)
-    return await masto.accounts.fetch(status.inReplyToAccountId)
-  return null
-})
+const account = await fetchAccount(status.inReplyToAccountId!)
 </script>
 
 <template>
-  <template v-if="replyingTo">
+  <template v-if="account">
     <div
       flex="~ gap-1.5" items-center text-sm text-gray:85
-      :title="`Replying to ${getDisplayName(replyingTo)}`"
+      :title="`Replying to ${getDisplayName(account)}`"
     >
       <div i-ri:reply-fill rotate-180 op50 />
-      <AccountInlineInfo :account="replyingTo" />
+      <AccountInlineInfo :account="account" />
     </div>
   </template>
 </template>