chore: update frontend configuration

app/components/DisplaySettings.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="modal" :class="{ 'modal-open': isOpen }">
     <div class="modal-box">
-      <h3 class="font-bold text-lg mb-4">Paramètres d'affichage</h3>
-      
+      <h3 class="font-bold text-lg mb-4">
+        Paramètres d'affichage
+      </h3>
+
       <!-- Contrôle du zoom -->
       <div class="form-control mb-4">
         <label class="label">
           <span class="label-text">Taille du texte</span>
           <span class="label-text-alt">{{ zoomLevel }}%</span>
         </label>
-        <input 
-          type="range" 
-          min="80" 
-          max="150" 
+        <input
+          type="range"
+          min="80"
+          max="150"
           step="10"
-          :value="zoomLevel" 
+          :value="zoomLevel"
+          class="range range-primary"
           @input="updateZoom"
-          class="range range-primary" 
-        />
+        >
         <div class="w-full flex justify-between text-xs px-2 mt-1">
           <span>80%</span>
           <span>100%</span>
@@ -31,24 +33,24 @@
           <span class="label-text">Densité de l'interface</span>
         </label>
         <div class="flex gap-2">
-          <button 
-            @click="setDensity('compact')"
+          <button
             class="btn btn-sm"
             :class="density === 'compact' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('compact')"
           >
             Compacte
           </button>
-          <button 
-            @click="setDensity('comfortable')"
+          <button
             class="btn btn-sm"
             :class="density === 'comfortable' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('comfortable')"
           >
             Confortable
           </button>
-          <button 
-            @click="setDensity('spacious')"
+          <button
             class="btn btn-sm"
             :class="density === 'spacious' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('spacious')"
           >
             Espacée
           </button>
@@ -61,17 +63,17 @@
           <span class="label-text">Contraste</span>
         </label>
         <div class="flex gap-2">
-          <button 
-            @click="setContrast('normal')"
+          <button
             class="btn btn-sm"
             :class="contrast === 'normal' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('normal')"
           >
             Normal
           </button>
-          <button 
-            @click="setContrast('high')"
+          <button
             class="btn btn-sm"
             :class="contrast === 'high' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('high')"
           >
             Élevé
           </button>
@@ -80,9 +82,9 @@
 
       <!-- Réinitialiser -->
       <div class="form-control">
-        <button 
-          @click="resetSettings"
+        <button
           class="btn btn-outline btn-sm"
+          @click="resetSettings"
         >
           Réinitialiser les paramètres
         </button>
@@ -90,7 +92,9 @@
 
       <!-- Actions -->
       <div class="modal-action">
-        <button @click="closeModal" class="btn btn-primary">Fermer</button>
+        <button class="btn btn-primary" @click="closeModal">
+          Fermer
+        </button>
       </div>
     </div>
   </div>
@@ -118,11 +122,11 @@ onMounted(() => {
   const savedZoom = localStorage.getItem('display-zoom')
   const savedDensity = localStorage.getItem('display-density')
   const savedContrast = localStorage.getItem('display-contrast')
-  
-  if (savedZoom) zoomLevel.value = parseInt(savedZoom)
-  if (savedDensity) density.value = savedDensity
-  if (savedContrast) contrast.value = savedContrast
-  
+
+  if (savedZoom) { zoomLevel.value = parseInt(savedZoom) }
+  if (savedDensity) { density.value = savedDensity }
+  if (savedContrast) { contrast.value = savedContrast }
+
   applySettings()
 })
 
@@ -146,10 +150,10 @@ const applySettings = () => {
   localStorage.setItem('display-zoom', zoomLevel.value.toString())
   localStorage.setItem('display-density', density.value)
   localStorage.setItem('display-contrast', contrast.value)
-  
+
   // Appliquer les styles
   const root = document.documentElement
-  
+
   // Zoom - exclure complètement le modal des paramètres
   const modal = document.querySelector('.modal')
   if (modal) {
@@ -157,27 +161,27 @@ const applySettings = () => {
     modal.style.fontSize = '100%'
     modal.style.transform = 'none'
     modal.style.scale = '1'
-    
+
     // Appliquer aux enfants du modal
     const modalElements = modal.querySelectorAll('*')
-    modalElements.forEach(element => {
+    modalElements.forEach((element) => {
       element.style.fontSize = 'inherit'
       element.style.transform = 'none'
       element.style.scale = '1'
     })
   }
-  
+
   // Appliquer le zoom au reste de la page (sauf le modal)
   root.style.fontSize = `${zoomLevel.value}%`
-  
+
   // Densité - utiliser les classes DaisyUI
   root.classList.remove('density-compact', 'density-comfortable', 'density-spacious')
   root.classList.add(`density-${density.value}`)
-  
+
   // Contraste - utiliser les classes DaisyUI
   root.classList.remove('contrast-normal', 'contrast-high')
   root.classList.add(`contrast-${contrast.value}`)
-  
+
   // Émettre les changements
   emit('update-settings', {
     zoom: zoomLevel.value,
@@ -200,4 +204,4 @@ const closeModal = () => {
 
 <style scoped>
 /* Les styles sont maintenant gérés par DaisyUI et le CSS global */
-</style> 
+</style>