fix notification weirdness, tidy up api

ui/src/components/Address.svelte

@@ -7,7 +7,7 @@
   import { useEntity } from "../lib/entity";
   import type { UpObject } from "upend";
   import { readable } from "svelte/store";
-  import { notify } from "../notifications";
+  import { notify, UpNotification } from "../notifications";
   const dispatch = createEventDispatcher();
 
   export let address: string;
@@ -36,11 +36,14 @@
 
   // Native open
   function nativeOpen() {
-    notify.emit("notification", {
-      content: `Opening ${
-        inferredIds[0] || address
-      } in a default native application...`,
-    });
+    notify.emit(
+      "notification",
+      new UpNotification(
+        `Opening ${
+          inferredIds[0] || address
+        } in a default native application...`
+      )
+    );
     fetch(`/api/raw/${address}?native=1`)
       .then((response) => {
         if (!response.ok) {
@@ -48,10 +51,13 @@
         }
       })
       .catch((err) => {
-        notify.emit("notification", {
-          content: `Failed to open in native application! (${err})`,
-          level: "error",
-        });
+        notify.emit(
+          "notification",
+          new UpNotification(
+            `Failed to open in native application! (${err})`,
+            "error"
+          )
+        );
       });
   }
 </script>

ui/src/components/Notifications.svelte

@@ -1,26 +1,33 @@
 <script lang="ts">
   import { notify } from "../notifications";
   import { fade } from "svelte/transition";
-  import type { Notification } from "../notifications";
+  import type { UpNotification } from "../notifications";
 
-  let notifications: { [key: string]: Notification } = {};
+  let notifications: UpNotification[] = [];
+
+  notify.on("notification", (notification) => {
+    notifications.push(notification);
+    notifications = notifications;
 
-  notify.on("notification", (notif) => {
-    let id = Math.random();
-    notifications[id] = notif;
     setTimeout(() => {
-      delete notifications[id];
+      notifications.splice(
+        notifications.findIndex((n) => (n.id = notification.id)),
+        1
+      );
       notifications = notifications;
     }, 5000);
   });
 
   const icons = {
-    "error": "exclamation-triangle"
-  }
+    error: "exclamation-triangle",
+  };
 </script>
 
-{#each Object.values(notifications) as notification}
-  <div class="notification notification-{notification.level || "info"}" transition:fade>
+{#each notifications as notification (notification.id)}
+  <div
+    class="notification notification-{notification.level || 'info'}"
+    transition:fade
+  >
     <sl-icon name={icons[notification.level] || "bell"} />
     {notification.content}
   </div>

ui/src/notifications.ts

@@ -1,12 +1,27 @@
 import mitt from "mitt";
 
 type NotifyEvents = {
-  notification: Notification;
+  notification: UpNotification;
 };
 
-export interface Notification {
+export type NotificationLevel = "info" | "error";
+
+export interface INotification {
+  id: string;
   content: string;
-  level?: "info" | "error";
+  level: NotificationLevel;
+}
+
+export class UpNotification implements INotification {
+  id: string;
+  content: string;
+  level: NotificationLevel;
+
+  constructor(content: string, level?: NotificationLevel) {
+    this.id = String(Math.random());
+    this.content = content;
+    this.level = level || "info";
+  }
 }
 
 export const notify = mitt<NotifyEvents>();