diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue index 05f42c631..2fec16a8a 100644 --- a/web/components/Notifications/Item.vue +++ b/web/components/Notifications/Item.vue @@ -11,6 +11,8 @@ import { import { useMutation } from '@vue/apollo-composable'; import type { NotificationFragmentFragment } from '~/composables/gql/graphql'; import { NotificationType } from '~/composables/gql/graphql'; +import { format } from 'date-fns'; +import { enGB, enUS } from 'date-fns/locale'; import { archiveNotification as archiveMutation, deleteNotification as deleteMutation, @@ -63,13 +65,26 @@ const deleteNotification = reactive( const mutationError = computed(() => { return archive.error?.message ?? deleteNotification.error?.message; }); + +const reformattedTimestamp = computed(() => { + const userLocale = navigator.language ?? 'en-US'; // Get the user's browser language (e.g., 'en-US', 'fr-FR') + + const reformattedDate = new Intl.DateTimeFormat(userLocale, { + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + hour12: + ['AM', 'PM'].includes(props.formattedTimestamp ?? 'AM') + }).format(new Date(props.timestamp ?? new Date())); + return reformattedDate; +});