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,
+        year: currentDate.currentYear
-        period: currentDate.currentPeriod
       }"
     />
     <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">
+    <div ref="test" class="grid grid-cols-5 gap-x-8 gap-y-16">
-      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+      <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: string = getMonthName(props.monthNumber)
-const tileMonthName = computed(() => 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"

src/stores/CalendarStore.ts

@@ -89,8 +89,7 @@ export const useCalendar = defineStore('calendar', () => {
     return {
       day: defaultDay,
       month: defaultMonth,
-      year: defaultYear,
+      year: defaultYear
-      period: 'nante'
     }
   })
 

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(() =>
+  const charactersWithBirthData: Character[] = characters.filter((character) => character.birth)
-    characters.filter((character) => character.birth)
-  )
 
   // Get all death events
-  const charactersWithDeathData: ComputedRef<Character[]> = computed(() =>
+  const charactersWithDeathData: Character[] = characters.filter((character) => character.death)
-    characters.filter((character) => character.death)
-  )
 
   return { characters, charactersWithBirthData, charactersWithDeathData }
 })

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(() => {
+  const characterBirthEvents = charactersWithBirthData.map((character) => {
-    return charactersWithBirthData.map((character) => {
+    return {
-      return {
+      title: `Naissance de ${character.name}`,
-        title: `Naissance de ${character.name}`,
+      date: character.birth,
-        date: character.birth,
+      category: 'naissance'
-        category: 'naissance'
+    } as CalendarEvent
-      } as CalendarEvent
-    })
   })
 
-  const characterDeathEvents = computed(() => {
+  const characterDeathEvents = charactersWithDeathData.map((character) => {
-    return charactersWithDeathData.map((character) => {
+    return {
-      return {
+      title: `Décès de ${character.name}`,
-        title: `Décès de ${character.name}`,
+      date: character.death,
-        date: character.death,
+      category: 'mort'
-        category: 'mort'
+    } as CalendarEvent
-      } as CalendarEvent
-    })
   })
 
-  const allEvents = computed(() => {
+  const allEvents = [...characterBirthEvents, ...characterDeathEvents, ...baseEvents]
-    return [...characterBirthEvents.value, ...characterDeathEvents.value, ...baseEvents.value]
-  })
 
   // 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 }