Add invite code creation

src/app/commands.ts

@@ -7,6 +7,7 @@ import {
   RELAYS,
   FOLLOWS,
   REACTION,
+  AUTH_JOIN,
   isSignedEvent,
   createEvent,
   displayProfile,
@@ -196,7 +197,7 @@ export const checkRelayAccess = async (url: string, claim = "") => {
   await connection.auth.waitIfPending()
 
   const result = await publishThunk({
-    event: createEvent(28934, {tags: [["claim", claim]]}),
+    event: createEvent(AUTH_JOIN, {tags: [["claim", claim]]}),
     relays: [url],
   })
 
@@ -234,6 +235,7 @@ export const checkRelayAuth = async (url: string) => {
   await connection.auth.waitIfPending()
 
   if (!okStatuses.includes(connection.auth.status)) {
+    console.log(connection.auth.status, connection)
     return `Failed to authenticate: "${connection.auth.message}"`
   }
 }

src/app/components/SpaceInvite.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {goto} from "$app/navigation"
+  import {sleep, identity, nthEq} from "@welshman/lib"
+  import {load} from "@welshman/app"
+  import {displayRelayUrl, AUTH_INVITE} from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {slide} from '@lib/transition'
+  import Spinner from "@lib/components/Spinner.svelte"
+  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 {pushModal} from '@app/modal'
+  import {clip} from '@app/toast'
+
+  export let url
+
+  const back = () => history.back()
+
+  const copyInvite = () => clip(invite)
+
+  let claim = ""
+  let loading = true
+
+  $: invite = [displayRelayUrl(url), claim].filter(identity).join("|")
+
+  onMount(async () => {
+    const [[event]] = await Promise.all([
+      load({filters: [{kinds: [AUTH_INVITE]}], relays: [url]}),
+      sleep(2000),
+    ])
+
+    claim = event?.tags.find(nthEq(0, 'claim'))?.[1] || ""
+    loading = false
+  })
+</script>
+
+<div class="col-4">
+  <ModalHeader>
+    <div slot="title">
+      Create an Invite
+    </div>
+    <div slot="info">
+      Get a link that you can use to invite people to
+      <span class="text-primary">{displayRelayUrl(url)}</span>
+    </div>
+  </ModalHeader>
+  <div>
+    {#if loading}
+      <p class="center" out:slide>
+        <Spinner {loading}>Requesting an invite code...</Spinner>
+      </p>
+    {:else}
+      <div in:slide>
+        <Field>
+          <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+            <Icon icon="link-round" />
+            <input bind:value={invite} class="grow" type="text" />
+            <Button on:click={copyInvite}>
+              <Icon icon="copy" />
+            </Button>
+          </label>
+          <p slot="info">
+            This invite link can be used by clicking "Add Space" and pasting it there.
+            {#if !claim}
+              This space did not issue a claim for this link, so additional steps might be
+              required for people using this invite link.
+            {/if}
+          </p>
+        </Field>
+      </div>
+    {/if}
+  </div>
+  <ModalFooter>
+    <Button class="btn btn-primary flex-grow" on:click={back}>Done</Button>
+  </ModalFooter>
+</div>

src/app/components/SpaceInviteAccept.svelte

@@ -28,7 +28,7 @@
   }
 
   const joinRelay = async (invite: string) => {
-    const [raw, claim] = invite.split("'")
+    const [raw, claim] = invite.split("|")
     const url = normalizeRelayUrl(raw)
     const error = await attemptRelayAccess(url, claim)
 

src/app/state.ts

@@ -298,9 +298,9 @@ export type Channel = {
   messages: ChannelMessage[]
 }
 
-export const makeChannelId = (url: string, room: string) => `${url}'${room}`
+export const makeChannelId = (url: string, room: string) => `${url}|${room}`
 
-export const splitChannelId = (id: string) => id.split("'")
+export const splitChannelId = (id: string) => id.split("|")
 
 export const channels = derived(channelMessages, $channelMessages => {
   const messagesByChannelId = new Map<string, ChannelMessage[]>()

src/routes/spaces/[nrelay]/+layout.svelte

@@ -11,6 +11,7 @@
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import SpaceInvite from "@app/components/SpaceInvite.svelte"
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
@@ -35,6 +36,8 @@
     showMenu = !showMenu
   }
 
+  const createInvite = () => pushModal(SpaceInvite, {url})
+
   const leaveSpace = () => pushModal(SpaceExit, {url})
 
   const joinSpace = () => pushModal(SpaceJoin, {url})
@@ -80,21 +83,25 @@
             <ul
               transition:fly
               class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-              {#if getMembershipUrls($userMembership).includes(url)}
+              <li>
-                <li class="text-error">
+                <Button on:click={createInvite}>
-                  <Button on:click={leaveSpace}>
+                  <Icon icon="link-round" />
+                  Create Invite
+                </Button>
+              </li>
+              <li>
+                {#if getMembershipUrls($userMembership).includes(url)}
+                  <Button on:click={leaveSpace} class="text-error">
                     <Icon icon="exit" />
                     Leave Space
                   </Button>
-                </li>
+                {:else}
-              {:else}
-                <li>
                   <Button on:click={joinSpace}>
                     <Icon icon="login-2" />
                     Join Space
                   </Button>
-                </li>
+                {/if}
-              {/if}
+              </li>
             </ul>
           </Popover>
         {/if}