Optimized unnecessary reactivity

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>