feat: posts and mentions in profile (#17)

zio/stable
patak 2022-11-20 22:38:52 +01:00 committed by GitHub
parent 2442c80bfb
commit 5d5cdebb56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 13 deletions

View File

@ -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>

View File

@ -7,12 +7,23 @@ const params = useRoute().params
const user = $computed(() => params.user as string) const user = $computed(() => params.user as string)
const masto = await useMasto() const masto = await useMasto()
const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })) 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> </script>
<template> <template>
<div> <div>
<AccountHeader :account="account" /> <AccountHeader :account="account" />
</div> </div>
<TimelinePaginator :paginator="paginator" /> <CommonTabs v-model="tab" :options="tabNames" />
<TimelinePaginator :key="tab" :paginator="paginator" />
</template> </template>

View File

@ -1,16 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import type { FetchNotificationsParams } from 'masto'
definePageMeta({ definePageMeta({
middleware: 'auth', middleware: 'auth',
}) })
const masto = await useMasto() 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(() => { const paginator = $computed(() => {
return masto.notifications.getIterator(tab === 'all' ? undefined : { types: ['mention'] }) return masto.notifications.getIterator(tab === 'All' ? undefined : { types: ['mention'] })
}) })
</script> </script>
@ -23,13 +22,7 @@ const paginator = $computed(() => {
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div color-gray i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <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" /> <NotificationPaginator :key="tab" :paginator="paginator" />
</slot> </slot>
</MainContent> </MainContent>