Add notif component

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]) => {
+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%;

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>