Add profile room list

src/app/components/PeopleItem.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
-  import {onMount} from "svelte"
-  import {formatTimestampRelative} from "@welshman/lib"
-  import type {Filter} from "@welshman/util"
-  import {NOTE, GROUPS, MESSAGE, THREAD, COMMENT, getRelayTags, getListTags} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
-  import {load} from "@welshman/net"
-  import {Router} from "@welshman/router"
-  import {repository, loadRelaySelections} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import {membershipsByPubkey} from "@app/state"
   import {pushModal} from "@app/modal"
 
   type Props = {
@@ -21,29 +13,11 @@
   }
 
   const {pubkey, url}: Props = $props()
-  const filters: Filter[] = [{authors: [pubkey], limit: 1}]
-  const events = deriveEvents(repository, {filters})
-  const membership = $derived($membershipsByPubkey.get(pubkey))
-  const relays = $derived(getRelayTags(getListTags(membership)))
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
-
-  onMount(async () => {
-    // Make sure we have their relay selections before we load their posts
-    await loadRelaySelections(pubkey)
-
-    // Load groups and at least one note, regardless of time frame
-    load({
-      filters: [
-        {authors: [pubkey], kinds: [GROUPS]},
-        {authors: [pubkey], limit: 1, kinds: [NOTE, MESSAGE, THREAD, COMMENT]},
-      ],
-      relays: Router.get().FromPubkeys([pubkey]).getUrls(),
-    })
-  })
 </script>
 
-<div class="card2 bg-alt col-2 shadow-xl">
+<div class="card2 bg-alt flex flex-col gap-4 shadow-xl">
   <div class="flex justify-between">
     <Profile {pubkey} {url} />
     <Button onclick={openProfile} class="btn btn-primary hidden sm:flex">
@@ -52,19 +26,7 @@
     </Button>
   </div>
   <ProfileInfo {pubkey} {url} />
-  <div class="flex flex-wrap gap-2">
-    {#if $events.length > 0}
-      <div class="badge badge-neutral">
-        Last active {formatTimestampRelative($events[0].created_at)}
-      </div>
-    {/if}
-    {#if relays.length > 0}
-      <div class="badge badge-neutral">
-        {relays.length}
-        {relays.length === 1 ? "space" : "spaces"}
-      </div>
-    {/if}
-  </div>
+  <ProfileBadges {pubkey} {url} />
   <Button onclick={openProfile} class="btn btn-primary sm:hidden">
     <Icon icon="user-circle" />
     View Profile

src/app/components/ProfileBadges.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {load} from "@welshman/net"
+  import {Router} from "@welshman/router"
+  import type {Filter} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
+  import {formatTimestampRelative} from "@welshman/lib"
+  import {NOTE, GROUPS, MESSAGE, THREAD, COMMENT, getRelayTags, getListTags} from "@welshman/util"
+  import {repository, loadRelaySelections} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileSpaces from "@app/components/ProfileSpaces.svelte"
+  import {membershipsByPubkey} from "@app/state"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    pubkey: string
+    url?: string
+  }
+
+  const {pubkey, url}: Props = $props()
+  const filters: Filter[] = [{authors: [pubkey], limit: 1}]
+  const events = deriveEvents(repository, {filters})
+  const membership = $derived($membershipsByPubkey.get(pubkey))
+  const relays = $derived(getRelayTags(getListTags(membership)))
+
+  const openSpaces = () => pushModal(ProfileSpaces, {pubkey, url})
+
+  onMount(async () => {
+    // Make sure we have their relay selections before we load their posts
+    await loadRelaySelections(pubkey)
+
+    // Load groups and at least one note, regardless of time frame
+    load({
+      filters: [
+        {authors: [pubkey], kinds: [GROUPS]},
+        {authors: [pubkey], limit: 1, kinds: [NOTE, MESSAGE, THREAD, COMMENT]},
+      ],
+      relays: Router.get().FromPubkeys([pubkey]).getUrls(),
+    })
+  })
+</script>
+
+<div class="flex flex-wrap gap-2">
+  {#if $events.length > 0}
+    <div class="badge badge-neutral">
+      Last active {formatTimestampRelative($events[0].created_at)}
+    </div>
+  {/if}
+  {#if relays.length > 0}
+    <Button onclick={openSpaces} class="badge badge-neutral">
+      {relays.length}
+      {relays.length === 1 ? "space" : "spaces"}
+    </Button>
+  {/if}
+</div>

src/app/components/ProfileDetail.svelte

@@ -7,6 +7,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
   import {canDecrypt, pubkeyLink} from "@app/state"
   import {pushModal} from "@app/modal"
@@ -26,9 +27,10 @@
   const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
 </script>
 
-<div class="column gap-4">
+<div class="flex flex-col gap-4">
   <Profile showPubkey avatarSize={14} {pubkey} {url} />
   <ProfileInfo {pubkey} {url} />
+  <ProfileBadges {pubkey} {url} />
   <ModalFooter>
     <Button onclick={back} class="hidden md:btn md:btn-link">
       <Icon icon="alt-arrow-left" />

src/app/components/ProfileSpaces.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import {makeSpacePath} from "@app/routes"
+  import {getMembershipUrls, membershipsByPubkey} from "@app/state"
+
+  type Props = {
+    pubkey: string
+  }
+
+  const {pubkey}: Props = $props()
+
+  const spaceUrls = $derived(getMembershipUrls($membershipsByPubkey.get(pubkey)))
+
+  const back = () => history.back()
+</script>
+
+<div class="flex flex-col gap-2">
+  {#each spaceUrls as url (url)}
+    <div class="card2 bg-alt flex flex-row items-center gap-2">
+      <div class="flex-shrink-0">
+        <SpaceAvatar {url} />
+      </div>
+      <div class="flex flex-grow flex-col">
+        <RelayName {url} />
+        <div class="text-sm opacity-75">
+          {url}
+        </div>
+      </div>
+      <Link class="btn btn-primary" href={makeSpacePath(url)}>
+        Go to space
+        <Icon icon="alt-arrow-right" />
+      </Link>
+    </div>
+  {:else}
+    <div class="card2 bg-alt text-center">
+      <p class="opacity-75">No spaces found for this user</p>
+    </div>
+  {/each}
+  <ModalFooter>
+    <Button onclick={back} class="hidden md:btn md:btn-link">
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+  </ModalFooter>
+</div>