feat: add account tab pages (#422)

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

@@ -11,12 +11,6 @@ const { t } = useI18n()
 const { data: account, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null)))
 const relationship = $computed(() => account ? useRelationship(account).value : undefined)
 
-if (account) {
-  useHeadFixed({
-    title: () => `${getDisplayName(account)} (@${account.acct})`,
-  })
-}
-
 onReactivated(() => {
   // Silently update data when reentering the page
   // The user will see the previous content first, and any changes will be updated to the UI when the request is completed

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { t } = useI18n()
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
@@ -6,6 +7,12 @@ definePageMeta({ name: 'account-followers' })
 
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().accounts.iterateFollowers(account.id, {}) : null
+
+if (account) {
+  useHeadFixed({
+    title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account})`,
+  })
+}
 </script>
 
 <template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { t } = useI18n()
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
@@ -6,6 +7,12 @@ definePageMeta({ name: 'account-following' })
 
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().accounts.iterateFollowing(account.id, {}) : null
+
+if (account) {
+  useHeadFixed({
+    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account})`,
+  })
+}
 </script>
 
 <template>

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

@@ -1,52 +1,31 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
+import AccountTabs from '~/components/account/AccountTabs.vue'
 
 const params = useRoute().params
 const handle = $(computedEager(() => params.account as string))
 
 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.iterateStatuses(account.value!.id, { excludeReplies: true })
-const paginatorPostsWithReply = useMasto().accounts.iterateStatuses(account.value!.id, { excludeReplies: false })
-const paginatorMedia = useMasto().accounts.iterateStatuses(account.value!.id, { onlyMedia: true, excludeReplies: false })
+const { data: account } = await useAsyncData(`account:${handle}`, async () => (
+  window.history.state?.account as Account | undefined)
+    ?? await fetchAccountByHandle(handle),
+)
 
-const tabs = $computed(() => [
-  {
-    name: 'posts',
-    display: t('tab.posts'),
-    icon: 'i-ri:file-list-2-line',
-    paginator: paginatorPosts,
-  },
-  {
-    name: 'relies',
-    display: t('tab.posts_with_replies'),
-    icon: 'i-ri:chat-3-line',
-    paginator: paginatorPostsWithReply,
-  },
-  {
-    name: 'media',
-    display: t('tab.media'),
-    icon: 'i-ri:camera-2-line',
-    paginator: paginatorMedia,
-  },
-] as const)
+const paginator = useMasto().accounts.iterateStatuses(account.value!.id, { excludeReplies: true })
 
-// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
-const tab = $ref(tabs[0].name)
-const paginator = $computed(() => tabs.find(t => t.name === tab)!.paginator)
+if (account) {
+  useHeadFixed({
+    title: () => `${t('account.posts')} | ${getDisplayName(account.value!)} (@${account.value!.acct})`,
+  })
+}
 </script>
 
 <template>
   <div>
-    <CommonTabs v-model="tab" :options="tabs" command />
-    <KeepAlive>
-      <TimelinePaginator :key="tab" :paginator="paginator" context="account" />
-    </KeepAlive>
+    <AccountTabs />
+    <TimelinePaginator :paginator="paginator" context="account" />
   </div>
 </template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+definePageMeta({ name: 'account-media' })
+
+const { t } = useI18n()
+const params = useRoute().params
+const handle = $(computedEager(() => params.account as string))
+
+const { data: account } = await useAsyncData(`account:${handle}`, async () => (
+  window.history.state?.account as Account | undefined)
+    ?? await fetchAccountByHandle(handle),
+)
+
+const paginator = useMasto().accounts.iterateStatuses(account.value!.id, { onlyMedia: true, excludeReplies: false })
+
+if (account) {
+  useHeadFixed({
+    title: () => `${t('tab.media')} | ${getDisplayName(account.value!)} (@${account.value!.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <TimelinePaginator :paginator="paginator" context="account" />
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+definePageMeta({ name: 'account-replies' })
+
+const { t } = useI18n()
+const params = useRoute().params
+const handle = $(computedEager(() => params.account as string))
+
+const { data: account } = await useAsyncData(`account:${handle}`, async () => (
+  window.history.state?.account as Account | undefined)
+    ?? await fetchAccountByHandle(handle),
+)
+
+const paginator = useMasto().accounts.iterateStatuses(account.value!.id, { excludeReplies: false })
+
+if (account) {
+  useHeadFixed({
+    title: () => `${t('tab.posts_with_replies')} | ${getDisplayName(account.value!)} (@${account.value!.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <TimelinePaginator :paginator="paginator" context="account" />
+  </div>
+</template>