feat: add media tab (#137)

components/common/CommonTabs.vue

@@ -13,7 +13,7 @@ function toValidName(otpion: string) {
 </script>
 
 <template>
-  <div flex w-full text-lg>
+  <div flex w-full items-center lg:text-lg>
     <template v-for="option in options" :key="option">
       <input
         :id="`tab-${toValidName(option)}`"
@@ -24,13 +24,13 @@ function toValidName(otpion: string) {
         display="none"
         @change="modelValue = option"
       ><label
-        flex flex-1 cursor-pointer p3 m1 rounded transition-all
+        flex flex-auto cursor-pointer p3 m1 rounded transition-all
         :for="`tab-${toValidName(option)}`"
         tabindex="1"
         hover:bg-active transition-100
         @keypress.enter="modelValue = option"
       ><span
-        mxa px2
+        mxa px2 text-center
         :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
       >{{ option }}</span>
       </label>

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

@@ -3,16 +3,26 @@ const params = useRoute().params
 const accountName = $computed(() => params.account as string)
 
 const account = await fetchAccountByName(accountName)
-const tabNames = ['Posts', 'Posts and replies'] as const
+const tabNames = ['Posts', 'Posts & replies', 'Media'] as const
 
 // Don't use local storage because it is better to default to Posts every time you visit a user's profile.
 const tab = $ref('Posts')
 
 const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true })
 const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false })
+const paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
 
 const paginator = $computed(() => {
-  return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply
+  switch (tab) {
+    case 'Posts & replies':
+      return paginatorPostsWithReply
+
+    case 'Media':
+      return paginatorMedia
+
+    default:
+      return paginatorPosts
+  }
 })
 </script>