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))
-        }
+        },
       )
     })