From 16395a22fc3843c672395b067b6dcfbada03cf7a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Apr 2024 19:40:01 +0200
Subject: [PATCH 1/9] Added test for more than 3 events per day

---
 src/components/calendar/CalendarTile.vue | 44 +++++++++++++++++++++---
 src/data/Events.ts                       | 24 +++++++++++--
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index 785b76b..8b89abe 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -2,15 +2,21 @@
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
+import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import CalendarEvent from './CalendarEvent.vue'
+import { computed, ref, type ComputedRef } from 'vue'
+
+import CalendarEventButton from './CalendarEvent.vue'
+import type { CalendarEvent } from '@/models/Events'
 
 const props = defineProps<{
   date: LeimDate
   faded?: boolean
 }>()
 
+const calendarTile = ref()
+const calendarEventsList = ref()
+
 const { defaultDate, selectDate } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
 const { currentEvents } = storeToRefs(useCalendarEvents())
@@ -28,10 +34,29 @@ const isDefaultDate = computed(() => {
 const isSelectedDate = computed(() => {
   return areDatesIdentical(props.date, selectedDate.value)
 })
+
+// Get bounding elements for both tile and events list
+const { height: tileHeight, top: tileTop } = useElementBounding(calendarTile)
+const { top: tileListTop } = useElementBounding(calendarEventsList)
+
+// Compute the available number of events that can be displayed from refs heights
+const numberOfEventsToFit: ComputedRef<number> = computed(() => {
+  if (!eventsForTheDay.value.length) return 0
+
+  return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40)
+})
+
+const eventsToDisplay: ComputedRef<CalendarEvent[]> = computed(() => {
+  return [...eventsForTheDay.value].splice(0, numberOfEventsToFit.value)
+})
+const eventsNotDisplayed = computed(
+  () => eventsForTheDay.value.length - eventsToDisplay.value.length
+)
 </script>
 
 <template>
   <div
+    ref="calendarTile"
     class="tile relative text-xs p-2 border-slate-700"
     :class="{
       'text-slate-500': props.faded,
@@ -57,14 +82,23 @@ const isSelectedDate = computed(() => {
     </button>
 
     <ul
-      v-if="eventsForTheDay.length > 0"
+      ref="calendarEventsList"
       class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
       :class="{
         'opacity-40': props.faded && !isSelectedDate
       }"
     >
-      <li v-for="event in eventsForTheDay" :key="event.title" class="grid pointer-events-auto">
-        <CalendarEvent :event />
+      <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
+        <CalendarEventButton :event />
+      </li>
+
+      <li class="pointer-events-auto">
+        <button
+          v-if="eventsNotDisplayed > 0"
+          class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer font-bold"
+        >
+          {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
+        </button>
       </li>
     </ul>
   </div>
diff --git a/src/data/Events.ts b/src/data/Events.ts
index bfd1b67..a53b881 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -114,7 +114,27 @@ export const regularEvents: CalendarEvent[] = [
     description:
       'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
     date: { day: 23, month: 8, year: 3209 },
-    category: 'inauguration',
-    hidden: true
+    category: 'inauguration'
+  },
+  {
+    title: 'Grande Banque Minérale de Cantane',
+    description:
+      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
+    date: { day: 23, month: 8, year: 3209 },
+    category: 'inauguration'
+  },
+  {
+    title: 'Grande Banque Minérale de Cantane',
+    description:
+      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
+    date: { day: 23, month: 8, year: 3209 },
+    category: 'inauguration'
+  },
+  {
+    title: 'Grande Banque Minérale de Cantane',
+    description:
+      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
+    date: { day: 23, month: 8, year: 3209 },
+    category: 'inauguration'
   }
 ]

From 9bf3eea22122f8b412500eb44876a24ff6e3ac9a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Apr 2024 22:40:44 +0200
Subject: [PATCH 2/9] Added background blend effect on calendar details

---
 .../calendar/CalendarEventDetails.vue         | 60 ++++++++++++++++++-
 tailwind.config.js                            | 22 ++++++-
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index dc4bf49..ca1e9ec 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -16,7 +16,26 @@ const dateDifference = computed(() => getRelativeString(defaultDate, props.event
 </script>
 
 <template>
-  <PopoverContent class="w-96" align="start" :align-offset="50" :collision-padding="20">
+  <PopoverContent
+    class="w-96"
+    align="start"
+    :align-offset="50"
+    :collision-padding="20"
+    :class="{
+      'border-slate-800': !event.category,
+      'border-lime-800': event.category === 'naissance',
+      'border-stone-800': event.category === 'mort',
+      'border-orange-800': event.category === 'catastrophe',
+      'border-pink-800': event.category === 'catastrophe naturelle',
+      'border-sky-800': event.category === 'législation',
+      'border-purple-800': event.category === 'religion',
+      'border-emerald-800': event.category === 'joueurs',
+      'border-amber-800': event.category === 'inauguration',
+      'border-green-800': event.category === 'invention',
+      'border-cyan-800': event.category === 'science',
+      'border-yellow-800': event.category === 'bénédiction'
+    }"
+  >
     <div class="grid gap-1">
       <div class="text-lg font-semibold">
         {{ event.title }}
@@ -51,3 +70,42 @@ const dateDifference = computed(() => getRelativeString(defaultDate, props.event
     </div>
   </PopoverContent>
 </template>
+
+<style lang="scss">
+.border-slate-800 {
+  background-color: color-mix(in srgb, var(--color-slate-800), var(--color-slate-950) 85%);
+}
+.border-lime-800 {
+  background-color: color-mix(in srgb, var(--color-lime-800), var(--color-slate-950) 85%);
+}
+.border-stone-800 {
+  background-color: color-mix(in srgb, var(--color-stone-800), var(--color-slate-950) 85%);
+}
+.border-orange-800 {
+  background-color: color-mix(in srgb, var(--color-orange-800), var(--color-slate-950) 85%);
+}
+.border-pink-800 {
+  background-color: color-mix(in srgb, var(--color-pink-800), var(--color-slate-950) 85%);
+}
+.border-sky-800 {
+  background-color: color-mix(in srgb, var(--color-sky-800), var(--color-slate-950) 85%);
+}
+.border-purple-800 {
+  background-color: color-mix(in srgb, var(--color-purple-800), var(--color-slate-950) 85%);
+}
+.border-emerald-800 {
+  background-color: color-mix(in srgb, var(--color-emerald-800), var(--color-slate-950) 85%);
+}
+.border-amber-800 {
+  background-color: color-mix(in srgb, var(--color-amber-800), var(--color-slate-950) 85%);
+}
+.border-green-800 {
+  background-color: color-mix(in srgb, var(--color-green-800), var(--color-slate-950) 85%);
+}
+.border-cyan-800 {
+  background-color: color-mix(in srgb, var(--color-cyan-800), var(--color-slate-950) 85%);
+}
+.border-yellow-800 {
+  background-color: color-mix(in srgb, var(--color-yellow-800), var(--color-slate-950) 85%);
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 09d66fc..ebda8b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -89,5 +89,25 @@ module.exports = {
       }
     }
   },
-  plugins: [animate]
+  plugins: [
+    animate,
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors'))
+      })
+    }
+  ]
 }

From cb1bd20b5bd82d937502ae2ba88f48fab9cff5e2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 24 Apr 2024 19:15:22 +0200
Subject: [PATCH 3/9] Added more than x event handling

---
 src/components/calendar/CalendarTile.vue | 36 +++++++++++++++++++-----
 src/data/Events.ts                       | 29 +++----------------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index 8b89abe..3d3a184 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -6,6 +6,7 @@ import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import CalendarEventButton from './CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
@@ -92,13 +93,34 @@ const eventsNotDisplayed = computed(
         <CalendarEventButton :event />
       </li>
 
-      <li class="pointer-events-auto">
-        <button
-          v-if="eventsNotDisplayed > 0"
-          class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer font-bold"
-        >
-          {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
-        </button>
+      <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
+        <Popover>
+          <PopoverTrigger as-child>
+            <button
+              class="text-xs px-2 py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:bg-slate-800"
+            >
+              {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent class="w-80" :align="'center'" :side="'right'">
+            <div class="text-center mb-4">
+              <span
+                class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
+              >
+                {{ date.day }}</span
+              >
+            </div>
+            <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">
+              <li
+                v-for="event in eventsForTheDay"
+                :key="event.title"
+                class="grid pointer-events-auto"
+              >
+                <CalendarEventButton :event />
+              </li>
+            </ul>
+          </PopoverContent>
+        </Popover>
       </li>
     </ul>
   </div>
diff --git a/src/data/Events.ts b/src/data/Events.ts
index a53b881..a2bd4f7 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -83,53 +83,32 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: '2ème disparation à Cantane',
-    description: 'Seconde victime de la série de disparitions qui affecte Cantane',
+    description: 'Donovane le mineur kéturien disparait sans laisser de traces.',
     date: { day: 32, month: 7, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '3ème disparation à Cantane',
-    description: 'Troisième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Sébastien, gredin sauride.',
     date: { day: 10, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '4ème disparation à Cantane',
-    description: 'Quatrième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
     date: { day: 19, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '5ème disparation à Cantane',
-    description: 'Cinquième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Mathilda Boulais, vendeuse de pierres.',
     date: { day: 22, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
-  {
-    title: 'Grande Banque Minérale de Cantane',
-    description:
-      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
-    date: { day: 23, month: 8, year: 3209 },
-    category: 'inauguration'
-  },
-  {
-    title: 'Grande Banque Minérale de Cantane',
-    description:
-      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
-    date: { day: 23, month: 8, year: 3209 },
-    category: 'inauguration'
-  },
-  {
-    title: 'Grande Banque Minérale de Cantane',
-    description:
-      'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
-    date: { day: 23, month: 8, year: 3209 },
-    category: 'inauguration'
-  },
   {
     title: 'Grande Banque Minérale de Cantane',
     description:

From 7c5de2654ef4d6eab9c9e0471e06c71fab46f0ee Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 25 Apr 2024 16:17:12 +0200
Subject: [PATCH 4/9] Added basic year view

---
 src/components/calendar/Calendar.vue          | 18 ++++----
 src/components/calendar/state/Year.vue        |  3 --
 .../{Century.vue => centennially/Layout.vue}  |  0
 .../{Decade.vue => decennially/Layout.vue}    |  0
 .../monthly/DayTile.vue}                      |  6 +--
 .../state/{Monthly.vue => monthly/Layout.vue} |  8 ++--
 .../calendar/state/yearly/DayTile.vue         | 43 +++++++++++++++++++
 .../calendar/state/yearly/Layout.vue          | 18 ++++++++
 .../calendar/state/yearly/MonthTile.vue       | 32 ++++++++++++++
 src/stores/CalendarStore.ts                   |  1 -
 10 files changed, 110 insertions(+), 19 deletions(-)
 delete mode 100644 src/components/calendar/state/Year.vue
 rename src/components/calendar/state/{Century.vue => centennially/Layout.vue} (100%)
 rename src/components/calendar/state/{Decade.vue => decennially/Layout.vue} (100%)
 rename src/components/calendar/{CalendarTile.vue => state/monthly/DayTile.vue} (97%)
 rename src/components/calendar/state/{Monthly.vue => monthly/Layout.vue} (91%)
 create mode 100644 src/components/calendar/state/yearly/DayTile.vue
 create mode 100644 src/components/calendar/state/yearly/Layout.vue
 create mode 100644 src/components/calendar/state/yearly/MonthTile.vue

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 1636137..dd739ea 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,28 +1,30 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed } from 'vue'
+
 import CalendarMenu from './CalendarMenu.vue'
-import Century from './state/Century.vue'
-import Decade from './state/Decade.vue'
-import Monthly from './state/Monthly.vue'
-import Year from './state/Year.vue'
+
+import MonthlyLayout from './state/monthly/Layout.vue'
+import CenturyLayout from './state/centennially/Layout.vue'
+import DecadeLayout from './state/decennially/Layout.vue'
+import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
 
 const currentViewComponent = computed(() => {
   switch (currentConfig.viewType) {
     case 'month':
-      return Monthly
+      return MonthlyLayout
 
     case 'year':
-      return Year
+      return YearLayout
 
     case 'decade':
-      return Decade
+      return DecadeLayout
 
     case 'century':
     default:
-      return Century
+      return CenturyLayout
   }
 })
 </script>
diff --git a/src/components/calendar/state/Year.vue b/src/components/calendar/state/Year.vue
deleted file mode 100644
index b5256a2..0000000
--- a/src/components/calendar/state/Year.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Annuel</div>
-</template>
diff --git a/src/components/calendar/state/Century.vue b/src/components/calendar/state/centennially/Layout.vue
similarity index 100%
rename from src/components/calendar/state/Century.vue
rename to src/components/calendar/state/centennially/Layout.vue
diff --git a/src/components/calendar/state/Decade.vue b/src/components/calendar/state/decennially/Layout.vue
similarity index 100%
rename from src/components/calendar/state/Decade.vue
rename to src/components/calendar/state/decennially/Layout.vue
diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/state/monthly/DayTile.vue
similarity index 97%
rename from src/components/calendar/CalendarTile.vue
rename to src/components/calendar/state/monthly/DayTile.vue
index 3d3a184..f1c3a4e 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/state/monthly/DayTile.vue
@@ -7,7 +7,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import CalendarEventButton from './CalendarEvent.vue'
+import CalendarEventButton from '../../CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
 const props = defineProps<{
@@ -107,8 +107,8 @@ const eventsNotDisplayed = computed(
               <span
                 class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
               >
-                {{ date.day }}</span
-              >
+                {{ date.day }}
+              </span>
             </div>
             <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">
               <li
diff --git a/src/components/calendar/state/Monthly.vue b/src/components/calendar/state/monthly/Layout.vue
similarity index 91%
rename from src/components/calendar/state/Monthly.vue
rename to src/components/calendar/state/monthly/Layout.vue
index 6d1bcae..4b48dd8 100644
--- a/src/components/calendar/state/Monthly.vue
+++ b/src/components/calendar/state/monthly/Layout.vue
@@ -4,7 +4,7 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 
-import CalendarTile from '../CalendarTile.vue'
+import DayTile from './DayTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
@@ -54,8 +54,8 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
-    <CalendarTile
+  <div class="grid grid-cols-10" @wheel="handleWheel">
+    <DayTile
       v-for="day in daysPerMonth"
       :key="day"
       :date="{
@@ -65,7 +65,7 @@ const moveCalendarRight = useThrottleFn(() => {
         period: currentDate.currentPeriod
       }"
     />
-    <CalendarTile
+    <DayTile
       v-for="nextMonthDay in 8"
       :key="nextMonthDay"
       faded
diff --git a/src/components/calendar/state/yearly/DayTile.vue b/src/components/calendar/state/yearly/DayTile.vue
new file mode 100644
index 0000000..332ffb3
--- /dev/null
+++ b/src/components/calendar/state/yearly/DayTile.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed, type ComputedRef } from 'vue'
+
+const { currentDate, defaultDate, selectDate } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+
+const props = defineProps<{
+  monthNumber: number
+  dayNumber: number
+}>()
+
+const tileDate: ComputedRef<LeimDate> = computed(() => {
+  return {
+    day: props.dayNumber,
+    month: props.monthNumber,
+    year: currentDate.currentYear
+  }
+})
+
+const isDefaultDate = computed(() => {
+  return areDatesIdentical(tileDate.value, defaultDate)
+})
+
+const isSelectedDate = computed(() => {
+  return areDatesIdentical(tileDate.value, selectedDate.value)
+})
+</script>
+
+<template>
+  <button
+    class="grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors hover:bg-slate-800 hover:border-slate-800"
+    :class="{
+      'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
+      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate
+    }"
+    @click="selectDate(tileDate)"
+  >
+    <span class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+  </button>
+</template>
diff --git a/src/components/calendar/state/yearly/Layout.vue b/src/components/calendar/state/yearly/Layout.vue
new file mode 100644
index 0000000..aea2a2b
--- /dev/null
+++ b/src/components/calendar/state/yearly/Layout.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
+
+import MonthTile from './MonthTile.vue'
+
+const { staticConfig } = useCalendar()
+
+const monthsPerYear = computed(() => staticConfig.monthsPerYear)
+</script>
+
+<template>
+  <div class="container mt-[10vh] mb-auto">
+    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/calendar/state/yearly/MonthTile.vue b/src/components/calendar/state/yearly/MonthTile.vue
new file mode 100644
index 0000000..e6600ac
--- /dev/null
+++ b/src/components/calendar/state/yearly/MonthTile.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed, type ComputedRef } from 'vue'
+
+import DayTile from './DayTile.vue'
+
+const { staticConfig, currentDate, getMonthName } = useCalendar()
+
+const props = defineProps<{
+  monthNumber: number
+}>()
+
+const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+const tileMonthName = computed(() => getMonthName(props.monthNumber))
+</script>
+
+<template>
+  <div>
+    <div class="font-medium">
+      {{ tileMonthName }}
+    </div>
+    <div class="grid grid-cols-7">
+      <DayTile
+        v-for="day in daysPerMonth"
+        :key="day"
+        :month-number="monthNumber"
+        :day-number="day"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index cd1aaed..087f38b 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -378,7 +378,6 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function jumpToDefaultDate(): void {
     jumpToDate(defaultDate.value)
-    currentConfig.value.viewType = 'month'
   }
 
   /**

From c0408470dd6e4186c4f6c5e0093e9e53d2d33599 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 25 Apr 2024 16:46:21 +0200
Subject: [PATCH 5/9] Added flexible nav functions

---
 src/components/calendar/CalendarMenuNav.vue | 148 ++++++++++++++++++--
 1 file changed, 139 insertions(+), 9 deletions(-)

diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index a3667eb..9442b65 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -9,8 +9,138 @@ import {
   PhCaretRight
 } from '@phosphor-icons/vue'
 import Button from '../ui/button/Button.vue'
+import { computed, type ComputedRef } from 'vue'
 
-const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
+interface DirectionLabels {
+  pastFar: string
+  pastNear: string
+  futureNear: string
+  futureFar: string
+}
+
+const { currentConfig, decrementMonth, incrementMonth, decrementYear, incrementYear } =
+  useCalendar()
+
+const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
+  switch (currentConfig.viewType) {
+    case 'month':
+      return {
+        pastFar: 'Année précédente',
+        pastNear: 'Mois précédent',
+        futureNear: 'Mois suivant',
+        futureFar: 'Année suivante'
+      }
+
+    case 'year':
+      return {
+        pastFar: 'Décennie précédente',
+        pastNear: 'Année précédente',
+        futureNear: 'Année suivante',
+        futureFar: 'Décennie suivante'
+      }
+
+    case 'decade':
+      return {
+        pastFar: 'Siècle précédent',
+        pastNear: 'Décennie précédente',
+        futureNear: 'Décennie suivante',
+        futureFar: 'Siècle suivant'
+      }
+
+    case 'century':
+    default:
+      return {
+        pastFar: 'Millénaire précédent',
+        pastNear: 'Siècle précédent',
+        futureNear: 'Siècle suivant',
+        futureFar: 'Millénaire suivant'
+      }
+  }
+})
+
+function toPastFar(): void {
+  switch (currentConfig.viewType) {
+    case 'month':
+      decrementYear()
+      break
+
+    case 'year':
+      decrementYear(10)
+      break
+
+    case 'decade':
+      decrementYear(100)
+      break
+
+    case 'century':
+    default:
+      decrementYear(1000)
+      break
+  }
+}
+
+function toPastNear(): void {
+  switch (currentConfig.viewType) {
+    case 'month':
+      decrementMonth()
+      break
+
+    case 'year':
+      decrementYear()
+      break
+
+    case 'decade':
+      decrementYear(10)
+      break
+
+    case 'century':
+    default:
+      decrementYear(100)
+      break
+  }
+}
+
+function toFutureNear(): void {
+  switch (currentConfig.viewType) {
+    case 'month':
+      incrementMonth()
+      break
+
+    case 'year':
+      incrementYear()
+      break
+
+    case 'decade':
+      incrementYear(10)
+      break
+
+    case 'century':
+    default:
+      incrementYear(100)
+      break
+  }
+}
+
+function toFutureFar(): void {
+  switch (currentConfig.viewType) {
+    case 'month':
+      incrementYear()
+      break
+
+    case 'year':
+      incrementYear(10)
+      break
+
+    case 'decade':
+      incrementYear(100)
+      break
+
+    case 'century':
+    default:
+      incrementYear(1000)
+      break
+  }
+}
 </script>
 
 <template>
@@ -19,12 +149,12 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
-          <Button variant="outline" size="icon" @click="decrementYear()">
+          <Button variant="outline" size="icon" @click="toPastFar()">
             <PhCaretDoubleLeft size="18" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Année précédente</p>
+          <p>{{ activeDirectionLabels.pastFar }}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
@@ -32,12 +162,12 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
-          <Button variant="outline" size="icon" @click="decrementMonth()">
+          <Button variant="outline" size="icon" @click="toPastNear()">
             <PhCaretLeft size="18" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Mois précédent</p>
+          <p>{{ activeDirectionLabels.pastNear }}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
@@ -45,12 +175,12 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
-          <Button variant="outline" size="icon" @click="incrementMonth()">
+          <Button variant="outline" size="icon" @click="toFutureNear()">
             <PhCaretRight size="18" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Mois suivant</p>
+          <p>{{ activeDirectionLabels.futureNear }}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
@@ -58,12 +188,12 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
-          <Button variant="outline" size="icon" @click="incrementYear()">
+          <Button variant="outline" size="icon" @click="toFutureFar()">
             <PhCaretDoubleRight size="18" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Année suivante</p>
+          <p>{{ activeDirectionLabels.futureFar }}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

From ee368f28c2ba8603610d0b5689080bd989f533d2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 27 Apr 2024 16:46:43 +0200
Subject: [PATCH 6/9] Optimized unnecessary reactivity

---
 src/components/calendar/Calendar.vue          |  8 ++--
 src/components/calendar/CalendarEvent.vue     |  2 +-
 .../calendar/CalendarEventDetails.vue         |  3 +-
 src/components/calendar/CalendarMenuToday.vue |  2 +-
 .../calendar/search/CalendarSearch.vue        |  4 +-
 .../calendar/state/monthly/Layout.vue         |  6 +--
 .../calendar/state/yearly/DayTile.vue         | 23 +++++++--
 .../calendar/state/yearly/Layout.vue          | 12 ++---
 .../calendar/state/yearly/MonthTile.vue       |  9 ++--
 src/stores/CalendarStore.ts                   |  3 +-
 src/stores/CharacterStore.ts                  |  9 +---
 src/stores/EventStore.ts                      | 48 ++++++++-----------
 12 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index dd739ea..746d0c9 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
+import { computed, type Component, type ComputedRef } from 'vue'
 
 import CalendarMenu from './CalendarMenu.vue'
 
@@ -11,7 +11,7 @@ import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
 
-const currentViewComponent = computed(() => {
+const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
     case 'month':
       return MonthlyLayout
@@ -32,6 +32,8 @@ const currentViewComponent = computed(() => {
 <template>
   <div class="h-full grid grid-rows-[auto,1fr]">
     <CalendarMenu />
-    <component :is="currentViewComponent" />
+    <KeepAlive>
+      <component :is="currentViewComponent" />
+    </KeepAlive>
   </div>
 </template>
diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 0feb07e..234b1f8 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -33,6 +33,6 @@ defineProps<{
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event />
+    <CalendarEventDetails :event v-once />
   </Popover>
 </template>
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index ca1e9ec..2211918 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -2,7 +2,6 @@
 import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
 
 import { PhHourglassMedium } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
@@ -12,7 +11,7 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 
 const props = defineProps<{ event: CalendarEvent }>()
 
-const dateDifference = computed(() => getRelativeString(defaultDate, props.event.date))
+const dateDifference: string = getRelativeString(defaultDate, props.event.date)
 </script>
 
 <template>
diff --git a/src/components/calendar/CalendarMenuToday.vue b/src/components/calendar/CalendarMenuToday.vue
index f660bf0..0c3e2b7 100644
--- a/src/components/calendar/CalendarMenuToday.vue
+++ b/src/components/calendar/CalendarMenuToday.vue
@@ -10,7 +10,7 @@ import { areDatesIdentical } from '@/models/Date'
 const { defaultDate, selectedDate } = storeToRefs(useCalendar())
 const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
-const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate.value, true))
+const defaultDateFormatted = getFormattedDateTitle(defaultDate.value, true)
 
 const isDefaultDate = computed(() => {
   return areDatesIdentical(selectedDate.value, defaultDate.value)
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 91623c7..e001f6e 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -289,10 +289,10 @@ function handleCategorySelect(e: any) {
               v-model="selectedEntity"
               @update:model-value="handleEntitySwitch()"
             >
-              <ToggleGroupItem value="events" aria-label="Uniquement les évènements">
+              <ToggleGroupItem value="events" aria-label="Uniquement les évènements" v-once>
                 Évènements
               </ToggleGroupItem>
-              <ToggleGroupItem value="characters" aria-label="Uniquement les personnages">
+              <ToggleGroupItem value="characters" aria-label="Uniquement les personnages" v-once>
                 Personnages
               </ToggleGroupItem>
             </ToggleGroup>
diff --git a/src/components/calendar/state/monthly/Layout.vue b/src/components/calendar/state/monthly/Layout.vue
index 4b48dd8..ddef0e3 100644
--- a/src/components/calendar/state/monthly/Layout.vue
+++ b/src/components/calendar/state/monthly/Layout.vue
@@ -2,13 +2,12 @@
 import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
-import { computed } from 'vue'
 
 import DayTile from './DayTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
-const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+const daysPerMonth = staticConfig.daysPerMonth
 
 function getNextMonthDate(day: number): LeimDate {
   let nextDay = day
@@ -61,8 +60,7 @@ const moveCalendarRight = useThrottleFn(() => {
       :date="{
         day: day,
         month: currentDate.currentMonth,
-        year: currentDate.currentYear,
-        period: currentDate.currentPeriod
+        year: currentDate.currentYear
       }"
     />
     <DayTile
diff --git a/src/components/calendar/state/yearly/DayTile.vue b/src/components/calendar/state/yearly/DayTile.vue
index 332ffb3..d065c1d 100644
--- a/src/components/calendar/state/yearly/DayTile.vue
+++ b/src/components/calendar/state/yearly/DayTile.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendarEvents } from '@/stores/EventStore'
 import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 
 const { currentDate, defaultDate, selectDate } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
+const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   monthNumber: number
@@ -20,24 +22,35 @@ const tileDate: ComputedRef<LeimDate> = computed(() => {
   }
 })
 
-const isDefaultDate = computed(() => {
+const isDefaultDate = computed<boolean>(() => {
   return areDatesIdentical(tileDate.value, defaultDate)
 })
 
-const isSelectedDate = computed(() => {
+const isSelectedDate = computed<boolean>(() => {
   return areDatesIdentical(tileDate.value, selectedDate.value)
 })
+
+const hasAtLeastOneEvent = computed<boolean>(() => {
+  return Boolean(
+    currentEvents.value.find((currentEvent) => {
+      return areDatesIdentical(currentEvent.date, tileDate.value)
+    })
+  )
+})
 </script>
 
 <template>
   <button
-    class="grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors hover:bg-slate-800 hover:border-slate-800"
+    class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
     :class="{
+      'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate,
       'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
-      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate
+      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate,
+      'after:bg-green-600': hasAtLeastOneEvent,
+      'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
     }"
     @click="selectDate(tileDate)"
   >
-    <span class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+    <span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
   </button>
 </template>
diff --git a/src/components/calendar/state/yearly/Layout.vue b/src/components/calendar/state/yearly/Layout.vue
index aea2a2b..3f9c8c0 100644
--- a/src/components/calendar/state/yearly/Layout.vue
+++ b/src/components/calendar/state/yearly/Layout.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
-
 import MonthTile from './MonthTile.vue'
 
 const { staticConfig } = useCalendar()
-
-const monthsPerYear = computed(() => staticConfig.monthsPerYear)
 </script>
 
 <template>
   <div class="container mt-[10vh] mb-auto">
-    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
-      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+    <div ref="test" class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <MonthTile
+        v-for="month in staticConfig.monthsPerYear"
+        :key="month"
+        :month-number="month - 1"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/calendar/state/yearly/MonthTile.vue b/src/components/calendar/state/yearly/MonthTile.vue
index e6600ac..269324f 100644
--- a/src/components/calendar/state/yearly/MonthTile.vue
+++ b/src/components/calendar/state/yearly/MonthTile.vue
@@ -1,18 +1,15 @@
 <script lang="ts" setup>
-import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed, type ComputedRef } from 'vue'
 
 import DayTile from './DayTile.vue'
 
-const { staticConfig, currentDate, getMonthName } = useCalendar()
+const { staticConfig, getMonthName } = useCalendar()
 
 const props = defineProps<{
   monthNumber: number
 }>()
 
-const daysPerMonth = computed(() => staticConfig.daysPerMonth)
-const tileMonthName = computed(() => getMonthName(props.monthNumber))
+const tileMonthName: string = getMonthName(props.monthNumber)
 </script>
 
 <template>
@@ -22,7 +19,7 @@ const tileMonthName = computed(() => getMonthName(props.monthNumber))
     </div>
     <div class="grid grid-cols-7">
       <DayTile
-        v-for="day in daysPerMonth"
+        v-for="day in staticConfig.daysPerMonth"
         :key="day"
         :month-number="monthNumber"
         :day-number="day"
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index 087f38b..b8bad6a 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -89,8 +89,7 @@ export const useCalendar = defineStore('calendar', () => {
     return {
       day: defaultDay,
       month: defaultMonth,
-      year: defaultYear,
-      period: 'nante'
+      year: defaultYear
     }
   })
 
diff --git a/src/stores/CharacterStore.ts b/src/stores/CharacterStore.ts
index 1779ea1..500ed03 100644
--- a/src/stores/CharacterStore.ts
+++ b/src/stores/CharacterStore.ts
@@ -1,20 +1,15 @@
 import { charactersList } from '@/data/Characters'
 import type { Character } from '@/models/Characters'
 import { defineStore } from 'pinia'
-import { computed, type ComputedRef } from 'vue'
 
 export const useCharacters = defineStore('characters', () => {
   const characters: Character[] = charactersList
 
   // Get all birth events
-  const charactersWithBirthData: ComputedRef<Character[]> = computed(() =>
-    characters.filter((character) => character.birth)
-  )
+  const charactersWithBirthData: Character[] = characters.filter((character) => character.birth)
 
   // Get all death events
-  const charactersWithDeathData: ComputedRef<Character[]> = computed(() =>
-    characters.filter((character) => character.death)
-  )
+  const charactersWithDeathData: Character[] = characters.filter((character) => character.death)
 
   return { characters, charactersWithBirthData, charactersWithDeathData }
 })
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 0f94cd1..1e24890 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -1,40 +1,34 @@
-import type { CalendarEvent } from '@/models/Events'
-import { defineStore } from 'pinia'
-import { computed, ref, watch, type Ref } from 'vue'
-import { useCalendar } from './CalendarStore'
-import { useCharacters } from './CharacterStore'
 import { regularEvents } from '@/data/Events'
 import { convertDateToDays, daysPerMonth } from '@/models/Date'
+import type { CalendarEvent } from '@/models/Events'
+import { defineStore } from 'pinia'
+import { ref, watch, type Ref } from 'vue'
+import { useCalendar } from './CalendarStore'
+import { useCharacters } from './CharacterStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
-  const { currentDate, currentConfig, currentLeimDate } = useCalendar()
+  const { currentDate, currentConfig } = useCalendar()
   const { charactersWithBirthData, charactersWithDeathData } = useCharacters()
 
-  const baseEvents = ref<CalendarEvent[]>(regularEvents)
+  const baseEvents: CalendarEvent[] = regularEvents
 
-  const characterBirthEvents = computed(() => {
-    return charactersWithBirthData.map((character) => {
-      return {
-        title: `Naissance de ${character.name}`,
-        date: character.birth,
-        category: 'naissance'
-      } as CalendarEvent
-    })
+  const characterBirthEvents = charactersWithBirthData.map((character) => {
+    return {
+      title: `Naissance de ${character.name}`,
+      date: character.birth,
+      category: 'naissance'
+    } as CalendarEvent
   })
 
-  const characterDeathEvents = computed(() => {
-    return charactersWithDeathData.map((character) => {
-      return {
-        title: `Décès de ${character.name}`,
-        date: character.death,
-        category: 'mort'
-      } as CalendarEvent
-    })
+  const characterDeathEvents = charactersWithDeathData.map((character) => {
+    return {
+      title: `Décès de ${character.name}`,
+      date: character.death,
+      category: 'mort'
+    } as CalendarEvent
   })
 
-  const allEvents = computed(() => {
-    return [...characterBirthEvents.value, ...characterDeathEvents.value, ...baseEvents.value]
-  })
+  const allEvents = [...characterBirthEvents, ...characterDeathEvents, ...baseEvents]
 
   // Gets all current event in its default state
   const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
@@ -100,7 +94,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns A list of events that can appear in the current view
    */
   function computeCurrentEvents(): CalendarEvent[] {
-    return allEvents.value.filter((event) => shouldEventBeDisplayed(event))
+    return allEvents.filter((event) => shouldEventBeDisplayed(event))
   }
 
   return { baseEvents, allEvents, currentEvents }

From ffaf54bccd3da4e2f7a562bcc977313ff12951a4 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 27 Apr 2024 16:54:35 +0200
Subject: [PATCH 7/9] Added scroll wheel navigation to yearly layout

---
 .../calendar/state/yearly/Layout.vue          | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/state/yearly/Layout.vue b/src/components/calendar/state/yearly/Layout.vue
index 3f9c8c0..48aa230 100644
--- a/src/components/calendar/state/yearly/Layout.vue
+++ b/src/components/calendar/state/yearly/Layout.vue
@@ -1,12 +1,31 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
+import { useThrottleFn } from '@vueuse/core'
+
 import MonthTile from './MonthTile.vue'
 
-const { staticConfig } = useCalendar()
+const { staticConfig, decrementYear, incrementYear } = useCalendar()
+
+function handleWheel(e: WheelEvent) {
+  const isMovingUp = e.deltaY < 0
+  if (isMovingUp) {
+    moveCalendarLeft()
+  } else {
+    moveCalendarRight()
+  }
+}
+
+const moveCalendarLeft = useThrottleFn(() => {
+  decrementYear()
+}, 100)
+
+const moveCalendarRight = useThrottleFn(() => {
+  incrementYear()
+}, 100)
 </script>
 
 <template>
-  <div class="container mt-[10vh] mb-auto">
+  <div class="container mt-[10vh] mb-auto" @wheel="handleWheel">
     <div ref="test" class="grid grid-cols-5 gap-x-8 gap-y-16">
       <MonthTile
         v-for="month in staticConfig.monthsPerYear"

From 5adc7db4258b2051a11da375444c994ef3873627 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Apr 2024 21:09:46 +0200
Subject: [PATCH 8/9] Added sidebar to left side of calendar view

---
 src/App.vue                                   |  2 +-
 .../calendar/CalendarCurrentDate.vue          | 24 +++++++
 src/components/calendar/CalendarMenu.vue      | 71 +++++++------------
 src/components/calendar/Sidebar.vue           | 23 ++++++
 src/components/ui/card/Card.vue               | 29 ++++++++
 src/components/ui/card/CardContent.vue        | 14 ++++
 src/components/ui/card/CardDescription.vue    | 14 ++++
 src/components/ui/card/CardFooter.vue         | 14 ++++
 src/components/ui/card/CardHeader.vue         | 14 ++++
 src/components/ui/card/CardTitle.vue          | 14 ++++
 src/components/ui/card/index.ts               |  6 ++
 src/router/index.ts                           | 12 +++-
 src/stores/CalendarStore.ts                   | 25 ++++---
 src/views/CalendarPage.vue                    | 17 +++++
 src/views/HomePage.vue                        | 22 ++++++
 src/views/HomeView.vue                        | 49 -------------
 16 files changed, 242 insertions(+), 108 deletions(-)
 create mode 100644 src/components/calendar/CalendarCurrentDate.vue
 create mode 100644 src/components/calendar/Sidebar.vue
 create mode 100644 src/components/ui/card/Card.vue
 create mode 100644 src/components/ui/card/CardContent.vue
 create mode 100644 src/components/ui/card/CardDescription.vue
 create mode 100644 src/components/ui/card/CardFooter.vue
 create mode 100644 src/components/ui/card/CardHeader.vue
 create mode 100644 src/components/ui/card/CardTitle.vue
 create mode 100644 src/components/ui/card/index.ts
 create mode 100644 src/views/CalendarPage.vue
 create mode 100644 src/views/HomePage.vue
 delete mode 100644 src/views/HomeView.vue

diff --git a/src/App.vue b/src/App.vue
index 15727d4..defffc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 import { useDark } from '@vueuse/core'
 import { RouterView } from 'vue-router'
 
-const dark = useDark()
+useDark()
 </script>
 
 <template>
diff --git a/src/components/calendar/CalendarCurrentDate.vue b/src/components/calendar/CalendarCurrentDate.vue
new file mode 100644
index 0000000..3efb159
--- /dev/null
+++ b/src/components/calendar/CalendarCurrentDate.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { getRelativeString } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { PhMapPin } from '@phosphor-icons/vue'
+
+const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+
+const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
+
+const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
+</script>
+
+<template>
+  <h1 class="text-2xl font-bold flex items-center gap-1">
+    <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+  </h1>
+  <h2 class="text-lg italic opacity-75">
+    {{ dateDifference }}
+  </h2>
+</template>
diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index ca6d2a1..83a408d 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,60 +1,43 @@
 <script lang="ts" setup>
-import { getRelativeString } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
-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'
+import CalendarCurrentDate from './CalendarCurrentDate.vue'
+
 import CalendarSearch from './search/CalendarSearch.vue'
 
-const { defaultDate, getFormattedDateTitle, currentDate } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-
-const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
-
-const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
+const { currentDate } = useCalendar()
 </script>
 
 <template>
-  <header class="border-slate-700 border-b-[1px]">
-    <div class="pt-4 container">
-      <div class="grid md:grid-cols-12 items-center">
-        <div class="md:col-span-9">
-          <div class="flex items-center gap-6">
-            <menu class="flex items-center gap-2">
-              <li>
-                <CalendarSwitch />
-              </li>
-              <li>
-                <CalendarMenuToday />
-              </li>
-              <li>
-                <CalendarMenuNav />
-              </li>
-            </menu>
-            <div>
-              <h1 class="text-2xl font-bold flex items-center gap-1">
-                <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
-              </h1>
-              <h2 class="text-lg italic opacity-75">
-                {{ dateDifference }}
-              </h2>
-            </div>
-          </div>
-        </div>
-        <div class="md:col-span-3 flex justify-end">
+  <header class="pt-4 border-slate-700 border-b-[1px]">
+    <div class="px-6 flex justify-between">
+      <menu class="flex items-center gap-2">
+        <li class="flex items-center">
+          <CalendarMenuToday />
+        </li>
+        <li>
+          <CalendarMenuNav />
+        </li>
+        <li class="ml-6">
+          <CalendarCurrentDate />
+        </li>
+      </menu>
+
+      <menu class="flex items-center gap-2">
+        <li>
           <CalendarSearch />
-        </div>
-      </div>
+        </li>
+        <li>
+          <CalendarSwitch />
+        </li>
+      </menu>
     </div>
-    <div class="container">
-      <div class="flex">
-        <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
-          <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
-        </div>
+    <div class="ml-12 flex">
+      <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+        <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
       </div>
     </div>
   </header>
diff --git a/src/components/calendar/Sidebar.vue b/src/components/calendar/Sidebar.vue
new file mode 100644
index 0000000..0203df6
--- /dev/null
+++ b/src/components/calendar/Sidebar.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { PhList, PhHouse } from '@phosphor-icons/vue'
+import Button from '../ui/button/Button.vue'
+</script>
+
+<template>
+  <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid justify-center">
+    <menu>
+      <li class="mb-12">
+        <Button variant="ghost" size="icon" @click="console.log" class="rounded-full">
+          <PhList size="27" />
+        </Button>
+      </li>
+      <li>
+        <Button variant="ghost" size="icon" class="rounded-full" as-child>
+          <RouterLink to="/">
+            <PhHouse size="24" weight="fill" />
+          </RouterLink>
+        </Button>
+      </li>
+    </menu>
+  </nav>
+</template>
diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..e449d25
--- /dev/null
+++ b/src/components/ui/card/Card.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  link?: string
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+        'relative outline outline-2 outline-offset-4 outline-transparent hover:bg-sky-950 hover:-translate-y-[.2rem] focus-within:outline-sky-900':
+          props.link
+      })
+    "
+  >
+    <slot />
+
+    <RouterLink
+      v-if="props.link"
+      :to="props.link"
+      class="absolute inset-0 focus-visible:outline-none"
+    />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..ce1fed5
--- /dev/null
+++ b/src/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0 text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..950cabc
--- /dev/null
+++ b/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground mt-1', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..1ed2efe
--- /dev/null
+++ b/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..37fccdf
--- /dev/null
+++ b/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 px-6 pt-6 pb-3', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..fe6489a
--- /dev/null
+++ b/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
new file mode 100644
index 0000000..8170483
--- /dev/null
+++ b/src/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'
diff --git a/src/router/index.ts b/src/router/index.ts
index e58491f..87e8747 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,13 +1,19 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomePage from '@/views/HomePage.vue'
+import CalendarPage from '@/views/CalendarPage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'accueil',
+      component: HomePage
+    },
+    {
+      path: '/calendrier',
+      name: 'calendrier',
+      component: CalendarPage
     }
   ]
 })
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index b8bad6a..1813580 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -93,17 +93,6 @@ export const useCalendar = defineStore('calendar', () => {
     }
   })
 
-  // Assign default values if no params exist in URL
-  if (!params.day || typeof params.day === 'object' || !isInt(params.day)) {
-    params.day = defaultDay.toString()
-  }
-  if (!params.month || typeof params.month === 'object' || !isDigit(params.month)) {
-    params.month = defaultMonth.toString()
-  }
-  if (!params.year || typeof params.year === 'object' || !isSignedInt(params.year)) {
-    params.year = defaultYear.toString()
-  }
-
   const currentDay = computed<number>(() => {
     return Number(params.day)
   })
@@ -191,6 +180,19 @@ export const useCalendar = defineStore('calendar', () => {
     }
   })
 
+  function validateUrlParams(): void {
+    // Assign default values if no params exist in URL
+    if (!params.day || typeof params.day === 'object' || !isInt(params.day)) {
+      params.day = defaultDate.value.day.toString()
+    }
+    if (!params.month || typeof params.month === 'object' || !isDigit(params.month)) {
+      params.month = defaultDate.value.month.toString()
+    }
+    if (!params.year || typeof params.year === 'object' || !isSignedInt(params.year)) {
+      params.year = defaultDate.value.year.toString()
+    }
+  }
+
   /**
    * Moves the current date forward one month
    */
@@ -396,6 +398,7 @@ export const useCalendar = defineStore('calendar', () => {
     selectedDate,
     selectDate,
     params,
+    validateUrlParams,
     getPeriodOfYear,
     incrementMonth,
     decrementMonth,
diff --git a/src/views/CalendarPage.vue b/src/views/CalendarPage.vue
new file mode 100644
index 0000000..4a6dd65
--- /dev/null
+++ b/src/views/CalendarPage.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/CalendarStore'
+
+import Calendar from '@/components/calendar/Calendar.vue'
+import Sidebar from '@/components/calendar/Sidebar.vue'
+
+const { validateUrlParams } = useCalendar()
+
+validateUrlParams()
+</script>
+
+<template>
+  <main class="h-full grid grid-cols-[auto_1fr]">
+    <Sidebar />
+    <Calendar />
+  </main>
+</template>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
new file mode 100644
index 0000000..b7db808
--- /dev/null
+++ b/src/views/HomePage.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+</script>
+
+<template>
+  <main class="h-full grid place-items-center" v-once>
+    <Card class="w-1/3 min-w-72" link="/calendrier">
+      <CardHeader>
+        <CardTitle>Calendrier</CardTitle>
+        <CardDescription>
+          <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+            chronologie
+          </Badge>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde
+      </CardContent>
+    </Card>
+  </main>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index d739af9..0000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import Calendar from '@/components/calendar/Calendar.vue'
-</script>
-
-<template>
-  <main class="h-full">
-    <Calendar />
-    <!-- <pre>
-      {{ currentDate }}
-    </pre>
-    <div class="grid gap-2">
-      <div class="flex gap-2">
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementMonth()">Month +</button>
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementMonth()">Month -</button>
-      </div>
-      <div class="flex gap-2">
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear()">Year +</button>
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear()">Year -</button>
-      </div>
-      <div class="flex gap-2">
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(100)">
-          Century +
-        </button>
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(100)">
-          Century -
-        </button>
-      </div>
-      <div class="flex gap-2">
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(1000)">
-          Millenia +
-        </button>
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(1000)">
-          Millenia -
-        </button>
-      </div>
-      <div class="flex gap-2">
-        <input class="bg-slate-900" type="number" v-model="monthTarget" />
-        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="setMonth(monthTarget)">
-          Set Month
-        </button>
-      </div>
-    </div>
-
-    <pre>
-      Current events:
-      {{ currentEvents }}
-    </pre> -->
-  </main>
-</template>

From 1893cd3400d85f46a5dee185c2bdf470abe30a8e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Apr 2024 23:21:50 +0200
Subject: [PATCH 9/9] Added search CTA to sidebar

---
 src/components/calendar/CalendarMenu.vue      | 10 ++--
 src/components/calendar/CalendarMenuNav.vue   |  1 -
 src/components/calendar/Sidebar.vue           | 47 ++++++++++++++++---
 .../calendar/search/CalendarSearch.vue        |  9 +---
 src/stores/CalendarStore.ts                   | 10 +++-
 src/views/CalendarPage.vue                    |  8 +++-
 6 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 83a408d..d6869b8 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 
+import { Button } from '@/components/ui/button'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
-import CalendarSearch from './search/CalendarSearch.vue'
-
-const { currentDate } = useCalendar()
+const { currentDate, revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
@@ -28,7 +27,10 @@ const { currentDate } = useCalendar()
 
       <menu class="flex items-center gap-2">
         <li>
-          <CalendarSearch />
+          <Button search-slash @click="revealAdvancedSearch()">
+            <PhMagnifyingGlass size="20" weight="light" />
+            Recherche avancée
+          </Button>
         </li>
         <li>
           <CalendarSwitch />
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 9442b65..05d303e 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -145,7 +145,6 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex items-center gap-2">
-    <!-- Implement decrementDate to account for other mods -->
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
diff --git a/src/components/calendar/Sidebar.vue b/src/components/calendar/Sidebar.vue
index 0203df6..7041540 100644
--- a/src/components/calendar/Sidebar.vue
+++ b/src/components/calendar/Sidebar.vue
@@ -1,22 +1,55 @@
 <script lang="ts" setup>
-import { PhList, PhHouse } from '@phosphor-icons/vue'
+import { useCalendar } from '@/stores/CalendarStore'
+
+import { PhList, PhHouse, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import Button from '../ui/button/Button.vue'
+
+const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
   <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid justify-center">
-    <menu>
+    <menu class="flex flex-col gap-4">
       <li class="mb-12">
         <Button variant="ghost" size="icon" @click="console.log" class="rounded-full">
           <PhList size="27" />
         </Button>
       </li>
       <li>
-        <Button variant="ghost" size="icon" class="rounded-full" as-child>
-          <RouterLink to="/">
-            <PhHouse size="24" weight="fill" />
-          </RouterLink>
-        </Button>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
+              <Button variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink to="/">
+                  <PhHouse size="24" weight="fill" />
+                </RouterLink>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Retourner aux outils</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </li>
+      <li>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                @click="revealAdvancedSearch()"
+              >
+                <PhMagnifyingGlass size="24" weight="fill" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Recherche avancée</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </li>
     </menu>
   </nav>
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index e001f6e..0996da2 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -62,7 +62,7 @@ import SearchList from './lists/SearchList.vue'
 const { characters } = useCharacters()
 const { baseEvents } = useCalendarEvents()
 
-const modalOpen = ref<boolean>(false)
+const modalOpen = defineModel({ default: false })
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -243,13 +243,6 @@ function handleCategorySelect(e: any) {
 
 <template>
   <Dialog v-model:open="modalOpen" @update:open="resetSearch()">
-    <DialogTrigger>
-      <Button search-slash>
-        <PhMagnifyingGlass size="20" weight="light" />
-        Recherche avancée
-      </Button>
-    </DialogTrigger>
-
     <DialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index 1813580..0d63f99 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -388,6 +388,12 @@ export const useCalendar = defineStore('calendar', () => {
     selectedDate.value = date
   }
 
+  const isAdvancedSearchOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealAdvancedSearch() {
+    isAdvancedSearchOpen.value = true
+  }
+
   return {
     staticConfig,
     viewTypeOptions,
@@ -413,6 +419,8 @@ export const useCalendar = defineStore('calendar', () => {
     getMonthName,
     setViewType,
     getViewTypeTitle,
-    isCurrentScreenActive
+    isCurrentScreenActive,
+    isAdvancedSearchOpen,
+    revealAdvancedSearch
   }
 })
diff --git a/src/views/CalendarPage.vue b/src/views/CalendarPage.vue
index 4a6dd65..13b0984 100644
--- a/src/views/CalendarPage.vue
+++ b/src/views/CalendarPage.vue
@@ -1,12 +1,16 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { onMounted } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import Calendar from '@/components/calendar/Calendar.vue'
 import Sidebar from '@/components/calendar/Sidebar.vue'
+import CalendarSearch from '@/components/calendar/search/CalendarSearch.vue'
 
 const { validateUrlParams } = useCalendar()
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 
-validateUrlParams()
+onMounted(() => validateUrlParams())
 </script>
 
 <template>
@@ -14,4 +18,6 @@ validateUrlParams()
     <Sidebar />
     <Calendar />
   </main>
+
+  <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
 </template>