feat: complete tag management and UI integration

- Marked multiple tasks as completed in TODO.md related to tag management features.
- Replaced manual tag input with `TagInput` component in `CreateTaskForm`, `EditTaskForm`, and `QuickAddTask` for better UX.
- Updated `TaskCard` to display tags using `TagDisplay` with color support.
- Enhanced `TasksService` to manage task-tag relationships with CRUD operations.
- Integrated tag management into the global context for better accessibility across components.

scripts/reset-database.ts

@@ -48,6 +48,13 @@ async function resetDatabase() {
       console.log('');
       console.log('📋 Tâches restantes:');
       const remainingTasks = await prisma.task.findMany({
+        include: {
+          taskTags: {
+            include: {
+              tag: true
+            }
+          }
+        },
         orderBy: { createdAt: 'desc' }
       });
       
@@ -59,7 +66,9 @@ async function resetDatabase() {
           'cancelled': '❌'
         }[task.status] || '❓';
         
-        const tags = JSON.parse(task.tagsJson || '[]');
+        // Utiliser les relations TaskTag
+        const tags = task.taskTags ? task.taskTags.map(tt => tt.tag.name) : [];
+        
         const tagsStr = tags.length > 0 ? ` [${tags.join(', ')}]` : '';
         
         console.log(`  ${index + 1}. ${statusEmoji} ${task.title}${tagsStr}`);

scripts/seed-data.ts

@@ -52,7 +52,8 @@ async function seedTestData() {
       const priorityEmoji = {
         'low': '🔵',
         'medium': '🟡',
-        'high': '🔴'
+        'high': '🔴',
+        'urgent': '🚨'
       }[task.priority];
       
       console.log(`  ${statusEmoji} ${priorityEmoji} ${task.title}`);

scripts/seed-tags.ts

@@ -0,0 +1,35 @@
+import { tagsService } from '../services/tags';
+
+async function seedTags() {
+  console.log('🏷️ Création des tags de test...');
+
+  const testTags = [
+    { name: 'Frontend', color: '#3B82F6' },
+    { name: 'Backend', color: '#EF4444' },
+    { name: 'Bug', color: '#F59E0B' },
+    { name: 'Feature', color: '#10B981' },
+    { name: 'Urgent', color: '#EC4899' },
+    { name: 'Design', color: '#8B5CF6' },
+    { name: 'API', color: '#06B6D4' },
+    { name: 'Database', color: '#84CC16' },
+  ];
+
+  for (const tagData of testTags) {
+    try {
+      const existing = await tagsService.getTagByName(tagData.name);
+      if (!existing) {
+        const tag = await tagsService.createTag(tagData);
+        console.log(`✅ Tag créé: ${tag.name} (${tag.color})`);
+      } else {
+        console.log(`⚠️ Tag existe déjà: ${tagData.name}`);
+      }
+    } catch (error) {
+      console.error(`❌ Erreur pour le tag ${tagData.name}:`, error);
+    }
+  }
+
+  console.log('🎉 Seeding des tags terminé !');
+}
+
+// Exécuter le script
+seedTags().catch(console.error);