Optimized unnecessary reactivity

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>

src/components/calendar/CalendarEvent.vue

@@ -33,6 +33,6 @@ defineProps<{
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event />
+    <CalendarEventDetails :event v-once />
   </Popover>
 </template>

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>

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)

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>

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

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>

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>

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"