Add muted rooms, rework alert settings

2026-01-22 12:37:30 -08:00
parent 9da2473976
commit 63fee653e8
7 changed files with 162 additions and 91 deletions
@@ -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>
@@ -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"