Handle failed space auth

src/routes/spaces/[relay]/+layout.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ifLet, now} from "@welshman/lib"
+  import {now} from "@welshman/lib"
   import {subscribe} from "@welshman/app"
   import {DELETE, REACTION} from "@welshman/util"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
+  import SpaceAuthError from "@app/components/SpaceAuthError.svelte"
   import {pushToast} from "@app/toast"
+  import {pushModal} from "@app/modal"
   import {setChecked} from "@app/notifications"
-  import {checkRelayConnection, checkRelayAuth} from "@app/commands"
+  import {checkRelayConnection, checkRelayAuth, checkRelayAccess} from "@app/commands"
   import {decodeRelay, MEMBERSHIPS} from "@app/state"
   import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
 
@@ -18,13 +20,19 @@
   const notification = deriveNotification($page.url.pathname, SPACE_FILTERS, url)
 
   const checkConnection = async () => {
-    ifLet(await checkRelayConnection(url), error => {
-      pushToast({theme: "error", message: error})
-    })
+    const connectionError = await checkRelayConnection(url)
 
-    ifLet(await checkRelayAuth(url, 30_000), error => {
-      pushToast({theme: "error", message: error})
-    })
+    if (connectionError) {
+      return pushToast({theme: "error", message: connectionError})
+    }
+
+    const [authError, accessError] = await Promise.all([checkRelayAuth(url), checkRelayAccess(url)])
+
+    const error = authError || accessError
+
+    if (error) {
+      pushModal(SpaceAuthError, {url, error})
+    }
   }
 
   // We have to watch this one, since on mobile the badge wil be visible when active