chopin-frontend/src/components/Widget/Playlist/PlaylistToasts.vue

<template>
    <Teleport to="body">
        <!-- Région toujours présente : les lecteurs d'écran n'annoncent que ce qui change dans une région déjà connue -->
        <section class="toasts" aria-label="Notifications des playlists">
            <div class="sr-only" aria-live="polite" aria-atomic="true">{{ politeText }}</div>
            <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ alertText }}</div>
            <TransitionGroup name="toast" tag="ul" class="toasts__list">
                <li
                    v-for="toast in playlistStore.toasts"
                    :key="toast.id"
                    :class="['toast', `toast--${toast.tone || 'info'}`]"
                >
                    <Icon class="toast__icon" :icon="ICONS[toast.tone] || ICONS.info" aria-hidden="true" />
                    <p class="toast__message">{{ toast.message }}</p>
                    <button
                        v-if="toast.action && typeof toast.action.run === 'function'"
                        type="button"
                        class="toast__action"
                        @click="runAction(toast)"
                    >{{ toast.action.label }}</button>
                    <IconAction
                        class="toast__close"
                        icon="fa-solid fa-xmark"
                        label="Fermer la notification"
                        @click="playlistStore.dismissToast(toast.id)"
                    />
                </li>
            </TransitionGroup>
        </section>
    </Teleport>
</template>
<script setup>
/**
 * Notifications courtes du store des playlists (playlistStore.notify).
 * Annonce vocale séparée de l'affichage : « polite » pour les succès / infos, « assertive » pour les erreurs.
 */
import { nextTick, ref, watch } from 'vue';
import IconAction from '@/components/UI/IconAction.vue';
import { usePlaylistStore } from '@/stores/playlistStore';

const playlistStore = usePlaylistStore();

const ICONS = {
    success: 'fa-solid fa-circle-check',
    error: 'fa-solid fa-circle-exclamation',
    info: 'fa-solid fa-circle-info'
};

const politeText = ref('');
const alertText = ref('');
let lastAnnounced = 0;

// Seules les nouvelles notifications sont lues (pas celles qui restent après une fermeture)
watch(() => playlistStore.toasts, (list) => {
    let polite = null;
    let alert = null;
    for (const toast of list) {
        if (toast.id <= lastAnnounced) continue;
        lastAnnounced = toast.id;
        if (toast.tone === 'error') alert = toast.message;
        else polite = toast.message;
    }
    // Vidé puis rempli : un message identique au précédent est relu
    if (polite !== null) {
        politeText.value = '';
        nextTick(() => { politeText.value = polite; });
    }
    if (alert !== null) {
        alertText.value = '';
        nextTick(() => { alertText.value = alert; });
    }
});

function runAction(toast) {
    playlistStore.dismissToast(toast.id);
    try {
        toast.action.run();
    } catch (error) {
        console.error('[PlaylistToasts] Action en échec', error);
    }
}
</script>
<style scoped>
.toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 4000;
    pointer-events: none;
}

.toasts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(420px, calc(100vw - 30px));
    box-sizing: border-box;
    padding: 10px 8px 10px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--toast-color);
    border-radius: var(--radius);
    background-color: var(--primary);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    font-size: 0.9rem;
    line-height: 1.4;
}

.toast--success { --toast-color: var(--text-success); }
.toast--error { --toast-color: var(--text-error); }
.toast--info { --toast-color: var(--text-info); }

.toast__icon {
    flex-shrink: 0;
    color: var(--toast-color);
}

.toast__message {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.toast__action {
    flex-shrink: 0;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease;
}

.toast__action:hover {
    background-color: color-mix(in srgb, var(--text) 9%, transparent);
}

.toast__action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.toast__close {
    flex-shrink: 0;
    font-size: 0.85em;
}

.toast-enter-active,
.toast-leave-active {
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.toast-enter-from,
.toast-leave-to {
    opacity: 0;
    transform: translateY(8px);
}

.toast-leave-active {
    position: absolute;
    right: 0;
}

.toast-move {
    transition: transform var(--dur) var(--ease);
}

@media screen and (max-width: 768px),
       screen and (max-height: 607px) {
    .toasts {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .toasts__list {
        align-items: stretch;
    }

    .toast {
        width: 100%;
        max-width: none;
    }
}
</style>