74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Notification, Paginator, WsEvents } from 'masto'
|
|
import type { GroupedNotifications } from '~/types'
|
|
|
|
const { paginator, stream } = defineProps<{
|
|
paginator: Paginator<any, Notification[]>
|
|
stream?: WsEvents
|
|
}>()
|
|
|
|
function groupItems(items: Notification[]): (Notification | GroupedNotifications)[] {
|
|
const results: (Notification | GroupedNotifications)[] = []
|
|
|
|
let id = 0
|
|
let followGroup: Notification[] = []
|
|
|
|
const bump = () => {
|
|
const alwaysGroup = true
|
|
if (!alwaysGroup && followGroup.length === 1) {
|
|
results.push(followGroup[0])
|
|
followGroup = []
|
|
}
|
|
else if (followGroup.length > 0) {
|
|
results.push({
|
|
id: `grouped-${id++}`,
|
|
type: 'grouped-follow',
|
|
items: followGroup,
|
|
})
|
|
followGroup = []
|
|
}
|
|
}
|
|
|
|
for (const item of items) {
|
|
if (item.type === 'follow') {
|
|
followGroup.push(item)
|
|
}
|
|
else {
|
|
bump()
|
|
results.push(item)
|
|
}
|
|
}
|
|
|
|
bump()
|
|
|
|
return results
|
|
}
|
|
|
|
const { clearNotifications } = useNotifications()
|
|
</script>
|
|
|
|
<template>
|
|
<CommonPaginator :paginator="paginator" :stream="stream" 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]) }}
|
|
</button>
|
|
</template>
|
|
<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"
|
|
/>
|
|
<NotificationCard
|
|
v-else
|
|
:notification="item"
|
|
hover:bg-active
|
|
border="b base"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</CommonPaginator>
|
|
</template>
|