Correctifs UI workflow — specs + implémentation (8 chantiers) (#6)

Suite à l'arrivée des workflows, correction des régressions UI et améliorations UX mail/modales (reviews Lucile Schnödt, Tristan Schnödtin).

**Specs & décisions :** `docs/superpowers/specs/2026-05-20-workflow-ui-fixes-design.md`
**Plan d'implémentation :** `docs/superpowers/plans/2026-05-21-workflow-ui-fixes.md`

Cette PR contient désormais **les specs ET l'implémentation complète**.

## Chantiers livrés

| # | Chantier | Détail |
|---|----------|--------|
| 2 | Sélecteur de statut filtré par workflow | `statusOptions` dérivé de `project.workflow.statuses`, statut courant conservé s'il est hors workflow |
| 1 | Drag & drop « Mes tâches » | handlers `@dragover/@drop` ; résolution par workflow/catégorie (0→refus, 1→PATCH, ≥2→popover `StatusPickerPopover`) |
| 4 | Couleurs | (a) migration Doctrine remettant les hex classiques sur le workflow Standard ; (b) entêtes kanban teintées via `STATUS_CATEGORY_COLOR` + contraste auto ; (c) couleur par défaut par catégorie dans `WorkflowDrawer` |
| 5 | Suppression du bouton « Lier un mail » | + retrait de `MailPickerModal` et i18n associée |
| 6 | Création de tâche depuis un mail | back : `assigneeId` + `statusId` (défaut = 1er statut du workflow), priorité retirée (TDD) ; front : `MailCreateTaskModal` sur `AppModal` + sélecteurs user/statut |
| 7 | Modale réutilisable | nouveau `components/ui/AppModal.vue` (footer sticky) ; footer de `TaskModal` sorti du form scrollable |
| 3 | Cartes responsive | badges en `flex-wrap` pleine taille (plus aucun débordement) |
| 8 | (dette) Sélecteur de catégorie en `MalioSelect` | la lib supporte les valeurs `string` ; note CLAUDE.md corrigée |

## Vérifications
- Build frontend OK ; PHPUnit **34 tests verts** (nouveau test fonctionnel TDD sur `create-task`).
- Vérif navigateur (Chrome MCP) sur **données prod importées en local** : #2, #3, #4, #5, #6, #7 confirmés.
- Revue de code finale : **APPROVED_WITH_NITS**.

## À noter
- ⚠️ **#1 (D&D)** : le drag & drop HTML5 natif n'est pas auto-testable → **test manuel requis**.
- 🗄️ **#4 (migration)** : `migrations/Version20260521094948.php` s'appliquera en **prod au prochain `make migration-migrate`**.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Matthieu <mtholot19@gmail.com>
Reviewed-on: #6

frontend/pages/my-tasks.vue

@@ -8,7 +8,7 @@ import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
 import type { Project } from '~/services/dto/project'
 import type { StatusCategory } from '~/services/dto/workflow'
-import { STATUS_CATEGORY_LABEL } from '~/services/dto/workflow'
+import { STATUS_CATEGORY_LABEL, STATUS_CATEGORY_COLOR, contrastText } from '~/services/dto/workflow'
 import { useTaskService } from '~/services/tasks'
 import { useTaskStatusService } from '~/services/task-statuses'
 import { useTaskEffortService } from '~/services/task-efforts'
@@ -71,6 +71,48 @@ const selectedTask = ref<Task | null>(null)
 // Timer
 const timerStore = useTimerStore()
 
+// Toast
+const toast = useToast()
+
+// Drag & drop
+const dragOverCategory = ref<StatusCategory | null>(null)
+const pendingPicker = ref<{ statuses: TaskStatus[], task: Task, x: number, y: number } | null>(null)
+
+function statusesForTaskCategory(task: Task, category: StatusCategory): TaskStatus[] {
+    // GET /tasks n'embarque que l'IRI du workflow ; on résout depuis la liste projects chargée (qui embarque workflow.statuses).
+    const project = projects.value.find(p => p.id === task.project?.id)
+    const wf = project?.workflow
+    if (!wf || typeof wf === 'string') return []
+    return wf.statuses.filter(s => s.category === category)
+}
+
+async function applyStatus(task: Task, status: TaskStatus): Promise<void> {
+    await taskService.update(task.id, { status: `/api/task_statuses/${status.id}` })
+    await loadTasks()
+}
+
+function onDrop(category: StatusCategory, event: DragEvent): void {
+    dragOverCategory.value = null
+    const taskId = Number(event.dataTransfer?.getData('text/plain'))
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task) return
+    const candidates = statusesForTaskCategory(task, category)
+    if (candidates.length === 0) {
+        toast.error({ message: t('myTasks.dropRefused') })
+        return
+    }
+    if (candidates.length === 1) {
+        void applyStatus(task, candidates[0])
+        return
+    }
+    pendingPicker.value = { statuses: candidates, task, x: event.clientX, y: event.clientY }
+}
+
+function onPickerChoice(status: TaskStatus): void {
+    if (pendingPicker.value) void applyStatus(pendingPicker.value.task, status)
+    pendingPicker.value = null
+}
+
 function isTimerOnTask(task: Task): boolean {
     const entry = timerStore.activeEntry
     if (!entry?.task) return false
@@ -397,9 +439,16 @@ onMounted(async () => {
                 <div
                     v-for="cat in CATEGORIES"
                     :key="cat"
-                    class="flex min-w-40 flex-1 flex-col rounded-lg bg-neutral-50"
+                    class="flex min-w-40 flex-1 flex-col rounded-lg bg-neutral-50 transition"
+                    :class="dragOverCategory === cat ? 'ring-2 ring-primary-400' : ''"
+                    @dragover.prevent="dragOverCategory = cat"
+                    @dragleave="dragOverCategory = null"
+                    @drop="onDrop(cat, $event)"
                 >
-                    <div class="shrink-0 rounded-t-lg bg-neutral-200 px-4 py-3 text-sm font-bold text-neutral-800">
+                    <div
+                        class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold"
+                        :style="{ backgroundColor: STATUS_CATEGORY_COLOR[cat], color: contrastText(STATUS_CATEGORY_COLOR[cat]) }"
+                    >
                         {{ STATUS_CATEGORY_LABEL[cat] }} ({{ tasksByCategory(cat).length }})
                     </div>
                     <div class="min-h-0 flex-1 overflow-y-auto p-3">
@@ -481,6 +530,16 @@ onMounted(async () => {
             </p>
         </div>
 
+        <!-- StatusPickerPopover (D&D ambiguity resolution) -->
+        <StatusPickerPopover
+            v-if="pendingPicker"
+            :statuses="pendingPicker.statuses"
+            :x="pendingPicker.x"
+            :y="pendingPicker.y"
+            @pick="onPickerChoice"
+            @cancel="pendingPicker = null"
+        />
+
         <!-- TaskModal -->
         <TaskModal
             v-model="taskModalOpen"