From cead97560c71afdccaef0e7f1ebc52bab04166a1 Mon Sep 17 00:00:00 2001 From: Eli Bosley Date: Mon, 16 Dec 2024 14:28:23 -0500 Subject: [PATCH] feat: responsive notifications --- web/components/Notifications/Item.vue | 34 +- web/components/Notifications/List.vue | 6 +- web/components/Notifications/Sidebar.vue | 144 +- web/components/shadcn/sheet/Sheet.vue | 14 +- web/components/shadcn/sheet/SheetContent.vue | 5 + web/components/shadcn/tabs/TabsContent.vue | 23 +- web/package-lock.json | 6109 ++++++++---------- web/package.json | 68 +- web/pages/index.vue | 7 + 9 files changed, 2713 insertions(+), 3697 deletions(-) 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; +});