elk/components/notification/NotificationPaginator.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>