Rework alert settings and UI

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) {
-        pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-      } else {
-        await confirmSpaceJoin(url)
-      }
+      callback()
     } 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 {parseInviteLink} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
+  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) {
-      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-    } else {
-      await confirmSpaceJoin(url)
-    }
+    await addSpaceMembership(url)
+    await goto(makeSpacePath(url), {replaceState: true})
+
+    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 {addSpaceMembership, broadcastUserData} from "@app/core/commands"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  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>
-    {#snippet title()}
-      <div>
-        Joining <span class="text-primary">{displayRelayUrl(url)}</span>
+  <RelaySummary {url} />
+  <div class="card2 card2-sm bg-alt">
+    <div class="flex justify-between gap-12">
+      <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}
-    {#snippet info()}
-      <div>Are you sure you'd like to join this space?</div>
-    {/snippet}
-  </ModalHeader>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
+    </div>
+  </div>
+  <div class="card2 card2-sm bg-alt flex flex-col gap-2">
+    <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)}
-    <Icon icon={VolumeCross} size={4} class="opacity-50" />
+  {#if showDifferenceIcon}
+    <Icon icon={isRoomMuted ? VolumeCross : VolumeLoud} size={4} class="opacity-50" />
   {/if}
 </SecondaryNavItem>