feat: add media tab (#137)
parent
ad8b878120
commit
ef287b4f36
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue