chore: bump version to v0.3.30

fix(ui) : fix code block rendering in markdown preview
Code blocks (triple backticks) had broken styling because prose-code styles (light background, padding) were also applied to <code> inside <pre>, conflicting with the dark pre background. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 08:18:54 +00:00 · 2026-04-10 10:18:40 +02:00 · 2026-04-09 14:35:49 +00:00 · 2026-04-09 16:35:41 +02:00
6 changed files with 144 additions and 8 deletions
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.3.28'
+    app.version: '0.3.30'
--- a/frontend/components/task/TaskModal.vue
+++ b/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()
--- a/frontend/components/ui/MarkdownPreviewModal.vue
+++ b/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 prose-pre:overflow-x-auto [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:text-[0.875rem] [&_pre_code]:leading-relaxed"
+                            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>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,13 +7,15 @@
            "name": "nuxt-app",
            "hasInstallScript": true,
            "dependencies": {
-                "@malio/layer-ui": "^1.2.0",
+                "@malio/layer-ui": "^1.2.3",
                "@nuxt/icon": "^2.2.1",
                "@nuxtjs/i18n": "^10.2.3",
                "@nuxtjs/tailwindcss": "^6.14.0",
                "@pinia/nuxt": "^0.11.3",
+                "@tailwindcss/typography": "^0.5.19",
                "@vuepic/vue-datepicker": "^12.1.0",
                "chart.js": "^4.5.1",
+                "marked": "^18.0.0",
                "nuxt": "^4.3.1",
                "nuxt-toast": "^1.4.0",
                "pinia": "^3.0.4",
@@ -2212,9 +2214,9 @@
            "license": "MIT"
        },
        "node_modules/@malio/layer-ui": {
-            "version": "1.2.0",
-            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.2.0/layer-ui-1.2.0.tgz",
-            "integrity": "sha512-/D/p7Tz5t8xsZ+qL4kwBs2XXA/yNJpwF5C8pbSrz06Z8Je/Yut2J4KT1YpPHcfyFFE3TB8TpV0Okg/29aN6Ggg==",
+            "version": "1.2.3",
+            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.2.3/layer-ui-1.2.3.tgz",
+            "integrity": "sha512-5nRnBzRkXfs3PfKwKl6sH2ikrmSK7lTifcd0TX1QZP3rFRVRTgcT6mrsrpsbR9PwI27OeCNm0X6d0Ii92Rq7Yg==",
            "dependencies": {
                "@nuxt/icon": "^2.2.1",
                "@nuxtjs/tailwindcss": "^6.14.0",
@@ -5301,6 +5303,31 @@
            "integrity": "sha512-G4ewlBNhUtlLvrJTb88d2mdy2KRijzs4UhnlrOSRT4bmjh/IqNElZa3zkrZ+TC47TwtlDWzVLFADljF1Ijp5hA==",
            "license": "CC0-1.0"
        },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.19",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+            "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/@tybys/wasm-util": {
            "version": "0.10.1",
            "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -9705,6 +9732,18 @@
                "source-map-js": "^1.2.1"
            }
        },
+        "node_modules/marked": {
+            "version": "18.0.0",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.0.tgz",
+            "integrity": "sha512-2e7Qiv/HJSXj8rDEpgTvGKsP8yYtI9xXHKDnrftrmnrJPaFNM7VRb2YCzWaX4BP1iCJ/XPduzDJZMFoqTCcIMA==",
+            "license": "MIT",
+            "bin": {
+                "marked": "bin/marked.js"
+            },
+            "engines": {
+                "node": ">= 20"
+            }
+        },
        "node_modules/maska": {
            "version": "3.2.0",
            "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,13 +11,15 @@
        "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
    },
    "dependencies": {
-        "@malio/layer-ui": "^1.2.0",
+        "@malio/layer-ui": "^1.2.3",
        "@nuxt/icon": "^2.2.1",
        "@nuxtjs/i18n": "^10.2.3",
        "@nuxtjs/tailwindcss": "^6.14.0",
        "@pinia/nuxt": "^0.11.3",
+        "@tailwindcss/typography": "^0.5.19",
        "@vuepic/vue-datepicker": "^12.1.0",
        "chart.js": "^4.5.1",
+        "marked": "^18.0.0",
        "nuxt": "^4.3.1",
        "nuxt-toast": "^1.4.0",
        "pinia": "^3.0.4",
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,7 +1,9 @@
 import type {Config} from 'tailwindcss'
+import typography from '@tailwindcss/typography'

 export default <Partial<Config>>{
    darkMode: 'class',
+    plugins: [typography],
    theme: {
        extend: {
            fontFamily: {
Author	SHA1	Message	Date
gitea-actions	f1fd80d9ac	chore: bump version to v0.3.30 All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details Build & Push Docker Image / build (push) Successful in 2m43s Details	2026-04-10 08:18:54 +00:00
Matthieu	24e3e8e989	fix(ui) : fix code block rendering in markdown preview Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details Code blocks (triple backticks) had broken styling because prose-code styles (light background, padding) were also applied to <code> inside <pre>, conflicting with the dark pre background. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-10 10:18:40 +02:00
gitea-actions	47f2ab9cd4	chore: bump version to v0.3.29 All checks were successful Build & Push Docker Image / build (push) Successful in 1m11s Details Auto Tag Develop / tag (push) Successful in 6s Details	2026-04-09 14:35:49 +00:00
Matthieu	36729f8f61	feat(task) : add markdown preview for task description Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-09 16:35:41 +02:00