Convert to simple relay-based groups from nip29

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

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
   import {page} from "$app/stores"
+  import {sort} from '@welshman/lib'
+  import {displayRelayUrl} from '@welshman/util'
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -11,8 +14,10 @@
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import {deriveGroup, userMembership, displayGroup} from "@app/state"
+  import RoomCreate from "@app/components/RoomCreate.svelte"
+  import {userMembership, decodeNEvent} from "@app/state"
   import {pushModal} from "@app/modal"
+  import {makeSpacePath} from "@app/routes"
 
   const openMenu = () => {
     showMenu = true
@@ -22,22 +27,24 @@
     showMenu = !showMenu
   }
 
-  const leaveSpace = () => pushModal(SpaceExit, {nom})
+  const leaveSpace = () => pushModal(SpaceExit, {url})
 
-  const joinSpace = () => pushModal(SpaceJoin, {nom})
+  const joinSpace = () => pushModal(SpaceJoin, {url})
+
+  const addRoom = () => pushModal(RoomCreate, {url})
 
   let showMenu = false
 
-  $: nom = $page.params.nom
-  $: group = deriveGroup(nom)
+  $: url = decodeNEvent($page.params.nrelay)
+  $: rooms = sort($userMembership?.topicsByUrl?.get(url) || [])
 </script>
 
-{#key nom}
+{#key url}
   <SecondaryNav>
     <SecondaryNavSection>
       <div>
         <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-          <strong>{displayGroup($group)}</strong>
+          <strong>{displayRelayUrl(url)}</strong>
           <Icon icon="alt-arrow-down" />
         </SecondaryNavItem>
         {#if showMenu}
@@ -45,7 +52,7 @@
             <ul
               transition:fly|local
               class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-              {#if $userMembership?.noms.has(nom)}
+              {#if $userMembership?.topicsByUrl.has(url)}
                 <li class="text-error">
                   <Button on:click={leaveSpace}>
                     <Icon icon="exit" />
@@ -66,22 +73,22 @@
       </div>
       <div class="my-3 h-px bg-base-200" />
       <div in:fly|local>
-        <SecondaryNavItem href="/spaces/{nom}">
+        <SecondaryNavItem href={makeSpacePath(url)}>
           <Icon icon="chat-round" /> Chat
         </SecondaryNavItem>
       </div>
       <div in:fly|local={{delay: 50}}>
-        <SecondaryNavItem href="/spaces/{nom}/threads">
+        <SecondaryNavItem href={makeSpacePath(url, "threads")}>
           <Icon icon="notes-minimalistic" /> Threads
         </SecondaryNavItem>
       </div>
       <div in:fly|local={{delay: 100}}>
-        <SecondaryNavItem href="/spaces/{nom}/events">
+        <SecondaryNavItem href={makeSpacePath(url, "events")}>
           <Icon icon="calendar-minimalistic" /> Calendar
         </SecondaryNavItem>
       </div>
       <div in:fly|local={{delay: 150}}>
-        <SecondaryNavItem href="/spaces/{nom}/listings">
+        <SecondaryNavItem href={makeSpacePath(url, "listings")}>
           <Icon icon="shop-minimalistic" /> Market
         </SecondaryNavItem>
       </div>
@@ -89,11 +96,18 @@
         <div class="h-2" />
         <SecondaryNavHeader>
           Rooms
-          <Button on:click={() => alert("Uh, I don't know how to do rooms on NIP 29")}>
+          <Button on:click={addRoom}>
             <Icon icon="add-circle" />
           </Button>
         </SecondaryNavHeader>
       </div>
+      {#each rooms as topic, i (topic)}
+        <div transition:fly|local={{delay: 250 + i * 50}}>
+          <SecondaryNavItem href={makeSpacePath(url, topic)}>
+            <Icon icon="hashtag" /> {topic}
+          </SecondaryNavItem>
+        </div>
+      {/each}
     </SecondaryNavSection>
   </SecondaryNav>
   <Page>

src/routes/spaces/[nrelay]/[[topic]]/+page.svelte

@@ -11,16 +11,16 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sortBy, now} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
+  import type {TrustedEvent, Filter} from "@welshman/util"
   import {subscribe, formatTimestampAsDate} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import GroupNote from "@app/components/GroupNote.svelte"
   import GroupCompose from "@app/components/GroupCompose.svelte"
-  import {deriveGroupChat, userRelayUrlsByNom} from "@app/state"
+  import {deriveChat, userMembership, MESSAGE, REPLY} from "@app/state"
 
-  const {nom} = $page.params
-  const chat = deriveGroupChat(nom)
+  const {url, topic} = $page.params
+  const chat = deriveChat(url)
 
   const assertEvent = (e: any) => e as TrustedEvent
 
@@ -60,10 +60,10 @@
   }, 3000)
 
   onMount(() => {
-    const sub = subscribe({
-      filters: [{"#h": [nom], since: now() - 30}],
-      relays: $userRelayUrlsByNom.get(nom) || [],
-    })
+    const since = now() - 30
+    const kinds = [MESSAGE, REPLY]
+    const filter = topic ? {kinds, since, "#t": [topic]} : {kinds, since} as Filter
+    const sub = subscribe({filters: [filter], relays: [url]})
 
     return () => sub.close()
   })
@@ -100,5 +100,5 @@
       </Spinner>
     </p>
   </div>
-  <GroupCompose {nom} />
+  <GroupCompose {url} {topic} />
 </div>