Add muted rooms, rework alert settings

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

@@ -1,12 +1,13 @@
 <script lang="ts">
   import cx from "classnames"
-  import {readable} from "svelte/store"
+  import {readable, derived as _derived} from "svelte/store"
   import {onMount, onDestroy} from "svelte"
   import {page} from "$app/stores"
   import type {Readable} from "svelte/store"
   import type {MakeNonOptional} from "@welshman/lib"
-  import {now, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
+  import {now, int, append, remove, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {throttled} from "@welshman/store"
   import {
     makeEvent,
     makeRoomMeta,
@@ -21,7 +22,10 @@
   import Login2 from "@assets/icons/login-3.svg?dataurl"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
+  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -50,11 +54,12 @@
   } from "@app/core/state"
   import {setChecked, checked} from "@app/util/notifications"
   import {
-    addRoomMembership,
     canEnforceNip70,
-    removeRoomMembership,
     prependParent,
     publishDelete,
+    publishSettings,
+    addRoomMembership,
+    removeRoomMembership,
   } from "@app/core/commands"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
@@ -70,6 +75,8 @@
   const userRooms = deriveUserRooms(url)
   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 showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -77,6 +84,12 @@
 
   const removeFavorite = () => removeRoomMembership(url, h)
 
+  const muteRoom = () =>
+    publishSettings({muted_rooms: append($room.id, $userSettingsValues.muted_rooms)})
+
+  const unmuteRoom = () =>
+    publishSettings({muted_rooms: remove($room.id, $userSettingsValues.muted_rooms)})
+
   const join = async () => {
     joining = true
 
@@ -346,12 +359,43 @@
   {/snippet}
   {#snippet action()}
     <div class="row-2">
-      <Button
-        class="btn btn-neutral btn-sm tooltip tooltip-left"
-        data-tip={isFavorite ? "Remove Favorite" : "Add Favorite"}
-        onclick={isFavorite ? removeFavorite : addFavorite}>
-        <Icon size={4} icon={Bookmark} class={cx({"text-primary": isFavorite})} />
-      </Button>
+      {#if !hasAlerts}
+        <Link
+          href="/settings/alerts"
+          class="center btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Notifications are disabled">
+          <Icon size={4} icon={VolumeCross} />
+        </Link>
+      {:else if isMuted}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Notifications are turned off"
+          onclick={unmuteRoom}>
+          <Icon size={4} icon={VolumeLoud} />
+        </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" />
+        </Button>
+      {/if}
+      {#if isFavorite}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Remove Favorite"
+          onclick={removeFavorite}>
+          <Icon size={4} icon={Bookmark} class="text-primary" />
+        </Button>
+      {:else}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Add Favorite"
+          onclick={addFavorite}>
+          <Icon size={4} icon={Bookmark} />
+        </Button>
+      {/if}
       <Button
         class="btn btn-neutral btn-sm tooltip tooltip-left"
         data-tip="Room information"