From d62cd1dea17312789ac80c06a32117aef0d3a8fd Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 3 Apr 2024 17:42:46 +0200
Subject: [PATCH] Added tooltips to facilitate navigation

---
 src/components/calendar/CalendarEvent.vue     | 12 +--
 src/components/calendar/CalendarMenu.vue      | 89 +++++++++++++------
 src/components/calendar/CalendarTile.vue      |  7 +-
 src/components/calendar/state/Monthly.vue     | 22 ++++-
 src/components/ui/tooltip/Tooltip.vue         | 19 ++++
 src/components/ui/tooltip/TooltipContent.vue  | 48 ++++++++++
 src/components/ui/tooltip/TooltipProvider.vue | 11 +++
 src/components/ui/tooltip/TooltipTrigger.vue  | 11 +++
 src/components/ui/tooltip/index.ts            |  4 +
 9 files changed, 182 insertions(+), 41 deletions(-)
 create mode 100644 src/components/ui/tooltip/Tooltip.vue
 create mode 100644 src/components/ui/tooltip/TooltipContent.vue
 create mode 100644 src/components/ui/tooltip/TooltipProvider.vue
 create mode 100644 src/components/ui/tooltip/TooltipTrigger.vue
 create mode 100644 src/components/ui/tooltip/index.ts

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index f4b9f29..a022479 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -1,26 +1,20 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/stores/events'
 import CalendarEventDetails from './CalendarEventDetails.vue'
 
-const props = defineProps<{
+defineProps<{
   event: CalendarEvent
 }>()
-
-const eventTitleExcerpt = computed(() => {
-  if (props.event.title.length > 20) return props.event.title.substring(0, 20) + '…'
-  return props.event.title
-})
 </script>
 
 <template>
   <Popover>
     <PopoverTrigger as-child>
       <button
-        class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
+        class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800 whitespace-nowrap overflow-hidden text-ellipsis"
       >
-        {{ eventTitleExcerpt }}
+        {{ event.title }}
       </button>
     </PopoverTrigger>
 
diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 3ec3693..b8a91fd 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import {
   Select,
   SelectContent,
@@ -7,17 +8,22 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/calendar'
 import Button from '../ui/button/Button.vue'
 
 const {
   currentConfig,
   currentDate,
+  defaultDate,
   viewTypeOptions,
   decrementMonth,
   incrementMonth,
-  jumpToDefaultDate
+  jumpToDefaultDate,
+  getFormattedDateTitle
 } = useCalendar()
+
+const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, true))
 </script>
 
 <template>
@@ -28,39 +34,66 @@ const {
           <div class="flex items-center gap-6">
             <menu class="flex items-center gap-2">
               <li>
-                <Button @click="jumpToDefaultDate" size="sm"> Today </Button>
+                <TooltipProvider :delayDuration="250">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Button @click="jumpToDefaultDate" size="sm"> Aujourd'hui </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{{ defaultDateFormatted }}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </li>
               <li>
                 <!-- Implement decrementDate to account for other mods -->
-                <Button variant="outline" size="icon" @click="decrementMonth">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    fill="#FFF"
-                    viewBox="0 0 256 256"
-                  >
-                    <path
-                      d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
-                    />
-                  </svg>
-                </Button>
+                <TooltipProvider :delayDuration="250">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Button variant="outline" size="icon" @click="decrementMonth">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          fill="#FFF"
+                          viewBox="0 0 256 256"
+                        >
+                          <path
+                            d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+                          />
+                        </svg>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Mois précédent</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </li>
               <li>
                 <!-- Implement decrementDate to account for other mods -->
-                <Button variant="outline" size="icon" @click="incrementMonth">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    fill="#FFF"
-                    viewBox="0 0 256 256"
-                  >
-                    <path
-                      d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
-                    />
-                  </svg>
-                </Button>
+                <TooltipProvider :delayDuration="250">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Button variant="outline" size="icon" @click="incrementMonth">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          fill="#FFF"
+                          viewBox="0 0 256 256"
+                        >
+                          <path
+                            d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+                          />
+                        </svg>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Mois suivant</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </li>
             </menu>
             <h1 class="text-2xl font-bold">
diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index 8be0e3e..f3529f2 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -40,8 +40,11 @@ const isDefaultDate = computed(() => {
         >{{ date.day }}</span
       >
     </div>
-    <ul v-if="eventsForTheDay.length > 0" class="absolute top-12 bottom-0 inset-x-2 grid gap-1">
-      <li v-for="event in eventsForTheDay" :key="event.title">
+    <ul
+      v-if="eventsForTheDay.length > 0"
+      class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1"
+    >
+      <li v-for="event in eventsForTheDay" :key="event.title" class="grid">
         <CalendarEvent :event />
       </li>
     </ul>
diff --git a/src/components/calendar/state/Monthly.vue b/src/components/calendar/state/Monthly.vue
index 9e13931..46f36c5 100644
--- a/src/components/calendar/state/Monthly.vue
+++ b/src/components/calendar/state/Monthly.vue
@@ -3,8 +3,9 @@ import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
 import { computed } from 'vue'
 import CalendarTile from '../CalendarTile.vue'
+import { useThrottleFn } from '@vueuse/core'
 
-const { staticConfig, currentDate } = useCalendar()
+const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
 const daysPerMonth = computed(() => staticConfig.daysPerMonth)
 
@@ -32,10 +33,27 @@ function getNextMonthDate(day: number): LeimDate {
     period: nextPeriod
   }
 }
+
+function handleWheel(e: WheelEvent) {
+  const isMovingUp = e.deltaY < 0
+  if (isMovingUp) {
+    moveCalendarLeft()
+  } else {
+    moveCalendarRight()
+  }
+}
+
+const moveCalendarLeft = useThrottleFn(() => {
+  decrementMonth()
+}, 100)
+
+const moveCalendarRight = useThrottleFn(() => {
+  incrementMonth()
+}, 100)
 </script>
 
 <template>
-  <div class="grid" :class="`grid-cols-10`">
+  <div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
     <CalendarTile
       v-for="day in daysPerMonth"
       :key="day"
diff --git a/src/components/ui/tooltip/Tooltip.vue b/src/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..3581ace
--- /dev/null
+++ b/src/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  TooltipRoot,
+  type TooltipRootEmits,
+  type TooltipRootProps,
+  useForwardPropsEmits
+} from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/src/components/ui/tooltip/TooltipContent.vue b/src/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..fdaaf77
--- /dev/null
+++ b/src/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  TooltipContent,
+  type TooltipContentEmits,
+  type TooltipContentProps,
+  TooltipPortal,
+  useForwardPropsEmits
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4
+  }
+)
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/src/components/ui/tooltip/TooltipProvider.vue b/src/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..816505d
--- /dev/null
+++ b/src/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/src/components/ui/tooltip/TooltipTrigger.vue b/src/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..f5b0e57
--- /dev/null
+++ b/src/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/src/components/ui/tooltip/index.ts b/src/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..82049b4
--- /dev/null
+++ b/src/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'