From 7cd5410dd8b5ea30108dd3da75f6ac48b9cf3a50 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 8 Apr 2024 22:51:32 +0200
Subject: [PATCH] Added relative date to event popover

---
 .../calendar/CalendarEventDetails.vue         | 22 ++++++++++++-------
 src/components/calendar/CalendarMenu.vue      |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 819cdbc..9ed82e3 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -1,13 +1,18 @@
 <script lang="ts" setup>
+import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
 
-import { PopoverContent } from '@/components/ui/popover'
+import { PhHourglassMedium } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
+import { PopoverContent } from '@/components/ui/popover'
 
-const { getFormattedDateTitle } = useCalendar()
+const { defaultDate, getFormattedDateTitle } = useCalendar()
 
-defineProps<{ event: CalendarEvent }>()
+const props = defineProps<{ event: CalendarEvent }>()
+
+const dateDifference = computed(() => getRelativeString(defaultDate, props.event.date))
 </script>
 
 <template>
@@ -17,8 +22,11 @@ defineProps<{ event: CalendarEvent }>()
         {{ event.title }}
       </div>
 
-      <div>
-        {{ getFormattedDateTitle(event.date, true) }}
+      <div class="mb-1 space-y-1">
+        <p class="font-semibold">{{ getFormattedDateTitle(event.date, true) }}</p>
+        <p class="text-sm italic opacity-75 flex items-center gap-1">
+          <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
+        </p>
       </div>
 
       <div v-if="event.category || event.secondaryCategories">
@@ -37,9 +45,7 @@ defineProps<{ event: CalendarEvent }>()
         </ul>
       </div>
 
-      <hr class="my-2" />
-
-      <div class="italic text-slate-500">
+      <div class="mt-2 italic text-sm text-slate-500">
         {{ event.description }}
       </div>
     </div>
diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 62b02cd..ca6d2a1 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { getRelativeString } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
-import { PhMapPin } from '@phosphor-icons/vue'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
+import { PhMapPin } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'