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/components/mail/MailCreateTaskModal.vue

@@ -3,74 +3,63 @@ import type { MailMessageDetailDto } from '~/services/dto/mail'
 import type { Task } from '~/services/dto/task'
 import type { Project } from '~/services/dto/project'
 import type { TaskGroup } from '~/services/dto/task-group'
-import type { TaskPriority } from '~/services/dto/task-priority'
+import type { UserData } from '~/services/dto/user-data'
 import { useMailService } from '~/services/mail'
 import { useProjectService } from '~/services/projects'
 import { useTaskGroupService } from '~/services/task-groups'
-import { useTaskPriorityService } from '~/services/task-priorities'
+import { useUserService } from '~/services/users'
+import { useAuthStore } from '~/stores/auth'
 
 const props = defineProps<{
-    /** v-model: true = modal ouvert */
     modelValue: boolean
-    /** ID BDD du message source */
     messageId: number
-    /** Détail du message (pour afficher sujet/expéditeur en lecture seule) */
     messageDetail: MailMessageDetailDto | null
 }>()
-
 const emit = defineEmits<{
     'update:modelValue': [value: boolean]
-    /** Émis après création réussie — payload = tâche créée */
     created: [task: Task]
 }>()
 
 const { t } = useI18n()
+const auth = useAuthStore()
 const mailService = useMailService()
 const projectService = useProjectService()
 const taskGroupService = useTaskGroupService()
-const priorityService = useTaskPriorityService()
-
-// ─── État formulaire ──────────────────────────────────────────────────────
+const userService = useUserService()
 
 const projectId = ref<number | null>(null)
 const taskGroupId = ref<number | null>(null)
-const priorityId = ref<number | null>(null)
+const assigneeId = ref<number | null>(null)
+const statusId = ref<number | null>(null)
 const isSubmitting = ref(false)
 const touchedProject = ref(false)
 
-// ─── Données de référence ─────────────────────────────────────────────────
-
 const projects = ref<Project[]>([])
 const groups = ref<TaskGroup[]>([])
-const priorities = ref<TaskPriority[]>([])
+const users = ref<UserData[]>([])
 const loadingGroups = ref(false)
 
-const projectOptions = computed(() =>
-    projects.value.map(p => ({ label: p.name, value: p.id })),
-)
+const projectOptions = computed(() => projects.value.map(p => ({ label: p.name, value: p.id })))
+const groupOptions = computed(() => groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })))
+const userOptions = computed(() => users.value.map(u => ({ label: u.username, value: u.id })))
 
-const groupOptions = computed(() =>
-    groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })),
+const selectedProject = computed(() => projects.value.find(p => p.id === projectId.value) ?? null)
+const statusOptions = computed(() =>
+    (selectedProject.value?.workflow?.statuses ?? []).map(s => ({ label: s.label, value: s.id })),
 )
 
-const priorityOptions = computed(() =>
-    priorities.value.map(p => ({ label: p.label, value: p.id })),
-)
-
-// ─── Chargement initial ───────────────────────────────────────────────────
-
 onMounted(async () => {
-    const [projs, prios] = await Promise.all([
+    const [projs, us] = await Promise.all([
         projectService.getAll({ archived: false }),
-        priorityService.getAll(),
+        userService.getAll(),
     ])
     projects.value = projs
-    priorities.value = prios
+    users.value = us
 })
 
-// Recharger les groupes quand le projet change
 watch(projectId, async (pid) => {
     taskGroupId.value = null
+    statusId.value = selectedProject.value?.workflow?.statuses?.[0]?.id ?? null
     groups.value = []
     if (!pid) return
     loadingGroups.value = true
@@ -81,18 +70,16 @@ watch(projectId, async (pid) => {
     }
 })
 
-// Reset formulaire à l'ouverture
 watch(() => props.modelValue, (open) => {
     if (open) {
         projectId.value = null
         taskGroupId.value = null
-        priorityId.value = null
+        statusId.value = null
+        assigneeId.value = auth.user?.id ?? null
         touchedProject.value = false
     }
 })
 
-// ─── Actions ──────────────────────────────────────────────────────────────
-
 function close(): void {
     emit('update:modelValue', false)
 }
@@ -100,13 +87,13 @@ function close(): void {
 async function handleSubmit(): Promise<void> {
     touchedProject.value = true
     if (!projectId.value) return
-
     isSubmitting.value = true
     try {
         const task = await mailService.createTaskFromMail(props.messageId, {
             projectId: projectId.value,
             taskGroupId: taskGroupId.value ?? undefined,
-            priority: priorityId.value ? `/api/task_priorities/${priorityId.value}` : undefined,
+            assigneeId: assigneeId.value ?? undefined,
+            statusId: statusId.value ?? undefined,
         })
         emit('created', task)
         close()
@@ -117,135 +104,41 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <template>
-    <Teleport v-if="modelValue" to="body">
-        <Transition name="mail-modal" appear>
-            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-                <!-- Backdrop -->
-                <div
-                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
-                    @click="close"
-                />
-
-                <!-- Modal -->
-                <div
-                    class="relative z-10 w-full max-w-lg rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 overflow-hidden"
-                    style="max-height: min(90vh, 640px)"
-                >
-                    <!-- Header -->
-                    <div class="flex items-center justify-between border-b border-neutral-100 bg-neutral-50/80 px-6 py-4">
-                        <h2 class="text-base font-bold text-neutral-900">
-                            {{ t('mail.createTaskModal.title') }}
-                        </h2>
-                        <MalioButtonIcon
-                            icon="mdi:close"
-                            aria-label="Fermer"
-                            variant="ghost"
-                            icon-size="20"
-                            @click="close"
-                        />
-                    </div>
-
-                    <!-- Corps -->
-                    <div class="overflow-y-auto px-6 py-5 space-y-5">
-                        <!-- Info mail source (lecture seule) -->
-                        <div
-                            v-if="messageDetail"
-                            class="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm"
-                        >
-                            <p class="font-medium text-neutral-800 truncate">
-                                {{ messageDetail.header.subject ?? t('mail.noSubject') }}
-                            </p>
-                            <p class="mt-0.5 text-xs text-neutral-500 truncate">
-                                {{ messageDetail.header.fromName ?? messageDetail.header.fromEmail }}
-                            </p>
-                            <p class="mt-2 text-xs text-neutral-400 italic">
-                                {{ t('mail.createTaskModal.titleHint') }}
-                            </p>
-                            <p class="text-xs text-neutral-400 italic">
-                                {{ t('mail.createTaskModal.descriptionHint') }}
-                            </p>
-                        </div>
-
-                        <!-- Sélection projet -->
-                        <div>
-                            <MalioSelect
-                                v-model="projectId"
-                                :options="projectOptions"
-                                :label="t('mail.createTaskModal.projectLabel')"
-                                :empty-option-label="t('mail.createTaskModal.projectPlaceholder')"
-                                min-width="w-full"
-                            />
-                            <p
-                                v-if="touchedProject && !projectId"
-                                class="mt-1 text-xs text-red-500"
-                            >
-                                {{ t('mail.createTaskModal.projectLabel').replace(' *', '') }} requis
-                            </p>
-                        </div>
-
-                        <!-- Sélection groupe (optionnel, chargé après projet) -->
-                        <div v-if="projectId">
-                            <MalioSelect
-                                v-model="taskGroupId"
-                                :options="groupOptions"
-                                :label="t('mail.createTaskModal.groupLabel')"
-                                :empty-option-label="t('mail.createTaskModal.groupPlaceholder')"
-                                min-width="w-full"
-                                :disabled="loadingGroups"
-                            />
-                        </div>
-
-                        <!-- Sélection priorité (optionnelle) — MalioSelect car les values sont number | null -->
-                        <div>
-                            <MalioSelect
-                                v-model="priorityId"
-                                :options="priorityOptions"
-                                :label="t('mail.createTaskModal.priorityLabel')"
-                                :empty-option-label="t('mail.createTaskModal.priorityPlaceholder')"
-                                min-width="w-full"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Footer -->
-                    <div class="flex justify-end gap-3 border-t border-neutral-100 px-6 py-4">
-                        <MalioButton
-                            variant="tertiary"
-                            label="Annuler"
-                            button-class="w-auto px-4"
-                            @click="close"
-                        />
-                        <MalioButton
-                            :label="t('mail.createTaskModal.submit')"
-                            button-class="w-auto px-6"
-                            :disabled="isSubmitting"
-                            @click="handleSubmit"
-                        />
-                    </div>
-                </div>
+    <AppModal
+        :model-value="modelValue"
+        width="lg"
+        :title="t('mail.createTaskModal.title')"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <div class="space-y-5">
+            <div v-if="messageDetail" class="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm">
+                <p class="truncate font-medium text-neutral-800">{{ messageDetail.header.subject ?? t('mail.noSubject') }}</p>
+                <p class="mt-0.5 truncate text-xs text-neutral-500">{{ messageDetail.header.fromName ?? messageDetail.header.fromEmail }}</p>
+                <p class="mt-2 text-xs italic text-neutral-400">{{ t('mail.createTaskModal.titleHint') }}</p>
+                <p class="text-xs italic text-neutral-400">{{ t('mail.createTaskModal.descriptionHint') }}</p>
             </div>
-        </Transition>
-    </Teleport>
+
+            <div>
+                <MalioSelect v-model="projectId" :options="projectOptions" :label="t('mail.createTaskModal.projectLabel')" :empty-option-label="t('mail.createTaskModal.projectPlaceholder')" min-width="w-full" />
+                <p v-if="touchedProject && !projectId" class="mt-1 text-xs text-red-500">{{ t('mail.createTaskModal.projectLabel').replace(' *', '') }} requis</p>
+            </div>
+
+            <div v-if="projectId">
+                <MalioSelect v-model="taskGroupId" :options="groupOptions" :label="t('mail.createTaskModal.groupLabel')" :empty-option-label="t('mail.createTaskModal.groupPlaceholder')" min-width="w-full" :disabled="loadingGroups" />
+            </div>
+
+            <div v-if="projectId">
+                <MalioSelect v-model="statusId" :options="statusOptions" :label="t('mail.createTaskModal.statusLabel')" min-width="w-full" />
+            </div>
+
+            <div>
+                <MalioSelect v-model="assigneeId" :options="userOptions" :label="t('mail.createTaskModal.assigneeLabel')" :empty-option-label="t('mail.createTaskModal.assigneePlaceholder')" min-width="w-full" />
+            </div>
+        </div>
+
+        <template #footer>
+            <MalioButton variant="tertiary" label="Annuler" button-class="w-auto px-4" @click="close" />
+            <MalioButton :label="t('mail.createTaskModal.submit')" button-class="w-auto px-6" :disabled="isSubmitting" @click="handleSubmit" />
+        </template>
+    </AppModal>
 </template>
-
-<style scoped>
-.mail-modal-enter-active,
-.mail-modal-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.mail-modal-enter-active > div:last-child,
-.mail-modal-leave-active > div:last-child {
-    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
-}
-
-.mail-modal-enter-from,
-.mail-modal-leave-to {
-    opacity: 0;
-}
-
-.mail-modal-enter-from > div:last-child {
-    transform: scale(0.95) translateY(8px);
-    opacity: 0;
-}
-</style>

frontend/components/mail/MailPickerModal.vue

@@ -1,228 +0,0 @@
-<script setup lang="ts">
-import type { MailMessageHeaderDto } from '~/services/dto/mail'
-import { useMailService } from '~/services/mail'
-import { useMailStore } from '~/stores/mail'
-
-const props = defineProps<{
-    modelValue: boolean
-    /** ID de la tâche cible (destinataire du lien) */
-    taskId: number
-}>()
-
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean]
-    /** Émis après liaison réussie — payload = id du message lié */
-    linked: [messageId: number]
-}>()
-
-const { t } = useI18n()
-const mailService = useMailService()
-const mailStore = useMailStore()
-
-// ─── État ─────────────────────────────────────────────────────────────────
-
-const searchQuery = ref('')
-const allMessages = ref<MailMessageHeaderDto[]>([])
-const selectedMessage = ref<MailMessageHeaderDto | null>(null)
-const isLoading = ref(false)
-const isSubmitting = ref(false)
-
-// ─── Filtrage local (pas d'appel API par frappe — les messages sont déjà chargés) ──
-
-const filteredMessages = computed(() => {
-    const q = searchQuery.value.toLowerCase().trim()
-    if (!q) return allMessages.value
-    return allMessages.value.filter(
-        (m) =>
-            (m.subject ?? '').toLowerCase().includes(q)
-            || (m.fromName ?? '').toLowerCase().includes(q)
-            || (m.fromEmail ?? '').toLowerCase().includes(q),
-    )
-})
-
-// ─── Chargement à l'ouverture ─────────────────────────────────────────────
-
-watch(() => props.modelValue, async (open) => {
-    if (!open) return
-    searchQuery.value = ''
-    selectedMessage.value = null
-    isLoading.value = true
-    try {
-        // Utiliser le dossier actuellement sélectionné dans le store si disponible,
-        // sinon fallback sur INBOX.
-        const folderPath = mailStore.selectedFolderPath ?? 'INBOX'
-        const page = await mailService.listMessages(folderPath, undefined, 50)
-        allMessages.value = page.items
-    } finally {
-        isLoading.value = false
-    }
-})
-
-// ─── Actions ──────────────────────────────────────────────────────────────
-
-function close(): void {
-    emit('update:modelValue', false)
-}
-
-function selectMessage(msg: MailMessageHeaderDto): void {
-    selectedMessage.value = msg
-}
-
-async function handleSubmit(): Promise<void> {
-    if (!selectedMessage.value) return
-    isSubmitting.value = true
-    try {
-        await mailService.linkTask(selectedMessage.value.id, props.taskId)
-        emit('linked', selectedMessage.value.id)
-        close()
-    } finally {
-        isSubmitting.value = false
-    }
-}
-
-// ─── Formatage ────────────────────────────────────────────────────────────
-
-function formatDate(iso: string | null): string {
-    if (!iso) return ''
-    return new Date(iso).toLocaleDateString('fr', {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
-    })
-}
-</script>
-
-<template>
-    <Teleport v-if="modelValue" to="body">
-        <Transition name="mail-modal" appear>
-            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-                <div
-                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
-                    @click="close"
-                />
-
-                <div
-                    class="relative z-10 w-full max-w-lg rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 overflow-hidden"
-                    style="max-height: min(90vh, 640px)"
-                >
-                    <!-- Header -->
-                    <div class="flex items-center justify-between border-b border-neutral-100 bg-neutral-50/80 px-6 py-4">
-                        <h2 class="text-base font-bold text-neutral-900">
-                            {{ t('mail.pickerModal.title') }}
-                        </h2>
-                        <MalioButtonIcon
-                            icon="mdi:close"
-                            aria-label="Fermer"
-                            variant="ghost"
-                            icon-size="20"
-                            @click="close"
-                        />
-                    </div>
-
-                    <!-- Corps -->
-                    <div class="overflow-y-auto px-6 py-5 space-y-4">
-                        <!-- Recherche locale -->
-                        <input
-                            v-model="searchQuery"
-                            type="text"
-                            :placeholder="t('mail.pickerModal.searchPlaceholder')"
-                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
-                        />
-
-                        <!-- Résultats -->
-                        <div class="max-h-80 overflow-y-auto rounded-md border border-neutral-200 divide-y divide-neutral-100">
-                            <!-- Chargement -->
-                            <div
-                                v-if="isLoading"
-                                class="flex items-center justify-center py-8 text-sm text-neutral-400"
-                            >
-                                <Icon name="material-symbols:progress-activity" size="18" class="mr-2 animate-spin" />
-                                {{ t('mail.pickerModal.loading') }}
-                            </div>
-
-                            <!-- Vide -->
-                            <div
-                                v-else-if="filteredMessages.length === 0"
-                                class="py-8 text-center text-sm text-neutral-400 italic"
-                            >
-                                {{ t('mail.pickerModal.empty') }}
-                            </div>
-
-                            <!-- Liste -->
-                            <button
-                                v-for="msg in filteredMessages"
-                                :key="msg.id"
-                                type="button"
-                                class="flex w-full items-start gap-3 px-4 py-3 text-left text-sm transition-colors hover:bg-neutral-50"
-                                :class="selectedMessage?.id === msg.id
-                                    ? 'bg-primary-50 border-l-2 border-primary-500'
-                                    : 'border-l-2 border-transparent'"
-                                @click="selectMessage(msg)"
-                            >
-                                <Icon
-                                    name="material-symbols:mail-outline"
-                                    size="16"
-                                    class="mt-0.5 flex-shrink-0 text-neutral-400"
-                                />
-                                <div class="min-w-0 flex-1">
-                                    <p class="truncate font-medium text-neutral-800">
-                                        {{ msg.subject ?? t('mail.noSubject') }}
-                                    </p>
-                                    <p class="flex items-center gap-2 text-xs text-neutral-500">
-                                        <span class="truncate">{{ msg.fromName ?? msg.fromEmail }}</span>
-                                        <span class="flex-shrink-0">·</span>
-                                        <span class="flex-shrink-0">{{ formatDate(msg.sentAt ?? msg.receivedAt) }}</span>
-                                    </p>
-                                </div>
-                                <Icon
-                                    v-if="selectedMessage?.id === msg.id"
-                                    name="material-symbols:check-circle"
-                                    size="16"
-                                    class="flex-shrink-0 text-primary-500"
-                                />
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Footer -->
-                    <div class="flex justify-end gap-3 border-t border-neutral-100 px-6 py-4">
-                        <MalioButton
-                            variant="tertiary"
-                            label="Annuler"
-                            button-class="w-auto px-4"
-                            @click="close"
-                        />
-                        <MalioButton
-                            :label="t('mail.pickerModal.submit')"
-                            button-class="w-auto px-6"
-                            :disabled="!selectedMessage || isSubmitting"
-                            @click="handleSubmit"
-                        />
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
-
-<style scoped>
-.mail-modal-enter-active,
-.mail-modal-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.mail-modal-enter-active > div:last-child,
-.mail-modal-leave-active > div:last-child {
-    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
-}
-
-.mail-modal-enter-from,
-.mail-modal-leave-to {
-    opacity: 0;
-}
-
-.mail-modal-enter-from > div:last-child {
-    transform: scale(0.95) translateY(8px);
-    opacity: 0;
-}
-</style>