diff --git a/src/components/notification.jsx b/src/components/notification.jsx index 20a101ab..ec5e69a3 100644 --- a/src/components/notification.jsx +++ b/src/components/notification.jsx @@ -39,16 +39,20 @@ const contentText = { mention: 'mentioned you in their post.', status: 'published a post.', reblog: 'boosted your post.', + 'reblog+account': (count) => `boosted ${count} of your posts.`, reblog_reply: 'boosted your reply.', follow: 'followed you.', follow_request: 'requested to follow you.', favourite: 'favourited your post.', + 'favourite+account': (count) => `favourited ${count} of your posts.`, favourite_reply: 'favourited your reply.', poll: 'A poll you have voted in or created has ended.', 'poll-self': 'A poll you have created has ended.', 'poll-voted': 'A poll you have voted in has ended.', update: 'A post you interacted with has been edited.', 'favourite+reblog': 'boosted & favourited your post.', + 'favourite+reblog+account': (count) => + `boosted & favourited ${count} of your posts.`, 'favourite+reblog_reply': 'boosted & favourited your reply.', }; @@ -90,12 +94,19 @@ function Notification({ notification, instance, reload }) { type === 'favourite' || type === 'favourite+reblog' ) { - text = - contentText[isReplyToOthers ? `${type}_reply` : type] || - contentText[type]; + if (_statuses?.length > 1) { + text = contentText[`${type}+account`]; + } else if (isReplyToOthers) { + text = contentText[`${type}_reply`]; + } else { + text = contentText[type]; + } } else { text = contentText[type]; } + if (typeof text === 'function') { + text = text(_statuses?.length || _accounts?.length); + } if (type === 'mention' && !status) { // Could be deleted @@ -206,7 +217,23 @@ function Notification({ notification, instance, reload }) { ))}

)} - {status && ( + {_statuses?.length > 1 && ( + + )} + {status && (!_statuses?.length || _statuses?.length <= 1) && ( .status { + font-size: calc(var(--text-size) * 0.9); max-height: 160px; overflow: hidden; /* fade out mask gradient bottom */ @@ -134,6 +135,40 @@ margin-bottom: 8px; } +.notification-group-statuses { + margin: 0; + padding: 0; + list-style: none; +} +.notification-group-statuses > li { + margin: 0; + padding: 0; + list-style: none; + position: relative; + counter-increment: index; +} +.notification-group-statuses > li:before { + content: counter(index); + position: absolute; + left: 0; + font-size: 10px; + padding: 8px; + color: var(--text-insignificant-color); +} +.notification-group-statuses > li + li { + margin-top: 8px; +} +.notification .notification-group-statuses .status-link { + max-height: 80px; +} +.notification .notification-group-statuses .status-link .status { + mask-image: linear-gradient( + rgba(0, 0, 0, 1) 50px, + rgba(0, 0, 0, 0.5) 70px, + transparent 79px + ); +} + #mentions-option { float: right; margin-top: 0.5em; diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx index eff19181..cbc80b48 100644 --- a/src/utils/group-notifications.jsx +++ b/src/utils/group-notifications.jsx @@ -37,7 +37,40 @@ function groupNotifications(notifications) { cleanNotifications[j++] = n; } } - return cleanNotifications; + + // 2nd pass to group "favourite+reblog"-type notifications by account if _accounts.length <= 1 + // This means one acount has favourited and reblogged the multiple statuses + // The grouped notification + // - type: "favourite+reblog+account" + // - _statuses: [status, status, ...] + const notificationsMap2 = {}; + const cleanNotifications2 = []; + for (let i = 0, j = 0; i < cleanNotifications.length; i++) { + const notification = cleanNotifications[i]; + const { account, _accounts, type, createdAt } = notification; + const date = new Date(createdAt).toLocaleDateString(); + if (type === 'favourite+reblog' && account && _accounts.length === 1) { + const key = `${account?.id}-${type}-${date}`; + const mappedNotification = notificationsMap2[key]; + if (mappedNotification) { + mappedNotification._statuses.push(notification.status); + } else { + let n = (notificationsMap2[key] = { + ...notification, + type, + _statuses: [notification.status], + }); + cleanNotifications2[j++] = n; + } + } else { + cleanNotifications2[j++] = notification; + } + } + + console.log({ notifications, cleanNotifications, cleanNotifications2 }); + + // return cleanNotifications; + return cleanNotifications2; } export default groupNotifications;