From 6a7b411b93b2f1378ed0da9639554e85f3c92662 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 9 Jul 2022 18:42:16 -0500
Subject: [PATCH] Add notif component

---
 src/components/Node.vue  | 21 +++++++++-----------
 src/components/Notif.vue | 42 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Notif.vue

diff --git a/src/components/Node.vue b/src/components/Node.vue
index e1686e3..4e61363 100644
--- a/src/components/Node.vue
+++ b/src/components/Node.vue
@@ -17,24 +17,21 @@ const unregister = inject(UnregisterNodeInjectionKey, () => {});
 const node = ref<HTMLElement | null>(null);
 const parentNode = computed(() => node.value && node.value.parentElement);
 
-if (register && unregister) {
-    watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
-        if (prevNode) {
-            unregister(unref(prevID));
-        }
-        if (newNode) {
-            register(newID, newNode);
-        }
-    });
+watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
+    if (prevNode) {
+        unregister(unref(prevID));
+    }
+    if (newNode) {
+        register(newID, newNode);
+    }
+});
 
-    onUnmounted(() => unregister(unref(props.id)));
-}
+onUnmounted(() => unregister(unref(props.id)));
 </script>
 
 <style scoped>
 .node {
     position: absolute;
-    z-index: -10;
     top: 0;
     left: 0;
     width: 100%;
diff --git a/src/components/Notif.vue b/src/components/Notif.vue
new file mode 100644
index 0000000..485ca4d
--- /dev/null
+++ b/src/components/Notif.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="notif">!</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.notif {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    z-index: 10;
+    pointer-events: none;
+    color: var(--accent3);
+    font-size: x-large;
+    animation: 1s linear infinite bounce;
+    border-radius: var(--border-radius);
+    background: var(--locked);
+}
+
+@keyframes bounce {
+    0% {
+        animation-timing-function: cubic-bezier(0.1361, 0.2514, 0.2175, 0.8786);
+        transform: translate(0, 0px) scaleY(1);
+    }
+    37% {
+        animation-timing-function: cubic-bezier(0.7674, 0.1844, 0.8382, 0.7157);
+        transform: translate(0, -20px) scaleY(1);
+    }
+    72% {
+        animation-timing-function: cubic-bezier(0.1118, 0.2149, 0.2172, 0.941);
+        transform: translate(0, 0px) scaleY(1);
+    }
+    87% {
+        animation-timing-function: cubic-bezier(0.7494, 0.2259, 0.8209, 0.6963);
+        transform: translate(0, 10px) scaleY(0.602);
+    }
+    100% {
+        transform: translate(0, 0px) scaleY(1);
+    }
+}
+</style>