Refer to relay.tools for relay setup

src/app/components/SpaceAdd.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
-  import SpaceCreate from "@app/components/SpaceCreate.svelte"
+  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/modal"
 
-  const startCreate = () => pushModal(SpaceCreate)
+  const startCreate = () => pushModal(SpaceCreateExternal)
 
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>

src/app/components/SpaceCreateExternal.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import {pushModal} from "@app/modal"
+
+  const back = () => history.back()
+
+  const next = () => {
+    window.open("https://relay.tools/signup")
+    pushModal(SpaceInviteAccept)
+  }
+
+  let file: File
+  let name = ""
+  let relay = ""
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={next}>
+  <div class="py-2">
+    <h1 class="heading">Create a Space</h1>
+    <p class="text-center">
+      Host your own space, for your community.
+    </p>
+  </div>
+  <p>
+    <Link class="text-primary" external href="https://relay.tools">relay.tools</Link> is a third-party service
+    that allows anyone to run their own relay for use with Flotilla, or any other
+    nostr-compatible app.
+  </p>
+  <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">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">
+      Let's go
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </Button>
+  </div>
+</form>

src/app/components/SpaceInviteAccept.svelte

@@ -8,7 +8,9 @@
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import InfoRelay from "@app/components/InfoRelay.svelte"
   import {pushToast} from "@app/toast"
+  import {pushModal} from "@app/modal"
   import {addSpaceMembership} from "@app/commands"
   import {makeSpacePath} from "@app/routes"
 
@@ -55,14 +57,18 @@
 <form class="column gap-4" on:submit|preventDefault={join}>
   <div class="py-2">
     <h1 class="heading">Join a Space</h1>
-    <p class="text-center">Enter an invite link below to join an existing space.</p>
+    <p class="text-center">Enter an invite code below to join an existing space.</p>
   </div>
   <Field>
-    <p slot="label">Invite Link*</p>
+    <p slot="label">Invite code*</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="link-round" />
       <input bind:value={url} class="grow" type="text" />
     </label>
+    <p slot="info">
+      You can also directly join any relay by entering its URL here.
+      <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
+    </p>
   </Field>
   <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
     Browse other spaces on the discover page.

src/lib/html.ts

@@ -1,3 +1,5 @@
+import {sleep} from '@welshman/lib'
+
 export const copyToClipboard = (text: string) => {
   const {activeElement} = document
   const input = document.createElement("textarea")
@@ -13,3 +15,45 @@ export const copyToClipboard = (text: string) => {
 
   return result
 }
+
+type ScrollerOpts = {
+  delay?: number
+  threshold?: number
+  reverse?: boolean
+  element?: Element
+}
+
+export const createScroller = (
+  loadMore: () => Promise<void>,
+  {delay = 1000, threshold = 2000, reverse = false}: ScrollerOpts = {},
+) => {
+  let done = false
+  const check = async () => {
+    // While we have empty space, fill it
+    const {scrollY, innerHeight} = window
+    const {scrollHeight, scrollTop} = document.body
+    const offset = Math.abs(scrollTop || scrollY)
+    const shouldLoad = offset + innerHeight + threshold > scrollHeight
+
+    // Only trigger loading the first time we reach the threshold
+    if (shouldLoad) {
+      await loadMore()
+    }
+
+    // No need to check all that often
+    await sleep(delay)
+
+    if (!done) {
+      requestAnimationFrame(check)
+    }
+  }
+
+  requestAnimationFrame(check)
+
+  return {
+    check,
+    stop: () => {
+      done = true
+    },
+  }
+}

src/routes/discover/+page.svelte

@@ -3,18 +3,28 @@
   import Masonry from "svelte-bricks"
   import {displayRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
+  import {createScroller} from '@lib/html'
   import Icon from "@lib/components/Icon.svelte"
   import {makeSpacePath} from "@app/routes"
   import {userMembership, discoverRelays} from "@app/state"
 
   let term = ""
+  let limit = 20
 
-  $: relays = $relaySearch.searchOptions(term)
+  const loadMore = async () => {
+    limit += 20
+  }
+
+  $: relays = $relaySearch.searchOptions(term).slice(0, limit)
 
   onMount(() => {
     const sub = discoverRelays()
+    const scroller = createScroller(loadMore)
 
-    return () => sub.close()
+    return () => {
+      sub.close()
+      scroller.stop()
+    }
   })
 </script>
 

src/routes/home/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
   import CardButton from "@lib/components/CardButton.svelte"
-  import SpaceCreate from "@app/components/SpaceCreate.svelte"
+  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import {pushModal} from "@app/modal"
 
-  const createSpace = () => pushModal(SpaceCreate)
+  const createSpace = () => pushModal(SpaceCreateExternal)
 
   const browseSpaces = () => goto("/discover")
 </script>