89 lines
3.0 KiB
Vue
89 lines
3.0 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)
|
|
|
|
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` }
|
|
}
|
|
</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">
|
|
<button
|
|
type="button"
|
|
class="w-full text-left"
|
|
@click="handleSelect(folder.path)"
|
|
>
|
|
<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()"
|
|
>
|
|
<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>
|
|
</div>
|
|
</button>
|
|
|
|
<MailFolderTree
|
|
v-if="folder.children && folder.children.length > 0"
|
|
:folders="folder.children"
|
|
:selected-path="selectedPath"
|
|
:depth="currentDepth + 1"
|
|
@select="handleSelect"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|