feat: integrate lucide-react icons in DailyAddForm and DailySection

- Replaced text icons with lucide-react icons for 'task' and 'meeting' options in DailyAddForm and DailySection for improved visual consistency.
- Updated DailyAddForm to use ToggleButton for better UI interaction and added default icons for options.
- Enhanced FormsSection to reflect these changes in the DailyAddForm usage.

TODO.md

@@ -16,7 +16,7 @@
 - [x] **Tâches récentes** - Revoir l'affichage et la logique des tâches récentes <!-- Logique améliorée (tâches terminées récentes), responsive, icône claire -->
 - [x] **Header dépasse en tablet** - Corriger le débordement du header sur tablette <!-- Responsive amélioré, taille réglée, navigation adaptative -->
 - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) <!-- Clock pour échéance, Settings pour filtres, Search visuelle -->
-- [ ] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui
+- [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui
 - [ ] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily
 - [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
 - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation

src/components/daily/DailySection.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/Button';
 import { DailyCheckboxSortable } from './DailyCheckboxSortable';
 import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem';
 import { DailyAddForm, AddFormOption } from '@/components/ui/DailyAddForm';
+import { CheckSquare2, Calendar } from 'lucide-react';
 import { DndContext, closestCenter, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { useState } from 'react';
@@ -82,8 +83,8 @@ export function DailySection({
 
   // Options pour le formulaire d'ajout
   const addFormOptions: AddFormOption[] = [
-    { value: 'task', label: 'Tâche', icon: '✅', color: 'green' },
+    { value: 'meeting', label: 'Réunion', icon: <Calendar size={14} />, color: 'blue' },
-    { value: 'meeting', label: 'Réunion', icon: '🗓️', color: 'blue' }
+    { value: 'task', label: 'Tâche', icon: <CheckSquare2 size={14} />, color: 'green' }
   ];
 
   // Convertir les checkboxes en format CheckboxItemData

src/components/ui-showcase/sections/FormsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { CheckSquare2, Calendar, Circle } from 'lucide-react';
 import { Input } from '@/components/ui/Input';
 import { SearchInput } from '@/components/ui/SearchInput';
 import { TagInput } from '@/components/ui/TagInput';
@@ -137,7 +138,12 @@ export function FormsSection() {
           <h3 className="text-lg font-medium text-[var(--foreground)]">Daily Add Form</h3>
           <DailyAddForm
             placeholder="Add new daily item..."
-            onAdd={async () => console.log('Add item')}
+            onAdd={async (text, option) => console.log('Add item:', text, option)}
+            options={[
+              { value: 'task', label: 'Task', icon: <CheckSquare2 size={14} />, color: 'green' },
+              { value: 'meeting', label: 'Meeting', icon: <Calendar size={14} />, color: 'blue' },
+              { value: 'event', label: 'Event', icon: <Circle size={14} />, color: 'gray' }
+            ]}
           />
         </div>
       </div>

src/components/ui/DailyAddForm.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { useState, useRef } from 'react';
+import { CheckSquare2, Calendar, Circle, PlayCircle } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { ToggleButton } from '@/components/ui/ToggleButton';
 
 export interface AddFormOption {
   value: string;
   label: string;
-  icon?: string;
+  icon?: React.ReactNode;
   color?: string;
 }
 
@@ -69,42 +71,41 @@ export function DailyAddForm({
     return placeholder;
   };
 
-  const getOptionColor = (option: AddFormOption) => {
+  const getDefaultIcon = (value: string): React.ReactNode => {
-    if (option.color) return option.color;
+    switch (value) {
+      case 'task':
+        return <CheckSquare2 size={14} />;
+      case 'meeting':
+        return <Calendar size={14} />;
+      case 'event':
+        return <PlayCircle size={14} />;
+      default:
+        return <Circle size={14} />;
+    }
+  };
+
+  const getToggleVariant = (option: AddFormOption): 'primary' | 'accent' | 'secondary' => {
+    if (option.color) {
+      switch (option.color.toLowerCase()) {
+        case 'green':
+        case 'blue':
+          return 'primary';
+        case 'yellow':
+        case 'orange':
+          return 'accent';
+        default:
+          return 'secondary';
+      }
+    }
     
     // Couleurs par défaut selon le type
     switch (option.value) {
       case 'task':
-        return 'green';
+        return 'primary';
       case 'meeting':
-        return 'blue';
+        return 'primary';
       default:
-        return 'gray';
+        return 'secondary';
-    }
-  };
-
-  const getOptionClasses = (option: AddFormOption) => {
-    const color = getOptionColor(option);
-    const isSelected = selectedOption === option.value;
-    
-    if (isSelected) {
-      switch (color) {
-        case 'green':
-          return 'border-l-green-500 bg-green-500/30 text-white font-medium';
-        case 'blue':
-          return 'border-l-blue-500 bg-blue-500/30 text-white font-medium';
-        default:
-          return 'border-l-gray-500 bg-gray-500/30 text-white font-medium';
-      }
-    } else {
-      switch (color) {
-        case 'green':
-          return 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90';
-        case 'blue':
-          return 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90';
-        default:
-          return 'border-l-gray-300 hover:border-l-gray-400 opacity-70 hover:opacity-90';
-      }
     }
   };
 
@@ -114,18 +115,17 @@ export function DailyAddForm({
       {options.length > 0 && (
         <div className="flex gap-2">
           {options.map((option) => (
-            <Button
+            <ToggleButton
               key={option.value}
-              type="button"
               onClick={() => setSelectedOption(option.value)}
-              variant="ghost"
+              variant={getToggleVariant(option)}
               size="sm"
-              className={`flex items-center gap-1 text-xs border-l-4 ${getOptionClasses(option)}`}
+              isActive={selectedOption === option.value}
               disabled={disabled}
+              icon={option.icon ?? getDefaultIcon(option.value)}
             >
-              {option.icon && <span>{option.icon}</span>}
+              <span className="text-xs">{option.label}</span>
-              {option.label}
+            </ToggleButton>
-            </Button>
           ))}
         </div>
       )}