Make test-notifs button in settings

The idea here is that we should make a really really minimal
notifications feature, where you can enable them, and test them, but
nothing on the server will automatically send them.

Once that's in, we can add client-side config, which we'll need to sync
to the server and act on, that says:

> generally, notify me:
> 1. Not at all
> 2. When my name is mentioned
> 3. When any message arrives
> For each channel, override the above with one of the same three
> options.

Later later, we might want to also add "notify me when a new channel is
made".

2 files changed, 35 insertions, 16 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index ac707a5..63fd8f9 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -55,6 +55,22 @@ export async function acceptInvite(inviteId, name, password) {
     .catch(responseError);
 }
 
+export async function createPushSubscription(data) {
+  return await apiServer
+    .post("/push", { data })
+    .catch(responseError);
+}
+
+export async function deletePushSubscription(data) {
+  return await apiServer
+    .delete("/push", { data })
+    .catch(responseError);
+}
+
+export async function notifyMe() {
+  return await apiServer.post('/notifyMe').catch(responseError);
+}
+
 export function subscribeToEvents(resumePoint) {
   const eventsUrl = apiServer.getUri({
     url: '/events',
diff --git a/ui/lib/components/NotificationSettings.svelte b/ui/lib/components/NotificationSettings.svelte
index 81c3708..8bc9d8b 100644
--- a/ui/lib/components/NotificationSettings.svelte
+++ b/ui/lib/components/NotificationSettings.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte";
+  import * as api from '$lib/apiServer.js';
   import Toggle from '$lib/components/Toggle.svelte';
 
   let subscriptionJson = $state(null);
@@ -22,11 +23,7 @@
           p256dh: subJson.keys.p256dh,
           auth: subJson.keys.auth,
         };
-        return fetch("/api/push", {
-          method: "post",
-          headers: { "Content-type": "application/json" },
-          body: JSON.stringify(subscriptionJson),
-        });
+        apiServer.createPushSubscription(subscriptionJson);
       });
   }
 
@@ -38,11 +35,7 @@
         const { endpoint } = subscription.toJSON();
         return subscription.unsubscribe()
           .then(() => {
-            fetch("/api/push", {
-              method: "delete",
-              headers: { "Content-type": "application/json" },
-              body: JSON.stringify({ endpoint }),
-            });
+            apiServer.deletePushSubscription({ endpoint });
             subscriptionJson = null;
           });
       });
@@ -56,6 +49,10 @@
     }
   }
 
+  function testNotifications() {
+    api.notifyMe();
+  }
+
   onMount(() => {
     navigator.serviceWorker.ready.then((registration) => {
       return registration.pushManager.getSubscription();
@@ -67,25 +64,31 @@
   });
 </script>
 
-<h2>Enable notifications</h2>
+<h2>Notify me here</h2>
 
 <p>
   {#if subscriptionJson === null}
-    Notifications are currently disabled.
+    We won't notify you here.
   {:else}
-    Notifications are currently enabled.
+    We will notify you here.
   {/if}
 </p>
-<button class="btn" onclick="{toggleSub}">
+<button class="btn" onclick={toggleSub}>
   {#if subscriptionJson === null}
-    Enable notifications
+    Notify me!
   {:else}
-    Disable notifications
+    Stop notifying me!
   {/if}
 </button>
 
+<button class="btn" onclick={testNotifications}>
+  Test notifications
+</button>
+
 <h2>Notify me when:</h2>
 
+<p>These are currently unimplemented.</p>
+
 <Toggle
     name="channel_created"
     text="A new channel is created"