Rework subscription storage

capacitor.config.ts

@@ -27,10 +27,10 @@ const config: CapacitorConfig = {
     },
   },
   // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
-  // server: {
+  server: {
-  //   url: "http://192.168.1.65:1847",
+    url: "http://192.168.1.65:1847",
-  //   cleartext: true
+    cleartext: true
-  // },
+  },
 };
 
 export default config;

src/app/core/state.ts

@@ -42,6 +42,7 @@ import {
 import {
   getter,
   throttled,
+  withGetter,
   deriveArray,
   makeDeriveEvent,
   makeLoadItem,
@@ -278,12 +279,6 @@ export type SettingsValues = {
   relay_auth: RelayAuthMode
   send_delay: number
   font_size: number
-  alerts_push: boolean
-  alerts_sound: boolean
-  alerts_badge: boolean
-  alerts_spaces: boolean
-  alerts_mentions: boolean
-  alerts_messages: boolean
   muted_rooms: string[]
 }
 
@@ -301,12 +296,6 @@ export const defaultSettings: SettingsValues = {
   relay_auth: RelayAuthMode.Conservative,
   send_delay: 0,
   font_size: 1.1,
-  alerts_push: false,
-  alerts_sound: false,
-  alerts_badge: false,
-  alerts_spaces: true,
-  alerts_mentions: true,
-  alerts_messages: true,
   muted_rooms: [],
 }
 
@@ -348,9 +337,28 @@ export const relaysMostlyRestricted = writable<Record<string, string>>({})
 
 // Push notifications
 
-export const pushToken = writable<string | undefined>()
+export const notificationSettings = withGetter(
-
+  writable<{
-export const pushSecret = writable<string | undefined>()
+    push: boolean
+    sound: boolean
+    badge: boolean
+    spaces: boolean,
+    mentions: boolean,
+    messages: boolean,
+    token?: string
+    subscription?: {
+      key: string
+      callback: string
+    }
+  }>({
+    push: false,
+    sound: false,
+    badge: false,
+    spaces: true,
+    mentions: true,
+    messages: true,
+  })
+)
 
 // Chats
 

src/app/util/notifications.ts

@@ -69,8 +69,7 @@ import {
   MESSAGE_KINDS,
   PUSH_BRIDGE,
   PUSH_SERVER,
-  pushToken,
+  notificationSettings,
-  pushSecret,
   chatsById,
   hasNip29,
   getSettings,
@@ -335,56 +334,86 @@ export const clearBadges = async () => {
   }
 }
 
-// Local notifications
+// Push notifications
 
 interface IPushAdapter {
-  request: (prompt: boolean) => Promise<string>
+  request: (prompt?: boolean) => Promise<string>
-  cancel: () => Promise<void>
+  enable: () => Promise<void>
+  disable: () => Promise<void>
   start: () => Unsubscriber
 }
 
-class CapacitorNotifications implements IPushAdapter {
+PushNotifications.addListener(
-  async sync(signal: AbortSignal) {
+  "pushNotificationActionPerformed",
-    const token = get(pushToken)
+  async (action: ActionPerformed) => {
+    console.log('====== action', JSON.stringify(action))
+    const event = parseJson(action.notification.data.event)
+    const relays = [action.notification.data.relay]
 
-    if (!token) {
+    goto(await getEventPath(event, relays))
-      return
+  },
+)
+
+class CapacitorNotifications implements IPushAdapter {
+  async request(prompt = true) {
+    let status = await PushNotifications.checkPermissions()
+
+    if (prompt && status.receive === "prompt") {
+      status = await PushNotifications.requestPermissions()
     }
 
-    const info: Maybe<{
+    if (status.receive !== "granted") {
-      secret: string
+      return status.receive
-      callback: string
+    }
-    }> = await tryCatch(async () => {
-      const secret = get(pushSecret)
 
-      if (secret) {
+    let {token} = notificationSettings.get()
-        const res = await fetch(buildUrl(PUSH_SERVER, "subscription", secret), {signal})
 
-        if (res.ok) {
+    if (!token) {
-          const {callback} = await res.json()
+      PushNotifications.addListener("registration", ({value}: Token) => {
+        token = value
+      })
 
-          if (callback) {
+      PushNotifications.addListener("registrationError", (error: RegistrationError) => {
-            return {secret, callback}
+        console.error(error)
-          } else {
+      })
-            pushSecret.set(undefined)
-          }
-        }
-      }
 
-      const ios = Capacitor.getPlatform() === "ios"
+      await Promise.all([
-      const channel = ios ? "apns" : "fcm"
+        PushNotifications.register(),
-      const url = buildUrl(PUSH_SERVER, "subscription", channel)
+        poll({
-      const json = await postJson(url, {token}, {signal})
+          condition: () => Boolean(token),
+          signal: AbortSignal.timeout(5000),
+        }),
+      ])
 
-      if (json) {
+      notificationSettings.update(assoc('token', token))
-        pushSecret.set(json.sk)
+    }
 
-        return {secret: json.sk, callback: json.callback}
+    return token ? "granted" : "denied"
-      }
+  }
-    })
 
-    if (!info) {
+  async syncServer(signal: AbortSignal) {
-      return
+    const {token} = notificationSettings.get()
+
+    if (!token) {
+      throw new Error("Attempted to sync push server without a token")
+    }
+
+    const channel = Capacitor.getPlatform() === "ios" ? "apns" : "fcm"
+    const url = buildUrl(PUSH_SERVER, "subscription", channel)
+    const json = await postJson(url, {token}, {signal})
+
+    if (json?.callback && json?.id) {
+      notificationSettings.update(assoc('subscription', json))
+    } else {
+      console.warn("Failed to register with push server")
+    }
+  }
+
+  async syncRelays(signal: AbortSignal) {
+    const {subscription} = notificationSettings.get()
+
+    if (!subscription) {
+      throw new Error("Attempted to sync relays without a subscription")
     }
 
     const canPush = (relay?: RelayProfile) =>
@@ -402,19 +431,23 @@ class CapacitorNotifications implements IPushAdapter {
       }
     }
 
-    const syncSubscription = async (
+    const syncRelay = async (
       key: string,
       relay: string,
       filters: Filter[],
       ignore: Filter[] = [],
     ) => {
+      if (signal.aborted) {
+        return
+      }
+
       const stuff = await getPushStuff(relay)
 
       if (!stuff) {
         console.warn(`Failed to subscribe ${relay} to ${key} notifications: unsupported`)
       } else {
         const {url, pubkey} = stuff
-        const identifier = String(hash(info.callback + relay + key))
+        const identifier = String(hash(subscription.callback + relay + key))
 
         const thunk = publishThunk({
           signal,
@@ -426,7 +459,7 @@ class CapacitorNotifications implements IPushAdapter {
                 pubkey,
                 JSON.stringify([
                   ["relay", relay],
-                  ["callback", info.callback],
+                  ["callback", subscription.callback],
                   ...ignore.map(filter => ["ignore", JSON.stringify(filter)]),
                   ...filters.map(filter => ["filter", JSON.stringify(filter)]),
                 ]),
@@ -451,7 +484,7 @@ class CapacitorNotifications implements IPushAdapter {
       const filters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
       const ignore = [{"#h": [muted_rooms]}]
 
-      syncSubscription("spaces", relay, filters, ignore)
+      syncRelay("spaces", relay, filters, ignore)
     }
 
     const $pubkey = pubkey.get()!
@@ -459,59 +492,56 @@ class CapacitorNotifications implements IPushAdapter {
     for (const relay of getPubkeyRelays($pubkey, RelayMode.Messaging)) {
       const filters = [{kinds: DM_KINDS, "#p": [$pubkey]}]
 
-      syncSubscription("messages", relay, filters)
+      syncRelay("messages", relay, filters)
     }
   }
 
-  async request(prompt = true) {
-    let status = await PushNotifications.checkPermissions()
-
-    if (prompt && status.receive === "prompt") {
-      status = await PushNotifications.requestPermissions()
-    }
-
-    if (status.receive !== "granted") {
-      return status.receive
-    }
-
-    let token = get(pushToken)
-
-    if (!token) {
-      PushNotifications.addListener("registration", ({value}: Token) => {
-        token = value
-      })
-
-      PushNotifications.addListener("registrationError", (error: RegistrationError) => {
-        console.error(error)
-      })
-
-      await Promise.all([
-        PushNotifications.register(),
-        poll({
-          condition: () => Boolean(token),
-          signal: AbortSignal.timeout(5000),
-        }),
-      ])
-
-      pushToken.set(token)
-    }
-
-    return token ? "granted" : "denied"
-  }
-
   start() {
+    const {token} = notificationSettings.get()
     const controller = new AbortController()
+    const {signal} = controller
 
-    this.sync(controller.signal)
+    if (!token) {
+      console.warn("Attempted to start push notifications without a callback")
+    } else {
+      call(async () => {
+        try {
+          if (!notificationSettings.get().subscription) {
+            await this.syncServer(signal)
+          }
+
+          if (notificationSettings.get().subscription) {
+            await this.syncRelays(signal)
+          }
+        } catch (e) {
+          console.error(e)
+        }
+      })
+    }
 
     return () => controller.abort()
   }
 
-  async cancel() {
+  async enable() {
+    notificationSettings.update(assoc('push', true))
+  }
+
+  async disable() {
+    const {token, subscription, ...settings} = notificationSettings.get()
+
     await PushNotifications.unregister()
 
-    pushSecret.set(undefined)
+    if (subscription) {
-    pushToken.set(undefined)
+      const res = await fetch(buildUrl(PUSH_SERVER, 'subscription', subscription.key), {
+        method: 'delete',
+      })
+
+      if (!res.ok) {
+        console.warn("Failed to delete push subscription")
+      }
+    }
+
+    notificationSettings.set({...settings, push: false})
   }
 }
 
@@ -550,9 +580,9 @@ class WebNotifications implements IPushAdapter {
 
   start() {
     return onNotification(event => {
-      const {alerts_messages, alerts_mentions, alerts_spaces} = getSettings()
+      const {alerts_push, alerts_messages, alerts_mentions, alerts_spaces} = getSettings()
 
-      if (document.hidden && Notification?.permission === "granted") {
+      if (alerts_push && document.hidden && Notification?.permission === "granted") {
         if (alerts_messages && matchFilters(dmFilters, event)) {
           this.notify(event, "New direct message", "Someone sent you a direct message.")
         } else if (
@@ -568,14 +598,17 @@ class WebNotifications implements IPushAdapter {
     })
   }
 
-  async cancel() {
+  async enable() {
-    // pass
+    notificationSettings.update(assoc('push', true))
+  }
+
+  async disable() {
+    notificationSettings.update(assoc('push', false))
   }
 }
 
 export class Push {
   static _adapter: IPushAdapter | undefined
-  static _unsubscriber: Unsubscriber | undefined
 
   static _getAdapter() {
     if (!Push._adapter) {
@@ -600,14 +633,18 @@ export class Push {
       }
     })
 
-    Push._unsubscriber = () => controller.abort()
+    return () => controller.abort()
   }
 
   static request() {
     return Push._getAdapter().request()
   }
 
-  static cancel() {
+  static enable() {
-    return Push._getAdapter().cancel()
+    return Push._getAdapter().enable()
+  }
+
+  static disable() {
+    return Push._getAdapter().disable()
   }
 }

src/lib/components/Drawer.svelte

@@ -12,7 +12,7 @@
     onclick={onClose}>
   </button>
   <div
-    class="scroll-container py-sai pr-sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    class="scroll-container py-sai pr-sair absolute bottom-0 right-0 top-0 w-72 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:translate={{axis: "x", duration: 300}}>
     {@render children?.()}
   </div>

src/routes/+layout.svelte

@@ -28,7 +28,7 @@
   import {setupAnalytics} from "@app/util/analytics"
   import {authPolicy, blockPolicy, trustPolicy, mostlyRestrictedPolicy} from "@app/util/policies"
   import {kv, db} from "@app/core/storage"
-  import {userSettingsValues} from "@app/core/state"
+  import {userSettingsValues, notificationSettings} from "@app/core/state"
   import {syncApplicationData} from "@app/core/sync"
   import * as commands from "@app/core/commands"
   import * as requests from "@app/core/requests"
@@ -44,17 +44,6 @@
 
   const policies = [authPolicy, blockPolicy, trustPolicy, mostlyRestrictedPolicy]
 
-  PushNotifications.addListener(
-    "pushNotificationActionPerformed",
-    async (action: ActionPerformed) => {
-      console.log('====== action', JSON.stringify(action))
-      const event = parseJson(action.notification.data.event)
-      const relays = [action.notification.data.relay]
-
-      goto(await getEventPath(event, relays))
-    },
-  )
-
   // Add stuff to window for convenience
   Object.assign(window, {
     get,
@@ -114,6 +103,11 @@
         store: shouldUnwrap,
         storage: kv,
       }),
+      sync({
+        key: "notificationSettings",
+        store: notificationSettings,
+        storage: kv,
+      }),
     ])
 
     // Set up our storage adapters

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

@@ -1,63 +1,73 @@
 <script lang="ts">
   import cx from "classnames"
-  import {sleep, remove} from "@welshman/lib"
+  import {sleep, equals, 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 Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {pushToast} from "@app/util/toast"
   import {Push, clearBadges} from "@app/util/notifications"
-  import {userSettingsValues, splitRoomId} from "@app/core/state"
+  import {notificationSettings, userSettingsValues, splitRoomId} from "@app/core/state"
   import {publishSettings} from "@app/core/commands"
 
   const reset = () => {
-    settings = {...$userSettingsValues}
+    settings = {...notificationSettings.get()}
-  }
-
-  const onAlertsBadgeChange = () => {
-    if (!settings.alerts_badge) {
-      clearBadges()
-    }
-  }
-
-  const onAlertsPushChange = () => {
-    if (settings.alerts_push) {
-      Push.request().then(permissions => {
-        if (permissions !== "granted") {
-          sleep(300).then(() => {
-            settings.alerts_push = false
-
-            pushToast({
-              theme: "error",
-              message: "Failed to request notification permissions.",
-            })
-          })
-        }
-      })
-    }
   }
 
   const removeMutedRoom = (id: string) => {
-    settings.muted_rooms = remove(id, settings.muted_rooms)
+    muted_rooms = remove(id, muted_rooms)
   }
 
   const onsubmit = preventDefault(async () => {
-    await publishSettings($state.snapshot(settings))
+    loading = true
 
-    if (settings.alerts_push) {
+    try {
-      await Alerts.start()
+      if (!settings.badge) {
-    } else {
+        clearBadges()
-      await Alerts.cancel()
+      }
+
+      if (settings.push) {
+        const permissions = await Push.request()
+
+        if (permissions !== "granted") {
+          await sleep(300)
+
+          settings.push = false
+
+          pushToast({
+            theme: "error",
+            message: "Failed to request notification permissions.",
+          })
+
+          return
+        }
+
+        await Push.enable()
+        await Push.start()
+      } else {
+        await Push.disable()
+      }
+
+      if (!equals(muted_rooms, $userSettingsValues.muted_rooms)) {
+        publishSettings($state.snapshot({...$userSettingsValues, muted_rooms}))
+      }
+
+      notificationSettings.set(settings)
+
+      pushToast({message: "Your settings have been saved!"})
+    } finally {
+      loading = false
     }
-
-    pushToast({message: "Your settings have been saved!"})
   })
 
-  let settings = $state({...$userSettingsValues})
+  let loading = $state(false)
+  let settings = $state({...notificationSettings.get()})
+  let muted_rooms = $state($userSettingsValues.muted_rooms)
 </script>
 
 <form class="content column gap-4" {onsubmit}>
@@ -72,15 +82,14 @@
           <input
             type="checkbox"
             class="toggle toggle-primary"
-            bind:checked={settings.alerts_badge}
+            bind:checked={settings.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} />
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
       </div>
     {/if}
     <div class="flex justify-between">
@@ -88,39 +97,38 @@
       <input
         type="checkbox"
         class="toggle toggle-primary"
-        bind:checked={settings.alerts_push}
+        bind:checked={settings.push} />
-        onchange={onAlertsPushChange} />
     </div>
   </div>
   <div
     class={cx("card2 bg-alt col-4 shadow-md", {
       "pointer-events-none opacity-50":
-        !settings.alerts_badge && !settings.alerts_sound && !settings.alerts_push,
+        !settings.badge && !settings.sound && !settings.push,
     })}>
     <strong class="text-lg">Alert Types</strong>
     <div class="flex justify-between">
       <p>Notify me about new activity</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_spaces} />
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.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} />
+      <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
     </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} />
+        bind:checked={settings.messages} />
     </div>
   </div>
   <div
     class={cx("card2 bg-alt col-4 shadow-md", {
       "pointer-events-none opacity-50":
-        !settings.alerts_badge && !settings.alerts_sound && !settings.alerts_push,
+        !settings.badge && !settings.sound && !settings.push,
     })}>
     <strong class="text-lg">Muted Rooms</strong>
-    {#each settings.muted_rooms as id (id)}
+    {#each muted_rooms as id (id)}
       {@const [url, h] = splitRoomId(id)}
       <div class="flex-inline badge badge-neutral mr-1 gap-1">
         <Button class="flex items-center" onclick={() => removeMutedRoom(id)}>
@@ -133,7 +141,9 @@
     {/each}
   </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 class="btn btn-neutral" onclick={reset} disabled={loading}>Discard Changes</Button>
-    <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Save Changes</Spinner>
+    </Button>
   </div>
 </form>