Monitor relay connections for restricted responses and show error to user

src/app/components/ModalContainer.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {page} from "$app/stores"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
-  import {modals, clearModals} from "@app/util/modal"
+  import {modal, clearModals} from "@app/util/modal"
 
   const onKeyDown = (e: any) => {
     if (e.code === "Escape" && e.target === document.body) {
@@ -10,22 +9,21 @@
     }
   }
 
-  const hash = $derived($page.url.hash.slice(1))
-  const modal = $derived($modals[hash])
+  const m = $derived($modal)
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
 
-{#if modal?.options?.drawer}
-  <Drawer onClose={clearModals} {...modal.options}>
-    {#key modal.id}
-      <modal.component {...modal.props} />
+{#if m?.options?.drawer}
+  <Drawer onClose={clearModals} {...m.options}>
+    {#key m.id}
+      <m.component {...m.props} />
     {/key}
   </Drawer>
-{:else if modal}
-  <Dialog onClose={clearModals} {...modal.options}>
-    {#key modal.id}
-      <modal.component {...modal.props} />
+{:else if m}
+  <Dialog onClose={clearModals} {...m.options}>
+    {#key m.id}
+      <m.component {...m.props} />
     {/key}
   </Dialog>
 {/if}

src/app/components/SpaceAccessRequest.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {displayUrl} from "@welshman/lib"
-  import {Pool, AuthStatus} from "@welshman/net"
+  import {AuthStatus} from "@welshman/net"
+  import {waitForThunkError} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -11,7 +12,8 @@
   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 {publishJoinRequest} from "@app/core/commands"
+  import {deriveSocket} from "@app/core/state"
 
   type Props = {
     url: string
@@ -21,27 +23,24 @@
 
   const back = () => history.back()
 
-  const joinRelay = async () => {
-    const error = await attemptRelayAccess(url, claim)
-
-    if (error) {
-      return pushToast({theme: "error", message: error, timeout: 30_000})
-    }
-
-    const socket = Pool.get().get(url)
-
-    if (socket.auth.status === AuthStatus.None) {
-      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-    } else {
-      await confirmSpaceJoin(url)
-    }
-  }
+  const socket = deriveSocket(url)
 
   const join = async () => {
     loading = true
 
     try {
-      await joinRelay()
+      const thunk = publishJoinRequest({url, claim})
+      const error = await waitForThunkError(thunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error, timeout: 30_000})
+      }
+
+      if ($socket.auth.status === AuthStatus.None) {
+        pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
+      } else {
+        await confirmSpaceJoin(url)
+      }
     } finally {
       loading = false
     }

src/app/components/SpaceJoinConfirm.svelte

@@ -1,10 +1,12 @@
 <script module lang="ts">
   import {goto} from "$app/navigation"
+  import {dissoc} from "@welshman/lib"
   import {ROOM_META} from "@welshman/util"
   import {load} from "@welshman/net"
+  import {pushToast} from "@app/util/toast"
   import {makeSpacePath} from "@app/util/routes"
   import {addSpaceMembership, broadcastUserData} from "@app/core/commands"
-  import {pushToast} from "@app/util/toast"
+  import {relaysMostlyRestricted} from "@app/core/state"
 
   export const confirmSpaceJoin = async (url: string) => {
     await addSpaceMembership(url)
@@ -19,12 +21,9 @@
     }
 
     broadcastUserData([url])
-
     goto(path, {replaceState: true})
-
-    pushToast({
-      message: "Welcome to the space!",
-    })
+    relaysMostlyRestricted.update(dissoc(url))
+    pushToast({message: "Welcome to the space!"})
   }
 </script>