improve $notifications

core/static/bundled/alpine-index.js

@@ -1,12 +0,0 @@
-import sort from "@alpinejs/sort";
-import Alpine from "alpinejs";
-import { limitedChoices } from "#core:alpine/limited-choices.ts";
-import { alpinePlugin as notificationPlugin } from "#core:utils/notifications.ts";
-
-Alpine.plugin([sort, limitedChoices]);
-Alpine.magic("notifications", notificationPlugin);
-window.Alpine = Alpine;
-
-window.addEventListener("DOMContentLoaded", () => {
-  Alpine.start();
-});

core/static/bundled/alpine-index.ts

@@ -0,0 +1,21 @@
+import sort from "@alpinejs/sort";
+import { Alpine } from "alpinejs";
+import { limitedChoices } from "#core:alpine/limited-choices";
+import {
+  type NotificationPlugin,
+  alpinePlugin as notificationPlugin,
+} from "#core:utils/notifications";
+
+declare module "alpinejs" {
+  interface Magics<T> {
+    $notifications: NotificationPlugin;
+  }
+}
+Alpine.plugin([sort, limitedChoices]);
+Alpine.magic("notifications", notificationPlugin);
+// biome-ignore lint/style/useNamingConvention: it's how it's named
+Object.assign(window, { Alpine });
+
+window.addEventListener("DOMContentLoaded", () => {
+  Alpine.start();
+});

core/static/bundled/utils/notifications.ts

@@ -1,30 +1,40 @@
+import { Alpine } from "alpinejs";
+
 export enum NotificationLevel {
   Error = "error",
   Warning = "warning",
   Success = "success",
 }
 
-export function createNotification(message: string, level: NotificationLevel) {
-  const element = document.getElementById("quick-notifications");
-  if (element === null) {
-    return false;
-  }
-  return element.dispatchEvent(
-    new CustomEvent("quick-notification-add", {
-      detail: { text: message, tag: level },
-    }),
-  );
+export interface NotificationPlugin {
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  success: (message: string) => void;
+  clear: () => void;
+  addMany: (notifs: Notification[]) => void;
+  getAll: () => Notification[];
 }
 
-export function deleteNotifications() {
-  const element = document.getElementById("quick-notifications");
-  if (element === null) {
-    return false;
-  }
-  return element.dispatchEvent(new CustomEvent("quick-notification-delete"));
+export interface Notification {
+  tag: NotificationLevel;
+  text: string;
 }
 
-export function alpinePlugin() {
+Alpine.store("notifications", [] as Notification[]);
+
+function createNotification(message: string, level: NotificationLevel) {
+  (Alpine.store("notifications") as Notification[]).push({ text: message, tag: level });
+}
+
+function deleteNotifications() {
+  Alpine.store("notifications", []);
+}
+
+function getNotifications() {
+  return Alpine.store("notifications") as Notification[];
+}
+
+export function alpinePlugin(): NotificationPlugin {
   return {
     error: (message: string) => createNotification(message, NotificationLevel.Error),
     warning: (message: string) =>
@@ -32,5 +42,10 @@ export function alpinePlugin() {
     success: (message: string) =>
       createNotification(message, NotificationLevel.Success),
     clear: () => deleteNotifications(),
+    addMany: (notifs: Notification[]) =>
+      notifs.forEach((n) => {
+        createNotification(n.text, n.tag);
+      }),
+    getAll: () => getNotifications(),
   };
 }

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>