From f92d98d067cf3e60b7a47fece7737cd25cf88802 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 15 Jun 2026 20:11:12 +0200
Subject: [PATCH] feat(10-04): implement toast store, ToastContainer, mount in
 App.vue

- toast.js: reactive toasts array, show/dismiss with auto-dismiss via setTimeout
- ToastContainer.vue: Options API, Teleport to body, TransitionGroup, data-test attr
- type-to-class maps: accentClass/iconName/iconColorClass for success/error/warning/info
- App.vue: import and mount <ToastContainer /> after layout div
- all 10 tests pass; SettingsAccountTab and TotpEnrollment regressions green
---
 frontend/src/App.vue                          |  2 +
 frontend/src/components/ui/ToastContainer.vue | 73 +++++++++++++++++++
 frontend/src/stores/toast.js                  | 24 +++---
 3 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ui/ToastContainer.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 389a2e6..6309859 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,7 @@
       <router-view />
     </main>
   </div>
+  <ToastContainer />
 </template>
 
 <script setup>
@@ -13,6 +14,7 @@ import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import AppSidebar from './components/layout/AppSidebar.vue'
 import AuthLayout from './layouts/AuthLayout.vue'
+import ToastContainer from './components/ui/ToastContainer.vue'
 import { useTopicsStore } from './stores/topics.js'
 
 const route = useRoute()
diff --git a/frontend/src/components/ui/ToastContainer.vue b/frontend/src/components/ui/ToastContainer.vue
new file mode 100644
index 0000000..f0ed310
--- /dev/null
+++ b/frontend/src/components/ui/ToastContainer.vue
@@ -0,0 +1,73 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed bottom-4 right-4 z-[9999] flex flex-col-reverse gap-2 pointer-events-none">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toastStore.toasts"
+          :key="toast.id"
+          data-test="toast"
+          class="pointer-events-auto flex items-center gap-3 bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden max-w-sm min-w-[280px] cursor-pointer"
+          @click="toastStore.dismiss(toast.id)"
+        >
+          <div class="w-1 self-stretch shrink-0" :class="accentClass(toast.type)"></div>
+          <AppIcon :name="iconName(toast.type)" class="w-5 h-5 shrink-0" :class="iconColorClass(toast.type)" />
+          <p class="text-sm text-gray-800 flex-1 py-3 pr-4">{{ toast.message }}</p>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import AppIcon from './AppIcon.vue'
+import { useToastStore } from '../../stores/toast.js'
+
+export default {
+  name: 'ToastContainer',
+  components: { AppIcon },
+  data() {
+    return { toastStore: useToastStore() }
+  },
+  methods: {
+    accentClass(type) {
+      const map = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        warning: 'bg-amber-400',
+        info: 'bg-sky-400',
+      }
+      return map[type] ?? 'bg-gray-400'
+    },
+    iconName(type) {
+      const map = {
+        success: 'checkCircle',
+        error: 'exclamationCircle',
+        warning: 'warning',
+        info: 'exclamationCircle',
+      }
+      return map[type] ?? 'exclamationCircle'
+    },
+    iconColorClass(type) {
+      const map = {
+        success: 'text-green-500',
+        error: 'text-red-500',
+        warning: 'text-amber-500',
+        info: 'text-sky-500',
+      }
+      return map[type] ?? 'text-gray-500'
+    },
+  },
+}
+</script>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.2s ease;
+}
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>
diff --git a/frontend/src/stores/toast.js b/frontend/src/stores/toast.js
index 0206d89..f0a1055 100644
--- a/frontend/src/stores/toast.js
+++ b/frontend/src/stores/toast.js
@@ -1,20 +1,18 @@
-/**
- * Phase 7.1 STUB — Phase 10 (UX-10) fills in the full implementation.
- *
- * The signature `show(message, type, duration)` is locked and Phase 10 must
- * honor it without modifying Phase 8 call sites.
- *
- * Default values match UI-SPEC.md:
- *   type     = 'success'  (NOT 'info')
- *   duration = 4000
- */
+import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useToastStore = defineStore('toast', () => {
-  // eslint-disable-next-line no-unused-vars
+  const toasts = ref([])
+
   function show(message, type = 'success', duration = 4000) {
-    // No-op stub — Phase 10 implements rendering.
+    const id = Date.now() + Math.random()
+    toasts.value.push({ id, message, type, duration })
+    if (duration > 0) setTimeout(() => dismiss(id), duration)
   }
 
-  return { show }
+  function dismiss(id) {
+    toasts.value = toasts.value.filter(t => t.id !== id)
+  }
+
+  return { toasts, show, dismiss }
 })