feat(task) : add markdown preview for task description

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/components/task/TaskModal.vue

@@ -196,9 +196,20 @@
 
                         <!-- Description -->
                         <div class="mt-5">
+                            <div class="mb-1 flex items-center justify-between">
+                                <label class="text-sm font-medium text-slate-700">Description</label>
+                                <button
+                                    v-if="form.description"
+                                    type="button"
+                                    class="flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                                    @click="showMarkdownPreview = true"
+                                >
+                                    <Icon name="heroicons:eye" class="size-3.5" />
+                                    Aperçu MD
+                                </button>
+                            </div>
                             <MalioInputTextArea
                                 v-model="form.description"
-                                label="Description"
                                 :size="5"
                                 resize="vertical"
                                 :min-resize-height="140"
@@ -206,6 +217,12 @@
                             />
                         </div>
 
+                        <MarkdownPreviewModal
+                            v-model="showMarkdownPreview"
+                            :content="form.description"
+                            title="Aperçu de la description"
+                        />
+
                         <!-- Documents -->
                         <TaskDocumentUpload
                             v-if="isEditing && task && isAdmin"
@@ -541,7 +558,7 @@ const isOpen = computed({
 })
 
 function close() {
-    if (confirmDeleteDocOpen.value || confirmDeleteOpen.value) return
+    if (confirmDeleteDocOpen.value || confirmDeleteOpen.value || showMarkdownPreview.value) return
     isOpen.value = false
 }
 
@@ -549,6 +566,7 @@ const isEditing = computed(() => !!props.task)
 const isSubmitting = ref(false)
 const confirmDeleteOpen = ref(false)
 const activeTab = ref<'details' | 'planning'>('details')
+const showMarkdownPreview = ref(false)
 
 const giteaUrl = ref('')
 const { getSettings: getGiteaSettings } = useGiteaService()

frontend/components/ui/MarkdownPreviewModal.vue

@@ -0,0 +1,75 @@
+<template>
+    <Teleport to="body">
+        <Transition name="md-preview" appear>
+            <div v-if="modelValue" class="fixed inset-0 z-[60] flex items-center justify-center p-4">
+                <!-- Backdrop -->
+                <div
+                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
+                    @click="emit('update:modelValue', false)"
+                />
+
+                <!-- Modal -->
+                <div
+                    class="relative z-10 flex w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
+                    style="max-height: min(80vh, 700px)"
+                >
+                    <!-- Header -->
+                    <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+                        <h3 class="text-lg font-semibold text-slate-800">
+                            {{ title }}
+                        </h3>
+                        <button
+                            class="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                            @click="emit('update:modelValue', false)"
+                        >
+                            <Icon name="heroicons:x-mark" class="size-5" />
+                        </button>
+                    </div>
+
+                    <!-- Body -->
+                    <div class="overflow-y-auto px-6 py-4">
+                        <div
+                            v-if="content"
+                            class="prose prose-slate max-w-none prose-headings:font-semibold prose-a:text-blue-600 prose-code:rounded prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 prose-pre:text-slate-100"
+                            v-html="renderedHtml"
+                        />
+                        <p v-else class="text-sm italic text-slate-400">
+                            Aucune description
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { marked } from 'marked'
+
+const props = defineProps<{
+    modelValue: boolean
+    content: string
+    title?: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+}>()
+
+const renderedHtml = computed(() => {
+    if (!props.content) return ''
+    return marked.parse(props.content, { async: false }) as string
+})
+</script>
+
+<style scoped>
+.md-preview-enter-active,
+.md-preview-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.md-preview-enter-from,
+.md-preview-leave-to {
+    opacity: 0;
+}
+</style>