Validate space connection before joining

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>

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
   }

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