feat(frontend) : add kanban drag & drop and improve filter selects on my-tasks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/pages/my-tasks.vue

@@ -175,6 +175,44 @@ watch(selectedProjectId, () => {
     selectedGroupId.value = null
 }, { flush: 'sync' })
 
+// Drag & drop
+const dragOverStatusId = ref<number | null>(null)
+const dragCounter = ref(0)
+
+function onDragEnter(id: number) {
+    dragCounter.value++
+    dragOverStatusId.value = id
+}
+
+function onDragLeave() {
+    dragCounter.value--
+    if (dragCounter.value === 0) {
+        dragOverStatusId.value = null
+    }
+}
+
+function onDrop(event: DragEvent) {
+    dragCounter.value = 0
+    dragOverStatusId.value = null
+    return Number(event.dataTransfer!.getData('text/plain'))
+}
+
+async function onDropStatus(event: DragEvent, status: TaskStatus) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || task.status?.id === status.id) return
+    task.status = status
+    await taskService.update(taskId, { status: `/api/task_statuses/${status.id}` })
+}
+
+async function onDropBacklog(event: DragEvent) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || !task.status) return
+    task.status = null
+    await taskService.update(taskId, { status: null })
+}
+
 // Modal
 function openTaskEdit(task: Task) {
     selectedTask.value = task
@@ -222,42 +260,54 @@ onMounted(() => {
                 :options="projectOptions"
                 label="Projet"
                 :empty-option-label="$t('myTasks.allProjects')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
             <MalioSelect
                 v-model="selectedGroupId"
                 :options="groupOptions"
                 label="Groupe"
                 :empty-option-label="$t('myTasks.allGroups')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
             <MalioSelect
                 v-model="selectedTagId"
                 :options="tagOptions"
                 label="Type"
                 :empty-option-label="$t('myTasks.allTypes')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
             <MalioSelect
                 v-model="selectedPriorityId"
                 :options="priorityOptions"
                 label="Priorité"
                 :empty-option-label="$t('myTasks.allPriorities')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
             <MalioSelect
                 v-model="selectedEffortId"
                 :options="effortOptions"
                 label="Effort"
                 :empty-option-label="$t('myTasks.allEfforts')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
             <MalioSelect
                 v-model="selectedAssigneeId"
                 :options="assigneeOptions"
                 label="Assigné"
                 :empty-option-label="$t('myTasks.allAssignees')"
-                min-width="w-48"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
         </div>
 
@@ -266,7 +316,12 @@ onMounted(() => {
             <!-- Backlog column (tasks without status) -->
             <div
                 v-if="backlogTasks.length > 0"
-                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+                class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                :class="dragOverStatusId === 0 ? 'bg-neutral-200' : 'bg-neutral-50'"
+                @dragover.prevent
+                @dragenter.prevent="onDragEnter(0)"
+                @dragleave="onDragLeave"
+                @drop.prevent="onDropBacklog($event)"
             >
                 <div class="rounded-t-lg bg-neutral-500 px-4 py-3 text-sm font-bold text-white">
                     {{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})
@@ -285,7 +340,12 @@ onMounted(() => {
             <div
                 v-for="status in sortedStatuses"
                 :key="status.id"
-                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+                class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
+                @dragover.prevent
+                @dragenter.prevent="onDragEnter(status.id)"
+                @dragleave="onDragLeave"
+                @drop.prevent="onDropStatus($event, status)"
             >
                 <div
                     class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"