refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+definePageMeta({ name: 'account-followers' })
+
+const account = await fetchAccountByHandle(handle.value)
+const paginator = account ? useMastoClient().v1.accounts.$select(account.id).followers.list() : null
+
+const isSelf = useSelfAccount(account)
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <template v-if="paginator">
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'followedBy' : undefined" context="followers" :account="account" />
+  </template>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+definePageMeta({ name: 'account-following' })
+
+const account = await fetchAccountByHandle(handle.value)
+const paginator = account ? useMastoClient().v1.accounts.$select(account.id).following.list() : null
+
+const isSelf = useSelfAccount(account)
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <template v-if="paginator">
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'following' : undefined" context="following" :account="account" />
+  </template>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+definePageMeta({ name: 'account-index' })
+
+const { t } = useI18n()
+
+const account = await fetchAccountByHandle(handle.value)
+
+// we need to ensure `pinned === true` on status
+// because this prop is appeared only on current account's posts
+function applyPinned(statuses: mastodon.v1.Status[]) {
+  return statuses.map((status) => {
+    status.pinned = true
+    return status
+  })
+}
+
+function reorderAndFilter(items: mastodon.v1.Status[]) {
+  return reorderedTimeline(items, 'account')
+}
+
+const pinnedPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ pinned: true })
+const postPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('nav.profile')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <TimelinePaginator :paginator="pinnedPaginator" :preprocess="applyPinned" context="account" :account="account" :end-message="false" />
+    <!-- Upper border -->
+    <div h="1px" w-auto bg-border mb-1 />
+    <TimelinePaginator :paginator="postPaginator" :preprocess="reorderAndFilter" context="account" :account="account" />
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+definePageMeta({ name: 'account-media' })
+
+const { t } = useI18n()
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+const account = await fetchAccountByHandle(handle.value)
+
+const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ onlyMedia: true, excludeReplies: false })
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('tab.media')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+definePageMeta({ name: 'account-replies' })
+
+const { t } = useI18n()
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+const account = await fetchAccountByHandle(handle.value)
+
+const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ excludeReplies: false })
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('tab.posts_with_replies')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
+  </div>
+</template>