feat(mail) : MailMessageList — liste paginée infinite scroll, indicateurs lu/étoilé/PJ/date relative

frontend/components/mail/MailMessageList.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { MailMessageHeaderDto } from '~/services/dto/mail'
+
+const props = defineProps<{
+    messages: readonly MailMessageHeaderDto[]
+    selectedId: number | null
+    loading: boolean
+    hasMore: boolean
+}>()
+
+const emit = defineEmits<{
+    select: [id: number]
+    loadMore: []
+}>()
+
+const { t } = useI18n()
+
+const sentinelRef = ref<HTMLDivElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+    if (!sentinelRef.value) return
+    observer = new IntersectionObserver(
+        (entries) => {
+            const entry = entries[0]
+            if (entry?.isIntersecting && props.hasMore && !props.loading) {
+                emit('loadMore')
+            }
+        },
+        { threshold: 0.1 },
+    )
+    observer.observe(sentinelRef.value)
+})
+
+onBeforeUnmount(() => {
+    observer?.disconnect()
+    observer = null
+})
+
+/**
+ * Formate une date ISO en date relative (il y a X minutes/heures/jours).
+ * Utilise Intl.RelativeTimeFormat avec la locale fr.
+ */
+function formatRelative(isoDate: string | null): string {
+    if (!isoDate) return ''
+    const date = new Date(isoDate)
+    const now = new Date()
+    const diffMs = date.getTime() - now.getTime()
+    const diffSeconds = Math.round(diffMs / 1000)
+    const diffMinutes = Math.round(diffSeconds / 60)
+    const diffHours = Math.round(diffMinutes / 60)
+    const diffDays = Math.round(diffHours / 24)
+
+    const rtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' })
+
+    if (Math.abs(diffMinutes) < 1) return rtf.format(diffSeconds, 'second')
+    if (Math.abs(diffHours) < 1) return rtf.format(diffMinutes, 'minute')
+    if (Math.abs(diffDays) < 1) return rtf.format(diffHours, 'hour')
+    if (Math.abs(diffDays) < 30) return rtf.format(diffDays, 'day')
+
+    return date.toLocaleDateString('fr', { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+function getSenderLabel(msg: MailMessageHeaderDto): string {
+    return msg.fromName ?? msg.fromEmail ?? ''
+}
+</script>
+
+<template>
+    <div class="flex h-full flex-col overflow-hidden">
+        <div
+            v-if="!loading && messages.length === 0"
+            class="flex flex-1 items-center justify-center text-sm text-neutral-400 italic px-4 text-center"
+        >
+            {{ t('mail.empty.list') }}
+        </div>
+
+        <div v-else class="flex-1 overflow-y-auto divide-y divide-neutral-100">
+            <button
+                v-for="msg in messages"
+                :key="msg.id"
+                type="button"
+                class="flex w-full gap-3 px-3 py-3 text-left transition-colors hover:bg-neutral-50 focus:outline-none"
+                :class="[
+                    selectedId === msg.id ? 'bg-primary-50 border-l-2 border-primary-500' : '',
+                    !msg.isRead ? 'bg-white' : 'bg-neutral-50/50',
+                ]"
+                @click="emit('select', msg.id)"
+            >
+                <div class="mt-1.5 flex-shrink-0">
+                    <span
+                        class="block h-2 w-2 rounded-full"
+                        :class="msg.isRead ? 'bg-transparent' : 'bg-primary-500'"
+                    />
+                </div>
+
+                <div class="min-w-0 flex-1">
+                    <div class="flex items-center justify-between gap-2">
+                        <span
+                            class="truncate text-sm"
+                            :class="msg.isRead ? 'text-neutral-600 font-normal' : 'text-neutral-900 font-semibold'"
+                        >
+                            {{ getSenderLabel(msg) }}
+                        </span>
+                        <span class="flex-shrink-0 text-xs text-neutral-400">
+                            {{ formatRelative(msg.sentAt ?? msg.receivedAt) }}
+                        </span>
+                    </div>
+
+                    <p
+                        class="truncate text-sm"
+                        :class="msg.isRead ? 'text-neutral-500' : 'text-neutral-800 font-medium'"
+                    >
+                        {{ msg.subject ?? t('mail.noSubject') }}
+                    </p>
+
+                    <div class="mt-0.5 flex items-center gap-1.5">
+                        <Icon
+                            v-if="msg.isFlagged"
+                            name="material-symbols:star"
+                            size="14"
+                            class="text-amber-400 flex-shrink-0"
+                        />
+                        <Icon
+                            v-if="msg.hasAttachments"
+                            name="material-symbols:attach-file"
+                            size="14"
+                            class="text-neutral-400 flex-shrink-0"
+                        />
+                        <Icon
+                            v-if="msg.linkedTaskIds.length > 0"
+                            name="material-symbols:task-outline"
+                            size="14"
+                            class="text-primary-400 flex-shrink-0"
+                        />
+                    </div>
+                </div>
+            </button>
+
+            <div ref="sentinelRef" class="h-px" />
+
+            <div v-if="loading && messages.length > 0" class="flex items-center justify-center py-4">
+                <Icon name="material-symbols:progress-activity" size="20" class="animate-spin text-neutral-400" />
+            </div>
+        </div>
+
+        <div v-if="loading && messages.length === 0" class="flex flex-1 items-center justify-center">
+            <Icon name="material-symbols:progress-activity" size="24" class="animate-spin text-neutral-400" />
+        </div>
+    </div>
+</template>