improve $notifications

core/templates/core/base.jinja

@@ -37,7 +37,7 @@
       <script src="{{ url('javascript-catalog') }}"></script>
       <script type="module" src="{{ static("bundled/core/navbar-index.ts") }}"></script>
       <script type="module" src="{{ static("bundled/core/components/include-index.ts") }}"></script>
-      <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
+      <script type="module" src="{{ static('bundled/alpine-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>

core/templates/core/base/notifications.jinja

@@ -1,15 +1,13 @@
 <div id="quick-notifications"
-     x-data='{
-             messages: [
+     x-data='{ messages: $notifications.getAll() }'
+     x-init='$notifications.addMany([
              {%- for message in messages -%}
                {%- if not message.extra_tags -%}
                  { tag: {{ message.tags|string|tojson }}, text: {{ message|string|tojson }} },
                {%- endif -%}
              {%- endfor -%}
-             ]
-             }'
-     @quick-notification-add="(e) => messages.push(e?.detail)"
-     @quick-notification-delete="messages = []">
+             ])'
+>
   <template x-for="(message, index) in messages">
     <div class="alert" :class="`alert-${message.tag}`" x-transition>
       <span class="alert-main" x-text="message.text"></span>