feat: posts and mentions in profile (#17)

components/common/CommonTabs.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  options: string[]
+}>()
+defineEmits(['update:modelValue'])
+
+function toValidName(otpion: string) {
+  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+}
+</script>
+
+<template>
+  <div flex w-full>
+    <template v-for="option in options" :key="option">
+      <input
+        :id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)"
+      ><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label>
+    </template>
+  </div>
+</template>

pages/@[user]/index.vue

@@ -7,12 +7,23 @@ const params = useRoute().params
 const user = $computed(() => params.user as string)
 const masto = await useMasto()
 const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
-const paginator = masto.accounts.getStatusesIterable(account.value!.id!, {})
+
+const tabNames = ['Posts', 'Posts and replies'] 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 paginator = $computed(() => {
+  // bug in Masto.js, it should convert `excludeReplies` to `exclude_replies`
+  // https://github.com/neet/masto.js/issues/689
+  return masto.accounts.getStatusesIterable(account.value!.id!, { exclude_replies: tab === 'Posts' } as any)
+})
 </script>
 
 <template>
   <div>
     <AccountHeader :account="account" />
   </div>
-  <TimelinePaginator :paginator="paginator" />
+  <CommonTabs v-model="tab" :options="tabNames" />
+  <TimelinePaginator :key="tab" :paginator="paginator" />
 </template>

pages/notifications.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import type { FetchNotificationsParams } from 'masto'
 definePageMeta({
   middleware: 'auth',
 })
 
 const masto = await useMasto()
 
-const tabNames = ['all', 'mentions'] as const
+const tabNames = ['All', 'Mentions'] as const
-const tab = $(useLocalStorage<typeof tabNames[number]>('nuxtodon-notifications-tab', 'all'))
+const tab = $(useLocalStorage<typeof tabNames[number]>('nuxtodon-notifications-tab', 'All'))
 
 const paginator = $computed(() => {
-  return masto.notifications.getIterator(tab === 'all' ? undefined : { types: ['mention'] })
+  return masto.notifications.getIterator(tab === 'All' ? undefined : { types: ['mention'] })
 })
 </script>
 
@@ -23,13 +22,7 @@ const paginator = $computed(() => {
       <div color-gray i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
-      <div flex w-full>
+      <CommonTabs v-model="tab" :options="tabNames" />
-        <template v-for="type in tabNames" :key="type">
-          <input
-            :id="`tab-${type}`" v-model="tab" :value="type" type="radio" name="tabs" display="none"
-          ><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${type}`" :class="tab === type ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="tab = type">{{ type }}</label>
-        </template>
-      </div>
       <NotificationPaginator :key="tab" :paginator="paginator" />
     </slot>
   </MainContent>