Validate space connection before joining

src/app/components/ChannelThread.svelte

@@ -2,7 +2,7 @@
   import {sortBy, append} from "@welshman/lib"
   import {createEvent} from "@welshman/util"
   import type {EventContent, TrustedEvent} from "@welshman/util"
-  import {repository, makeThunk, publishThunk} from "@welshman/app"
+  import {repository, publishThunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
@@ -39,7 +39,7 @@
 
     const reply = createEvent(REPLY, {content, tags: append(tagRoom(room, url), tags)})
 
-    publishThunk(makeThunk({event: reply, relays: [url]}))
+    publishThunk({event: reply, relays: [url]})
   }
 </script>
 

src/app/components/ChatMessageEmojiButton.svelte

@@ -4,7 +4,7 @@
   import {ctx, uniq, between} from "@welshman/lib"
   import {Nip59} from "@welshman/signer"
   import type {TrustedEvent} from "@welshman/util"
-  import {makeThunk, signer, publishThunk} from "@welshman/app"
+  import {signer, publishThunk} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
@@ -23,12 +23,10 @@
     for (const recipient of uniq(pubkeys)) {
       const rumor = await nip59.wrap(recipient, template)
 
-      publishThunk(
-        makeThunk({
-          event: rumor.wrap,
-          relays: ctx.app.router.PublishMessage(recipient).getUrls(),
-        }),
-      )
+      publishThunk({
+        event: rumor.wrap,
+        relays: ctx.app.router.PublishMessage(recipient).getUrls(),
+      })
     }
 
     popover.hide()

src/app/components/ChatStart.svelte

@@ -3,6 +3,8 @@
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {makeChatPath} from "@app/routes"
 
@@ -16,15 +18,17 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={onSubmit}>
-  <h1 class="heading">Start a Chat</h1>
-  <p class="text-center">Create an encrypted chat room for private conversations.</p>
+  <ModalHeader>
+    <div slot="title">Start a Chat</div>
+    <div slot="info">Create an encrypted chat room for private conversations.</div>
+  </ModalHeader>
   <Field>
     <p slot="label">Members</p>
     <div slot="input">
       <ProfileMultiSelect bind:value={pubkeys} />
     </div>
   </Field>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -33,5 +37,5 @@
       Create Chat
       <Icon icon="alt-arrow-right" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/EventCreate.svelte

@@ -5,10 +5,12 @@
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {randomId} from "@welshman/lib"
   import {createEvent, EVENT_DATE, EVENT_TIME} from "@welshman/util"
-  import {publishThunk, makeThunk, dateToSeconds} from "@welshman/app"
+  import {publishThunk, dateToSeconds} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {getPubkeyHints} from "@app/commands"
   import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
@@ -51,7 +53,7 @@
       ],
     })
 
-    publishThunk(makeThunk({event, relays: [url]}))
+    publishThunk({event, relays: [url]})
     clearModal()
   }
 
@@ -68,10 +70,10 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={startSubmit}>
-  <div class="py-2">
-    <h1 class="heading">Create an Event</h1>
-    <p class="text-center">Invite other group members to events online or in real life.</p>
-  </div>
+  <ModalHeader>
+    <div slot="title">Create an Event</div>
+    <div slot="info">Invite other group members to events online or in real life.</div>
+  </ModalHeader>
   <Field>
     <p slot="label">Title*</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
@@ -114,11 +116,11 @@
       <input bind:value={location} class="grow" type="text" />
     </label>
   </Field>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">Create Event</Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/LogOut.svelte

@@ -3,6 +3,8 @@
   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"
 
   const back = () => history.back()
 
@@ -23,8 +25,10 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={logout}>
-  <h1 class="heading">Are you sure you want to log out?</h1>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalHeader>
+    <div slot="title">Are you sure you want to log out?</div>
+  </ModalHeader>
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -32,5 +36,5 @@
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Log Out</Spinner>
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/RoomCreate.svelte

@@ -6,6 +6,7 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from '@lib/components/ModalFooter.svelte'
   import {addRoomMembership} from "@app/commands"
   import {makeSpacePath} from "@app/routes"
 
@@ -46,7 +47,7 @@
       <input bind:value={room} class="grow" type="text" />
     </label>
   </Field>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -55,5 +56,5 @@
       <Spinner {loading}>Create Room</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/SpaceCheck.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {goto} from '$app/navigation'
+  import {sleep} from '@welshman/lib'
+  import {displayRelayUrl} from '@welshman/util'
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import CardButton from "@lib/components/CardButton.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {attemptRelayAccess} from '@app/commands'
+  import {makeSpacePath} from '@app/routes'
+
+  export let url
+
+  const back = () => history.back()
+
+  const next = () => goto(makeSpacePath(url))
+
+  let error: string | undefined
+  let loading = true
+
+  onMount(async () => {
+    ;[error] = await Promise.all([attemptRelayAccess(url), sleep(3000)])
+    loading = false
+  })
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={next}>
+  <ModalHeader>
+    <div slot="title">Checking Space...</div>
+    <div slot="info">
+      Connecting you to to <span class="text-primary">{displayRelayUrl(url)}</span>
+    </div>
+  </ModalHeader>
+  <div class="flex flex-col m-auto gap-4">
+    {#if loading}
+      <Spinner loading>Hold tight, we're checking your connection.</Spinner>
+    {: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" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">
+      Go to Space
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/SpaceCreate.svelte

@@ -4,6 +4,7 @@
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import InfoRelay from "@app/components/InfoRelay.svelte"
   import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
   import {pushModal} from "@app/modal"
@@ -43,7 +44,7 @@
       <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
     </p>
   </Field>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -52,5 +53,5 @@
       Next
       <Icon icon="alt-arrow-right" class="!bg-base-300" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/SpaceCreateExternal.svelte

@@ -3,6 +3,7 @@
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/modal"
 
@@ -27,7 +28,7 @@
   <p>
     Once you've created a relay of your own, come back here to link Flotilla with your new relay.
   </p>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -36,5 +37,5 @@
       Let's go
       <Icon icon="alt-arrow-right" class="!bg-base-300" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/SpaceExit.svelte

@@ -4,6 +4,8 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {removeSpaceMembership} from "@app/commands"
 
   export let url
@@ -26,11 +28,13 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={exit}>
-  <h1 class="heading">
-    You are leaving <span class="text-primary">{displayRelayUrl(url)}</span>
-  </h1>
+  <ModalHeader>
+    <div slot="title">
+      You are leaving <span class="text-primary">{displayRelayUrl(url)}</span>
+    </div>
+  </ModalHeader>
   <p class="text-center">Are you sure you want to leave?</p>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -38,5 +42,5 @@
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Confirm</Spinner>
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/SpaceInviteAccept.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
-  import {tryCatch} from "@welshman/lib"
+  import {ctx, tryCatch} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import {loadRelay} from "@welshman/app"
   import CardButton from "@lib/components/CardButton.svelte"
@@ -9,26 +9,24 @@
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from '@lib/components/ModalFooter.svelte'
   import InfoRelay from "@app/components/InfoRelay.svelte"
   import {pushToast} from "@app/toast"
   import {pushModal} from "@app/modal"
-  import {addSpaceMembership} from "@app/commands"
+  import {addSpaceMembership, attemptRelayAccess} from "@app/commands"
   import {makeSpacePath} from "@app/routes"
 
   const back = () => history.back()
 
   const browse = () => goto("/discover")
 
-  const joinRelay = async (url: string) => {
-    url = normalizeRelayUrl(url)
+  const joinRelay = async (invite: string) => {
+    const [raw, claim] = invite.split("'")
+    const url = normalizeRelayUrl(raw)
+    const error = await attemptRelayAccess(url, claim)
 
-    const relay = await loadRelay(url)
-
-    if (!relay?.profile) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, we weren't able to find that relay.",
-      })
+    if (error) {
+      return pushToast({theme: "error", message: error})
     }
 
     await addSpaceMembership(url)
@@ -78,7 +76,7 @@
       <div slot="info">Browse other spaces on the discover page.</div>
     </CardButton>
   </Button>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -87,5 +85,5 @@
       <Spinner {loading}>Join Space</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/SpaceJoin.svelte

@@ -4,6 +4,7 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clearModal} from "@app/modal"
   import {addSpaceMembership} from "@app/commands"
 
@@ -37,7 +38,7 @@
     </div>
     <div slot="info">Are you sure you'd like to join this space?</div>
   </ModalHeader>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -46,5 +47,5 @@
       <Spinner {loading}>Join Space</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
-  </div>
+  </ModalFooter>
 </form>

src/app/components/ThreadCreate.svelte

@@ -4,9 +4,11 @@
   import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {createEvent, NOTE} from "@welshman/util"
-  import {publishThunk, makeThunk} from "@welshman/app"
+  import {publishThunk} from "@welshman/app"
   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 {getPubkeyHints} from "@app/commands"
   import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
   import {clearModal} from "@app/modal"
@@ -22,7 +24,7 @@
   const submit = () => {
     const event = createEvent(NOTE, {content: $editor.getText(), tags: getEditorTags($editor)})
 
-    publishThunk(makeThunk({event, relays: [url]}))
+    publishThunk({event, relays: [url]})
     clearModal()
   }
 
@@ -34,10 +36,10 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={startSubmit}>
-  <div class="py-2">
-    <h1 class="heading">Create a Thread</h1>
-    <p class="text-center">Share your thoughts, or start a discussion.</p>
-  </div>
+  <ModalHeader>
+    <div slot="title">Create a Thread</div>
+    <div slot="info">Share your thoughts, or start a discussion.</div>
+  </ModalHeader>
   <div class="relative">
     <div class="note-editor flex-grow overflow-hidden">
       <EditorContent editor={$editor} />
@@ -53,11 +55,11 @@
       {/if}
     </Button>
   </div>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">Create Thread</Button>
-  </div>
+  </ModalFooter>
 </form>