Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

feat: posts and mentions in profile (#17)

Browse source
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
components/common/CommonTabs.vue Normal file
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>

15
pages/@[user]/index.vue
View file

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

15
pages/notifications.vue
View file

@ -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 tab = $(useLocalStorage<typeof tabNames[number]>('nuxtodon-notifications-tab', 'all'))
const tabNames = ['All', 'Mentions'] as const
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>
<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>
<CommonTabs v-model="tab" :options="tabNames" />
<NotificationPaginator :key="tab" :paginator="paginator" />
</slot>
</MainContent>