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, 16 insertions, 0 deletions

diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 0c960c8..a21d160 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -2,10 +2,16 @@
   import LogOut from '$lib/components/LogOut.svelte';
   import Invites from '$lib/components/Invites.svelte';
   import ChangePassword from '$lib/components/ChangePassword.svelte';
+  import PushSubscription from '$lib/components/PushSubscription.svelte';
 
   import { goto } from '$app/navigation';
   import * as api from '$lib/apiServer.js';
 
+  const { data } = $props();
+  const { session } = data;
+  const subscription = $derived(session.push.subscription);
+  const vapid = $derived(session.push.vapidKey);
+
   let invites = $state([]);
 
   async function logOut() {
@@ -25,10 +31,20 @@
       invites.push(response.data);
     }
   }
+
+  async function subscribe() {
+    await session.push.subscribe();
+  }
+
+  async function ping() {
+    await api.sendPing();
+  }
 </script>
 
 <ChangePassword {changePassword} />
 <hr />
+<PushSubscription {subscription} {vapid} {subscribe} {ping} />
+<hr />
 <Invites {invites} {createInvite} />
 <hr />
 <LogOut {logOut} />