From c6fa5a534e8195dee07c2ff79e9dd557d16f7624 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Wed, 20 May 2026 08:05:00 +0200
Subject: [PATCH] =?UTF-8?q?feat(mail)=20:=20arbre=20des=20dossiers=20repli?=
 =?UTF-8?q?able=20=E2=80=94=20chevrons,=20sous-dossiers=20masqu=C3=A9s=20p?=
 =?UTF-8?q?ar=20d=C3=A9faut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Seuls les dossiers racine sont affichés au départ ; chevron pour déplier/replier
chaque dossier ayant des sous-dossiers. Le clic sur le nom sélectionne toujours le dossier.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/components/mail/MailFolderTree.vue | 69 ++++++++++++++++-----
 frontend/i18n/locales/fr.json               |  4 ++
 2 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/frontend/components/mail/MailFolderTree.vue b/frontend/components/mail/MailFolderTree.vue
index e015a7f..604aaba 100644
--- a/frontend/components/mail/MailFolderTree.vue
+++ b/frontend/components/mail/MailFolderTree.vue
@@ -19,14 +19,34 @@ const { t } = useI18n()
 
 const currentDepth = computed(() => props.depth ?? 0)
 
+// Dossiers dépliés (repliés par défaut → seuls les dossiers racine sont visibles).
+const expanded = ref<Set<string>>(new Set())
+
+function isExpanded(path: string): boolean {
+    return expanded.value.has(path)
+}
+
+function toggleExpanded(path: string): void {
+    const next = new Set(expanded.value)
+    if (next.has(path)) {
+        next.delete(path)
+    } else {
+        next.add(path)
+    }
+    expanded.value = next
+}
+
+function hasChildren(folder: MailFolderDto): boolean {
+    return !!folder.children && folder.children.length > 0
+}
+
 function handleSelect(path: string): void {
     emit('select', path)
 }
 
 function paddingStyle(): Record<string, string> {
     const depth = currentDepth.value
-    if (depth <= 0) return {}
-    return { paddingLeft: `${0.75 + depth * 0.75}rem` }
+    return { paddingLeft: `${0.5 + depth * 0.75}rem` }
 }
 </script>
 
@@ -41,19 +61,34 @@ function paddingStyle(): Record<string, string> {
 
         <template v-else>
             <div v-for="folder in folders" :key="folder.path">
-                <button
-                    type="button"
-                    class="w-full text-left"
-                    @click="handleSelect(folder.path)"
+                <div
+                    class="flex items-center gap-1 rounded-md pr-2 py-1.5 text-sm transition-colors"
+                    :class="
+                        selectedPath === folder.path
+                            ? 'bg-primary-100 text-primary-700 font-medium'
+                            : 'text-neutral-700 hover:bg-neutral-100'
+                    "
+                    :style="paddingStyle()"
                 >
-                    <div
-                        class="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors"
-                        :class="
-                            selectedPath === folder.path
-                                ? 'bg-primary-100 text-primary-700 font-medium'
-                                : 'text-neutral-700 hover:bg-neutral-100'
-                        "
-                        :style="paddingStyle()"
+                    <button
+                        v-if="hasChildren(folder)"
+                        type="button"
+                        class="flex-shrink-0 rounded p-0.5 hover:bg-neutral-200"
+                        :aria-label="isExpanded(folder.path) ? t('mail.folderTree.collapse') : t('mail.folderTree.expand')"
+                        @click.stop="toggleExpanded(folder.path)"
+                    >
+                        <Icon
+                            :name="isExpanded(folder.path) ? 'material-symbols:keyboard-arrow-down' : 'material-symbols:chevron-right'"
+                            size="16"
+                            class="text-neutral-400"
+                        />
+                    </button>
+                    <span v-else class="inline-block w-[22px] flex-shrink-0" />
+
+                    <button
+                        type="button"
+                        class="flex flex-1 items-center gap-2 text-left min-w-0"
+                        @click="handleSelect(folder.path)"
                     >
                         <Icon
                             :name="getFolderIcon(folder.path)"
@@ -72,11 +107,11 @@ function paddingStyle(): Record<string, string> {
                         >
                             {{ folder.unreadCount > 99 ? '99+' : folder.unreadCount }}
                         </span>
-                    </div>
-                </button>
+                    </button>
+                </div>
 
                 <MailFolderTree
-                    v-if="folder.children && folder.children.length > 0"
+                    v-if="hasChildren(folder) && isExpanded(folder.path)"
                     :folders="folder.children"
                     :selected-path="selectedPath"
                     :depth="currentDepth + 1"
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 4373561..d6d469f 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -496,6 +496,10 @@
             "list": "Aucun message dans ce dossier.",
             "viewer": "Sélectionnez un message pour le lire."
         },
+        "folderTree": {
+            "expand": "Déplier le dossier",
+            "collapse": "Replier le dossier"
+        },
         "systemFolder": {
             "inbox": "Boîte de réception",
             "sent": "Éléments envoyés",