From 8a4cd645b4f685c883c6c9c15282fe92408e773a Mon Sep 17 00:00:00 2001
From: Valentin Boulanger <valentin.boulanger@protonmail.com>
Date: Tue, 24 Dec 2024 14:34:19 +0100
Subject: [PATCH] added the toast notifications center

---
 frontend/src/App.svelte                       |  6 +-
 .../General/ToastNotification.svelte          | 94 +++++++++++++++++++
 .../src/components/Settings/Settings.svelte   |  7 +-
 frontend/src/stores.js                        | 10 ++
 4 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/General/ToastNotification.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 23b0f57..5e9fdc3 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -9,9 +9,10 @@
   import Show from './components/Show/Show.svelte';
   import GeneralConsole from './components/Console/GeneralConsole.svelte';
   import RoundIconButton from './components/General/RoundIconButton.svelte';
-  import { currentProject, needProjectSave } from './stores';
+  import { generateToast, currentProject, needProjectSave } from './stores';
   import { SaveProject } from '../wailsjs/go/main/App.js';
     import { construct_svelte_component } from 'svelte/internal';
+    import ToastNotification from './components/General/ToastNotification.svelte';
 
   let selectedMenu = "settings"
   // When the navigation menu changed, update the selected menu
@@ -26,8 +27,10 @@
       $currentProject.SaveFile = saveFile
       needProjectSave.set(false)
       console.log("Project has been saved")
+      generateToast('info', 'bxs-save', 'The project has been saved')
     }).catch((error) => {
       console.error(`Unable to save the project: ${error}`)
+      generateToast('danger', 'bx-error', 'Unable to save the project: ' + error)
     })
   }
 
@@ -73,6 +76,7 @@
   {:else if selectedMenu === "console"}
   <GeneralConsole />
   {/if}
+  <ToastNotification/>
 </main>
 
 <style>
diff --git a/frontend/src/components/General/ToastNotification.svelte b/frontend/src/components/General/ToastNotification.svelte
new file mode 100644
index 0000000..23571e4
--- /dev/null
+++ b/frontend/src/components/General/ToastNotification.svelte
@@ -0,0 +1,94 @@
+<script lang=ts>
+    import { time } from 'svelte-i18n';
+   import {messages, colors} from '../../stores.js';
+
+   let timers = {};
+
+   function removeToast(id) {
+        // Supprime un toast par son ID
+        $messages = $messages.filter(message => message.id !== id);
+        clearTimeout(timers[id]);
+    }
+
+    $: {
+        // Ajoute un timer pour supprimer automatiquement les toasts
+        for (const message of $messages) {
+            if (!timers[message.id]) {
+                timers[message.id] = setTimeout(() => removeToast(message.id), 5000);
+            }
+        }
+    }
+</script>
+
+<div class="notificationsPanel">
+    {#each $messages as message}
+        <div class="toastMessage" style="background-color: {$colors.second}; color: {$colors.white}" on:mouseup={() => removeToast(message.id)}>
+            <div class="toastIndicator" style="background-color:{(message.type == 'danger') ? $colors.nok : (message.type == 'warning') ? $colors.orange : $colors.third};"></div>
+            <p><i class='bx {message.icon}'></i> {@html message.text}</p>
+        </div>
+    {/each}
+</div>
+
+<style>
+    p{
+        margin: 0.5em;
+    }
+
+    .toastIndicator{
+        width: 10px;
+        border-top-left-radius: 0.5em;
+        border-bottom-left-radius: 0.5em;
+    }
+
+    .toastMessage:hover {
+        opacity: 1;
+    }
+
+    .toastMessage{
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        white-space: normal;
+        z-index: 150;
+        display: flex;
+        opacity: 0.8;
+        border-radius: 0.5em;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), /* Ombre principale douce */
+              0px 1px 3px rgba(0, 0, 0, 0.06); /* Ombre plus subtile */
+        animation: fade-in 0.3s ease-out, fade-out 0.3s ease-in 4.7s;
+    }
+
+    @keyframes fade-in {
+        from {
+        opacity: 0;
+        transform: translateY(20px);
+        }
+        to {
+        opacity: 0.9;
+        transform: translateY(0);
+        }
+    }
+
+    @keyframes fade-out {
+        from {
+        opacity: 0.9;
+        transform: translateY(0);
+        }
+        to {
+        opacity: 0;
+        transform: translateY(20px);
+        }
+    }
+
+    .notificationsPanel{
+        max-width: 50em;
+        align-items: flex-end;
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        z-index: 1000;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/Settings.svelte b/frontend/src/components/Settings/Settings.svelte
index 06ba603..20f4da9 100644
--- a/frontend/src/components/Settings/Settings.svelte
+++ b/frontend/src/components/Settings/Settings.svelte
@@ -7,7 +7,7 @@
     import Tab from "../General/Tab.svelte";
     import { GetProjects, GetProjectInfo } from "../../../wailsjs/go/main/App";
     import { _ } from 'svelte-i18n'
-    import {colors} from '../../stores.js';
+    import {generateToast, colors} from '../../stores.js';
 
     const tabs = [
         { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
@@ -21,9 +21,9 @@
         GetProjects().then((projects) => {
         choices = new Map(projects.map(item => [item.ShowInfo.SaveFile, item.ShowInfo.Name]));
         $projectsList = projects
-        console.log(projectsList)
         }).catch((error) => {
             console.error(`Unable to get the projects list: ${error}`)
+            generateToast('danger', 'bx-error', 'Unable to get the projects list')
         })
     }
 
@@ -34,8 +34,10 @@
             console.log("Project opened")
             $currentProject = projectInfo
             needProjectSave.set(false)
+            generateToast('info', 'bx-folder-open', 'The project <b>' + projectInfo.Name + '</b> was opened')
         }).catch((error) => {
             console.error(`Unable to open the project: ${error}`)
+            generateToast('danger', 'bx-error', 'Unable to open the project')
         })
     }
 
@@ -48,6 +50,7 @@
             Comments: "Write your comments here",
             SaveFile: "",
         });
+        generateToast('info', 'bxs-folder-plus', 'The project was created')
     }
 
     function formatDate(date) {
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 2979d0f..47fa055 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -7,6 +7,16 @@ export let projectsList = writable([])
 export let currentProject = writable({});
 export let needProjectSave = writable(false)
 
+// Toasts notifications
+export let messages = writable([])
+export function generateToast(type, icon, text){
+    messages.update((value) => {
+        value.push( { id: Date.now(), type: type, icon: icon, text: text } )
+        return value.slice(-5)
+    })
+}
+
+
 // Application colors
 export const colors = writable({
     first: "#1B262C",