Rework alert settings and UI

AGENTS.md

@@ -165,6 +165,8 @@ src/
 - Only add comments for really weird stuff
 - Do not call functions in components unless a parameter is reactive. Instead, use a svelte store or rune to make it reactive.
 - Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
+- When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
+- When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
 
 ## Common Tasks
 

src/app/components/ProfileCircles.svelte

@@ -9,7 +9,7 @@
   }
 
   const {pubkeys, size = 7}: Props = $props()
-  const limit = isMobile ? 7 : 15
+  const limit = isMobile ? 7 : 10
 
   for (const pubkey of pubkeys) {
     loadProfile(pubkey)

src/app/components/RoomDetail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {goto} from "$app/navigation"
   import type {RoomMeta} from "@welshman/util"
   import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
@@ -13,6 +14,9 @@
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
   import Lock from "@assets/icons/lock.svg?dataurl"
   import Microphone from "@assets/icons/microphone.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 Button from "@lib/components/Button.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
@@ -27,8 +31,12 @@
     deriveRoomMembers,
     deriveUserIsRoomAdmin,
     deriveUserRoomMembershipStatus,
+    deriveUserRooms,
+    userSettingsValues,
+    deriveIsMuted,
     MembershipStatus,
   } from "@app/core/state"
+  import {addRoomMembership, removeRoomMembership, toggleRoomNotifications} from "@app/core/commands"
   import {makeSpacePath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -44,6 +52,10 @@
   const members = deriveRoomMembers(url, h)
   const userIsAdmin = deriveUserIsRoomAdmin(url, h)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
+  const userRooms = deriveUserRooms(url)
+
+  const isFavorite = $derived($userRooms.includes(h))
+  const isMuted = deriveIsMuted(url, h)
 
   const back = () => history.back()
 
@@ -69,6 +81,18 @@
 
   const showMembers = () => pushModal(RoomMembers, {url, h})
 
+  const toggleFavorite = () => {
+    if (isFavorite) {
+      removeRoomMembership(url, h)
+    } else {
+      addRoomMembership(url, h)
+    }
+  }
+
+  const toggleMute = () => {
+    toggleRoomNotifications(url, h)
+  }
+
   const startDelete = () =>
     pushModal(Confirm, {
       title: "Are you sure you want to delete this room?",
@@ -93,7 +117,9 @@
 <div class="flex flex-col gap-3">
   <div class="flex justify-between">
     <div class="flex gap-3">
-      <RoomImage {url} {h} size={8} />
+      <div class="pt-0.5">
+        <RoomImage {url} {h} size={8} />
+      </div>
       <div class="flex min-w-0 flex-col">
         <RoomName {url} {h} class="text-2xl" />
         <span class="text-primary">{displayRelayUrl(url)}</span>
@@ -142,6 +168,31 @@
       <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
     </div>
   {/if}
+  <div class="card2 card2-sm bg-alt col-4">
+    <strong class="text-lg">Room Settings</strong>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon={VolumeLoud} />
+        <span>Notifications</span>
+      </div>
+      <Button
+        class={cx("btn btn-sm", {"btn-primary": !isMuted, "btn-neutral": isMuted})}
+        onclick={toggleMute}>
+        {isMuted ? "Off" : "On"}
+      </Button>
+    </div>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon={Bookmark} />
+        <span>Favorite</span>
+      </div>
+      <Button
+        class={cx("btn btn-sm", {"btn-primary": isFavorite, "btn-neutral": !isFavorite})}
+        onclick={toggleFavorite}>
+        {isFavorite ? "On" : "Off"}
+      </Button>
+    </div>
+  </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SpaceAccessRequest.svelte

@@ -11,17 +11,17 @@
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
   import {attemptRelayAccess} from "@app/core/commands"
-  import {deriveSocket} from "@app/core/state"
+  import {deriveSocket, parseInviteLink} from "@app/core/state"
 
   type Props = {
     url: string
+    callback: () => void
   }
 
-  const {url}: Props = $props()
+  const {url, callback}: Props = $props()
 
   const back = () => history.back()
 
@@ -31,23 +31,20 @@
     loading = true
 
     try {
+      const claim = parseInviteLink(value)?.claim || value
       const message = await attemptRelayAccess(url, claim)
 
       if (message) {
         return pushToast({theme: "error", message, timeout: 30_000})
       }
 
-      if ($socket.auth.status === AuthStatus.None) {
+      callback()
-        pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-      } else {
-        await confirmSpaceJoin(url)
-      }
     } finally {
       loading = false
     }
   }
 
-  let claim = $state("")
+  let value = $state("")
   let loading = $state(false)
 </script>
 
@@ -67,7 +64,7 @@
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon={LinkRound} />
-        <input bind:value={claim} class="grow" type="text" />
+        <input bind:value class="grow" type="text" />
       </label>
     {/snippet}
   </Field>

src/app/components/SpaceAuthError.svelte

@@ -11,14 +11,14 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
-  import {pushModal} from "@app/util/modal"
+  import {pushModal, clearModals} from "@app/util/modal"
   import {removeSpaceMembership, publishLeaveRequest, removeTrustedRelay} from "@app/core/commands"
 
   const {url, error} = $props()
 
   const back = () => goto("/home")
 
-  const requestAccess = () => pushModal(SpaceAccessRequest, {url})
+  const requestAccess = () => pushModal(SpaceAccessRequest, {url, callback: clearModals})
 
   const leaveSpace = async () => {
     loading = true

src/app/components/SpaceCheck.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {sleep} from "@welshman/lib"
-  import {Pool, AuthStatus} from "@welshman/net"
-  import {displayRelayUrl} from "@welshman/util"
-  import {preventDefault} from "@lib/html"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
-  import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
-  import {attemptRelayAccess} from "@app/core/commands"
-  import {pushModal} from "@app/util/modal"
-
-  const {url} = $props()
-
-  const back = () => history.back()
-
-  const next = async () => {
-    if (error) {
-      return pushModal(SpaceAccessRequest, {url})
-    }
-
-    if (Pool.get().get(url).auth.status === AuthStatus.None) {
-      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-    } else {
-      await confirmSpaceJoin(url)
-    }
-  }
-
-  let error: string | undefined = $state()
-  let loading = $state(true)
-
-  onMount(async () => {
-    ;[error] = await Promise.all([attemptRelayAccess(url), sleep(1000)])
-    loading = false
-  })
-</script>
-
-<form class="column gap-4" onsubmit={preventDefault(next)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Checking Space...</div>
-    {/snippet}
-    {#snippet info()}
-      <div>
-        Connecting you to to <span class="text-primary">{displayRelayUrl(url)}</span>
-      </div>
-    {/snippet}
-  </ModalHeader>
-  <div class="m-auto flex flex-col gap-4">
-    {#if loading}
-      <p class="flex items-center gap-3">
-        <span class="loading loading-spinner"></span>
-        Hold tight, we're checking your connection.
-      </p>
-    {:else if error}
-      <p>Oops! We ran into some problems:</p>
-      <p class="card2 bg-alt">{error}</p>
-      <p>
-        If you're not sure what the error message means, you may need to contact the space
-        administrator to get more information.
-      </p>
-    {:else}
-      <p>
-        Looking good, we were able to connect you to this space! Click below to continue when you're
-        ready.
-      </p>
-    {/if}
-  </div>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
-      {#if error}
-        Request Access
-      {:else}
-        Join Space
-      {/if}
-      <Icon icon={AltArrowRight} />
-    </Button>
-  </ModalFooter>
-</form>

src/app/components/SpaceInviteAccept.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
+  import {dissoc} from "@welshman/lib"
   import {Pool, AuthStatus} from "@welshman/net"
+  import {goto} from "$app/navigation"
   import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -13,11 +15,12 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
-  import {attemptRelayAccess} from "@app/core/commands"
+  import {makeSpacePath} from "@app/util/routes"
-  import {parseInviteLink} from "@app/core/state"
+  import {relaysMostlyRestricted, parseInviteLink} from "@app/core/state"
+  import {attemptRelayAccess, addSpaceMembership, broadcastUserData} from "@app/core/commands"
 
   type Props = {
     invite: string
@@ -37,11 +40,12 @@
       return pushToast({theme: "error", message: error, timeout: 30_000})
     }
 
-    if (Pool.get().get(url).auth.status === AuthStatus.None) {
+    await addSpaceMembership(url)
-      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
+    await goto(makeSpacePath(url), {replaceState: true})
-    } else {
+
-      await confirmSpaceJoin(url)
+    broadcastUserData([url])
-    }
+    relaysMostlyRestricted.update(dissoc(url))
+    pushToast({message: "Welcome to the space!"})
   }
 
   const join = async () => {

src/app/components/SpaceJoin.svelte

@@ -1,54 +1,126 @@
 <script lang="ts">
+  import {onMount} from "svelte"
+  import {goto} from "$app/navigation"
+  import {sleep, dissoc} from "@welshman/lib"
+  import {Pool, AuthStatus, SocketStatus} from "@welshman/net"
+  import {deriveRelay} from "@welshman/app"
   import {displayRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components/Button.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {clearModals} from "@app/util/modal"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import {addSpaceMembership, broadcastUserData} from "@app/core/commands"
+  import StatusIndicator from "@lib/components/StatusIndicator.svelte"
+  import RelaySummary from "@app/components/RelaySummary.svelte"
+  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
+  import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
+  import {attemptRelayAccess, addSpaceMembership, broadcastUserData, setSpaceNotifications} from "@app/core/commands"
+  import {relaysMostlyRestricted, deriveSpaceMembers, notificationSettings} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+  import {makeSpacePath} from "@app/util/routes"
+  import {Push} from "@app/util/notifications"
 
-  const {url} = $props()
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const relay = deriveRelay(url)
+  const members = deriveSpaceMembers(url)
 
   const back = () => history.back()
 
   const join = async () => {
+    if (error) {
+      return pushModal(SpaceAccessRequest, {url, callback: back})
+    }
+
     loading = true
 
     try {
+      if (notifications) {
+        if (!notificationSettings.get().push) {
+          await setSpaceNotifications(url, true)
+        } else {
+          const permissions = await Push.request()
+
+          if (permissions === "granted") {
+            await setSpaceNotifications(url, true)
+          }
+        }
+      } else {
+        await setSpaceNotifications(url, false)
+      }
+
       await addSpaceMembership(url)
+      await goto(makeSpacePath(url), {replaceState: true})
 
       broadcastUserData([url])
-      clearModals()
+      relaysMostlyRestricted.update(dissoc(url))
+      pushToast({message: "Welcome to the space!"})
     } catch (e) {
+      console.error("Failed to join space:", e)
+      pushToast({theme: "error", message: "Failed to join space. Please try again."})
+    } finally {
       loading = false
     }
   }
 
-  let loading = $state(false)
+  let error: string | undefined = $state()
+  let loading = $state(true)
+  let notifications = $state(true)
+
+  onMount(async () => {
+    error = await attemptRelayAccess(url)
+    loading = false
+  })
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(join)}>
-  <ModalHeader>
+  <RelaySummary {url} />
-    {#snippet title()}
+  <div class="card2 card2-sm bg-alt">
-      <div>
+    <div class="flex justify-between gap-12">
-        Joining <span class="text-primary">{displayRelayUrl(url)}</span>
+      <div class="col-1">
+        <strong>Enable notifications for this space</strong>
+        <p class="text-xs opacity-75">
+          Get notified about new activity in this space. You can change this later in settings.
+        </p>
       </div>
-    {/snippet}
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
-    {#snippet info()}
+    </div>
-      <div>Are you sure you'd like to join this space?</div>
+  </div>
-    {/snippet}
+  <div class="card2 card2-sm bg-alt flex flex-col gap-2">
-  </ModalHeader>
+    <div class="flex justify-between">
+      <strong>Connection Status</strong>
+      {#if error}
+        <StatusIndicator class="bg-error">Error</StatusIndicator>
+      {:else}
+        <SocketStatusIndicator {url} />
+      {/if}
+    </div>
+    {#if error}
+      <div class="flex items-center gap-2">
+        <Icon icon={DangerTriangle} />
+        <p class="text-sm opacity-75">{error}</p>
+      </div>
+    {/if}
+  </div>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Join Space</Spinner>
+      <Spinner loading={loading}>
+        {error ? "Request Access" : "Join Space"}
+      </Spinner>
       <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>

src/app/components/SpaceJoinConfirm.svelte

@@ -1,33 +0,0 @@
-<script module lang="ts">
-  import {goto} from "$app/navigation"
-  import {dissoc} from "@welshman/lib"
-  import {pushToast} from "@app/util/toast"
-  import {makeSpacePath} from "@app/util/routes"
-  import {addSpaceMembership, broadcastUserData} from "@app/core/commands"
-  import {relaysMostlyRestricted} from "@app/core/state"
-
-  export const confirmSpaceJoin = async (url: string) => {
-    await addSpaceMembership(url)
-
-    broadcastUserData([url])
-    relaysMostlyRestricted.update(dissoc(url))
-    goto(makeSpacePath(url), {replaceState: true})
-    pushToast({message: "Welcome to the space!"})
-  }
-</script>
-
-<script lang="ts">
-  import Confirm from "@lib/components/Confirm.svelte"
-
-  type Props = {
-    url: string
-  }
-
-  const {url}: Props = $props()
-
-  const confirm = () => confirmSpaceJoin(url)
-</script>
-
-<Confirm
-  {confirm}
-  message="This space does not appear to limit who can post to it. This can result in a large amount of spam or other objectionable content. Continue?" />

src/app/components/SpaceMenu.svelte

@@ -18,6 +18,8 @@
   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 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"
@@ -46,7 +48,11 @@
     deriveUserCanCreateRoom,
     deriveUserIsSpaceAdmin,
     deriveEventsForUrl,
+    userSettingsValues,
+    notificationSettings,
+    deriveIsMuted,
   } from "@app/core/state"
+  import {setSpaceNotifications} from "@app/core/commands"
   import {notifications} from "@app/util/notifications"
   import {pushModal} from "@app/util/modal"
   import {makeSpacePath, makeChatPath} from "@app/util/routes"
@@ -93,6 +99,12 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
+  const isMuted = deriveIsMuted(url)
+
+  const toggleSpaceNotifications = () => {
+    setSpaceNotifications(url, !isMuted)
+  }
+
   let showMenu = $state(false)
   let replaceState = $state(false)
   let element: Element | undefined = $state()
@@ -111,6 +123,9 @@
         <div class="flex items-center justify-between">
           <strong class="ellipsize flex items-center gap-1">
             <RelayName {url} />
+            {#if isMuted}
+              <Icon icon={VolumeCross} size={3} class="opacity-50" />
+            {/if}
           </strong>
           <Icon icon={AltArrowDown} />
         </div>
@@ -155,6 +170,19 @@
                 </Link>
               </li>
             {/if}
+            <li>
+              {#if $notificationSettings.push}
+                <Button onclick={toggleSpaceNotifications}>
+                  <Icon icon={isMuted ? VolumeCross : VolumeLoud} />
+                  {isMuted ? "Turn on" : "Turn off"} notifications
+                </Button>
+              {:else}
+                <Link href="/settings/alerts">
+                  <Icon icon={VolumeLoud} />
+                  Enable notifications
+                </Link>
+              {/if}
+            </li>
             <li>
               {#if $userSpaceUrls.includes(url)}
                 <Button onclick={leaveSpace} class="text-error">

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import VolumeLoud from "@assets/icons/volume-loud.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"
+  import {userSettingsValues, deriveIsMuted} from "@app/core/state"
 
   interface Props {
     url: any
@@ -16,8 +17,10 @@
 
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
-  const id = makeRoomId(url, h)
   const path = makeRoomPath(url, h)
+  const isSpaceMuted = deriveIsMuted(url)
+  const isRoomMuted = deriveIsMuted(url, h)
+  const showDifferenceIcon = $derived($isRoomMuted !== $isSpaceMuted)
 </script>
 
 <SecondaryNavItem
@@ -25,7 +28,7 @@
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
   <RoomNameWithImage {url} {h} />
-  {#if $userSettingsValues.muted_rooms.includes(id)}
+  {#if showDifferenceIcon}
-    <Icon icon={VolumeCross} size={4} class="opacity-50" />
+    <Icon icon={isRoomMuted ? VolumeCross : VolumeLoud} size={4} class="opacity-50" />
   {/if}
 </SecondaryNavItem>

src/app/core/commands.ts

@@ -73,7 +73,7 @@ import {
   getThunkError,
 } from "@welshman/app"
 import {compressFile} from "@lib/html"
-import type {SettingsValues} from "@app/core/state"
+import type {SettingsValues, SpaceNotificationSettings} from "@app/core/state"
 import {
   SETTINGS,
   PROTECTED,
@@ -82,6 +82,7 @@ import {
   userSpaceUrls,
   userSettingsValues,
   getSetting,
+  getSettings,
   userGroupList,
   shouldIgnoreError,
   stripPrefix,
@@ -356,6 +357,48 @@ export const addTrustedRelay = async (url: string) =>
 export const removeTrustedRelay = async (url: string) =>
   publishSettings({trusted_relays: remove(url, getSetting<string[]>("trusted_relays"))})
 
+// Space and room notification settings
+
+export const setSpaceNotifications = async (url: string, notify: boolean) => {
+  const {alerts} = getSettings()
+  const existing = alerts.find((s: SpaceNotificationSettings) => s.url === url)
+
+  let updated: typeof alerts
+
+  if (existing) {
+    // Clear exceptions when changing the space notification setting
+    updated = alerts.map((s: SpaceNotificationSettings) =>
+      s.url === url ? {...s, notify, exceptions: []} : s,
+    )
+  } else {
+    updated = [...alerts, {url, notify, exceptions: []}]
+  }
+
+  return publishSettings({alerts: updated})
+}
+
+export const toggleRoomNotifications = async (url: string, h: string) => {
+  const {alerts} = getSettings()
+  const existing = alerts.find((s: SpaceNotificationSettings) => s.url === url)
+
+  let updated: typeof alerts
+
+  if (!existing) {
+    // No space settings yet, create one with this room as an exception (default is notify: true)
+    updated = [...alerts, {url, notify: true, exceptions: [h]}]
+  } else {
+    // Toggle exception status
+    const hasException = existing.exceptions.includes(h)
+    const exceptions = hasException ? remove(h, existing.exceptions) : append(h, existing.exceptions)
+
+    updated = alerts.map((s: SpaceNotificationSettings) =>
+      s.url === url ? {...s, exceptions} : s,
+    )
+  }
+
+  return publishSettings({alerts: updated})
+}
+
 // Join request
 
 export type JoinRequestParams = {

src/app/core/state.ts

@@ -271,6 +271,12 @@ export enum RelayAuthMode {
   Conservative = "conservative",
 }
 
+export type SpaceNotificationSettings = {
+  url: string
+  notify: boolean
+  exceptions: string[]
+}
+
 export type SettingsValues = {
   show_media: boolean
   hide_sensitive: boolean
@@ -280,7 +286,7 @@ export type SettingsValues = {
   relay_auth: RelayAuthMode
   send_delay: number
   font_size: number
-  muted_rooms: string[]
+  alerts: SpaceNotificationSettings[]
 }
 
 export type Settings = {
@@ -297,7 +303,7 @@ export const defaultSettings: SettingsValues = {
   relay_auth: RelayAuthMode.Conservative,
   send_delay: 0,
   font_size: 1.1,
-  muted_rooms: [],
+  alerts: [],
 }
 
 export const settingsByPubkey = deriveItemsByKey({
@@ -993,3 +999,18 @@ export const parseInviteLink = (invite: string): InviteData | undefined => {
     })
   )
 }
+
+// Hierarchical notification helpers
+
+export const isMuted = (url: string, h?: string) => {
+  const {alerts} = getSettings()
+  const pref = alerts.find(spec({url}))
+
+  if (!pref) return true
+  if (!h) return pref.notify
+  if (pref.notify) return !pref.exceptions.includes(h)
+  if (!pref.notify) return pref.exceptions.includes(h)
+}
+
+export const deriveIsMuted = (url: string, h?: string) =>
+  derived(userSettingsValues, () => isMuted(url, h))

src/app/util/notifications.ts

@@ -64,6 +64,7 @@ import {
   getEventPath,
   goToEvent,
 } from "@app/util/routes"
+import type {SpaceNotificationSettings} from "@app/core/state"
 import {
   DM_KINDS,
   CONTENT_KINDS,
@@ -83,6 +84,7 @@ import {
   userSpaceUrls,
   splitRoomId,
   makeRoomId,
+  isMuted,
   device,
 } from "@app/core/state"
 import {kv} from "@app/core/storage"
@@ -282,7 +284,7 @@ export const onNotification = call(() => {
     if (!unsubscribe) {
       unsubscribe = on(repository, "update", ({added}) => {
         const $pubkey = pubkey.get()
-        const {muted_rooms} = getSettings()
+        const {alerts} = getSettings()
 
         for (const event of added) {
           if (event.pubkey == $pubkey) {
@@ -290,11 +292,8 @@ export const onNotification = call(() => {
           }
 
           const h = getTagValue("h", event.tags)
-          const muted = Array.from(tracker.getRelays(event.id)).every(
-            url => h && muted_rooms.includes(makeRoomId(url, h)),
-          )
 
-          if (muted) {
+          if (Array.from(tracker.getRelays(event.id)).every(url => isMuted(url, h))) {
             continue
           }
 
@@ -491,7 +490,7 @@ class CapacitorNotifications implements IPushAdapter {
     }
   }
 
-  _unsyncRelay = async (relay: string, keys: string[]) => {
+  _unsyncRelay = async (relay: string, key: string) => {
     const stuff = await this._getPushStuff(relay)
 
     if (!stuff) {
@@ -499,18 +498,11 @@ class CapacitorNotifications implements IPushAdapter {
       return
     }
 
-    const {url} = stuff
+    const relays = [stuff.url]
-    const tags: string[][] = []
+    const identifier = this._getSubscriptionIdentifier(relay, key)
-    for (const key of keys) {
+    const address = new Address(30390, pubkey.get()!, identifier).toString()
-      const identifier = this._getSubscriptionIdentifier(relay, key)
+    const event = makeEvent(DELETE, {tags: [["a", address]]})
-      const address = new Address(30390, pubkey.get()!, identifier).toString()
+    const error = await waitForThunkError(publishThunk({relays, event}))
-
-      tags.push(["a", address])
-    }
-
-    const thunk = publishThunk({relays: [url], event: makeEvent(DELETE, {tags})})
-
-    const error = await waitForThunkError(thunk)
 
     if (error) {
       console.warn(`Failed to unsubscribe ${relay} from notifications:`, error)
@@ -521,32 +513,43 @@ class CapacitorNotifications implements IPushAdapter {
     signal.addEventListener(
       "abort",
       merged([userSpaceUrls, notificationSettings, userSettingsValues]).subscribe(
-        throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {muted_rooms}]) => {
+        throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {alerts}]) => {
-          const filters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
+          const baseFilters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
 
           for (const url of $userSpaceUrls) {
-            if (!spaces && !mentions) {
+            const {notify = true, exceptions = []} = alerts.find(spec({url})) || {}
-              this._unsyncRelay(url, ["spaces", "mentions"])
+            const filters: Filter[] = []
-            } else if (!spaces) {
+            const ignore: Filter[] = []
-              this._unsyncRelay(url, ["spaces"])
-            } else if (!mentions) {
-              this._unsyncRelay(url, ["mentions"])
-            }
-
-            const mutedRooms = muted_rooms.map(splitRoomId).filter(nthEq(0, url)).map(nth(1))
 
+            // Build filters based on spaces setting
             if (spaces) {
-              this._syncRelay(url, "spaces", filters, [{"#h": [mutedRooms]}])
+              if (notify) {
+                // notify=true: exceptions are opt-out (exclude those rooms)
+                if (exceptions.length > 0) {
+                  ignore.push({"#h": exceptions})
+                }
+                // Include all other content
+                filters.push(...baseFilters)
+              } else {
+                // notify=false: exceptions are opt-in (only include those rooms)
+                if (exceptions.length > 0) {
+                  filters.push(
+                    ...baseFilters.map(f => ({...f, "#h": exceptions})),
+                  )
+                }
+              }
             }
 
+            // Build filters for mentions - always notify for p-tagged content
             if (mentions) {
-              const mentionFilters = filters.map(assoc("#p", [pubkey.get()!]))
+              filters.push(...baseFilters.map(f => ({...f, "#p": [pubkey.get()!]})))
+            }
 
-              if (!spaces) {
+            // Sync or unsync based on whether we have filters
-                this._syncRelay(url, "mentions", mentionFilters)
+            if (filters.length > 0) {
-              } else if (mutedRooms.length > 0) {
+              this._syncRelay(url, "spaces", filters, ignore)
-                this._syncRelay(url, "mentions", mentionFilters.map(assoc("#h", [mutedRooms])))
+            } else {
-              }
+              this._unsyncRelay(url, "spaces")
             }
           }
         }),
@@ -563,7 +566,7 @@ class CapacitorNotifications implements IPushAdapter {
             if (messages) {
               this._syncRelay(url, "messages", [{kinds: DM_KINDS, "#p": [pubkey.get()!]}])
             } else {
-              this._unsyncRelay(url, ["messages"])
+              this._unsyncRelay(url, "messages")
             }
           }
         }),
@@ -619,11 +622,11 @@ class CapacitorNotifications implements IPushAdapter {
 
     notificationState.set({})
 
-    await Promise.all(get(userSpaceUrls).map(url => this._unsyncRelay(url, ["spaces", "mentions"])))
+    await Promise.all(get(userSpaceUrls).map(url => this._unsyncRelay(url, "spaces")))
 
     await Promise.all(
       getRelaysFromList(get(userMessagingRelayList)).map(url =>
-        this._unsyncRelay(url, ["messages"]),
+        this._unsyncRelay(url, "messages"),
       ),
     )
   }

src/routes/discover/+page.svelte

@@ -20,7 +20,7 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SpaceCheck from "@app/components/SpaceCheck.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import {groupListPubkeysByUrl, parseInviteLink} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
@@ -36,9 +36,7 @@
   })
 
   const relaySearch = _derived(throttled(1000, relays), $relays => {
-    const options = $relays.filter(
+    const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
-      r => $groupListPubkeysByUrl.has(r.url) && r.url !== inviteData?.url,
-    )
 
     return createSearch(options, {
       getValue: (relay: RelayProfile) => relay.url,
@@ -60,7 +58,7 @@
     if (claim) {
       pushModal(SpaceInviteAccept, {invite: term})
     } else {
-      pushModal(SpaceCheck, {url})
+      pushModal(SpaceJoin, {url})
     }
   }
 
@@ -69,7 +67,7 @@
   let showScanner = $state(false)
   let element: Element
 
-  const options = $derived($relaySearch.searchOptions(term))
+  const options = $derived($relaySearch.searchOptions(term).filter(r => r.url !== inviteData?.url))
   const inviteData = $derived(parseInviteLink(term))
 
   onMount(() => {

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

@@ -105,23 +105,6 @@
       <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
     </div>
   </div>
-  <div
-    class={cx("card2 bg-alt col-4 shadow-md", {
-      "pointer-events-none opacity-50": !settings.badge && !settings.sound && !settings.push,
-    })}>
-    <strong class="text-lg">Muted Rooms</strong>
-    {#each 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} disabled={loading}>Discard Changes</Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>

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

@@ -20,11 +20,7 @@
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   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"
@@ -42,24 +38,19 @@
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
   import {
-    deriveUserRooms,
-    notificationSettings,
-    userSettingsValues,
     decodeRelay,
     deriveUserRoomMembershipStatus,
     deriveRoom,
     MembershipStatus,
     PROTECTED,
     MESSAGE_KINDS,
+    userSettingsValues,
   } from "@app/core/state"
   import {setChecked, checked} from "@app/util/notifications"
   import {
     canEnforceNip70,
     prependParent,
     publishDelete,
-    publishSettings,
-    addRoomMembership,
-    removeRoomMembership,
   } from "@app/core/commands"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
@@ -72,30 +63,10 @@
   const url = decodeRelay(relay)
   const room = deriveRoom(url, h)
   const shouldProtect = canEnforceNip70(url)
-  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(
-      notificationSettings,
-      ({spaces, push, sound, badge}) => spaces && (push || sound || badge),
-    ),
-  )
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
-  const addFavorite = () => addRoomMembership(url, h)
-
-  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
 
@@ -365,43 +336,6 @@
   {/snippet}
   {#snippet action()}
     <div class="row-2">
-      {#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={VolumeCross} />
-        </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} />
-        </Button>
-      {/if}
-      {#if isFavorite}
-        <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left text-secondary"
-          data-tip="Remove Favorite"
-          onclick={removeFavorite}>
-          <Icon size={4} icon={Bookmark} />
-        </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"