Add new alerts

src/routes/settings/alerts/+page.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+  import cx from "classnames"
+  import {sleep} from '@welshman/lib'
   import Inbox from "@assets/icons/inbox.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {pushToast} from "@app/util/toast"
-  import {clearBadges} from "@app/util/notifications"
+  import {Alerts, clearBadges} from "@app/util/notifications"
   import {userSettingsValues} from "@app/core/state"
   import {publishSettings} from "@app/core/commands"
 
@@ -13,19 +15,46 @@
     settings = {...$userSettingsValues}
   }
 
+  const onAlertsBadgeChange = () => {
+    if (!settings.alerts_badge) {
+      clearBadges()
+    }
+  }
+
+  const onAlertsPushChange = () => {
+    settings.alerts_spaces = settings.alerts_push
+    settings.alerts_mentions = settings.alerts_push
+    settings.alerts_messages = settings.alerts_push
+
+    if (settings.alerts_push) {
+      Alerts.request().then(permissions => {
+        if (permissions !== "granted") {
+          sleep(300).then(() => {
+            settings.alerts_push = false
+
+            pushToast({
+              theme: 'error',
+              message: "Failed to request notification permissions.",
+            })
+          })
+        }
+      })
+    }
+  }
+
   const onsubmit = preventDefault(async () => {
     await publishSettings($state.snapshot(settings))
 
+    if (settings.alerts_push) {
+      await Alerts.start()
+    } else {
+      await Alerts.stop()
+    }
+
     pushToast({message: "Your settings have been saved!"})
   })
 
   let settings = $state({...$userSettingsValues})
-
-  $effect(() => {
-    if (!$userSettingsValues.alerts_badge) {
-      clearBadges()
-    }
-  })
 </script>
 
 <form class="content column gap-4" {onsubmit}>
@@ -33,39 +62,52 @@
     <strong class="text-lg">Alert Settings</strong>
     <div class="flex justify-between">
       <p>Show badge for unread alerts</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_badge} />
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_badge} onchange={onAlertsBadgeChange} />
     </div>
     <div class="flex justify-between">
-      <p>Play sound for new messages</p>
+      <p>Play sound for new activity</p>
       <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_sound} />
     </div>
-    <div class="flex items-center justify-between">
-      <strong class="flex items-center gap-3">
-        <Icon icon={Inbox} />
-        Space Activity
-      </strong>
-    </div>
     <div class="flex justify-between">
-      <p>Notify me about new messages</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_spaces} />
+      <p>Enable push notifications</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_push} onchange={onAlertsPushChange} />
     </div>
-    <div class="flex justify-between">
-      <p>Always notify me when mentioned</p>
-      <input type="checkbox" class="toggle toggle-primary" checked={settings.alerts_mentions} />
-    </div>
-    <!-- todo: add list of muted spaces -->
-    <div class="flex items-center justify-between">
-      <strong class="flex items-center gap-3">
-        <Icon icon={Bell} />
-        Direct Messages
-      </strong>
-    </div>
-    <div class="flex justify-between">
-      <p>Notify me about new messages</p>
-      <input
-        type="checkbox"
-        class="toggle toggle-primary"
-        bind:checked={settings.alerts_messages} />
+    <div
+      class={cx("card2 bg-alt col-4 shadow-md", {
+        "pointer-events-none opacity-50": !settings.alerts_push,
+      })}>
+      <strong class="text-lg">Push Notifications</strong>
+      <div class="flex items-center justify-between">
+        <strong class="flex items-center gap-3">
+          <Icon icon={Inbox} />
+          Space Activity
+        </strong>
+      </div>
+      <div class="flex justify-between">
+        <p>Notify me about new activity</p>
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          bind:checked={settings.alerts_spaces} />
+      </div>
+      <div class="flex justify-between">
+        <p>Always notify me when mentioned</p>
+        <input type="checkbox" class="toggle toggle-primary" checked={settings.alerts_mentions} />
+      </div>
+      <!-- todo: add list of muted spaces -->
+      <div class="flex items-center justify-between">
+        <strong class="flex items-center gap-3">
+          <Icon icon={Bell} />
+          Direct Messages
+        </strong>
+      </div>
+      <div class="flex justify-between">
+        <p>Notify me about new messages</p>
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          bind:checked={settings.alerts_messages} />
+      </div>
     </div>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>