Re-work invite links

src/app/components/RelayName.svelte

@@ -3,7 +3,7 @@
 
   const {url} = $props()
 
-  const display = deriveRelayDisplay(url)
+  const display = $derived(deriveRelayDisplay(url))
 </script>
 
 {$display}

src/app/components/RelaySummary.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {gt} from "@welshman/lib"
+  import {deriveRelay} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {membersByUrl, userRoomsByUrl} from "@app/core/state"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+  const relay = deriveRelay(url)
+</script>
+
+<div class="col-4 text-left">
+  <div class="col-2">
+    <div class="relative flex gap-4">
+      <div class="relative">
+        <div class="avatar relative">
+          <div
+            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            {#if $relay?.profile?.icon}
+              <img alt="" src={$relay.profile.icon} />
+            {:else}
+              <Icon icon="ghost" size={5} />
+            {/if}
+          </div>
+        </div>
+        {#if $userRoomsByUrl.has(url)}
+          <div
+            class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
+            data-tip="You are already a member of this space.">
+            <Icon icon="check-circle" class="scale-110" />
+          </div>
+        {/if}
+      </div>
+      <div>
+        <h2 class="ellipsize whitespace-nowrap text-xl">
+          <RelayName {url} />
+        </h2>
+        <p class="text-sm opacity-75">{url}</p>
+      </div>
+    </div>
+    <RelayDescription {url} />
+  </div>
+  {#if gt($membersByUrl.get(url)?.size, 0)}
+    <div class="row-2 card2 card2-sm bg-alt">
+      Members:
+      <ProfileCircles pubkeys={Array.from($membersByUrl.get(url) || [])} />
+    </div>
+  {/if}
+</div>

src/app/components/SpaceInvite.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {sleep, identity, nthEq} from "@welshman/lib"
+  import {sleep, nthEq} from "@welshman/lib"
   import {request} from "@welshman/net"
   import {displayRelayUrl, AUTH_INVITE} from "@welshman/util"
   import {slide} from "@lib/transition"
@@ -11,6 +11,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clip} from "@app/util/toast"
+  import {PLATFORM_URL} from "@app/core/state"
 
   const {url} = $props()
 
@@ -24,7 +25,10 @@
   let invite = $state("")
 
   $effect(() => {
-    invite = [displayRelayUrl(url), claim].filter(identity).join("|")
+    const relay = displayRelayUrl(url)
+    const params = new URLSearchParams({r: relay, c: claim}).toString()
+
+    invite = PLATFORM_URL + "/join?" + params
   })
 
   onMount(async () => {
@@ -57,7 +61,7 @@
   <div>
     {#if loading}
       <p class="center" out:slide>
-        <Spinner {loading}>Requesting an invite code...</Spinner>
+        <Spinner {loading}>Requesting an invite link...</Spinner>
       </p>
     {:else}
       <div in:slide>

src/app/components/SpaceInviteAccept.svelte

@@ -1,52 +1,44 @@
 <script lang="ts">
-  import {tryCatch, first, removeNil} from "@welshman/lib"
+  import type {Snippet} from "svelte"
+  import {tryCatch, fromPairs} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import {Pool, AuthStatus} from "@welshman/net"
   import {preventDefault} from "@lib/html"
+  import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   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 RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
   import {attemptRelayAccess} from "@app/core/commands"
 
+  type Props = {
+    invite: string
+    abortAction?: Snippet
+  }
+
+  let {invite = "", abortAction}: Props = $props()
+
   const back = () => history.back()
 
   const joinRelay = async () => {
-    const promises: Promise<string | undefined>[] = []
+    const {url, claim} = inviteData!
 
-    const [rawUrl, rawClaim] = url.split("|")
+    const error = await attemptRelayAccess(url, claim)
-    const normalizedUrl = normalizeRelayUrl(rawUrl)
-
-    if (claim) {
-      promises.push(attemptRelayAccess(normalizedUrl, claim))
-    }
-
-    if (rawClaim) {
-      promises.push(attemptRelayAccess(normalizedUrl, rawClaim))
-    }
-
-    if (promises.length === 0) {
-      promises.push(attemptRelayAccess(normalizedUrl, ""))
-    }
-
-    const error = first(removeNil(await Promise.all(promises)))
 
     if (error) {
       return pushToast({theme: "error", message: error, timeout: 30_000})
     }
 
-    const socket = Pool.get().get(normalizedUrl)
+    if (Pool.get().get(url).auth.status === AuthStatus.None) {
-
+      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-    if (socket.auth.status === AuthStatus.None) {
-      pushModal(SpaceJoinConfirm, {url: normalizedUrl}, {replaceState: true})
     } else {
-      await confirmSpaceJoin(normalizedUrl)
+      await confirmSpaceJoin(url)
     }
   }
 
@@ -60,12 +52,25 @@
     }
   }
 
-  let url = $state("")
-  let claim = $state("")
   let loading = $state(false)
 
-  const linkIsValid = $derived(
+  const inviteData = $derived.by(
-    Boolean(tryCatch(() => isRelayUrl(normalizeRelayUrl(url.split("|")[0])))),
+    () =>
+      tryCatch(() => {
+        const {r: relay = "", c: claim = ""} = fromPairs(Array.from(new URL(invite).searchParams))
+        const url = normalizeRelayUrl(relay)
+
+        if (isRelayUrl(url)) {
+          return {url, claim}
+        }
+      }) ||
+      tryCatch(() => {
+        const url = normalizeRelayUrl(invite)
+
+        if (isRelayUrl(url)) {
+          return {url, claim: ""}
+        }
+      }),
   )
 </script>
 
@@ -75,46 +80,40 @@
       <div>Join a Space</div>
     {/snippet}
     {#snippet info()}
-      <div>Enter a relay URL below to join an existing space.</div>
+      <div>Enter a relay URL or invite link below to join an existing space.</div>
     {/snippet}
   </ModalHeader>
   <Field>
     {#snippet label()}
-      <p>Relay URL*</p>
+      <p>Invite Link*</p>
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon="link-round" />
-        <input bind:value={url} class="grow" type="text" />
+        <input bind:value={invite} class="grow" type="text" />
       </label>
     {/snippet}
-    {#snippet info()}
-      <p>
-        Enter the URL of the relay that hosts the space you'd like to join.
-        <Button class="link" onclick={() => pushModal(InfoRelay)}>What is a relay?</Button>
-      </p>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>Invite Code (optional)</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="ticket" />
-        <input bind:value={claim} class="grow" type="text" />
-      </label>
-    {/snippet}
-    {#snippet info()}
-      <p>If you have an invite code, enter it here to get access.</p>
-    {/snippet}
   </Field>
+  <div class="-my-4">
+    {#if inviteData}
+      <div transition:slideAndFade class="flex flex-col gap-4 py-4">
+        <div class="card2 bg-alt flex flex-col gap-4">
+          <p class="opacity-75">You're about to join:</p>
+          <RelaySummary url={inviteData.url} />
+        </div>
+      </div>
+    {/if}
+  </div>
   <ModalFooter>
+    {#if abortAction}
+      {@render abortAction?.()}
+    {:else}
       <Button class="btn btn-link" onclick={back}>
         <Icon icon="alt-arrow-left" />
         Go back
       </Button>
-    <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
+    {/if}
+    <Button type="submit" class="btn btn-primary" disabled={!inviteData || loading}>
       <Spinner {loading}>Join Space</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>

src/app/core/requests.ts

@@ -59,7 +59,7 @@ import {daysBetween} from "@lib/util"
 import {
   NOTIFIER_RELAY,
   INDEXER_RELAYS,
-  getDefaultPubkeys,
+  defaultPubkeys,
   userRoomsByUrl,
   getUrlsForEvent,
   loadMembership,
@@ -416,7 +416,7 @@ export const loadUserData = async (pubkey: string, relays: string[] = []) => {
   // Load followed profiles slowly in the background without clogging other stuff up. Only use a single
   // indexer relay to avoid too many redundant validations, which slow things down and eat bandwidth
   promise.then(async () => {
-    for (const pubkeys of chunk(50, getDefaultPubkeys())) {
+    for (const pubkeys of chunk(50, get(defaultPubkeys))) {
       const relays = sample(1, INDEXER_RELAYS)
 
       await sleep(1000)

src/app/core/state.ts

@@ -191,12 +191,12 @@ export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 export const pubkeyLink = (pubkey: string, relays = Router.get().FromPubkeys([pubkey]).getUrls()) =>
   entityLink(nip19.nprofileEncode({pubkey, relays}))
 
-export const getDefaultPubkeys = () => {
+export const defaultPubkeys = derived(userFollows, $userFollows => {
   const appPubkeys = DEFAULT_PUBKEYS.split(",")
-  const userPubkeys = shuffle(getPubkeyTagValues(getListTags(get(userFollows))))
+  const userPubkeys = shuffle(getPubkeyTagValues(getListTags($userFollows)))
 
   return userPubkeys.length > 5 ? userPubkeys : [...userPubkeys, ...appPubkeys]
-}
+})
 
 const failedUnwraps = new Set()
 
@@ -459,6 +459,21 @@ export const {
   load: makeOutboxLoader(ROOMS),
 })
 
+export const membersByUrl = derived(
+  [defaultPubkeys, membershipsByPubkey],
+  ([$defaultPubkeys, $membershipsByPubkey]) => {
+    const $membersByUrl = new Map<string, Set<string>>()
+
+    for (const pubkey of $defaultPubkeys) {
+      for (const url of getMembershipUrls($membershipsByPubkey.get(pubkey))) {
+        addToMapKey($membersByUrl, url, pubkey)
+      }
+    }
+
+    return $membersByUrl
+  },
+)
+
 // Chats
 
 export const chatMessages = deriveEvents(repository, {

src/lib/components/Field.svelte

@@ -27,7 +27,7 @@
   </div>
   {@render input?.()}
   {#if info}
-    <p class="text-sm">
+    <p class="text-sm opacity-50">
       {@render info()}
     </p>
   {/if}

src/routes/discover/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {addToMapKey, dec, gt} from "@welshman/lib"
+  import {dec} from "@welshman/lib"
   import {ROOMS} from "@welshman/util"
   import {Router} from "@welshman/router"
   import {load} from "@welshman/net"
@@ -13,17 +13,9 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
+  import RelaySummary from "@app/components/RelaySummary.svelte"
-  import RelayDescription from "@app/components/RelayDescription.svelte"
   import SpaceCheck from "@app/components/SpaceCheck.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {getMembershipUrls, loadMembership, defaultPubkeys, membersByUrl} from "@app/core/state"
-  import {
-    membershipsByPubkey,
-    getMembershipUrls,
-    loadMembership,
-    userRoomsByUrl,
-    getDefaultPubkeys,
-  } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
   const discoverRelays = () =>
@@ -32,7 +24,7 @@
         filters: [{kinds: [ROOMS]}],
         relays: Router.get().Index().getUrls(),
       }),
-      ...getDefaultPubkeys().map(async pubkey => {
+      ...$defaultPubkeys.map(async pubkey => {
         await loadRelaySelections(pubkey)
 
         const membership = await loadMembership(pubkey)
@@ -42,27 +34,15 @@
       }),
     ])
 
-  const wotGraph = $derived.by(() => {
-    const scores = new Map<string, Set<string>>()
-
-    for (const pubkey of getDefaultPubkeys()) {
-      for (const url of getMembershipUrls($membershipsByPubkey.get(pubkey))) {
-        addToMapKey(scores, url, pubkey)
-      }
-    }
-
-    return scores
-  })
-
   const relaySearch = $derived(
     createSearch(
-      $relays.filter(r => wotGraph.has(r.url)),
+      $relays.filter(r => $membersByUrl.has(r.url)),
       {
         getValue: (relay: Relay) => relay.url,
         sortFn: ({score, item}) => {
           if (score && score > 0.1) return -score!
 
-          const wotScore = wotGraph.get(item.url)?.size || 0
+          const wotScore = $membersByUrl.get(item.url)?.size || 0
 
           return score ? dec(score) * wotScore : -wotScore
         },
@@ -110,44 +90,9 @@
     </label>
     {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
       <Button
-        class="card2 bg-alt col-4 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
+        class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
         onclick={() => openSpace(relay.url)}>
-        <div class="col-2">
+        <RelaySummary url={relay.url} />
-          <div class="relative flex gap-4">
-            <div class="relative">
-              <div class="avatar relative">
-                <div
-                  class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-                  {#if relay.profile?.icon}
-                    <img alt="" src={relay.profile.icon} />
-                  {:else}
-                    <Icon icon="ghost" size={5} />
-                  {/if}
-                </div>
-              </div>
-              {#if $userRoomsByUrl.has(relay.url)}
-                <div
-                  class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
-                  data-tip="You are already a member of this space.">
-                  <Icon icon="check-circle" class="scale-110" />
-                </div>
-              {/if}
-            </div>
-            <div>
-              <h2 class="ellipsize whitespace-nowrap text-xl">
-                <RelayName url={relay.url} />
-              </h2>
-              <p class="text-sm opacity-75">{relay.url}</p>
-            </div>
-          </div>
-          <RelayDescription url={relay.url} />
-        </div>
-        {#if gt(wotGraph.get(relay.url)?.size, 0)}
-          <div class="row-2 card2 card2-sm bg-alt">
-            Members:
-            <ProfileCircles pubkeys={Array.from(wotGraph.get(relay.url) || [])} />
-          </div>
-        {/if}
       </Button>
     {/each}
     {#await discoverRelays()}

src/routes/join/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import Icon from "@lib/components/Icon.svelte"
+  import Dialog from "@lib/components/Dialog.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+</script>
+
+<Dialog>
+  <SpaceInviteAccept invite={$page.url.href}>
+    {#snippet abortAction()}
+      <Button class="btn btn-link" onclick={() => goto("/home")}>
+        <Icon icon="alt-arrow-left" />
+        Go back
+      </Button>
+    {/snippet}
+  </SpaceInviteAccept>
+</Dialog>

src/routes/people/+page.svelte

@@ -6,15 +6,13 @@
   import Page from "@lib/components/Page.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
   import PeopleItem from "@app/components/PeopleItem.svelte"
-  import {getDefaultPubkeys} from "@app/core/state"
+  import {defaultPubkeys} from "@app/core/state"
-
-  const defaultPubkeys = getDefaultPubkeys()
 
   let term = $state("")
   let limit = $state(10)
   let element: Element | undefined = $state()
 
-  const pubkeys = $derived(term ? $profileSearch.searchValues(term) : defaultPubkeys)
+  const pubkeys = $derived(term ? $profileSearch.searchValues(term) : $defaultPubkeys)
 
   onMount(() => {
     const scroller = createScroller({