Group notifications for the same card as they show up

app/javascript/controllers/notifications_tray_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "notification", "hiddenNotifications" ]
+  static classes = [ "grouped" ]
+
+  notificationTargetConnected(notification) {
+    this.#groupNotificationIfNeeded(notification)
+  }
+
+  #groupNotificationIfNeeded(notification) {
+    const groupedNotifications = this.#groupedNotificationsFor(notification)
+
+    if (groupedNotifications.length > 1) {
+      this.#renderGroup(groupedNotifications)
+    }
+  }
+
+  #groupedNotificationsFor(notification) {
+    const cardId = notification.dataset.cardId
+    return this.notificationTargets
+      .filter(notification => notification.dataset.cardId === cardId)
+      .sort((notification_1, notification_2) => parseInt(notification_1.dataset.timestamp) - parseInt(notification_2.dataset.timestamp))
+  }
+
+  #renderGroup(groupedNotifications) {
+    this.#showAsGrouped(groupedNotifications[0], groupedNotifications.length)
+    groupedNotifications.slice(1).forEach(notification => this.#hideInGroup(notification))
+  }
+
+  #showAsGrouped(notification, size) {
+    notification.classList.add(this.groupedClass)
+    this.#showGroupedNotification(notification)
+    this.#setGroupCount(notification, size)
+  }
+
+  #hideInGroup(notification) {
+    this.#hideGroupedNotification(notification)
+    this.#setGroupCount(notification, "")
+  }
+
+  // We use a hidden container instead of hiding the notifications directly so that the CSS that sort the
+  // tray element indexes doesn't get messed up.
+  #showGroupedNotification(notification) {
+    if (notification.parentElement === this.hiddenNotificationsTarget) {
+      this.hiddenNotificationsTarget.parentElement.insertBefore(notification, this.hiddenNotificationsTarget)
+    }
+  }
+
+  #hideGroupedNotification(notification) {
+    this.hiddenNotificationsTarget.appendChild(notification)
+  }
+
+  #setGroupCount(notification, count) {
+    notification.querySelector("[data-group-count]").textContent = count
+  }
+}