owltide/components/PushNotification.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<section>
		Notifications are: <b>{{ subscribed ? "Enabled" : "Disabled" }}</b>
		<br />
		<button
			:disabled="!supported"
			@click="onClick"
		>
			{{ supported === undefined ? "Checking for support" : null }}
			{{ supported === false ? "Notifications are not supported :(." : null }}
			{{ supported === true ? (subscribed ? "Disable notifications" : "Enable notifications") : null }}
		</button>
		<details>
			<summary>Debug</summary>
			<pre><code>{{ JSON.stringify(subscription?.toJSON(), undefined, 4) ?? "No subscription set" }}</code></pre>
		</details>
	</section>
</template>

<script setup lang="ts">
const sessionStore = useSessionStore();
const { supported, subscription, getSubscription, subscribe, unsubscribe } = usePushNotification();
const subscribed = computed(() => Boolean(subscription.value && sessionStore.push));
async function onClick() {
	if (!subscribed.value)
		await subscribe();
	else
		await unsubscribe();
	await sessionStore.fetch();
}

onMounted(() => {
	getSubscription();
})
</script>