diff --git a/src/app.css b/src/app.css index 26751dd5..0e50fd3b 100644 --- a/src/app.css +++ b/src/app.css @@ -820,6 +820,14 @@ meter.donut:is(.danger, .explode):after { filter: brightness(0.8); } +/* AVATARS STACK */ + +.avatars-stack { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + @media (min-width: 40em) { html, body { diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 378aca72..cf425c83 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -112,7 +112,7 @@ function Notification({ notification }) { </p> )} {_accounts?.length > 1 && ( - <p> + <p class="avatars-stack"> {_accounts.map((account, i) => ( <> <a @@ -126,7 +126,7 @@ function Notification({ notification }) { <Avatar url={account.avatarStatic} size={ - _accounts.length < 10 + _accounts.length < 30 ? 'xl' : _accounts.length < 100 ? 'l' @@ -163,28 +163,23 @@ function NotificationsList({ notifications, emptyCopy }) { // Create new flat list of notifications // Combine sibling notifications based on type and status id, ignore the id // Concat all notification.account into an array of _accounts - const cleanNotifications = [ - { - ...notifications[0], - _accounts: [notifications[0].account], - }, - ]; - for (let i = 1, j = 0; i < notifications.length; i++) { + const notificationsMap = {}; + const cleanNotifications = []; + for (let i = 0, j = 0; i < notifications.length; i++) { const notification = notifications[i]; - const cleanNotification = cleanNotifications[j]; - const { status, account, type } = notification; - if ( - account && - cleanNotification?.account && - cleanNotification?.status?.id === status?.id && - cleanNotification?.type === type - ) { - cleanNotification._accounts.push(account); + // const cleanNotification = cleanNotifications[j]; + const { status, account, type, created_at } = notification; + const createdAt = new Date(created_at).toLocaleDateString(); + const key = `${status?.id}-${type}-${createdAt}`; + const mappedNotification = notificationsMap[key]; + if (mappedNotification?.account) { + mappedNotification._accounts.push(account); } else { - cleanNotifications[++j] = { + let n = (notificationsMap[key] = { ...notification, _accounts: [account], - }; + }); + cleanNotifications[j++] = n; } } // console.log({ notifications, cleanNotifications });