add notifications, report back result of operations

ui/package.json

@@ -40,6 +40,7 @@
     "history": "^5.1.0",
     "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
+    "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.43.4",
     "sirv-cli": "^1.0.0",

ui/src/App.svelte

@@ -61,6 +61,7 @@
     --foreground-lighter: #{$primary-lighter};
     --background: #{$background};
     --background-emph: #{color.scale($background, $lightness: -3%)};
+    --error: darkred;
     font-size: 15px;
 
     b {
@@ -81,6 +82,7 @@
       --foreground-lighter: #{color.scale($background, $lightness: -50%)};
       --background: #{$primary};
       --background-emph: #{$primary-lighter};
+      --error: red;
     }
   }
 

ui/src/components/Address.svelte

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

ui/src/components/Footer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-    import Jobs from "./Jobs.svelte";
+  import Jobs from "./Jobs.svelte";
+  import Notifications from "./Notifications.svelte";
 </script>
 
-<footer>
+<footer id="footer">
+  <Notifications />
   <Jobs />
 </footer>
 
@@ -15,4 +17,8 @@
     flex-direction: column;
     background: var(--background);
   }
+
+  :global(#footer > *) {
+    margin: 1rem 0.5rem;
+  }
 </style>

ui/src/components/Jobs.svelte

@@ -27,21 +27,18 @@
   updateJobs();
 </script>
 
-<div class="jobs">
-  {#each activeJobs as job (job.id)}
-    <div class="job" transition:fade>
-      <div class="job-label">{job.title}</div>
-      <sl-progress-bar value={job.progress}>
-        {Math.round(job.progress)}%
-      </sl-progress-bar>
-    </div>
-  {/each}
-</div>
+{#each activeJobs as job (job.id)}
+  <div class="job" transition:fade>
+    <div class="job-label">{job.title}</div>
+    <sl-progress-bar value={job.progress}>
+      {Math.round(job.progress)}%
+    </sl-progress-bar>
+  </div>
+{/each}
 
 <style scoped lang="scss">
   .job {
     display: flex;
-    margin: 1rem 0.5rem;
 
     .job-label {
       white-space: nowrap;

ui/src/components/Notifications.svelte

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

ui/src/notifications.ts

@@ -0,0 +1,12 @@
+import mitt from "mitt";
+
+type NotifyEvents = {
+  notification: Notification;
+};
+
+export interface Notification {
+  content: string;
+  level?: "info" | "error";
+}
+
+export const notify = mitt<NotifyEvents>();

ui/yarn.lock

@@ -1998,6 +1998,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mitt@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mitt@npm:3.0.0"
+  checksum: f7be5049d27d18b1dbe9408452d66376fa60ae4a79fe9319869d1b90ae8cbaedadc7e9dab30b32d781411256d468be5538996bb7368941c09009ef6bbfa6bfc7
+  languageName: node
+  linkType: hard
+
 "mkdirp@npm:^0.5.1":
   version: 0.5.5
   resolution: "mkdirp@npm:0.5.5"
@@ -3046,6 +3053,7 @@ __metadata:
     history: ^5.1.0
     lodash: ^4.17.21
     lru-cache: ^6.0.0
+    mitt: ^3.0.0
     normalize.css: ^8.0.1
     postcss: ^8.3.11
     rollup: ^2.59.0
@@ -3317,8 +3325,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b13bcd&locator=svelte-app%40workspace%3A."
-  checksum: 274813a9d2563a6d8432199892f983933ed610c0c1dd6bfb3083a218591ecd2ea8eb143c4c2d83b0d1928a622fbaf4984b627edc3d9474c4f0ee66ce35fce9fb
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=498415&locator=svelte-app%40workspace%3A."
+  checksum: a6887e9c3db8a4a44c075f8a36ccbbaae3e847f41798c059b4c623731adeefd03089c69c31056a8d3a184aefcb38dc022c832cdb16b922f19b33d6d0ac92ed96
   languageName: node
   linkType: hard