diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkNotifications.vue | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 46e98462dc..6cd55ffedd 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only :moveClass=" $style.transition_x_move" tag="div" > - <div v-for="(notification, i) in notifications" :key="notification.id"> + <div v-for="(notification, i) in sortedByTime(notifications)" :key="notification.id"> <DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/> <XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/> </div> @@ -67,6 +67,20 @@ const pagination = computed(() => prefer.r.useGroupedNotifications.value ? { })), }); +// for pagination reasons, each notification group needs to have the +// id of the oldest notification inside it, but we want to show the +// groups sorted by the time of the *newest* notification; so we re-sort +// them here +function sortedByTime(notifications) { + return notifications.toSorted( + (a, b) => { + if (a.createdAt < b.createdAt) return 1; + if (a.createdAt > b.createdAt) return -1; + return 0; + } + ); +} + function onNotification(notification) { const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false; if (isMuted || window.document.visibilityState === 'visible') { |