1 files changed, 27 insertions, 0 deletions
diff --git a/ui/lib/components/PushSubscription.svelte b/ui/lib/components/PushSubscription.svelte
new file mode 100644
index 0000000..a85cbb3
--- /dev/null
+++ b/ui/lib/components/PushSubscription.svelte
@@ -0,0 +1,27 @@
+<script>
+  let { vapid, subscription, subscribe = 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 !== null}
+  {#if subscription === null}
+    <form class="form" onsubmit={onsubmit(subscribe)}>
+      <button disabled={pending} type="submit">create push subscription</button>
+    </form>
+  {/if}
+{:else}
+  Waiting for VAPID key…
+{/if}