Improve room join/leave

src/routes/+layout.svelte

@@ -28,7 +28,7 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
-  import {INDEXER_RELAYS, topicsByUrl} from "@app/state"
+  import {INDEXER_RELAYS} from "@app/state"
   import {loadUserData} from "@app/commands"
   import * as state from "@app/state"
 
@@ -76,7 +76,6 @@
             keyPath: "nip05",
             store: handles,
           },
-          topicsByUrl: storageAdapters.fromMapStore(topicsByUrl),
           publishStatus: storageAdapters.fromObjectStore(publishStatusData),
           freshness: storageAdapters.fromObjectStore(freshness),
           plaintext: storageAdapters.fromObjectStore(plaintext),

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {page} from "$app/stores"
-  import {sort} from "@welshman/lib"
-  import {displayRelayUrl} from "@welshman/util"
-  import {fly} from "@lib/transition"
+  import {sort, now} from "@welshman/lib"
+  import {displayRelayUrl, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
+  import {subscribe} from "@welshman/app"
+  import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,7 +16,7 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import {userMembership, decodeNRelay} from "@app/state"
+  import {userMembership, topicsByUrl, decodeNRelay, MESSAGE, REPLY} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -32,10 +34,29 @@
 
   const addRoom = () => pushModal(RoomCreate, {url})
 
+  const getDelay = (reset = false) => {
+    if (reset) {
+      delay = 0
+    } else {
+      delay += 50
+    }
+
+    return delay
+  }
+
+  let delay = 0
   let showMenu = false
 
   $: url = decodeNRelay($page.params.nrelay)
   $: rooms = sort($userMembership?.topicsByUrl?.get(url) || [])
+  $: otherRooms = ($topicsByUrl.get(url) || []).filter(t => !rooms.includes(t))
+
+  onMount(() => {
+    const kinds = [MESSAGE, REPLY, EVENT_DATE, EVENT_TIME, CLASSIFIED]
+    const sub = subscribe({filters: [{kinds, since: now() - 30}], relays: [url]})
+
+    return () => sub.close()
+  })
 </script>
 
 {#key url}
@@ -76,41 +97,66 @@
           <Icon icon="chat-round" /> Chat
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: 50}}>
+      <div in:fly|local={{delay: getDelay(true)}}>
         <SecondaryNavItem href={makeSpacePath(url, "threads")}>
           <Icon icon="notes-minimalistic" /> Threads
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: 100}}>
+      <div in:fly|local={{delay: getDelay()}}>
         <SecondaryNavItem href={makeSpacePath(url, "events")}>
           <Icon icon="calendar-minimalistic" /> Calendar
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: 150}}>
+      <div in:fly|local={{delay: getDelay()}}>
         <SecondaryNavItem href={makeSpacePath(url, "listings")}>
           <Icon icon="shop-minimalistic" /> Market
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: 200}}>
-        <div class="h-2" />
-        <SecondaryNavHeader>
-          Rooms
-          <Button on:click={addRoom}>
-            <Icon icon="add-circle" />
-          </Button>
-        </SecondaryNavHeader>
-      </div>
+      {#if rooms.length > 0}
+        <div transition:slide|local={{delay: getDelay()}}>
+          <div class="h-2" />
+          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+        </div>
+      {/if}
       {#each rooms as topic, i (topic)}
-        <div transition:fly|local={{delay: 250 + i * 50}}>
+        <div transition:slide|local={{delay: getDelay()}}>
           <SecondaryNavItem href={makeSpacePath(url, topic)}>
             <Icon icon="hashtag" />
             {topic}
           </SecondaryNavItem>
         </div>
       {/each}
+      {#if otherRooms.length > 0}
+        <div transition:slide|local={{delay: getDelay()}}>
+          <div class="h-2" />
+          <SecondaryNavHeader>
+            {#if rooms.length > 0}
+              Other Rooms
+            {:else}
+              Rooms
+            {/if}
+          </SecondaryNavHeader>
+        </div>
+      {/if}
+      {#each otherRooms as topic, i (topic)}
+        <div transition:slide|local={{delay: getDelay()}}>
+          <SecondaryNavItem href={makeSpacePath(url, topic)}>
+            <Icon icon="hashtag" />
+            {topic}
+          </SecondaryNavItem>
+        </div>
+      {/each}
+      <div in:fly|local={{delay: getDelay()}}>
+        <SecondaryNavItem on:click={addRoom}>
+          <Icon icon="add-circle" />
+          Create room
+        </SecondaryNavItem>
+      </div>
     </SecondaryNavSection>
   </SecondaryNav>
   <Page>
-    <slot />
+    {#key $page.params.topic}
+      <slot />
+    {/key}
   </Page>
 {/key}

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

@@ -12,12 +12,14 @@
   import {page} from "$app/stores"
   import {sortBy, now} from "@welshman/lib"
   import type {TrustedEvent, Filter} from "@welshman/util"
-  import {subscribe, formatTimestampAsDate} from "@welshman/app"
+  import {formatTimestampAsDate} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import {decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state"
+  import {userMembership, decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state"
+  import {addRoomMembership, removeRoomMembership} from "@app/commands"
 
   const {nrelay, topic = ""} = $page.params
   const url = decodeNRelay(nrelay)
@@ -28,6 +30,8 @@
   let loading = true
   let elements: Element[] = []
 
+  $: membership = $userMembership?.topicsByUrl.get(url) || []
+
   $: {
     elements = []
 
@@ -59,24 +63,28 @@
   setTimeout(() => {
     loading = false
   }, 3000)
-
-  onMount(() => {
-    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()
-  })
 </script>
 
 <div class="relative flex h-screen flex-col">
   <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div class="flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+    <div class="flex min-h-12 justify-between items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
-        <strong>General</strong>
+        <strong>{topic || 'General'}</strong>
       </div>
+      {#if topic}
+        {#if membership.includes(topic)}
+          <Button class="btn btn-sm btn-neutral" on:click={() => removeRoomMembership(url, topic)}>
+            <Icon icon="arrows-a-logout-2" />
+            Leave Room
+          </Button>
+        {:else}
+          <Button class="btn btn-sm btn-neutral" on:click={() => addRoomMembership(url, topic)}>
+            <Icon icon="login-2" />
+            Join Room
+          </Button>
+        {/if}
+      {/if}
     </div>
   </div>
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">