From bf7ea8ec3f435df8f0091326eff763b9c24e1f43 Mon Sep 17 00:00:00 2001 From: Eli Bosley Date: Mon, 16 Dec 2024 14:28:23 -0500 Subject: [PATCH 01/13] 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 | 6201 ++++++++---------- web/package.json | 68 +- web/pages/index.vue | 7 + 9 files changed, 2759 insertions(+), 3743 deletions(-) diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue index 05f42c6311..2fec16a8a5 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; +});