feat: enhance task forms and Kanban components with dynamic priority loading

- Updated `CreateTaskForm` and `EditTaskForm` to load priority options dynamically using `getAllPriorities`, improving maintainability.
- Refactored `KanbanFilters` to utilize dynamic priority options, enhancing filter functionality.
- Modified `QuickAddTask` and `TaskCard` to display priorities using centralized configuration, ensuring consistency across the application.
- Introduced new utility functions in `status-config.ts` for managing priority configurations, streamlining the task management process.

components/forms/CreateTaskForm.tsx

@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/Input';
 import { TagInput } from '@/components/ui/TagInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
-import { getAllStatuses } from '@/lib/status-config';
+import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
 
 interface CreateTaskFormProps {
   isOpen: boolean;
@@ -120,10 +120,11 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
               disabled={loading}
               className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-slate-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 hover:border-slate-600/50 transition-all duration-200 backdrop-blur-sm"
             >
-              <option value="low">Faible</option>
-              <option value="medium">Moyenne</option>
-              <option value="high">Élevée</option>
-              <option value="urgent">Urgente</option>
+              {getAllPriorities().map(priorityConfig => (
+                <option key={priorityConfig.key} value={priorityConfig.key}>
+                  {priorityConfig.icon} {priorityConfig.label}
+                </option>
+              ))}
             </select>
           </div>
 

components/forms/EditTaskForm.tsx

@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/Input';
 import { TagInput } from '@/components/ui/TagInput';
 import { Task, TaskPriority, TaskStatus } from '@/lib/types';
 import { UpdateTaskData } from '@/clients/tasks-client';
-import { getAllStatuses } from '@/lib/status-config';
+import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
 
 interface EditTaskFormProps {
   isOpen: boolean;
@@ -132,10 +132,11 @@ export function EditTaskForm({ isOpen, onClose, onSubmit, task, loading = false
               disabled={loading}
               className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-slate-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 hover:border-slate-600/50 transition-all duration-200 backdrop-blur-sm"
             >
-              <option value="low">Faible</option>
-              <option value="medium">Moyenne</option>
-              <option value="high">Élevée</option>
-              <option value="urgent">Urgente</option>
+              {getAllPriorities().map(priorityConfig => (
+                <option key={priorityConfig.key} value={priorityConfig.key}>
+                  {priorityConfig.icon} {priorityConfig.label}
+                </option>
+              ))}
             </select>
           </div>
 

components/kanban/KanbanFilters.tsx

@@ -5,6 +5,7 @@ import { TaskPriority } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useTasksContext } from '@/contexts/TasksContext';
+import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
 
 export interface KanbanFilters {
   search?: string;
@@ -67,26 +68,17 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
     });
   };
 
-  const handlePinnedTagChange = (tagName: string | undefined) => {
-    onFiltersChange({ 
-      ...filters, 
-      pinnedTag: tagName
-    });
-  };
-
   const handleClearFilters = () => {
     onFiltersChange({});
   };
 
-  const hasActiveFilters = filters.search || filters.tags?.length || filters.priorities?.length;
   const activeFiltersCount = (filters.tags?.length || 0) + (filters.priorities?.length || 0) + (filters.search ? 1 : 0);
 
-  const priorityOptions: { value: TaskPriority; label: string; color: string }[] = [
-    { value: 'urgent', label: 'Urgent', color: 'bg-red-500' },
-    { value: 'high', label: 'Haute', color: 'bg-orange-500' },
-    { value: 'medium', label: 'Moyenne', color: 'bg-yellow-500' },
-    { value: 'low', label: 'Basse', color: 'bg-blue-500' }
-  ];
+  const priorityOptions = getAllPriorities().map(priorityConfig => ({
+    value: priorityConfig.key,
+    label: priorityConfig.label,
+    color: priorityConfig.color
+  }));
 
   return (
     <div className="bg-slate-900/50 border-b border-slate-700/50 backdrop-blur-sm">
@@ -198,7 +190,10 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
                         : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
                     }`}
                   >
-                    <div className={`w-2 h-2 rounded-full ${priority.color}`} />
+                    <div 
+                      className="w-2 h-2 rounded-full"
+                      style={{ backgroundColor: getPriorityColorHex(priority.color) }}
+                    />
                     {priority.label}
                   </button>
                 ))}

components/kanban/QuickAddTask.tsx

@@ -5,6 +5,7 @@ import { Card } from '@/components/ui/Card';
 import { TagInput } from '@/components/ui/TagInput';
 import { TaskStatus, TaskPriority } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
+import { getAllPriorities, getPriorityConfig } from '@/lib/status-config';
 
 interface QuickAddTaskProps {
   status: TaskStatus;
@@ -136,10 +137,11 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
           disabled={isSubmitting}
           className="bg-transparent border-none outline-none text-xs font-mono text-slate-400"
         >
-          <option value="low">L</option>
-          <option value="medium">M</option>
-          <option value="high">H</option>
-          <option value="urgent">U</option>
+          {getAllPriorities().map(priorityConfig => (
+            <option key={priorityConfig.key} value={priorityConfig.key}>
+              {priorityConfig.icon} {priorityConfig.label}
+            </option>
+          ))}
         </select>
       </div>
 

components/kanban/TaskCard.tsx

@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/Badge';
 import { TagDisplay } from '@/components/ui/TagDisplay';
 import { useTasksContext } from '@/contexts/TasksContext';
 import { useDraggable } from '@dnd-kit/core';
+import { getPriorityConfig } from '@/lib/status-config';
 
 interface TaskCardProps {
   task: Task;
@@ -159,11 +160,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
             )}
             
             {/* Indicateur de priorité compact */}
-            <div className={`w-1.5 h-1.5 rounded-full ${
-              task.priority === 'high' ? 'bg-red-400' :
-              task.priority === 'medium' ? 'bg-yellow-400' : 
-              'bg-slate-500'
-            }`} />
+            <div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
           </div>
         </div>
       </Card>
@@ -237,11 +234,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
           )}
           
           {/* Indicateur de priorité tech */}
-          <div className={`w-2 h-2 rounded-full animate-pulse ${
-            task.priority === 'high' ? 'bg-red-400 shadow-red-400/50 shadow-sm' :
-            task.priority === 'medium' ? 'bg-yellow-400 shadow-yellow-400/50 shadow-sm' : 
-            'bg-slate-500'
-          }`} />
+          <div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
         </div>
       </div>