Improve room join/leave

src/app/components/ChatMessage.svelte

@@ -81,7 +81,6 @@
 
   onMount(() => {
     editor = createEditor(getChatViewOptions(event.content))
-    console.log($editor)
   })
 </script>
 

src/app/routes.ts

@@ -6,7 +6,7 @@ export const makeSpacePath = (url: string, extra = "") => {
   let path = `/spaces/${nip19.nrelayEncode(url)}`
 
   if (extra) {
-    path += "/" + extra
+    path += "/" + encodeURIComponent(extra)
   }
 
   return path

src/app/state.ts

@@ -69,10 +69,6 @@ export const deriveEvent = (idOrAddress: string, hints: string[] = []) => {
   )
 }
 
-// Topics
-
-export const topicsByUrl = withGetter(writable(new Map<string, string[]>()))
-
 // Membership
 
 export type Membership = {
@@ -185,6 +181,20 @@ export const {
   },
 })
 
+// Topics
+
+export const topicsByUrl = derived(chats, $chats => {
+  const $topicsByUrl = new Map<string, string[]>()
+
+  for (const chat of $chats) {
+    if (chat.topic) {
+      pushToMapKey($topicsByUrl, chat.url, chat.topic)
+    }
+  }
+
+  return $topicsByUrl
+})
+
 // User stuff
 
 export const userProfile = derived([pubkey, profilesByPubkey], ([$pubkey, $profilesByPubkey]) => {

src/assets/icons/Arrows ALogout 2.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15 12L2 12M2 12L5.5 9M2 12L5.5 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/lib/components/Icon.svelte

@@ -9,6 +9,7 @@
   import cx from "classnames"
   import {switcher} from "@welshman/lib"
   import AddSquare from "@assets/icons/Add Square.svg?dataurl"
+  import ArrowsALogout2 from "@assets/icons/Arrows ALogout 2.svg?dataurl"
   import Code2 from "@assets/icons/Code 2.svg?dataurl"
   import Earth from "@assets/icons/Earth.svg?dataurl"
   import Pen from "@assets/icons/Pen.svg?dataurl"
@@ -68,6 +69,7 @@
 
   const data = switcher(icon, {
     "add-square": AddSquare,
+    "arrows-a-logout-2": ArrowsALogout2,
     "code-2": Code2,
     earth: Earth,
     pen: Pen,

src/lib/tiptap/LinkExtension.ts

@@ -74,7 +74,6 @@ export const LinkExtension = Node.create({
           const matches = []
 
           for (const match of text.matchAll(LINK_REGEX)) {
-            console.log(text, match)
             try {
               matches.push(createPasteRuleMatch(match, {url: match[0]}))
             } catch (e) {

src/lib/transition.ts

@@ -1,7 +1,7 @@
 import type {FlyParams} from "svelte/transition"
 import {fly as baseFly} from "svelte/transition"
 
-export {fade} from "svelte/transition"
+export {fade, slide} from "svelte/transition"
 
 export const fly = (node: Element, params?: FlyParams | undefined) =>
   baseFly(node, {y: 20, ...params})

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">