feat: notifications (#7)
parent
b455c37c10
commit
47968146a8
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue