Add muted rooms, rework alert settings

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

@@ -1,14 +1,15 @@
 <script lang="ts">
   import cx from "classnames"
-  import {sleep} from '@welshman/lib'
-  import Inbox from "@assets/icons/inbox.svg?dataurl"
-  import Bell from "@assets/icons/bell.svg?dataurl"
+  import {sleep, remove} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
+  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 {userSettingsValues} from "@app/core/state"
+  import {userSettingsValues, splitRoomId} from "@app/core/state"
   import {publishSettings} from "@app/core/commands"
 
   const reset = () => {
@@ -22,10 +23,6 @@
   }
 
   const onAlertsPushChange = () => {
-    settings.alerts_spaces = settings.alerts_push
-    settings.alerts_mentions = settings.alerts_push
-    settings.alerts_messages = settings.alerts_push
-
     if (settings.alerts_push) {
       Alerts.request().then(permissions => {
         if (permissions !== "granted") {
@@ -33,7 +30,7 @@
             settings.alerts_push = false
 
             pushToast({
-              theme: 'error',
+              theme: "error",
               message: "Failed to request notification permissions.",
             })
           })
@@ -42,6 +39,10 @@
     }
   }
 
+  const removeMutedRoom = (id: string) => {
+    settings.muted_rooms = remove(id, settings.muted_rooms)
+  }
+
   const onsubmit = preventDefault(async () => {
     await publishSettings($state.snapshot(settings))
 
@@ -62,7 +63,11 @@
     <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} />
+      <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>
@@ -70,48 +75,47 @@
     </div>
     <div class="flex justify-between">
       <p>Enable push notifications</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_push} onchange={onAlertsPushChange} />
-    </div>
-    <div
-      class={cx("card2 bg-alt col-4 shadow-md", {
-        "pointer-events-none opacity-50": !settings.alerts_push,
-      })}>
-      <strong class="text-lg">Push Notifications</strong>
-      <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 activity</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>
-    <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>
+      <input
+        type="checkbox"
+        class="toggle toggle-primary"
+        bind:checked={settings.alerts_push}
+        onchange={onAlertsPushChange} />
     </div>
   </div>
+  <div class="card2 bg-alt col-4 shadow-md">
+    <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} />
+    </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>
+    <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>
+  <div class="card2 bg-alt col-4 shadow-md">
+    <strong class="text-lg">Muted Rooms</strong>
+    {#each settings.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)}>
+          <Icon icon={CloseCircle} size={4} class="-ml-1 mt-px" />
+        </Button>
+        Room "<RoomName {url} {h} />" on {displayRelayUrl(url)}
+      </div>
+    {:else}
+      <p class="flex items-center justify-center text-sm py-4 opacity-70">No muted rooms found.</p>
+    {/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>
+  </div>
 </form>