Lesstime/frontend/modules/mail/components/MailMessageList.vue

<script setup lang="ts">
import type { MailMessageHeaderDto } from '~/modules/mail/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>