Remove old alerts

src/routes/+layout.svelte

@@ -34,7 +34,6 @@
   import * as appState from "@app/core/state"
   import {theme} from "@app/util/theme"
   import {toast, pushToast} from "@app/util/toast"
-  import {initializePushNotifications} from "@app/util/push"
   import * as notifications from "@app/util/notifications"
   import * as storage from "@app/util/storage"
   import {syncKeyboard} from "@app/util/keyboard"
@@ -64,9 +63,6 @@
     ...notifications,
   })
 
-  // Initialize push notification handler asap
-  initializePushNotifications()
-
   // Listen for navigation messages from service worker
   navigator.serviceWorker?.addEventListener("message", event => {
     if (event.data && event.data.type === "NAVIGATE") {

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

@@ -1,7 +1,75 @@
 <script lang="ts">
-  import Alerts from "@app/components/Alerts.svelte"
+  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 {userSettingsValues} from "@app/core/state"
+  import {publishSettings} from "@app/core/commands"
+
+  const reset = () => {
+    settings = {...$userSettingsValues}
+  }
+
+  const onsubmit = preventDefault(async () => {
+    await publishSettings($state.snapshot(settings))
+
+    pushToast({message: "Your settings have been saved!"})
+  })
+
+  let settings = $state({...$userSettingsValues})
+
+  $effect(() => {
+    if (!$userSettingsValues.alerts_badge) {
+      clearBadges()
+    }
+  })
 </script>
 
-<div class="content column">
-  <Alerts />
-</div>
+<form class="content column gap-4" {onsubmit}>
+  <div class="card2 bg-alt col-4 shadow-md">
+    <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} />
+    </div>
+    <div class="flex justify-between">
+      <p>Play sound for new messages</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} />
+    </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 class="mt-4 flex flex-row items-center justify-between gap-4">
+      <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
+      <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    </div>
+  </div>
+</form>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {preventDefault} from "@lib/html"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME, RelayAuthMode, userSettingsValues} from "@app/core/state"
@@ -24,54 +23,33 @@
 </script>
 
 <form class="content column gap-4" {onsubmit}>
-  <div class="card2 bg-alt col-4 shadow-md">
+  <div class="card2 bg-alt flex flex-col gap-4 shadow-md">
     <strong class="text-lg">Privacy Settings</strong>
-    <FieldInline>
-      {#snippet label()}
-        <p>Authenticate with unknown relays?</p>
-      {/snippet}
-      {#snippet input()}
-        <input
-          type="checkbox"
-          class="toggle toggle-primary"
-          onchange={onAuthModeChange}
-          checked={settings.auth_mode === RelayAuthMode.Aggressive} />
-      {/snippet}
-      {#snippet info()}
-        <p>
-          Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.
-        </p>
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Report errors?</p>
-      {/snippet}
-      {#snippet input()}
-        <input
-          type="checkbox"
-          class="toggle toggle-primary"
-          bind:checked={settings.report_errors} />
-      {/snippet}
-      {#snippet info()}
-        <p>
-          Allow {PLATFORM_NAME} to send error reports to help improve the app.
-        </p>
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Report usage?</p>
-      {/snippet}
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-      {/snippet}
-      {#snippet info()}
-        <p>
-          Allow {PLATFORM_NAME} to collect anonymous usage data.
-        </p>
-      {/snippet}
-    </FieldInline>
+    <div class="grid grid-cols-2 gap-2">
+      <p>Authenticate with unknown relays?</p>
+      <input
+        type="checkbox"
+        class="toggle toggle-primary"
+        onchange={onAuthModeChange}
+        checked={settings.auth_mode === RelayAuthMode.Aggressive} />
+      <p class="col-span-2 text-sm opacity-70">
+        Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.
+      </p>
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      <p>Report errors?</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_errors} />
+      <p class="col-span-2 text-sm opacity-70">
+        Allow {PLATFORM_NAME} to send error reports to help improve the app.
+      </p>
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      <p>Report usage?</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
+      <p class="col-span-2 text-sm opacity-70">
+        Allow {PLATFORM_NAME} to collect anonymous usage data.
+      </p>
+    </div>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>