Create unified notification system

core/templates/core/base.jinja

@@ -34,7 +34,6 @@
 
       <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
-      <script src="{{ static('core/js/script.js') }}"></script>
 
       {% block additional_css %}{% endblock %}
       {% block additional_js %}{% endblock %}
@@ -74,11 +73,9 @@
 
     <div id="page">
 
-      <ul id="quick_notif">
-        {% for n in quick_notifs %}
-          <li>{{ n }}</li>
-        {% endfor %}
-      </ul>
+      {% block notifications %}
+        {% include "core/base/notifications.jinja" %}
+      {% endblock %}
 
       <div id="content">
         {%- block tabs -%}

core/templates/core/base/header.jinja

@@ -74,9 +74,9 @@
             {% endif %}
           ></a>
         </div>
-        <div class="notification">
-          <a href="#" onclick="displayNotif()">
-            <i class="fa-regular fa-bell"></i>
+        <div class="notification" x-data="{display: false}" :class="{white: display}">
+          <a href="#" @click.prevent="display = !display">
+            <i :class="`fa-${display ? 'solid': 'regular'} fa-bell`" x-transition></i>
             {% set notification_count = user.notifications.filter(viewed=False).count() %}
 
             {% if notification_count > 0 %}
@@ -89,7 +89,7 @@
               </span>
             {% endif %}
           </a>
-          <div id="header_notif">
+          <div id="header_notif" x-show="display" x-cloak x-transition>
             <ul>
               {% if user.notifications.filter(viewed=False).count() > 0 %}
                 {% for n in user.notifications.filter(viewed=False).order_by('-date') %}

core/templates/core/base/notifications.jinja

@@ -0,0 +1,24 @@
+<div id="notifications"
+     x-data="{
+             messages: [
+             {% if messages %}
+               {% for message in messages %}
+                 {
+                 tag: '{{ message.tags }}',
+                 text: '{{ message }}',
+                 },
+               {% endfor %}
+             {% endif %}
+             ]
+             }"
+     @notification-add="(e) => messages.push(e?.detail)"
+     @notification-delete="messages = []">
+  <template x-for="message in messages">
+    <div x-data="{show: true}" class="alert" :class="`alert-${message.tag}`" x-show="show" x-transition>
+      <span class="alert-main" x-text="message.text"></span>
+      <span class="clickable" @click="show = false">
+        <i class="fa fa-close"></i>
+      </span>
+    </div>
+  </template>
+</div>