feat: add account tab pages (#422)

components/account/AccountTabs.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const route = useRoute()
+
+const server = $(computedEager(() => route.params.server as string))
+const account = $(computedEager(() => route.params.account as string))
+
+const tabs = $computed(() => [
+  {
+    name: 'account-index',
+    to: {
+      name: 'account-index',
+      params: { server, account },
+    },
+    display: t('tab.posts'),
+    icon: 'i-ri:file-list-2-line',
+  },
+  {
+    name: 'account-replies',
+    to: {
+      name: 'account-replies',
+      params: { server, account },
+    },
+    display: t('tab.posts_with_replies'),
+    icon: 'i-ri:chat-3-line',
+  },
+  {
+    name: 'account-media',
+    to: {
+      name: 'account-media',
+      params: { server, account },
+    },
+    display: t('tab.media'),
+    icon: 'i-ri:camera-2-line',
+  },
+] as const)
+</script>
+
+<template>
+  <CommonRouteTabs force :options="tabs" prevent-scroll-top command />
+</template>

components/common/CommonRouteTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
-const { options, command, replace } = $defineProps<{
+const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: {
     to: RouteLocationRaw
     display: string
@@ -10,6 +10,7 @@ const { options, command, replace } = $defineProps<{
   }[]
   command?: boolean
   replace?: boolean
+  preventScrollTop?: boolean
 }>()
 
 const router = useRouter()
@@ -36,7 +37,7 @@ useCommands(() => command
       tabindex="1"
       hover:bg-active transition-100
       exact-active-class="children:(font-bold !border-primary !op100)"
-      @click="$scrollToTop"
+      @click="!preventScrollTop && $scrollToTop()"
     >
       <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
     </NuxtLink>