feat: add pinned tag functionality and UI enhancements

- Introduced `isPinned` property to the `Tag` model for marking main objectives.
- Updated `TagForm` to include a checkbox for setting tags as pinned, enhancing user interaction.
- Enhanced `KanbanBoardContainer` to display pinned tasks in a dedicated `ObjectivesBoard`, improving task visibility.
- Modified `KanbanFilters` to support filtering by pinned tags, streamlining task management.
- Adjusted `TasksContext` to separate pinned tasks from regular tasks for better organization.

components/forms/TagForm.tsx

@@ -33,7 +33,8 @@ const PRESET_COLORS = [
 export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: TagFormProps) {
   const [formData, setFormData] = useState({
     name: '',
-    color: '#3B82F6'
+    color: '#3B82F6',
+    isPinned: false
   });
   const [errors, setErrors] = useState<string[]>([]);
 
@@ -42,12 +43,14 @@ export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: Tag
     if (tag) {
       setFormData({
         name: tag.name,
-        color: tag.color
+        color: tag.color,
+        isPinned: tag.isPinned || false
       });
     } else {
       setFormData({
         name: '',
-        color: TagsClient.generateRandomColor()
+        color: TagsClient.generateRandomColor(),
+        isPinned: false
       });
     }
     setErrors([]);
@@ -166,6 +169,30 @@ export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: Tag
           </div>
         </div>
 
+        {/* Objectif principal */}
+        <div className="space-y-2">
+          <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+            Type de tag
+          </label>
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={formData.isPinned}
+                onChange={(e) => setFormData(prev => ({ ...prev, isPinned: e.target.checked }))}
+                disabled={loading}
+                className="w-4 h-4 rounded border border-slate-600 bg-slate-800 text-purple-600 focus:ring-purple-500 focus:ring-2 disabled:cursor-not-allowed"
+              />
+              <span className="text-sm text-slate-300">
+                🎯 Objectif principal
+              </span>
+            </label>
+          </div>
+          <p className="text-xs text-slate-400">
+            Les tâches avec ce tag apparaîtront dans la section "Objectifs Principaux" au-dessus du Kanban
+          </p>
+        </div>
+
         {/* Erreurs */}
         {errors.length > 0 && (
           <div className="bg-red-900/20 border border-red-500/30 rounded-lg p-3">

components/kanban/BoardContainer.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { KanbanBoard } from './Board';
 import { SwimlanesBoard } from './SwimlanesBoard';
+import { ObjectivesBoard } from './ObjectivesBoard';
 import { KanbanFilters } from './KanbanFilters';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasksContext } from '@/contexts/TasksContext';
@@ -12,13 +13,15 @@ import { UpdateTaskData } from '@/clients/tasks-client';
 export function KanbanBoardContainer() {
   const { 
     filteredTasks, 
+    pinnedTasks,
     loading, 
     createTask, 
     deleteTask, 
     updateTask, 
     updateTaskOptimistic,
     kanbanFilters,
-    setKanbanFilters
+    setKanbanFilters,
+    tags
   } = useTasksContext();
 
   const [editingTask, setEditingTask] = useState<Task | null>(null);
@@ -47,6 +50,9 @@ export function KanbanBoardContainer() {
     });
   };
 
+  // Obtenir le nom du tag épinglé pour l'affichage
+  const pinnedTagName = tags.find(tag => tag.isPinned)?.name;
+
   return (
     <>
       <KanbanFilters
@@ -54,6 +60,18 @@ export function KanbanBoardContainer() {
         onFiltersChange={setKanbanFilters}
       />
       
+      {/* Section Objectifs Principaux */}
+      {pinnedTasks.length > 0 && (
+        <ObjectivesBoard
+          tasks={pinnedTasks}
+          onDeleteTask={deleteTask}
+          onEditTask={handleEditTask}
+          onUpdateTitle={handleUpdateTitle}
+          compactView={kanbanFilters.compactView}
+          pinnedTagName={pinnedTagName}
+        />
+      )}
+      
       {kanbanFilters.swimlanesByTags ? (
         <SwimlanesBoard 
           tasks={filteredTasks}

components/kanban/KanbanFilters.tsx

@@ -13,6 +13,7 @@ export interface KanbanFilters {
   showCompleted?: boolean;
   compactView?: boolean;
   swimlanesByTags?: boolean;
+  pinnedTag?: string; // Tag pour les objectifs principaux
 }
 
 interface KanbanFiltersProps {
@@ -66,6 +67,13 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
     });
   };
 
+  const handlePinnedTagChange = (tagName: string | undefined) => {
+    onFiltersChange({ 
+      ...filters, 
+      pinnedTag: tagName
+    });
+  };
+
   const handleClearFilters = () => {
     onFiltersChange({});
   };

components/kanban/ObjectivesBoard.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import { Task } from '@/lib/types';
+import { TaskCard } from './TaskCard';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+interface ObjectivesBoardProps {
+  tasks: Task[];
+  onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  compactView?: boolean;
+  pinnedTagName?: string;
+}
+
+export function ObjectivesBoard({ 
+  tasks, 
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  compactView = false,
+  pinnedTagName = "Objectifs"
+}: ObjectivesBoardProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  
+  if (tasks.length === 0) {
+    return null; // Ne rien afficher s'il n'y a pas d'objectifs
+  }
+
+  return (
+    <div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 border-b border-purple-500/30">
+      <div className="container mx-auto px-6 py-4">
+        <Card className="bg-slate-800/50 border-purple-500/30 shadow-purple-500/10 shadow-lg">
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => setIsCollapsed(!isCollapsed)}
+                className="flex items-center gap-3 hover:bg-purple-900/20 rounded-lg p-2 -m-2 transition-colors group"
+              >
+                <div className="w-3 h-3 bg-purple-400 rounded-full animate-pulse shadow-purple-400/50 shadow-lg"></div>
+                <h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
+                  🎯 Objectifs Principaux
+                </h2>
+                {pinnedTagName && (
+                  <Badge variant="outline" className="border-purple-400/50 text-purple-300">
+                    {pinnedTagName}
+                  </Badge>
+                )}
+                
+                {/* Flèche de collapse */}
+                <svg
+                  className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
+                    isCollapsed ? 'rotate-180' : ''
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <div className="flex items-center gap-2">
+                <Badge variant="primary" size="sm" className="bg-purple-600">
+                  {String(tasks.length).padStart(2, '0')}
+                </Badge>
+                
+                {/* Bouton collapse séparé pour mobile */}
+                <button
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                  className="lg:hidden p-1 hover:bg-purple-900/20 rounded transition-colors"
+                  aria-label={isCollapsed ? "Développer" : "Réduire"}
+                >
+                  <svg
+                    className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
+                      isCollapsed ? 'rotate-180' : ''
+                    }`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </CardHeader>
+
+          {!isCollapsed && (
+            <CardContent className="pt-0">
+              {(() => {
+              // Séparer les tâches par statut
+              const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
+              const completedTasks = tasks.filter(task => task.status === 'done');
+
+              return (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  {/* Colonne En cours / À faire */}
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
+                      <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                      <h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider">
+                        En cours / À faire
+                      </h3>
+                      <div className="flex-1"></div>
+                      <span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
+                        {activeTasks.length}
+                      </span>
+                    </div>
+                    
+                    {activeTasks.length === 0 ? (
+                      <div className="text-center py-8 text-slate-400 text-sm">
+                        <div className="text-2xl mb-2">🎯</div>
+                        Aucun objectif actif
+                      </div>
+                    ) : (
+                      <div className="space-y-3">
+                        {activeTasks.map(task => (
+                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
+                            <TaskCard
+                              task={task}
+                              onDelete={onDeleteTask}
+                              onEdit={onEditTask}
+                              onUpdateTitle={onUpdateTitle}
+                              compactView={compactView}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Colonne Terminé */}
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
+                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                      <h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
+                        Terminé
+                      </h3>
+                      <div className="flex-1"></div>
+                      <span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
+                        {completedTasks.length}
+                      </span>
+                    </div>
+                    
+                    {completedTasks.length === 0 ? (
+                      <div className="text-center py-8 text-slate-400 text-sm">
+                        <div className="text-2xl mb-2">✅</div>
+                        Aucun objectif terminé
+                      </div>
+                    ) : (
+                      <div className="space-y-3">
+                        {completedTasks.map(task => (
+                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200 opacity-75">
+                            <TaskCard
+                              task={task}
+                              onDelete={onDeleteTask}
+                              onEdit={onEditTask}
+                              onUpdateTitle={onUpdateTitle}
+                              compactView={compactView}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+              })()}
+            </CardContent>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}