diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue index a3d0eca8..d919942d 100644 --- a/components/notification/NotificationCard.vue +++ b/components/notification/NotificationCard.vue @@ -1,16 +1,38 @@ <script setup lang="ts"> import type { mastodon } from 'masto' +// Add undocumented 'annual_report' type introduced in v4.3 +// ref. https://github.com/mastodon/documentation/issues/1211#:~:text=api/v1/annual_reports +type NotificationType = mastodon.v1.Notification['type'] | 'annual_report' +type Notification = Omit<mastodon.v1.Notification, 'type'> & { type: NotificationType } + const { notification } = defineProps<{ - notification: mastodon.v1.Notification + notification: Notification }>() const { t } = useI18n() +// list of notification types Elk currently implemented +// type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes +const supportedNotificationTypes: NotificationType[] = [ + 'follow', + 'admin.sign_up', + 'admin.report', + 'follow_request', + 'update', + 'mention', + 'poll', + 'update', + 'status', + 'annual_report', +] + // well-known emoji reactions types Elk does not support yet const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction'] -if (unsupportedEmojiReactionTypes.includes(notification.type)) + +if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotificationTypes.includes(notification.type)) { console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`) +} </script> <template> @@ -95,11 +117,21 @@ if (unsupportedEmojiReactionTypes.includes(notification.type)) <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'"> <StatusCard :status="notification.status!" /> </template> - <template v-else-if="!unsupportedEmojiReactionTypes.includes(notification.type)"> - <!-- prevent showing errors for dev for known emoji reaction types --> - <!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes --> - <div text-red font-bold> - [DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}' + <template v-else-if="notification.type === 'annual_report'"> + <div flex p4 items-center bg-shaded> + <div i-mdi:party-popper text-xl me-4 color-purple /> + <div class="content-rich"> + <p> + Your 2024 <NuxtLink to="/tags/Wrapstodon"> + #Wrapstodon + </NuxtLink> awaits! Unveil your year's highlights and memorable moments on Mastodon! + </p> + <p> + <NuxtLink :to="`https://${currentServer}/notifications`" target="_blank"> + View #Wrapstodon on Mastodon + </NuxtLink> + </p> + </div> </div> </template> </article>