Integrate the prototype push notification support.

We're going to move forwards with this for now, as low-utility as it is, so that we can more easily iterate on it in a real-world environment (hi.grimoire.ca).

1 files changed, 30 insertions, 0 deletions

diff --git a/ui/lib/components/PushSubscription.svelte b/ui/lib/components/PushSubscription.svelte
new file mode 100644
index 0000000..aab4929
--- /dev/null
+++ b/ui/lib/components/PushSubscription.svelte
@@ -0,0 +1,30 @@
+<script>
+  let { vapid, subscription, subscribe = async () => null, ping = async () => null } = $props();
+  let pending = $state(false);
+
+  function onsubmit(callback) {
+    return async (evt) => {
+      evt.preventDefault();
+
+      pending = true;
+      try {
+        await callback();
+      } finally {
+        pending = false;
+      }
+    };
+  }
+</script>
+
+{#if !!vapid}
+  {#if !subscription}
+    <form class="form" onsubmit={onsubmit(subscribe)}>
+      <button disabled={pending} type="submit">create push subscription</button>
+    </form>
+  {/if}
+  <form class="form" onsubmit={onsubmit(ping)}>
+    <button disabled={pending} type="submit">send test notification</button>
+  </form>
+{:else}
+  Waiting for VAPID key…
+{/if}