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>
+  );
+}

lib/types.ts

@@ -29,6 +29,7 @@ export interface Tag {
   id: string;
   name: string;
   color: string;
+  isPinned?: boolean; // Tag pour objectifs principaux
 }
 
 // Interface pour les logs de synchronisation

prisma/migrations/20250914200338_add_pinned_tags/migration.sql

@@ -0,0 +1,15 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_tags" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "color" TEXT NOT NULL DEFAULT '#6b7280',
+    "isPinned" BOOLEAN NOT NULL DEFAULT false
+);
+INSERT INTO "new_tags" ("color", "id", "name") SELECT "color", "id", "name" FROM "tags";
+DROP TABLE "tags";
+ALTER TABLE "new_tags" RENAME TO "tags";
+CREATE UNIQUE INDEX "tags_name_key" ON "tags"("name");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -36,10 +36,11 @@ model Task {
 }
 
 model Tag {
-  id       String    @id @default(cuid())
+  id         String    @id @default(cuid())
-  name     String    @unique
+  name       String    @unique
-  color    String    @default("#6b7280")
+  color      String    @default("#6b7280")
-  taskTags TaskTag[]
+  isPinned   Boolean   @default(false) // Tag pour objectifs principaux
+  taskTags   TaskTag[]
   
   @@map("tags")
 }

services/tags.ts

@@ -24,6 +24,7 @@ export const tagsService = {
       id: tag.id,
       name: tag.name,
       color: tag.color,
+      isPinned: tag.isPinned,
       usage: tag._count.taskTags
     }));
   },
@@ -41,7 +42,8 @@ export const tagsService = {
     return {
       id: tag.id,
       name: tag.name,
-      color: tag.color
+      color: tag.color,
+      isPinned: tag.isPinned
     };
   },
 
@@ -62,14 +64,15 @@ export const tagsService = {
     return {
       id: tag.id,
       name: tag.name,
-      color: tag.color
+      color: tag.color,
+      isPinned: tag.isPinned
     };
   },
 
   /**
    * Crée un nouveau tag
    */
-  async createTag(data: { name: string; color: string }): Promise<Tag> {
+  async createTag(data: { name: string; color: string; isPinned?: boolean }): Promise<Tag> {
     // Vérifier si le tag existe déjà
     const existing = await this.getTagByName(data.name);
     if (existing) {
@@ -79,21 +82,23 @@ export const tagsService = {
     const tag = await prisma.tag.create({
       data: {
         name: data.name.trim(),
-        color: data.color
+        color: data.color,
+        isPinned: data.isPinned || false
       }
     });
 
     return {
       id: tag.id,
       name: tag.name,
-      color: tag.color
+      color: tag.color,
+      isPinned: tag.isPinned
     };
   },
 
   /**
    * Met à jour un tag
    */
-  async updateTag(id: string, data: { name?: string; color?: string }): Promise<Tag | null> {
+  async updateTag(id: string, data: { name?: string; color?: string; isPinned?: boolean }): Promise<Tag | null> {
     // Vérifier que le tag existe
     const existing = await this.getTagById(id);
     if (!existing) {
@@ -115,6 +120,9 @@ export const tagsService = {
     if (data.color !== undefined) {
       updateData.color = data.color;
     }
+    if (data.isPinned !== undefined) {
+      updateData.isPinned = data.isPinned;
+    }
 
     if (Object.keys(updateData).length === 0) {
       return existing;
@@ -128,7 +136,8 @@ export const tagsService = {
     return {
       id: tag.id,
       name: tag.name,
-      color: tag.color
+      color: tag.color,
+      isPinned: tag.isPinned
     };
   },
 
@@ -197,7 +206,8 @@ export const tagsService = {
     return tags.map(tag => ({
       id: tag.id,
       name: tag.name,
-      color: tag.color
+      color: tag.color,
+      isPinned: tag.isPinned
     }));
   },
 

src/app/api/tags/[id]/route.ts

@@ -6,10 +6,11 @@ import { tagsService } from '@/services/tags';
  */
 export async function GET(
   request: NextRequest,
-  { params }: { params: { id: string } }
+  { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const tag = await tagsService.getTagById(params.id);
+    const { id } = await params;
+    const tag = await tagsService.getTagById(id);
 
     if (!tag) {
       return NextResponse.json(
@@ -40,11 +41,12 @@ export async function GET(
  */
 export async function PATCH(
   request: NextRequest,
-  { params }: { params: { id: string } }
+  { params }: { params: Promise<{ id: string }> }
 ) {
   try {
+    const { id } = await params;
     const body = await request.json();
-    const { name, color } = body;
+    const { name, color, isPinned } = body;
 
     // Validation
     if (name !== undefined && (typeof name !== 'string' || !name.trim())) {
@@ -61,7 +63,7 @@ export async function PATCH(
       );
     }
 
-    const tag = await tagsService.updateTag(params.id, { name, color });
+    const tag = await tagsService.updateTag(id, { name, color, isPinned });
 
     if (!tag) {
       return NextResponse.json(
@@ -107,10 +109,11 @@ export async function PATCH(
  */
 export async function DELETE(
   request: NextRequest,
-  { params }: { params: { id: string } }
+  { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    await tagsService.deleteTag(params.id);
+    const { id } = await params;
+    await tagsService.deleteTag(id);
 
     return NextResponse.json({
       message: 'Tag supprimé avec succès'

src/contexts/TasksContext.tsx

@@ -29,6 +29,7 @@ interface TasksContextType {
   kanbanFilters: KanbanFilters;
   setKanbanFilters: (filters: KanbanFilters) => void;
   filteredTasks: Task[];
+  pinnedTasks: Task[]; // Tâches avec tags épinglés (objectifs)
   // Tags
   tags: Tag[];
   tagsLoading: boolean;
@@ -54,9 +55,28 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
   // État des filtres Kanban
   const [kanbanFilters, setKanbanFilters] = useState<KanbanFilters>({});
 
-  // Filtrage des tâches
+  // Séparer les tâches épinglées (objectifs) des autres
+  const { pinnedTasks, regularTasks } = useMemo(() => {
+    const pinnedTagNames = tags.filter(tag => tag.isPinned).map(tag => tag.name);
+    
+    const pinned: Task[] = [];
+    const regular: Task[] = [];
+    
+    tasksState.tasks.forEach(task => {
+      const hasPinnedTag = task.tags?.some(tagName => pinnedTagNames.includes(tagName));
+      if (hasPinnedTag) {
+        pinned.push(task);
+      } else {
+        regular.push(task);
+      }
+    });
+    
+    return { pinnedTasks: pinned, regularTasks: regular };
+  }, [tasksState.tasks, tags]);
+
+  // Filtrage des tâches régulières (pas les épinglées)
   const filteredTasks = useMemo(() => {
-    let filtered = tasksState.tasks;
+    let filtered = regularTasks;
 
     // Filtre par recherche
     if (kanbanFilters.search) {
@@ -85,7 +105,7 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
     }
 
     return filtered;
-  }, [tasksState.tasks, kanbanFilters]);
+  }, [regularTasks, kanbanFilters]);
 
   const contextValue: TasksContextType = {
     ...tasksState,
@@ -94,7 +114,8 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
     tagsError,
     kanbanFilters,
     setKanbanFilters,
-    filteredTasks
+    filteredTasks,
+    pinnedTasks
   };
 
   return (