From 0eb65be4271ec2a82ecb5058b79f195a331f3be7 Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Fri, 16 Aug 2024 12:42:00 -0700 Subject: [PATCH] Add ability to join a space --- src/app/commands.ts | 23 +++++- src/app/components/InfoNip29.svelte | 7 +- src/app/components/LogIn.svelte | 5 +- src/app/components/PrimaryNav.svelte | 6 +- src/app/components/SpaceAdd.svelte | 4 +- src/app/components/SpaceInviteAccept.svelte | 92 +++++++++++++++++++++ src/app/components/SpaceJoin.svelte | 88 ++++++++------------ src/app/state.ts | 2 + src/lib/components/SecondaryNavItem.svelte | 2 +- src/routes/+layout.svelte | 7 +- src/routes/discover/+layout.svelte | 4 +- src/routes/discover/+page.svelte | 6 +- src/routes/spaces/+layout.svelte | 76 ----------------- src/routes/spaces/[nom]/+layout.svelte | 90 ++++++++++++++++++++ 14 files changed, 264 insertions(+), 148 deletions(-) create mode 100644 src/app/components/SpaceInviteAccept.svelte delete mode 100644 src/routes/spaces/+layout.svelte create mode 100644 src/routes/spaces/[nom]/+layout.svelte diff --git a/src/app/commands.ts b/src/app/commands.ts index 94cf167..dd1fe50 100644 --- a/src/app/commands.ts +++ b/src/app/commands.ts @@ -1,7 +1,24 @@ -import {uniqBy, now} from "@welshman/lib" -import {GROUPS, asDecryptedEvent, readList, editList, makeList, createList} from "@welshman/util" +import {uniqBy, uniq, now} from "@welshman/lib" +import {GROUPS, asDecryptedEvent, getGroupTags, getRelayTagValues, readList, editList, makeList, createList} from "@welshman/util" import {pk, signer, repository, INDEXER_RELAYS} from "@app/base" -import {getWriteRelayUrls, loadRelaySelections, publish, ensurePlaintext} from "@app/state" +import {getWriteRelayUrls, loadGroup, loadGroupMembership, loadProfile, loadFollows, loadMutes, loadRelaySelections, publish, ensurePlaintext} from "@app/state" + +export const loadUserData = async (pubkey: string, hints: string[] = []) => { + const relaySelections = await loadRelaySelections(pubkey, INDEXER_RELAYS) + const relays = uniq([...getRelayTagValues(relaySelections?.tags || []), ...INDEXER_RELAYS, ...hints]) + const membership = await loadGroupMembership(pubkey, relays) + const promises = [ + loadProfile(pubkey, relays), + loadFollows(pubkey, relays), + loadMutes(pubkey, relays), + ] + + for (const [_, nom, url] of getGroupTags(membership?.event.tags || [])) { + promises.push(loadGroup(nom, [url])) + } + + await Promise.all(promises) +} export type ModifyTags = (tags: string[][]) => string[][] diff --git a/src/app/components/InfoNip29.svelte b/src/app/components/InfoNip29.svelte index 65de2d5..c466c7e 100644 --- a/src/app/components/InfoNip29.svelte +++ b/src/app/components/InfoNip29.svelte @@ -21,8 +21,11 @@ >. If you do decide to join someone else's, make sure to follow their directions for registering as a user.

-
- groups.fiatjaf.com +
+
+ + groups.fiatjaf.com +
diff --git a/src/app/components/LogIn.svelte b/src/app/components/LogIn.svelte index 14babd5..178278e 100644 --- a/src/app/components/LogIn.svelte +++ b/src/app/components/LogIn.svelte @@ -9,6 +9,7 @@ import {pushToast} from "@app/toast" import {addSession} from "@app/base" import {loadHandle} from "@app/state" + import {loadUserData} from "@app/commands" const back = () => history.back() @@ -23,9 +24,11 @@ }) } - const {pubkey} = handle + const {pubkey, relays = []} = handle const broker = Nip46Broker.get(pubkey, secret, handler) + loadUserData(pubkey, relays) + if (await broker.connect()) { addSession({method: "nip46", pubkey, secret, handler}) pushToast({message: "Successfully logged in!"}) diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte index 28c242d..2bcf821 100644 --- a/src/app/components/PrimaryNav.svelte +++ b/src/app/components/PrimaryNav.svelte @@ -13,7 +13,7 @@ import Avatar from "@lib/components/Avatar.svelte" import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte" import SpaceAdd from "@app/components/SpaceAdd.svelte" - import {userProfile, userGroupsByNom} from "@app/state" + import {userProfile, displayGroup, userGroupsByNom} from "@app/state" import {pushModal} from "@app/modal" import {getPrimaryNavItemIndex} from "@app/routes" @@ -51,9 +51,9 @@ {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)} {@const qualifiedGroup = qualifiedGroups[0]} - +
- {qualifiedGroup?.group.name} + {displayGroup(qualifiedGroup?.group)}
{/each} diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte index e78fbb3..044a63c 100644 --- a/src/app/components/SpaceAdd.svelte +++ b/src/app/components/SpaceAdd.svelte @@ -2,12 +2,12 @@ import Button from "@lib/components/Button.svelte" import CardButton from "@lib/components/CardButton.svelte" import SpaceCreate from "@app/components/SpaceCreate.svelte" - import SpaceJoin from "@app/components/SpaceJoin.svelte" + import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte" import {pushModal} from "@app/modal" const startCreate = () => pushModal(SpaceCreate) - const startJoin = () => pushModal(SpaceJoin) + const startJoin = () => pushModal(SpaceInviteAccept)
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte new file mode 100644 index 0000000..e13b19a --- /dev/null +++ b/src/app/components/SpaceInviteAccept.svelte @@ -0,0 +1,92 @@ + + +
+
+

Join a Space

+

Enter an invite link below to join an existing space.

+
+ +

Invite Link*

+ + + + Browse other spaces on the discover page. + +
+ + +
+
diff --git a/src/app/components/SpaceJoin.svelte b/src/app/components/SpaceJoin.svelte index e13b19a..abe4998 100644 --- a/src/app/components/SpaceJoin.svelte +++ b/src/app/components/SpaceJoin.svelte @@ -1,90 +1,70 @@
-
-

Join a Space

-

Enter an invite link below to join an existing space.

-
- -

Invite Link*

- - - - Browse other spaces on the discover page. - +

+ Joining {displayGroup($group)} +

+

+ Please select which relays you'd like to use for this group. + +

+ {#each urlOptions as url} +
+
+ + {displayRelayUrl(url)} +
+ +
+ {/each}
- diff --git a/src/app/state.ts b/src/app/state.ts index 8a890dd..7d5c50d 100644 --- a/src/app/state.ts +++ b/src/app/state.ts @@ -377,6 +377,8 @@ export const getGroupName = (e?: CustomEvent) => e?.tags.find(nthEq(0, "name"))? export const getGroupPicture = (e?: CustomEvent) => e?.tags.find(nthEq(0, "picture"))?.[1] +export const displayGroup = (group?: Group) => group?.name || "[no name]" + export type Group = { nom: string name?: string diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte index 1ba6c7b..1998cfa 100644 --- a/src/lib/components/SecondaryNavItem.svelte +++ b/src/lib/components/SecondaryNavItem.svelte @@ -26,7 +26,7 @@ export let href: string = "" - $: active = $page.route.id?.startsWith(href) + $: active = $page.url.pathname === href {#if href} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 47a71d1..e56d9b8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -9,9 +9,10 @@ import PrimaryNav from "@app/components/PrimaryNav.svelte" import {modals, clearModal} from "@app/modal" import {theme} from "@app/theme" - import {session, repository} from "@app/base" + import {pk, session, repository} from "@app/base" import {relays, handles} from "@app/state" import {initStorage} from "@app/storage" + import {loadUserData} from "@app/commands" let ready: Promise let dialog: HTMLDialogElement @@ -34,6 +35,10 @@ } onMount(() => { + if ($pk) { + loadUserData($pk) + } + ready = initStorage({ events: { keyPath: "id", diff --git a/src/routes/discover/+layout.svelte b/src/routes/discover/+layout.svelte index 8328b8c..68a3f71 100644 --- a/src/routes/discover/+layout.svelte +++ b/src/routes/discover/+layout.svelte @@ -10,12 +10,12 @@
- + Spaces
- + Themes
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte index 71e724b..af477c7 100644 --- a/src/routes/discover/+page.svelte +++ b/src/routes/discover/+page.svelte @@ -4,7 +4,7 @@ import {GROUP_META, displayRelayUrl} from "@welshman/util" import Icon from "@lib/components/Icon.svelte" import {makeSpacePath} from "@app/routes" - import {load, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state" + import {load, displayGroup, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state" const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || [] @@ -39,7 +39,7 @@
- {#if group?.picture} + {#if group.picture} {:else} @@ -56,7 +56,7 @@
{/if}
-

{group.name}

+

{displayGroup(group)}

{#each getRelayUrls(group.nom) as url}
{displayRelayUrl(url)}
diff --git a/src/routes/spaces/+layout.svelte b/src/routes/spaces/+layout.svelte deleted file mode 100644 index a4fcd30..0000000 --- a/src/routes/spaces/+layout.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - - - -
- - {$group?.name || "[no name]"} - - - {#if showMenu} - -
    -
  • - -
    • -
- - {/if} -
-
- - Rooms -
- -
- -
- - Spaces - -
-
- - Themes - -
- - - - - - diff --git a/src/routes/spaces/[nom]/+layout.svelte b/src/routes/spaces/[nom]/+layout.svelte new file mode 100644 index 0000000..237c44e --- /dev/null +++ b/src/routes/spaces/[nom]/+layout.svelte @@ -0,0 +1,90 @@ + + +{#key nom} + + +
+ + {displayGroup($group)} + + + {#if showMenu} + +
    + {#if $userMembership?.noms.has(nom)} +
  • + +
    • + {:else} +
  • + +
    • + {/if} +
+ + {/if} +
+
+ + Rooms +
+ +
+ +
+ + Spaces + +
+
+ + Themes + +
+ + + + + + +{/key}