From 4ea74e4fd375d5895d2e58b089e7221dacb6c50a Mon Sep 17 00:00:00 2001
From: Darragh Van Tichelen <info@darragh.dev>
Date: Sun, 21 Jan 2024 12:49:21 +0100
Subject: [PATCH] feat(Note): Show notification on note share

---
 .../components/toasts/SingleButtonToast.vue   |  5 ++--
 client/src/game/systems/notes/events.ts       | 26 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/client/src/core/components/toasts/SingleButtonToast.vue b/client/src/core/components/toasts/SingleButtonToast.vue
index c7d3dec16..cf24ac9a6 100644
--- a/client/src/core/components/toasts/SingleButtonToast.vue
+++ b/client/src/core/components/toasts/SingleButtonToast.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const emit = defineEmits(["close-toast"]);
-const props = defineProps<{ text: string; onClick: () => Promise<void> }>();
+const props = defineProps<{ text: string; buttonText?: string; onClick: () => Promise<void> }>();
 
 async function action(): Promise<void> {
     emit("close-toast");
@@ -11,7 +11,7 @@ async function action(): Promise<void> {
 <template>
     <div class="toast-container">
         <span>{{ text }}</span>
-        <span class="action" @click.stop="action">USE</span>
+        <span class="action" @click.stop="action">{{ buttonText ?? "USE" }}</span>
     </div>
 </template>
 
@@ -24,6 +24,7 @@ async function action(): Promise<void> {
     justify-content: space-between;
 
     .action {
+        margin-left: 0.5rem;
         padding: 5px;
         background-color: white;
         color: $vt-color-info;
diff --git a/client/src/game/systems/notes/events.ts b/client/src/game/systems/notes/events.ts
index 5880a6627..56ca9ca98 100644
--- a/client/src/game/systems/notes/events.ts
+++ b/client/src/game/systems/notes/events.ts
@@ -1,14 +1,38 @@
+import { POSITION, useToast } from "vue-toastification";
+
 import type { ApiNote, ApiNoteAccessEdit, ApiNoteSetBoolean, ApiNoteSetString, ApiNoteShape } from "../../../apiTypes";
+import SingleButtonToastVue from "../../../core/components/toasts/SingleButtonToast.vue";
 import { socket } from "../../api/socket";
 import { getLocalId } from "../../id";
 
+import { popoutNote } from "./ui";
+
 import { noteSystem } from ".";
 
+const toast = useToast();
+
 socket.on("Notes.Set", async (notes: ApiNote[]) => {
     for (const note of notes) await noteSystem.newNote(note, false);
 });
 
-socket.on("Note.Add", async (data: ApiNote) => await noteSystem.newNote(data, false));
+socket.on("Note.Add", async (data: ApiNote) => {
+    await noteSystem.newNote(data, false);
+
+    toast.info(
+        {
+            component: SingleButtonToastVue,
+            props: {
+                text: `You were granted access to a note: ${data.title}`,
+                buttonText: "Open",
+                onClick: () => popoutNote(data.uuid),
+            },
+        },
+        {
+            position: POSITION.TOP_RIGHT,
+            timeout: 10_000,
+        },
+    );
+});
 
 socket.on("Note.Remove", (data: string) => noteSystem.removeNote(data, false));