From ef287b4f3646bf448740078aa5b7eccce02daaa4 Mon Sep 17 00:00:00 2001
From: Lucie <25330882+lihbr@users.noreply.github.com>
Date: Sat, 26 Nov 2022 12:36:23 -0500
Subject: [PATCH] feat: add media tab (#137)

---
 components/common/CommonTabs.vue |  6 +++---
 pages/@[account]/index/index.vue | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/common/CommonTabs.vue b/components/common/CommonTabs.vue
index c7b1eabb..8af14a3d 100644
--- a/components/common/CommonTabs.vue
+++ b/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>
diff --git a/pages/@[account]/index/index.vue b/pages/@[account]/index/index.vue
index a0b9409c..295da80e 100644
--- a/pages/@[account]/index/index.vue
+++ b/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>