From 92850861cd9c8b44b4b17247e2cf56075b01e121 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 17:20:21 +0200
Subject: [PATCH] Added private event visual feedback

---
 components/calendar/CalendarEvent.vue         |  1 +
 components/calendar/CalendarEventDetails.vue  | 16 ++++++++++++++-
 .../calendar/search/lists/EventCallout.vue    | 20 ++++++++++++++++---
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 8abdc39..96b530d 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -60,6 +60,7 @@ onMounted(() => {
         class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200"
         :class="
           cn({
+            'italic': event.hidden,
             'text-white bg-slate-600 hover:bg-slate-700': !event.category,
             'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
             'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 3ae0c96..27013ba 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -9,7 +9,8 @@ import {
   PhHourglassHigh,
   PhHourglassLow,
   PhMapPinArea,
-  PhDotsThreeOutlineVertical
+  PhDotsThreeOutlineVertical,
+  PhEye
 } from '@phosphor-icons/vue'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
@@ -189,6 +190,19 @@ function deployDeleteModal() {
         </button>
       </UiBadge>
     </nav>
+
+    <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
+      <UiTooltip>
+        <UiTooltipTrigger as-child>
+          <UiBadge class="absolute -top-2 right-2 flex gap-1 hover:bg-slate-300 hover:opacity-100">
+            <PhEye size="16" weight="fill" /> Évènement privé
+          </UiBadge>
+        </UiTooltipTrigger>
+        <UiTooltipContent>
+          <p>Cet évènement est uniquement visible pour vous</p>
+        </UiTooltipContent>
+      </UiTooltip>
+    </UiTooltipProvider>
   </UiPopoverContent>
 </template>
 
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index 9eef932..85f9a03 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -3,7 +3,7 @@ import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
 
 const props = defineProps<{
   event: CalendarEvent
@@ -27,6 +27,7 @@ const dateDuration: string | null = props.event.endDate
   <button
     class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
     :class="{
+      'pt-4': event.hidden,
       'text-white bg-slate-600 hover:bg-slate-700': !event.category,
       'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
       'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
@@ -49,8 +50,8 @@ const dateDuration: string | null = props.event.endDate
     }"
     @click="$emit('query:date-jump', event.startDate)"
   >
-    <div class="flex gap-2 items-center">
-      <h2 class="font-bold">
+    <div class="flex gap-2 items-center mb-1">
+      <h2 class="font-bold text-lg">
         {{ event.title }}
       </h2>
       <div v-if="event.wiki">
@@ -115,5 +116,18 @@ const dateDuration: string | null = props.event.endDate
         {{ event.description }}
       </span>
     </div>
+
+    <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
+      <UiTooltip>
+        <UiTooltipTrigger as-child>
+          <UiBadge class="absolute -top-2 left-2 flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
+            <PhEye size="16" weight="fill" /> Évènement privé
+          </UiBadge>
+        </UiTooltipTrigger>
+        <UiTooltipContent>
+          <p>Cet évènement est uniquement visible pour vous</p>
+        </UiTooltipContent>
+      </UiTooltip>
+    </UiTooltipProvider>
   </button>
 </template>