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/admin/WorkflowDrawer.vue

@@ -46,15 +46,13 @@
                                 label="Libellé"
                                 input-class="w-full"
                             />
-                            <select
+                            <MalioSelect
                                 v-model="s.category"
-                                class="h-10 rounded border border-neutral-300 px-2 text-sm"
-                                aria-label="Catégorie"
-                            >
-                                <option v-for="c in categoryOptions" :key="c.value" :value="c.value">
-                                    {{ c.label }}
-                                </option>
-                            </select>
+                                :options="categoryOptions"
+                                label="Catégorie"
+                                min-width="w-44"
+                                group-class="shrink-0"
+                            />
                             <button
                                 type="button"
                                 class="h-10 px-2 text-red-600 hover:text-red-800"
@@ -97,6 +95,7 @@
 
 <script setup lang="ts">
 import type { Workflow, StatusCategory } from '~/services/dto/workflow'
+import { STATUS_CATEGORY_COLOR } from '~/services/dto/workflow'
 import type { TaskStatusWrite } from '~/services/dto/task-status'
 import { useWorkflowService } from '~/services/workflows'
 import { useTaskStatusService } from '~/services/task-statuses'
@@ -171,10 +170,20 @@ watch(() => props.modelValue, (open) => {
     touched.name = false
 })
 
+watch(() => form.statuses.map(s => s.category), (cats, prev) => {
+    if (!prev) return
+    cats.forEach((cat, i) => {
+        const s = form.statuses[i]
+        if (s && cat !== prev[i] && s.color === STATUS_CATEGORY_COLOR[prev[i] as StatusCategory]) {
+            s.color = STATUS_CATEGORY_COLOR[cat as StatusCategory]
+        }
+    })
+})
+
 function addStatus() {
     form.statuses.push({
         label: '',
-        color: '#222783',
+        color: STATUS_CATEGORY_COLOR.todo,
         position: form.statuses.length,
         isFinal: false,
         category: 'todo',

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>

frontend/components/task/StatusPickerPopover.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+
+defineProps<{
+    statuses: TaskStatus[]
+    x: number
+    y: number
+}>()
+
+const emit = defineEmits<{
+    pick: [status: TaskStatus]
+    cancel: []
+}>()
+</script>
+
+<template>
+    <Teleport to="body">
+        <div class="fixed inset-0 z-[60]" @click="emit('cancel')" />
+        <div
+            class="fixed z-[61] min-w-44 rounded-lg border border-neutral-200 bg-white py-1 shadow-xl"
+            :style="{ left: x + 'px', top: y + 'px' }"
+        >
+            <button
+                v-for="s in statuses"
+                :key="s.id"
+                type="button"
+                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-neutral-50"
+                @click="emit('pick', s)"
+            >
+                <span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: s.color }" />
+                {{ s.label }}
+            </button>
+        </div>
+    </Teleport>
+</template>

frontend/components/task/TaskCard.vue

@@ -27,7 +27,7 @@
                         :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
                     />
                 </div>
-                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                <h4 class="line-clamp-2 text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
             </div>
             <MalioButtonIcon
                 :icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
@@ -39,7 +39,7 @@
             />
         </div>
 
-        <div class="mt-2 flex items-center gap-1.5">
+        <div class="mt-2 flex flex-wrap items-center gap-1.5">
             <span
                 v-if="showStatusBadge && task.status"
                 class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"

frontend/components/task/TaskModal.vue

@@ -55,7 +55,7 @@
                     </div>
 
                     <!-- Body -->
-                    <form @submit.prevent="handleSubmit" class="overflow-y-auto px-4 py-4 sm:px-8 sm:py-6">
+                    <form @submit.prevent="handleSubmit" class="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-8 sm:py-6">
                         <!-- Tabs -->
                         <div class="border-b border-neutral-100 -mx-4 px-4 sm:-mx-8 sm:px-8 mb-4">
                             <nav class="flex gap-6">
@@ -481,73 +481,54 @@
                                 </NuxtLink>
                             </div>
 
-                            <!-- Bouton lier un mail -->
-                            <div class="pt-2">
-                                <MalioButton
-                                    :label="$t('mail.taskTab.linkButton')"
-                                    variant="secondary"
-                                    icon-name="material-symbols:link"
-                                    icon-position="left"
-                                    :icon-size="14"
-                                    button-class="w-auto"
-                                    @click="showMailPickerModal = true"
-                                />
-                            </div>
-
-                            <!-- Modal picker mail -->
-                            <MailPickerModal
-                                v-if="task"
-                                v-model="showMailPickerModal"
-                                :task-id="task.id"
-                                @linked="handleMailLinked"
-                            />
                         </div>
 
-                        <!-- Footer -->
-                        <div
-                            class="mt-6 flex items-center border-t border-neutral-100 pt-5"
-                            :class="isEditing ? 'justify-between' : 'justify-end'"
-                        >
+                    </form>
+
+                    <!-- Footer -->
+                    <div
+                        class="shrink-0 flex items-center border-t border-neutral-100 bg-white px-4 py-4 sm:px-8 sm:py-5"
+                        :class="isEditing ? 'justify-between' : 'justify-end'"
+                    >
+                        <MalioButton
+                            v-if="isEditing"
+                            variant="danger"
+                            label="Supprimer"
+                            button-class="w-auto px-4"
+                            :disabled="isSubmitting"
+                            @click="confirmDeleteOpen = true"
+                        />
+                        <div class="flex gap-3">
                             <MalioButton
-                                v-if="isEditing"
-                                variant="danger"
-                                label="Supprimer"
+                                v-if="canArchive"
+                                variant="tertiary"
+                                :label="$t('archive.archiveButton')"
                                 button-class="w-auto px-4"
                                 :disabled="isSubmitting"
-                                @click="confirmDeleteOpen = true"
+                                @click="handleArchive"
+                            />
+                            <MalioButton
+                                v-if="canUnarchive"
+                                variant="tertiary"
+                                :label="$t('archive.unarchiveButton')"
+                                button-class="w-auto px-4"
+                                :disabled="isSubmitting"
+                                @click="handleUnarchive"
+                            />
+                            <MalioButton
+                                variant="tertiary"
+                                label="Annuler"
+                                button-class="w-auto px-4"
+                                @click="close"
+                            />
+                            <MalioButton
+                                label="Enregistrer"
+                                button-class="w-auto px-6"
+                                :disabled="isSubmitting"
+                                @click="handleSubmit"
                             />
-                            <div class="flex gap-3">
-                                <MalioButton
-                                    v-if="canArchive"
-                                    variant="tertiary"
-                                    :label="$t('archive.archiveButton')"
-                                    button-class="w-auto px-4"
-                                    :disabled="isSubmitting"
-                                    @click="handleArchive"
-                                />
-                                <MalioButton
-                                    v-if="canUnarchive"
-                                    variant="tertiary"
-                                    :label="$t('archive.unarchiveButton')"
-                                    button-class="w-auto px-4"
-                                    :disabled="isSubmitting"
-                                    @click="handleUnarchive"
-                                />
-                                <MalioButton
-                                    variant="tertiary"
-                                    label="Annuler"
-                                    button-class="w-auto px-4"
-                                    @click="close"
-                                />
-                                <MalioButton
-                                    label="Enregistrer"
-                                    button-class="w-auto px-6"
-                                    :disabled="isSubmitting"
-                                    @click="handleSubmit"
-                                />
-                            </div>
                         </div>
-                    </form>
+                    </div>
 
                     <ConfirmDeleteTaskModal
                         v-model="confirmDeleteOpen"
@@ -624,7 +605,6 @@ const activeTab = ref<'details' | 'planning' | 'mails'>('details')
 const mailService = useMailService()
 const linkedMails = ref<MailMessageHeaderDto[]>([])
 const mailsLoading = ref(false)
-const showMailPickerModal = ref(false)
 
 const giteaUrl = ref('')
 const { getSettings: getGiteaSettings } = useGiteaService()
@@ -671,10 +651,27 @@ const touched = reactive({
     project: false,
 })
 
-const statusOptions = computed(() =>
-    props.statuses.map(s => ({ label: s.label, value: s.id }))
+const showProjectSelect = computed(() => !!props.projects?.length && !isEditing.value)
+
+const projectOptions = computed(() =>
+    (props.projects ?? []).map(p => ({ label: p.name, value: p.id }))
 )
 
+const resolvedProjectId = computed(() =>
+    showProjectSelect.value ? form.projectId : props.projectId
+)
+
+const statusOptions = computed(() => {
+    const project = props.projects?.find(p => p.id === resolvedProjectId.value)
+    const wfStatuses = project?.workflow?.statuses ?? props.statuses
+    const opts = wfStatuses.map(s => ({ label: s.label, value: s.id }))
+    const current = props.task?.status
+    if (current && !wfStatuses.some(s => s.id === current.id)) {
+        opts.unshift({ label: current.label, value: current.id })
+    }
+    return opts
+})
+
 const effortOptions = computed(() =>
     props.efforts.map(e => ({ label: e.label, value: e.id }))
 )
@@ -707,16 +704,6 @@ const groupOptions = computed(() => {
     return filtered.map(g => ({ label: g.title, value: g.id }))
 })
 
-const showProjectSelect = computed(() => !!props.projects?.length && !isEditing.value)
-
-const projectOptions = computed(() =>
-    (props.projects ?? []).map(p => ({ label: p.name, value: p.id }))
-)
-
-const resolvedProjectId = computed(() =>
-    showProjectSelect.value ? form.projectId : props.projectId
-)
-
 const canArchive = computed(() => {
     if (!isEditing.value || !props.task) return false
     if (props.task.archived) return false
@@ -933,11 +920,6 @@ watch(activeTab, async (tab) => {
     }
 })
 
-async function handleMailLinked(): Promise<void> {
-    showMailPickerModal.value = false
-    await loadLinkedMails()
-}
-
 function formatMailDate(iso: string | null): string {
     if (!iso) return ''
     return new Date(iso).toLocaleDateString('fr', {

frontend/components/ui/AppModal.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    modelValue: boolean
+    title?: string
+    /** Largeur max du panneau */
+    width?: 'sm' | 'md' | 'lg' | 'xl'
+}>(), {
+    title: '',
+    width: 'md',
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+}>()
+
+const WIDTH_CLASS: Record<NonNullable<typeof props.width>, string> = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+}
+
+function close(): void {
+    emit('update:modelValue', false)
+}
+</script>
+
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="app-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 flex max-h-[90vh] w-full flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
+                    :class="WIDTH_CLASS[width]"
+                >
+                    <!-- Header (fixe) -->
+                    <div class="flex shrink-0 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">
+                            <slot name="title">{{ title }}</slot>
+                        </h2>
+                        <MalioButtonIcon
+                            icon="mdi:close"
+                            aria-label="Fermer"
+                            variant="ghost"
+                            icon-size="20"
+                            @click="close"
+                        />
+                    </div>
+
+                    <!-- Body (scrollable) -->
+                    <div class="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+                        <slot />
+                    </div>
+
+                    <!-- Footer (sticky) -->
+                    <div
+                        v-if="$slots.footer"
+                        class="flex shrink-0 justify-end gap-3 border-t border-neutral-100 bg-white px-6 py-4"
+                    >
+                        <slot name="footer" />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.app-modal-enter-active,
+.app-modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+.app-modal-enter-active > div:last-child,
+.app-modal-leave-active > div:last-child {
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+.app-modal-enter-from,
+.app-modal-leave-to {
+    opacity: 0;
+}
+.app-modal-enter-from > div:last-child {
+    transform: scale(0.95) translateY(8px);
+    opacity: 0;
+}
+</style>