diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte index 044a63cb..7a6ed00c 100644 --- a/src/app/components/SpaceAdd.svelte +++ b/src/app/components/SpaceAdd.svelte @@ -1,11 +1,11 @@ diff --git a/src/app/components/SpaceCreateExternal.svelte b/src/app/components/SpaceCreateExternal.svelte new file mode 100644 index 00000000..e5b5b516 --- /dev/null +++ b/src/app/components/SpaceCreateExternal.svelte @@ -0,0 +1,46 @@ + + +
+
+

Create a Space

+

+ Host your own space, for your community. +

+
+

+ relay.tools is a third-party service + that allows anyone to run their own relay for use with Flotilla, or any other + nostr-compatible app. +

+

+ Once you've created a relay of your own, come back here to link Flotilla with your new relay. +

+
+ + +
+
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte index e17c034e..c21fffd7 100644 --- a/src/app/components/SpaceInviteAccept.svelte +++ b/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 @@

Join a Space

-

Enter an invite link below to join an existing space.

+

Enter an invite code below to join an existing space.

-

Invite Link*

+

Invite code*

+

+ You can also directly join any relay by entering its URL here. + +

Browse other spaces on the discover page. diff --git a/src/lib/html.ts b/src/lib/html.ts index 4ecee40f..c0336797 100644 --- a/src/lib/html.ts +++ b/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, + {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 + }, + } +} diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte index a2eab83c..7cb8f4e8 100644 --- a/src/routes/discover/+page.svelte +++ b/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() + } }) diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte index eac975a9..39e45395 100644 --- a/src/routes/home/+page.svelte +++ b/src/routes/home/+page.svelte @@ -1,10 +1,10 @@