feat: notification improvements (#396)

components/notification/NotificationPaginator.vue

@@ -1,45 +1,90 @@
 <script setup lang="ts">
 import type { Notification, Paginator, WsEvents } from 'masto'
-import type { GroupedNotifications } from '~/types'
+import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
 const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Notification[]>
   stream?: WsEvents
 }>()
 
-function groupItems(items: Notification[]): (Notification | GroupedNotifications)[] {
-  const results: (Notification | GroupedNotifications)[] = []
+const groupCapacity = Number.MAX_VALUE // No limit
+const minFollowGroupSize = 5 // Below this limit, show a profile card for each follow
+
+// 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[] = []
 
   let id = 0
-  let followGroup: Notification[] = []
+  let currentGroupId = ''
+  let currentGroup: Notification[] = []
+  const processGroup = () => {
+    if (currentGroup.length === 0)
+      return
 
-  const bump = () => {
-    const alwaysGroup = true
-    if (!alwaysGroup && followGroup.length === 1) {
-      results.push(followGroup[0])
-      followGroup = []
-    }
-    else if (followGroup.length > 0) {
+    const group = currentGroup
+    currentGroup = []
+
+    // 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' && group.length > minFollowGroupSize) {
       results.push({
         id: `grouped-${id++}`,
-        type: 'grouped-follow',
-        items: followGroup,
+        type: `grouped-${group[0].type}`,
+        items: group,
       })
-      followGroup = []
+      return
     }
+
+    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) => b.reblog && !a.reblog ? 1 : -1)
+      results.push({
+        id: `grouped-${id++}`,
+        type: 'grouped-reblogs-and-favourites',
+        status,
+        likes,
+      })
+      return
+    }
+
+    results.push(...group)
   }
 
   for (const item of items) {
-    if (item.type === 'follow') {
-      followGroup.push(item)
-    }
-    else {
-      bump()
-      results.push(item)
-    }
-  }
+    const itemId = groupId(item)
+    // Finalize group if it already has too many notifications
+    if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
+      processGroup()
 
-  bump()
+    currentGroup.push(item)
+    currentGroupId = itemId
+  }
+  // Finalize remaining groups
+  processGroup()
 
   return results
 }
@@ -48,7 +93,7 @@ const { clearNotifications } = useNotifications()
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator" :stream="stream" event-type="notification">
+  <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]) }}
@@ -61,6 +106,11 @@ const { clearNotifications } = useNotifications()
           :items="item"
           border="b base"
         />
+        <NotificationGroupedLikes
+          v-else-if="item.type === 'grouped-reblogs-and-favourites'"
+          :group="item"
+          border="b base"
+        />
         <NotificationCard
           v-else
           :notification="item"