Rework subscription storage

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}
-  }
-
-  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.",
-            })
-          })
-        }
-      })
-    }
+    settings = {...notificationSettings.get()}
   }
 
   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) {
-      await Alerts.start()
-    } else {
-      await Alerts.cancel()
+    try {
+      if (!settings.badge) {
+        clearBadges()
+      }
+
+      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}
-            onchange={onAlertsBadgeChange} />
+            bind:checked={settings.badge} />
         </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}
-        onchange={onAlertsPushChange} />
+        bind:checked={settings.push} />
     </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 type="submit" class="btn btn-primary">Save Changes</Button>
+    <Button class="btn btn-neutral" onclick={reset} disabled={loading}>Discard Changes</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Save Changes</Spinner>
+    </Button>
   </div>
 </form>