From 59212a241e7a46c0a21b04a2f70f373843d66238 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 22 Jun 2026 10:06:56 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20header=20contextuel=20jours/mois/ann?=
 =?UTF-8?q?=C3=A9es=20(#date-year-picker)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../malio/date/internal/CalendarHeader.vue    | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/components/malio/date/internal/CalendarHeader.vue b/app/components/malio/date/internal/CalendarHeader.vue
index be9109e..d931f96 100644
--- a/app/components/malio/date/internal/CalendarHeader.vue
+++ b/app/components/malio/date/internal/CalendarHeader.vue
@@ -4,7 +4,7 @@
       type="button"
       data-test="header-prev"
       class="ml-2 flex self-start rounded"
-      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
+      :aria-label="prevLabel"
       @click="emit('prev')"
     >
       <Icon
@@ -18,10 +18,11 @@
       type="button"
       data-test="header-toggle"
       class="flex gap-1 rounded text-base font-medium"
-      @click="emit('toggle-view')"
+      @click="viewMode !== 'years' && emit('toggle-view')"
     >
       <span class="mt-[2px]">{{ label }}</span>
       <Icon
+        v-if="viewMode !== 'years'"
         icon="mdi:chevron-down"
         :width="25"
         :height="25"
@@ -32,7 +33,7 @@
       type="button"
       data-test="header-next"
       class="mr-2 flex self-start rounded"
-      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
+      :aria-label="nextLabel"
       @click="emit('next')"
     >
       <Icon
@@ -51,9 +52,10 @@ import {Icon} from '@iconify/vue'
 defineOptions({name: 'MalioDateCalendarHeader'})
 
 const props = defineProps<{
-  viewMode: 'days' | 'months'
+  viewMode: 'days' | 'months' | 'years'
   currentMonth: number
   currentYear: number
+  yearPageStart: number
 }>()
 
 const emit = defineEmits<{
@@ -64,7 +66,20 @@ const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
   'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
 
 const label = computed(() => {
+  if (props.viewMode === 'years') return `${props.yearPageStart} – ${props.yearPageStart + 11}`
+  if (props.viewMode === 'months') return `${props.currentYear}`
   const name = monthsLong[props.currentMonth]
   return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
 })
+
+const prevLabel = computed(() =>
+  props.viewMode === 'days' ? 'Mois précédent'
+    : props.viewMode === 'months' ? 'Année précédente'
+      : 'Période précédente',
+)
+const nextLabel = computed(() =>
+  props.viewMode === 'days' ? 'Mois suivant'
+    : props.viewMode === 'months' ? 'Année suivante'
+      : 'Période suivante',
+)
 </script>