Generally just refactor alerts, upgrade some deps

src/routes/+layout.svelte

@@ -123,13 +123,13 @@
     unsubscribers.push(setupHistory(), setupAnalytics(), syncApplicationData())
 
     // Subscribe to badge count for changes
-    unsubscribers.push(notifications.badgeCount.subscribe(notifications.handleBadgeCountChanges))
+    unsubscribers.push(notifications.syncBadges)
 
     // Initialize keyboard state tracking
     unsubscribers.push(syncKeyboard())
 
     // Initialize background notifications
-    unsubscribers.push(notifications.Alerts.resume())
+    unsubscribers.push(notifications.Push.resume())
 
     // Listen for signer errors, report to user via toast
     unsubscribers.push(

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

@@ -2,13 +2,15 @@
   import cx from "classnames"
   import {sleep, remove} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
+  import {Capacitor} from "@capacitor/core"
+  import {Badge} from "@capawesome/capacitor-badge"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {pushToast} from "@app/util/toast"
-  import {Alerts, clearBadges} from "@app/util/notifications"
+  import {Push, clearBadges} from "@app/util/notifications"
   import {userSettingsValues, splitRoomId} from "@app/core/state"
   import {publishSettings} from "@app/core/commands"
 
@@ -24,7 +26,7 @@
 
   const onAlertsPushChange = () => {
     if (settings.alerts_push) {
-      Alerts.request().then(permissions => {
+      Push.request().then(permissions => {
         if (permissions !== "granted") {
           sleep(300).then(() => {
             settings.alerts_push = false
@@ -46,12 +48,6 @@
   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!"})
   })
 
@@ -61,18 +57,26 @@
 <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}
-        onchange={onAlertsBadgeChange} />
-    </div>
-    <div class="flex justify-between">
-      <p>Play sound for new activity</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_sound} />
-    </div>
+    {#await Badge.isSupported()}
+      <!-- pass -->
+    {:then { isSupported }}
+      {#if isSupported}
+        <div class="flex justify-between">
+          <p>Show badge for unread alerts</p>
+          <input
+            type="checkbox"
+            class="toggle toggle-primary"
+            bind:checked={settings.alerts_badge}
+            onchange={onAlertsBadgeChange} />
+        </div>
+      {/if}
+    {/await}
+    {#if !Capacitor.isNativePlatform()}
+      <div class="flex justify-between">
+        <p>Play sound for new activity</p>
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_sound} />
+      </div>
+    {/if}
     <div class="flex justify-between">
       <p>Enable push notifications</p>
       <input
@@ -82,7 +86,11 @@
         onchange={onAlertsPushChange} />
     </div>
   </div>
-  <div class="card2 bg-alt col-4 shadow-md">
+  <div
+    class={cx("card2 bg-alt col-4 shadow-md", {
+      "pointer-events-none opacity-50":
+        !settings.alerts_badge && !settings.alerts_sound && !settings.alerts_push,
+    })}>
     <strong class="text-lg">Alert Types</strong>
     <div class="flex justify-between">
       <p>Notify me about new activity</p>
@@ -100,7 +108,11 @@
         bind:checked={settings.alerts_messages} />
     </div>
   </div>
-  <div class="card2 bg-alt col-4 shadow-md">
+  <div
+    class={cx("card2 bg-alt col-4 shadow-md", {
+      "pointer-events-none opacity-50":
+        !settings.alerts_badge && !settings.alerts_sound && !settings.alerts_push,
+    })}>
     <strong class="text-lg">Muted Rooms</strong>
     {#each settings.muted_rooms as id (id)}
       {@const [url, h] = splitRoomId(id)}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cx from "classnames"
   import {readable, derived as _derived} from "svelte/store"
   import {onMount, onDestroy} from "svelte"
   import {page} from "$app/stores"
@@ -76,7 +75,14 @@
   const isFavorite = $derived($userRooms.includes(h))
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const isMuted = $derived($userSettingsValues.muted_rooms.includes($room.id))
-  const hasAlerts = throttled(800, _derived(userSettingsValues, ({alerts_spaces, alerts_push, alerts_sound, alerts_badge}) =>    alerts_spaces && (alerts_push || alerts_sound || alerts_badge)))
+  const hasAlerts = throttled(
+    800,
+    _derived(
+      userSettingsValues,
+      ({alerts_spaces, alerts_push, alerts_sound, alerts_badge}) =>
+        alerts_spaces && (alerts_push || alerts_sound || alerts_badge),
+    ),
+  )
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -371,22 +377,22 @@
           class="btn btn-neutral btn-sm tooltip tooltip-left"
           data-tip="Notifications are turned off"
           onclick={unmuteRoom}>
-          <Icon size={4} icon={VolumeLoud} />
+          <Icon size={4} icon={VolumeCross} />
         </Button>
       {:else}
         <Button
           class="btn btn-neutral btn-sm tooltip tooltip-left"
           data-tip="Notifications are turned on"
           onclick={muteRoom}>
-          <Icon size={4} icon={VolumeLoud} class="text-primary" />
+          <Icon size={4} icon={VolumeLoud} />
         </Button>
       {/if}
       {#if isFavorite}
         <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          class="btn btn-neutral btn-sm tooltip tooltip-left text-secondary"
           data-tip="Remove Favorite"
           onclick={removeFavorite}>
-          <Icon size={4} icon={Bookmark} class="text-primary" />
+          <Icon size={4} icon={Bookmark} />
         </Button>
       {:else}
         <Button