Add qr code to invite screen

src/app/components/QRCode.svelte

@@ -26,8 +26,8 @@
   })
 </script>
 
-<Button class="max-w-full {props.class}" onclick={copy}>
-  <div bind:this={wrapper} style={`height: ${height}px`}>
+<Button class="flex w-full justify-center {props.class}" onclick={copy}>
+  <div bind:this={wrapper} class="w-md" style={`height: ${height}px`}>
     <canvas
       class="rounded-box"
       bind:this={canvas}

src/app/components/SpaceAccessRequest.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {displayUrl} from "@welshman/lib"
   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"
@@ -15,7 +14,7 @@
   import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
-  import {publishJoinRequest} from "@app/core/commands"
+  import {checkRelayAccess} from "@app/core/commands"
   import {deriveSocket} from "@app/core/state"
 
   type Props = {
@@ -32,11 +31,10 @@
     loading = true
 
     try {
-      const thunk = publishJoinRequest({url, claim})
-      const error = await waitForThunkError(thunk)
+      const message = await checkRelayAccess(url, claim)
 
-      if (error) {
-        return pushToast({theme: "error", message: error, timeout: 30_000})
+      if (message) {
+        return pushToast({theme: "error", message, timeout: 30_000})
       }
 
       if ($socket.auth.status === AuthStatus.None) {

src/app/components/SpaceInvite.svelte

@@ -3,15 +3,15 @@
   import {sleep, nthEq} from "@welshman/lib"
   import {request} from "@welshman/net"
   import {displayRelayUrl, AUTH_INVITE} from "@welshman/util"
-  import {slide} from "@lib/transition"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
   import Spinner from "@lib/components/Spinner.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
-  import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Copy from "@assets/icons/copy.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import QRCode from "@app/components/QRCode.svelte"
   import {clip} from "@app/util/toast"
   import {PLATFORM_URL} from "@app/core/state"
 
@@ -62,11 +62,12 @@
   </ModalHeader>
   <div>
     {#if loading}
-      <p class="center" out:slide>
+      <p class="center">
         <Spinner {loading}>Requesting an invite link...</Spinner>
       </p>
     {:else}
-      <div in:slide>
+      <div class="flex flex-col items-center gap-6">
+        <QRCode code={invite} />
         <Field>
           {#snippet input()}
             <label class="input input-bordered flex w-full items-center gap-2">