Fix a few bugs with push notifications

src/app/components/ChatMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {assoc} from "@welshman/lib"
   import ChatSquare from "@assets/icons/chat-square.svg?dataurl"
   import Check from "@assets/icons/check.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
@@ -8,8 +9,7 @@
   import ChatStart from "@app/components/ChatStart.svelte"
   import {setChecked} from "@app/util/notifications"
   import {pushModal} from "@app/util/modal"
-  import {userSettingsValues} from "@app/core/state"
-  import {publishSettings} from "@app/core/commands"
+  import {notificationSettings} from "@app/core/state"
 
   const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
 
@@ -18,9 +18,9 @@
     history.back()
   }
 
-  const enableAlerts = () => publishSettings({...$userSettingsValues, alerts_messages: true})
+  const enableAlerts = () => notificationSettings.update(assoc("messages", true))
 
-  const disableAlerts = () => publishSettings({...$userSettingsValues, alerts_messages: false})
+  const disableAlerts = () => notificationSettings.update(assoc("messages", false))
 </script>
 
 <div class="col-2">
@@ -32,7 +32,7 @@
     <Icon size={5} icon={Check} />
     Mark all read
   </Button>
-  {#if $userSettingsValues.alerts_messages}
+  {#if $notificationSettings.messages}
     <Button class="btn btn-neutral" onclick={disableAlerts}>
       <Icon size={4} icon={BellOff} />
       Disable alerts

src/app/components/NewNotificationSound.svelte

@@ -1,30 +1,35 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {userSettingsValues} from "@app/core/state"
+  import {notificationSettings} from "@app/core/state"
   import {onNotification} from "@app/util/notifications"
 
   let audioElement: HTMLAudioElement
 
   let enabled = $state(false)
 
-  document.addEventListener("visibilitychange", () => {
+  const onVisibilityChange = () => {
     if (document.hidden) {
       enabled = true
     } else {
       enabled = false
     }
-  })
+  }
 
   onMount(() => {
     audioElement.load()
 
+    document.addEventListener("visibilitychange", onVisibilityChange)
+
     const unsubscribe = onNotification(() => {
-      if (enabled && $userSettingsValues.alerts_sound) {
+      if (enabled && $notificationSettings.sound) {
         audioElement?.play()
       }
     })
 
-    return unsubscribe
+    return () => {
+      unsubscribe()
+      document.removeEventListener("visibilitychange", onVisibilityChange)
+    }
   })
 </script>
 

src/app/util/notifications.ts

@@ -351,18 +351,6 @@ interface IPushAdapter {
   enable: () => Promise<void>
 }
 
-if (Capacitor.isNativePlatform()) {
-  PushNotifications.addListener(
-    "pushNotificationActionPerformed",
-    async (action: ActionPerformed) => {
-      const event = parseJson(action.notification.data.event)
-      const relays = [action.notification.data.relay]
-
-      goto(await getEventPath(event, relays))
-    },
-  )
-}
-
 class CapacitorNotifications implements IPushAdapter {
   _controller = maybe<AbortController>()
 
@@ -380,13 +368,14 @@ class CapacitorNotifications implements IPushAdapter {
     let {token} = notificationState.get()
 
     if (!token) {
-      PushNotifications.addListener("registration", ({value}: Token) => {
-        token = value
-      })
-
-      PushNotifications.addListener("registrationError", (error: RegistrationError) => {
-        console.error(error)
-      })
+      const listeners = [
+        PushNotifications.addListener("registration", ({value}: Token) => {
+          token = value
+        }),
+        PushNotifications.addListener("registrationError", (error: RegistrationError) => {
+          console.error(error)
+        }),
+      ]
 
       await Promise.all([
         PushNotifications.register(),
@@ -396,6 +385,7 @@ class CapacitorNotifications implements IPushAdapter {
         }),
       ])
 
+      listeners.forEach(p => p.then(listener => listener.remove()))
       notificationState.update(assoc("token", token))
     }
 
@@ -585,6 +575,20 @@ class CapacitorNotifications implements IPushAdapter {
     if (!this._controller) {
       this._controller = new AbortController()
 
+      PushNotifications.addListener(
+        "pushNotificationActionPerformed",
+        async (action: ActionPerformed) => {
+          const event = parseJson(action.notification.data.event)
+          const relays = [action.notification.data.relay]
+
+          goto(await getEventPath(event, relays))
+        },
+      )
+
+      this._controller.signal.addEventListener("abort", () => {
+        PushNotifications.removeAllListeners()
+      })
+
       try {
         await this._syncServer(this._controller.signal)
         await this._syncSpaceSubscription(this._controller.signal)
@@ -611,15 +615,15 @@ class CapacitorNotifications implements IPushAdapter {
       }
     }
 
-    for (const url of get(userSpaceUrls)) {
-      this._unsyncRelay(url, ["spaces", "mentions"])
-    }
-
-    for (const url of getRelaysFromList(get(userMessagingRelayList))) {
-      this._unsyncRelay(url, ["messages"])
-    }
-
     notificationState.set({})
+
+    await Promise.all(get(userSpaceUrls).map(url => this._unsyncRelay(url, ["spaces", "mentions"])))
+
+    await Promise.all(
+      getRelaysFromList(get(userMessagingRelayList)).map(url =>
+        this._unsyncRelay(url, ["messages"]),
+      ),
+    )
   }
 }
 

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

@@ -43,6 +43,7 @@
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
   import {
     deriveUserRooms,
+    notificationSettings,
     userSettingsValues,
     decodeRelay,
     deriveUserRoomMembershipStatus,
@@ -78,9 +79,8 @@
   const hasAlerts = throttled(
     800,
     _derived(
-      userSettingsValues,
-      ({alerts_spaces, alerts_push, alerts_sound, alerts_badge}) =>
-        alerts_spaces && (alerts_push || alerts_sound || alerts_badge),
+      notificationSettings,
+      ({spaces, push, sound, badge}) => spaces && (push || sound || badge),
     ),
   )