matthieu
c6fa5a534e
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>
124 lines
4.3 KiB
Vue
124 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import type { MailFolderDto } from '~/services/dto/mail'
|
|
|
|
const props = defineProps<{
|
|
/** Arbre de dossiers (getter folderTree du store) */
|
|
folders: readonly MailFolderDto[]
|
|
/** Chemin du dossier actuellement sélectionné */
|
|
selectedPath: string | null
|
|
/** Niveau de profondeur pour l'indentation (usage récursif interne) */
|
|
depth?: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [path: string]
|
|
}>()
|
|
|
|
const { getFolderLabel, getFolderIcon } = useSystemFolderLabel()
|
|
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
|
|
return { paddingLeft: `${0.5 + depth * 0.75}rem` }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div
|
|
v-if="folders.length === 0 && currentDepth === 0"
|
|
class="px-3 py-4 text-sm text-neutral-400 italic"
|
|
>
|
|
{{ t('mail.empty.folder') }}
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div v-for="folder in folders" :key="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()"
|
|
>
|
|
<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)"
|
|
size="16"
|
|
class="flex-shrink-0"
|
|
:class="selectedPath === folder.path ? 'text-primary-600' : 'text-neutral-400'"
|
|
/>
|
|
|
|
<span class="flex-1 truncate">
|
|
{{ getFolderLabel(folder.path, folder.displayName) }}
|
|
</span>
|
|
|
|
<span
|
|
v-if="folder.unreadCount > 0"
|
|
class="ml-auto flex-shrink-0 rounded-full bg-primary-500 px-1.5 py-0.5 text-xs font-bold text-white"
|
|
>
|
|
{{ folder.unreadCount > 99 ? '99+' : folder.unreadCount }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<MailFolderTree
|
|
v-if="hasChildren(folder) && isExpanded(folder.path)"
|
|
:folders="folder.children"
|
|
:selected-path="selectedPath"
|
|
:depth="currentDepth + 1"
|
|
@select="handleSelect"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|