Refactored jump today button

src/components/calendar/CalendarJumpToday.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { useCalendar } from '@/stores/calendar'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import Button from '../ui/button/Button.vue'
+
+const { defaultDate, isCurrentScreenActive } = storeToRefs(useCalendar())
+const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
+
+const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate.value, true))
+</script>
+
+<template>
+  <TooltipProvider :delayDuration="250">
+    <Tooltip>
+      <TooltipTrigger>
+        <Button @click="jumpToDefaultDate" size="sm" :disabled="isCurrentScreenActive">
+          Aujourd'hui
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ defaultDateFormatted }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import {
   Select,
   SelectContent,
@@ -12,19 +11,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useCalendar } from '@/stores/calendar'
 import Button from '../ui/button/Button.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
+import CalendarJumpToday from './CalendarJumpToday.vue'
 
-const {
-  currentConfig,
-  currentDate,
-  defaultDate,
-  viewTypeOptions,
-  decrementMonth,
-  incrementMonth,
-  jumpToDefaultDate,
-  getFormattedDateTitle
-} = useCalendar()
-
-const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, true))
+const { currentConfig, currentDate, viewTypeOptions, decrementMonth, incrementMonth } =
+  useCalendar()
 </script>
 
 <template>
@@ -38,16 +28,7 @@ const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, t
                 <CalendarSwitch />
               </li>
               <li>
-                <TooltipProvider :delayDuration="250">
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Button @click="jumpToDefaultDate" size="sm"> Aujourd'hui </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>{{ defaultDateFormatted }}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <CalendarJumpToday />
               </li>
               <li>
                 <!-- Implement decrementDate to account for other mods -->
@@ -105,20 +86,7 @@ const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, t
             </h1>
           </div>
         </div>
-        <div class="md:col-span-3">
-          <Select v-model="currentConfig.viewType">
-            <SelectTrigger>
-              <SelectValue placeholder="Changer le mode d'affichage" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem v-for="(option, index) in viewTypeOptions" :key="index" :value="option">
-                  {{ option }}
-                </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
+        <div class="md:col-span-3"></div>
       </div>
     </div>
   </header>

src/components/calendar/CalendarTile.vue

@@ -44,7 +44,7 @@ const isDefaultDate = computed(() => {
       v-if="eventsForTheDay.length > 0"
       class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1"
       :class="{
-        'opacity-50': props.faded
+        'opacity-40': props.faded
       }"
     >
       <li v-for="event in eventsForTheDay" :key="event.title" class="grid">

src/stores/calendar.ts

@@ -158,6 +158,21 @@ export const useCalendar = defineStore('calendar', () => {
     period: currentPeriod.value
   }
 
+  const isCurrentScreenActive = computed(() => {
+    switch (currentConfig.value.viewType) {
+      case 'month':
+        return defaultDate.value.month === Number(currentDate.currentMonth.value)
+
+      case 'year':
+      case 'decade':
+      case 'century':
+        return defaultDate.value.year === Number(currentDate.currentYear.value)
+
+      default:
+        return false
+    }
+  })
+
   /**
    * Moves the current date forward one month
    */
@@ -304,6 +319,7 @@ export const useCalendar = defineStore('calendar', () => {
     getFormattedDateTitle,
     getMonthName,
     setViewType,
-    getViewTypeTitle
+    getViewTypeTitle,
+    isCurrentScreenActive
   }
 })