teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: notification type selector (#16)

Browse source
This commit is contained in:
patak 2022-11-19 16:15:19 +01:00 committed by GitHub
parent 1aa81a3a0a
commit 230f5111ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
pages/notifications.vue
View file

@ -1,10 +1,17 @@
<script setup lang="ts">
import type { FetchNotificationsParams } from 'masto'
definePageMeta({
middleware: 'auth',
})
const masto = await useMasto()
const paginator = masto.notifications.getIterator()
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'] })
})
</script>
<template>
@ -16,7 +23,14 @@ const paginator = masto.notifications.getIterator()
<div color-gray i-ri:equalizer-fill mr-1 h-6 />
</template>
<slot>
<NotificationPaginator :paginator="paginator" />
<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>
<NotificationPaginator :key="tab" :paginator="paginator" />
</slot>
</MainContent>
</template>