Add muted rooms, rework alert settings

src/app/components/SpaceMenu.svelte

@@ -18,7 +18,6 @@
   import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import Bell from "@assets/icons/bell.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -34,7 +33,7 @@
   import SpaceMembers from "@app/components/SpaceMembers.svelte"
   import SpaceReports from "@app/components/SpaceReports.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
+  import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
@@ -216,7 +215,7 @@
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
         {#each $userRooms as h, i (h)}
-          <MenuSpaceRoomItem {replaceState} notify {url} {h} />
+          <SpaceMenuRoomItem {replaceState} notify {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
           <div class="h-2"></div>
@@ -229,7 +228,7 @@
           </SecondaryNavHeader>
         {/if}
         {#each $otherRooms as h, i (h)}
-          <MenuSpaceRoomItem {replaceState} {url} {h} />
+          <SpaceMenuRoomItem {replaceState} {url} {h} />
         {/each}
         {#if $canCreateRoom}
           <SecondaryNavItem {replaceState} onclick={addRoom}>
@@ -244,9 +243,5 @@
     <Button class="btn btn-neutral btn-sm" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>
-    <Link href="/settings/alerts" class="btn btn-neutral btn-sm">
-      <Icon icon={Bell} />
-      Manage Alerts
-    </Link>
   </div>
 </div>

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
+  import {userSettingsValues, makeRoomId} from "@app/core/state"
 
   interface Props {
     url: any
@@ -13,6 +16,7 @@
 
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
+  const id = makeRoomId(url, h)
   const path = makeRoomPath(url, h)
 </script>
 
@@ -21,4 +25,7 @@
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
   <RoomNameWithImage {url} {h} />
+  {#if $userSettingsValues.muted_rooms.includes(id)}
+    <Icon icon={VolumeCross} size={4} class="opacity-50" />
+  {/if}
 </SecondaryNavItem>

src/app/core/state.ts

@@ -279,11 +279,12 @@ export type SettingsValues = {
   send_delay: number
   font_size: number
   alerts_push: boolean
+  alerts_sound: boolean
+  alerts_badge: boolean
   alerts_spaces: boolean
   alerts_mentions: boolean
   alerts_messages: boolean
-  alerts_sound: boolean
-  alerts_badge: boolean
+  muted_rooms: string[]
 }
 
 export type Settings = {
@@ -300,12 +301,13 @@ export const defaultSettings: SettingsValues = {
   relay_auth: RelayAuthMode.Conservative,
   send_delay: 0,
   font_size: 1.1,
-  alerts_push: true,
-  alerts_spaces: false,
-  alerts_mentions: false,
-  alerts_messages: false,
-  alerts_sound: true,
-  alerts_badge: true,
+  alerts_push: false,
+  alerts_sound: false,
+  alerts_badge: false,
+  alerts_spaces: true,
+  alerts_mentions: true,
+  alerts_messages: true,
+  muted_rooms: [],
 }
 
 export const settingsByPubkey = deriveItemsByKey({
@@ -536,7 +538,10 @@ export const deriveRoom = call(() => {
   const _deriveRoom = makeDeriveItem(roomsById, loadRoom)
 
   return (url: string, h: string) =>
-    derived(_deriveRoom(makeRoomId(url, h)), room => room || makeRoomMeta({h}))
+    derived(
+      _deriveRoom(makeRoomId(url, h)),
+      room => room || {url, id: makeRoomId(url, h), ...makeRoomMeta({h})},
+    )
 })
 
 export const displayRoom = (url: string, h: string) => getRoom(makeRoomId(url, h))?.name || h

src/app/util/notifications.ts

@@ -5,7 +5,16 @@ import {Badge} from "@capawesome/capacitor-badge"
 import {PushNotifications} from "@capacitor/push-notifications"
 import type {ActionPerformed, RegistrationError, Token} from "@capacitor/push-notifications"
 import {synced, throttled} from "@welshman/store"
-import {pubkey, tracker, repository, relaysByUrl, signer, publishThunk, getPubkeyRelays, loadRelay} from "@welshman/app"
+import {
+  pubkey,
+  tracker,
+  repository,
+  relaysByUrl,
+  signer,
+  publishThunk,
+  getPubkeyRelays,
+  loadRelay,
+} from "@welshman/app"
 import {
   poll,
   prop,
@@ -278,7 +287,11 @@ export const handleBadgeCountChanges = async (count: number) => {
 }
 
 export const clearBadges = async () => {
-  await Badge.clear()
+  try {
+    await Badge.clear()
+  } catch (e) {
+    // Pass - firefox doesn't support this
+  }
 }
 
 // Local notifications
@@ -354,14 +367,15 @@ class CapacitorNotifications implements IAlertsAdapter {
         publishThunk({
           relays: [stuff.url],
           event: makeEvent(30390, {
-            content: await signer
-              .get()
-              .nip44.encrypt(stuff.pubkey, JSON.stringify([
+            content: await signer.get().nip44.encrypt(
+              stuff.pubkey,
+              JSON.stringify([
                 ["relay", url],
                 ["callback", info.callback],
                 // ...ignore.map(filter => ["ignore", JSON.stringify(filter)]),
                 ...filters.map(filter => ["filter", JSON.stringify(filter)]),
-              ])),
+              ]),
+            ),
             tags: [
               ["d", await sha256(textEncoder.encode(info.callback + url + "spaces"))],
               ["p", stuff.pubkey],
@@ -383,13 +397,14 @@ class CapacitorNotifications implements IAlertsAdapter {
         publishThunk({
           relays: [stuff.url],
           event: makeEvent(30390, {
-            content: await signer
-              .get()
-              .nip44.encrypt(stuff.pubkey, JSON.stringify([
+            content: await signer.get().nip44.encrypt(
+              stuff.pubkey,
+              JSON.stringify([
                 ["relay", url],
                 ["callback", info.callback],
-                ["filter", JSON.stringify({kinds: DM_KINDS, '#p': [$pubkey]})],
-              ])),
+                ["filter", JSON.stringify({kinds: DM_KINDS, "#p": [$pubkey]})],
+              ]),
+            ),
             tags: [
               ["d", await sha256(textEncoder.encode(info.callback + url + "messages"))],
               ["p", stuff.pubkey],
@@ -449,7 +464,7 @@ class CapacitorNotifications implements IAlertsAdapter {
           const relays = [action.notification.data.relay]
 
           goto(await getEventPath(event, relays))
-        }
+        },
       )
     })
 

src/lib/components/Link.svelte

@@ -16,6 +16,7 @@
     replaceState?: boolean
     disabled?: boolean
     class?: string
+    'data-tip'?: string
   } = $props()
 
   const go = (e: Event) => {

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>

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"