From 0d394bbc3b0a0e338a534a8ab1c15398e8d5e5c9 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 10 Oct 2024 14:33:50 -0700
Subject: [PATCH] Validate space connection before joining

---
 src/app/commands.ts                           | 67 +++++++++++++------
 src/app/components/ChannelThread.svelte       |  4 +-
 .../components/ChatMessageEmojiButton.svelte  | 12 ++--
 src/app/components/ChatStart.svelte           | 12 ++--
 src/app/components/EventCreate.svelte         | 18 ++---
 src/app/components/LogOut.svelte              | 10 ++-
 src/app/components/RoomCreate.svelte          |  5 +-
 src/app/components/SpaceCheck.svelte          | 66 ++++++++++++++++++
 src/app/components/SpaceCreate.svelte         |  5 +-
 src/app/components/SpaceCreateExternal.svelte |  5 +-
 src/app/components/SpaceExit.svelte           | 14 ++--
 src/app/components/SpaceInviteAccept.svelte   | 24 +++----
 src/app/components/SpaceJoin.svelte           |  5 +-
 src/app/components/ThreadCreate.svelte        | 18 ++---
 src/lib/components/ModalFooter.svelte         |  3 +
 src/routes/discover/+page.svelte              | 16 +++--
 src/routes/settings/profile/+page.svelte      |  4 +-
 .../spaces/[nrelay]/[[room]]/+page.svelte     |  4 +-
 18 files changed, 204 insertions(+), 88 deletions(-)
 create mode 100644 src/app/components/SpaceCheck.svelte
 create mode 100644 src/lib/components/ModalFooter.svelte

diff --git a/src/app/commands.ts b/src/app/commands.ts
index 1e4ffde5..ce4bef9c 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -19,12 +19,12 @@ import {
 } from "@welshman/util"
 import type {TrustedEvent, EventTemplate} from "@welshman/util"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
+import {PublishStatus, AuthStatus, ConnectionStatus} from "@welshman/net"
 import {Nip59, stamp} from "@welshman/signer"
 import {
   pubkey,
   signer,
   repository,
-  makeThunk,
   publishThunk,
   loadProfile,
   loadInboxRelaySelections,
@@ -40,6 +40,7 @@ import {
   userRelaySelections,
   userInboxRelaySelections,
   nip44EncryptToSelf,
+  loadRelay,
 } from "@welshman/app"
 import {tagRoom, userMembership, MEMBERSHIPS, INDEXER_RELAYS, loadMembership} from "@app/state"
 
@@ -112,7 +113,7 @@ export const broadcastUserData = async (relays: string[]) => {
 
   for (const event of events) {
     if (isSignedEvent(event)) {
-      await publishThunk(makeThunk({event, relays}))
+      await publishThunk({event, relays})
     }
   }
 }
@@ -186,18 +187,46 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
   }
 }
 
-export const joinRelay = async (url: string, claim?: string) => {
-  if (claim) {
-    await publishThunk(
-      makeThunk({
-        event: createEvent(28934, {tags: [["claim", claim]]}),
-        relays: [url],
-      }),
-    )
+// Relay access
+
+export const requestRelayAccess = (url: string, claim = "") =>
+  publishThunk({
+    event: createEvent(28934, {tags: [["claim", claim]]}),
+    relays: [url],
+  })
+
+export const attemptRelayAccess = async (url: string, claim = "") => {
+  const relay = await loadRelay(url)
+
+  // Make sure the relay has a profile
+  if (!relay?.profile) {
+    return "Sorry, we weren't able to find that relay."
   }
 
-  await setRelayPolicy(url, true, true)
-  await broadcastUserData([url])
+  const connection = ctx.net.pool.get(url)
+
+  // Check connection status
+  await connection.ensureConnected()
+
+  if (![ConnectionStatus.Ok, ConnectionStatus.Slow].includes(connection.meta.getStatus())) {
+    return `Failed to connect: "${connection.meta.getDescription()}"`
+  }
+
+  // Attempt to publish a join request
+  const result = await requestRelayAccess(url, claim)
+
+  if (result[url].status !== PublishStatus.Success) {
+    const message = result[url].message?.replace(/^.*: /, '') || "join request rejected"
+
+    return `Failed to join relay: ${message}`
+  }
+
+  // Check auth status
+  await connection.ensureAuth()
+
+  if (![AuthStatus.Ok, AuthStatus.Pending].includes(connection.meta.authStatus)) {
+    return `Failed to authenticate: "${connection.meta.authStatus}"`
+  }
 }
 
 // Actions
@@ -213,12 +242,10 @@ export const sendWrapped = async ({
 
   await Promise.all(
     uniq(pubkeys).map(async recipient => {
-      return publishThunk(
-        makeThunk({
-          event: await nip59.wrap(recipient, stamp(template)),
-          relays: ctx.app.router.PublishMessage(recipient).getUrls(),
-        }),
-      )
+      return publishThunk({
+        event: await nip59.wrap(recipient, stamp(template)),
+        relays: ctx.app.router.PublishMessage(recipient).getUrls(),
+      })
     }),
   )
 }
@@ -247,10 +274,10 @@ export const publishReaction = ({
   event: TrustedEvent
   content: string
   tags?: string[][]
-}) => publishThunk(makeThunk({event: makeReaction({event, content, tags}), relays}))
+}) => publishThunk({event: makeReaction({event, content, tags}), relays})
 
 export const makeDelete = ({event}: {event: TrustedEvent}) =>
   createEvent(DELETE, {tags: [["k", String(event.kind)], ...tagEvent(event)]})
 
 export const publishDelete = ({relays, event}: {relays: string[]; event: TrustedEvent}) =>
-  publishThunk(makeThunk({event: makeDelete({event}), relays}))
+  publishThunk({event: makeDelete({event}), relays})
diff --git a/src/app/components/ChannelThread.svelte b/src/app/components/ChannelThread.svelte
index a38860b4..110cc318 100644
--- a/src/app/components/ChannelThread.svelte
+++ b/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>
 
diff --git a/src/app/components/ChatMessageEmojiButton.svelte b/src/app/components/ChatMessageEmojiButton.svelte
index 065522f1..d2c62a7b 100644
--- a/src/app/components/ChatMessageEmojiButton.svelte
+++ b/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()
diff --git a/src/app/components/ChatStart.svelte b/src/app/components/ChatStart.svelte
index 952f165f..80246cef 100644
--- a/src/app/components/ChatStart.svelte
+++ b/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>
diff --git a/src/app/components/EventCreate.svelte b/src/app/components/EventCreate.svelte
index 2e28c5fd..37f32ee8 100644
--- a/src/app/components/EventCreate.svelte
+++ b/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>
diff --git a/src/app/components/LogOut.svelte b/src/app/components/LogOut.svelte
index 484142be..a766be48 100644
--- a/src/app/components/LogOut.svelte
+++ b/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>
diff --git a/src/app/components/RoomCreate.svelte b/src/app/components/RoomCreate.svelte
index 1446c038..241e76e5 100644
--- a/src/app/components/RoomCreate.svelte
+++ b/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>
diff --git a/src/app/components/SpaceCheck.svelte b/src/app/components/SpaceCheck.svelte
new file mode 100644
index 00000000..66571906
--- /dev/null
+++ b/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>
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
index 011b1304..4e63f090 100644
--- a/src/app/components/SpaceCreate.svelte
+++ b/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>
diff --git a/src/app/components/SpaceCreateExternal.svelte b/src/app/components/SpaceCreateExternal.svelte
index ff8dfca6..c385322b 100644
--- a/src/app/components/SpaceCreateExternal.svelte
+++ b/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>
diff --git a/src/app/components/SpaceExit.svelte b/src/app/components/SpaceExit.svelte
index c6e810ea..ce1b68b7 100644
--- a/src/app/components/SpaceExit.svelte
+++ b/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>
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte
index 30b004f9..3a6dc225 100644
--- a/src/app/components/SpaceInviteAccept.svelte
+++ b/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>
diff --git a/src/app/components/SpaceJoin.svelte b/src/app/components/SpaceJoin.svelte
index 88ecb485..a55803a9 100644
--- a/src/app/components/SpaceJoin.svelte
+++ b/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>
diff --git a/src/app/components/ThreadCreate.svelte b/src/app/components/ThreadCreate.svelte
index a98a9e75..4fa2b0d9 100644
--- a/src/app/components/ThreadCreate.svelte
+++ b/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>
diff --git a/src/lib/components/ModalFooter.svelte b/src/lib/components/ModalFooter.svelte
new file mode 100644
index 00000000..cb969645
--- /dev/null
+++ b/src/lib/components/ModalFooter.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-row items-center justify-between gap-4 mt-4">
+  <slot />
+</div>
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte
index 2d9f9982..acd5c747 100644
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -4,11 +4,15 @@
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import {makeSpacePath} from "@app/routes"
+  import SpaceCheck from "@app/components/SpaceCheck.svelte"
   import {userMembership, discoverRelays, getMembershipUrls} from "@app/state"
+  import {pushModal} from '@app/modal'
+
+  const openSpace = (url: string) => pushModal(SpaceCheck, {url})
 
   let term = ""
   let limit = 20
@@ -49,10 +53,10 @@
     gap={16}
     idKey="url"
     let:item={relay}>
-    <a
-      href={makeSpacePath(relay.url)}
-      class="card2 bg-alt flex flex-col gap-2 text-center shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
-      <div class="center avatar mt-8">
+    <Button
+      class="card2 !py-20 center bg-alt flex flex-col gap-2 text-center shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
+      on:click={() => openSpace(relay.url)}>
+      <div class="center avatar">
         <div
           class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
           {#if relay.profile?.icon}
@@ -80,6 +84,6 @@
         <p class="text-sm opacity-75">{relay.url}</p>
       </div>
       <RelayDescription url={relay.url} />
-    </a>
+    </Button>
   </Masonry>
 </div>
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index 6f7cc85d..d62eea23 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -9,7 +9,7 @@
     createProfile,
     isPublishedProfile,
   } from "@welshman/util"
-  import {pubkey, profilesByPubkey, makeThunk, publishThunk, displayNip05} from "@welshman/app"
+  import {pubkey, profilesByPubkey, publishThunk, displayNip05} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -43,7 +43,7 @@
     const template = isPublishedProfile(profile) ? editProfile(profile) : createProfile(profile)
     const event = createEvent(template.kind, template)
 
-    publishThunk(makeThunk({event, relays}))
+    publishThunk({event, relays})
     pushToast({message: "Your profile has been updated!"})
     editing = false
   }
diff --git a/src/routes/spaces/[nrelay]/[[room]]/+page.svelte b/src/routes/spaces/[nrelay]/[[room]]/+page.svelte
index 82a9ae5c..56a5b634 100644
--- a/src/routes/spaces/[nrelay]/[[room]]/+page.svelte
+++ b/src/routes/spaces/[nrelay]/[[room]]/+page.svelte
@@ -12,7 +12,7 @@
   import {sortBy, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
-  import {formatTimestampAsDate, makeThunk, publishThunk} from "@welshman/app"
+  import {formatTimestampAsDate, publishThunk} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -42,7 +42,7 @@
   const onSubmit = ({content, tags}: EventContent) => {
     const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
 
-    publishThunk(makeThunk({event, relays: [url]}))
+    publishThunk({event, relays: [url]})
   }
 
   let loading = true