elk/components/notification/NotificationPaginator.vue

138 lines
4.4 KiB
Vue
Raw Normal View History

2022-11-15 21:21:54 +00:00
<script setup lang="ts">
2023-01-05 16:48:20 +00:00
// type used in <template>
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import type { Notification, Paginator, WsEvents } from 'masto'
2023-01-05 16:48:20 +00:00
// type used in <template>
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
2023-01-06 18:50:31 +00:00
import type { GroupedAccountLike, GroupedLikeNotifications, NotificationSlot } from '~/types'
2022-11-15 21:21:54 +00:00
const { paginator, stream } = defineProps<{
2022-11-15 21:21:54 +00:00
paginator: Paginator<any, Notification[]>
stream?: Promise<WsEvents>
2022-11-15 21:21:54 +00:00
}>()
2022-11-30 00:47:54 +00:00
2022-12-11 22:40:40 +00:00
const groupCapacity = Number.MAX_VALUE // No limit
// Group by type (and status when applicable)
const groupId = (item: Notification): string => {
// If the update is related to an status, group notifications from the same account (boost + favorite the same status)
const id = item.status
? {
status: item.status?.id,
type: (item.type === 'reblog' || item.type === 'favourite') ? 'like' : item.type,
}
: {
type: item.type,
}
return JSON.stringify(id)
}
function groupItems(items: Notification[]): NotificationSlot[] {
const results: NotificationSlot[] = []
2022-11-30 00:47:54 +00:00
let id = 0
2022-12-11 22:40:40 +00:00
let currentGroupId = ''
let currentGroup: Notification[] = []
const processGroup = () => {
if (currentGroup.length === 0)
return
const group = currentGroup
currentGroup = []
2022-11-30 00:47:54 +00:00
2022-12-11 22:40:40 +00:00
// Only group follow notifications when there are too many in a row
// This normally happens when you transfer an account, if not, show
// a big profile card for each follow
if (group[0].type === 'follow') {
const toGroup = []
for (const item of group) {
const hasHeader = !item.account.header.endsWith('/original/missing.png')
if (hasHeader && (item.account.followersCount > 250 || (group.length === 1 && item.account.followersCount > 25)))
results.push(item)
else
toGroup.push(item)
}
if (toGroup.length > 0) {
results.push({
id: `grouped-${id++}`,
type: `grouped-${group[0].type}`,
items: toGroup,
})
}
2022-12-11 22:40:40 +00:00
return
2022-11-30 00:47:54 +00:00
}
2022-12-11 22:40:40 +00:00
const { status } = group[0]
if (status && group.length > 1 && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
// All notifications in these group are reblogs or favourites of the same status
const likes: GroupedAccountLike[] = []
for (const notification of group) {
let like = likes.find(like => like.account.id === notification.account.id)
if (!like) {
like = { account: notification.account }
likes.push(like)
}
like[notification.type === 'reblog' ? 'reblog' : 'favourite'] = notification
}
likes.sort((a, b) => a.reblog ? !b.reblog || (a.favourite && !b.favourite) ? -1 : 0 : 0)
2022-11-30 00:47:54 +00:00
results.push({
id: `grouped-${id++}`,
2022-12-11 22:40:40 +00:00
type: 'grouped-reblogs-and-favourites',
status,
likes,
2022-11-30 00:47:54 +00:00
})
2022-12-11 22:40:40 +00:00
return
2022-11-30 00:47:54 +00:00
}
2022-12-11 22:40:40 +00:00
results.push(...group)
2022-11-30 00:47:54 +00:00
}
for (const item of items) {
2022-12-11 22:40:40 +00:00
const itemId = groupId(item)
// Finalize group if it already has too many notifications
if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
processGroup()
2022-11-30 00:47:54 +00:00
2022-12-11 22:40:40 +00:00
currentGroup.push(item)
currentGroupId = itemId
}
// Finalize remaining groups
processGroup()
2022-11-30 00:47:54 +00:00
return results
}
const { clearNotifications } = useNotifications()
const { formatNumber } = useHumanReadableNumber()
2022-11-15 21:21:54 +00:00
</script>
<template>
2022-12-11 22:40:40 +00:00
<CommonPaginator :paginator="paginator" :stream="stream" :eager="3" event-type="notification">
<template #updater="{ number, update }">
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
</button>
</template>
2022-11-30 00:47:54 +00:00
<template #items="{ items }">
<template v-for="item of groupItems(items)" :key="item.id">
<NotificationGroupedFollow
v-if="item.type === 'grouped-follow'"
:items="item"
border="b base"
2022-11-30 00:47:54 +00:00
/>
2022-12-11 22:40:40 +00:00
<NotificationGroupedLikes
v-else-if="item.type === 'grouped-reblogs-and-favourites'"
2023-01-05 16:48:20 +00:00
:group="item as GroupedLikeNotifications"
2022-12-11 22:40:40 +00:00
border="b base"
/>
2022-11-30 00:47:54 +00:00
<NotificationCard
v-else
2023-01-05 16:48:20 +00:00
:notification="item as Notification"
2022-11-30 00:47:54 +00:00
hover:bg-active
border="b base"
2022-11-30 00:47:54 +00:00
/>
</template>
2022-11-16 16:11:08 +00:00
</template>
</CommonPaginator>
2022-11-15 21:21:54 +00:00
</template>