feat: notifications (#7)

zio/stable
patak 2022-11-15 22:21:54 +01:00 committed by GitHub
parent b455c37c10
commit 47968146a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 0 deletions

View File

@ -0,0 +1,40 @@
<script setup lang="ts">
import type { Notification } from 'masto'
defineProps<{
notification: Notification
}>()
</script>
<template>
<div flex flex-col>
<template v-if="notification.type === 'follow'">
<div flex ml-4>
<div i-ri:user-follow-fill mr-3 color-purple />{{ notification.account.displayName }} followed you
</div>
<AccountCard :account="notification.account" p3 />
</template>
<template v-if="notification.type === 'follow_request'">
<div flex ml-4>
<div i-ri:user-follow-fill mr-3 color-gray />{{ notification.account.displayName }} requested to follow you
</div>
<!-- TODO: accept request -->
<AccountCard :account="notification.account" p3 />
</template>
<template v-if="notification.type === 'favourite'">
<div flex ml-4>
<div i-ri:heart-fill mr-3 color-red />{{ notification.account.displayName }} favourited your post
</div>
<StatusCard :status="notification.status!" p3 />
</template>
<template v-if="notification.type === 'reblog'">
<div flex ml-4>
<div i-ri:repeat-fill mr-3 color-green />{{ notification.account.displayName }} reblogged your post
</div>
<StatusCard :status="notification.status!" p3 />
</template>
<template v-if="notification.type === 'mention' || notification.type === 'poll'">
<StatusCard :status="notification.status!" p3 />
</template>
</div>
</template>

View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import type { Notification, Paginator } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Notification[]>
}>()
const { items: notifications, isLoading, isDone, endAnchor } = usePaginator(paginator)
</script>
<template>
<template v-for="notification of notifications" :key="notification.id">
<NotificationCard :notification="notification" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
</template>

View File

@ -0,0 +1,22 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth',
})
const masto = await useMasto()
const paginator = masto.notifications.getIterator()
</script>
<template>
<MainContent>
<template #title>
<div i-ri:notification-2-fill h-6 mr-1 /><span>Notifications</span>
</template>
<template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 />
</template>
<slot>
<NotificationPaginator :paginator="paginator" />
</slot>
</MainContent>
</template>