Move from topic to room using tilde

src/routes/discover/+page.svelte

@@ -56,7 +56,7 @@
           {/if}
         </div>
       </div>
-      {#if $userMembership?.topicsByUrl.has(relay.url)}
+      {#if $userMembership?.roomsByUrl.has(relay.url)}
         <div class="center absolute flex w-full">
           <div
             class="tooltip relative left-8 top-[38px] h-5 w-5 rounded-full bg-primary"

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

@@ -16,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, topicsByUrl, decodeNRelay, MESSAGE, REPLY} from "@app/state"
+  import {userMembership, roomsByUrl, decodeNRelay, GENERAL, MESSAGE, REPLY} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -48,8 +48,8 @@
   let showMenu = false
 
   $: url = decodeNRelay($page.params.nrelay)
-  $: rooms = sort($userMembership?.topicsByUrl?.get(url) || [])
-  $: otherRooms = ($topicsByUrl.get(url) || []).filter(t => !rooms.includes(t))
+  $: rooms = sort($userMembership?.roomsByUrl?.get(url) || [])
+  $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
 
   onMount(() => {
     const kinds = [MESSAGE, REPLY, EVENT_DATE, EVENT_TIME, CLASSIFIED]
@@ -72,7 +72,7 @@
             <ul
               transition:fly
               class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-              {#if $userMembership?.topicsByUrl.has(url)}
+              {#if $userMembership?.roomsByUrl.has(url)}
                 <li class="text-error">
                   <Button on:click={leaveSpace}>
                     <Icon icon="exit" />
@@ -113,11 +113,11 @@
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         </div>
       {/if}
-      {#each rooms as topic, i (topic)}
+      {#each rooms as room, i (room)}
         <div transition:slide={{delay: getDelay()}}>
-          <SecondaryNavItem href={makeSpacePath(url, topic)}>
+          <SecondaryNavItem href={makeSpacePath(url, room)}>
             <Icon icon="hashtag" />
-            {topic}
+            {room}
           </SecondaryNavItem>
         </div>
       {/each}
@@ -133,11 +133,11 @@
           </SecondaryNavHeader>
         </div>
       {/if}
-      {#each otherRooms as topic, i (topic)}
+      {#each otherRooms as room, i (room)}
         <div transition:slide={{delay: getDelay()}}>
-          <SecondaryNavItem href={makeSpacePath(url, topic)}>
+          <SecondaryNavItem href={makeSpacePath(url, room)}>
             <Icon icon="hashtag" />
-            {topic}
+            {room}
           </SecondaryNavItem>
         </div>
       {/each}
@@ -150,7 +150,7 @@
     </SecondaryNavSection>
   </SecondaryNav>
   <Page>
-    {#key $page.params.topic}
+    {#key $page.params.room}
       <slot />
     {/key}
   </Page>

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

@@ -18,19 +18,19 @@
   import Divider from "@lib/components/Divider.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import {userMembership, decodeNRelay, makeChatId, deriveChat} from "@app/state"
+  import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL} from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
 
-  const {nrelay, topic = ""} = $page.params
+  const {nrelay, room = GENERAL} = $page.params
   const url = decodeNRelay(nrelay)
-  const chat = deriveChat(makeChatId(url, topic))
+  const chat = deriveChat(makeChatId(url, room))
 
   const assertEvent = (e: any) => e as TrustedEvent
 
   let loading = true
   let elements: Element[] = []
 
-  $: membership = $userMembership?.topicsByUrl.get(url) || []
+  $: membership = $userMembership?.roomsByUrl.get(url) || []
 
   $: {
     elements = []
@@ -71,16 +71,16 @@
       class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
-        <strong>{topic || "General"}</strong>
+        <strong>{room || "General"}</strong>
       </div>
-      {#if topic}
-        {#if membership.includes(topic)}
-          <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, topic)}>
+      {#if room}
+        {#if membership.includes(room)}
+          <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
             <Icon icon="arrows-a-logout-2" />
             Leave Room
           </Button>
         {:else}
-          <Button class="btn btn-neutral btn-sm" on:click={() => addRoomMembership(url, topic)}>
+          <Button class="btn btn-neutral btn-sm" on:click={() => addRoomMembership(url, room)}>
             <Icon icon="login-2" />
             Join Room
           </Button>
@@ -106,5 +106,5 @@
       </Spinner>
     </p>
   </div>
-  <ChatCompose {url} {topic} />
+  <ChatCompose {url} {room} />
 </div>