Spruce up home page navigation

src/app/components/MenuSpace.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {sortBy} from "@welshman/lib"
   import {displayRelayUrl, GROUP_META} from "@welshman/util"
   import {load} from "@welshman/app"
   import {fly} from "@lib/transition"
@@ -18,14 +17,12 @@
   import ChannelName from "@app/components/ChannelName.svelte"
   import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
   import {
-    getMembershipRoomsByUrl,
     getMembershipUrls,
     hasMembershipUrl,
     userMembership,
     memberships,
-    channelsByUrl,
-    GENERAL,
-    displayChannel,
+    deriveUserRooms,
+    deriveOtherRooms,
   } from "@app/state"
   import {deriveNotification, THREAD_FILTERS} from "@app/notifications"
   import {pushModal} from "@app/modal"
@@ -35,6 +32,8 @@
 
   const threadsPath = makeSpacePath(url, "threads")
   const threadsNotification = deriveNotification(threadsPath, THREAD_FILTERS, url)
+  const userRooms = deriveUserRooms(url)
+  const otherRooms = deriveOtherRooms(url)
 
   const openMenu = () => {
     showMenu = true
@@ -62,25 +61,9 @@
   let showMenu = false
   let replaceState = false
   let element: Element
-  let userRooms: string[] = []
-  let otherRooms: string[] = []
 
   $: members = $memberships.filter(l => hasMembershipUrl(l, url)).map(l => l.event.pubkey)
 
-  $: {
-    userRooms = [GENERAL, ...getMembershipRoomsByUrl(url, $userMembership)]
-    otherRooms = []
-
-    for (const channel of $channelsByUrl.get(url) || []) {
-      if (!userRooms.includes(channel.room)) {
-        otherRooms.push(channel.room)
-      }
-    }
-
-    userRooms = sortBy(room => displayChannel(url, room), userRooms)
-    otherRooms = sortBy(room => displayChannel(url, room), otherRooms)
-  }
-
   onMount(async () => {
     replaceState = Boolean(element.closest(".drawer"))
     load({relays: [url], filters: [{kinds: [GROUP_META]}]})
@@ -137,23 +120,25 @@
       </SecondaryNavItem>
       <div class="h-2" />
       <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-      {#each userRooms as room, i (room)}
+      {#each $userRooms as room, i (room)}
         <MenuSpaceRoomItem {url} {room} />
       {/each}
-      {#if otherRooms.length > 0}
+      {#if $otherRooms.length > 0}
         <div class="h-2" />
         <SecondaryNavHeader>
-          {#if userRooms.length > 0}
+          {#if $userRooms.length > 0}
             Other Rooms
           {:else}
             Rooms
           {/if}
         </SecondaryNavHeader>
       {/if}
-      {#each otherRooms as room, i (room)}
+      {#each $otherRooms as room, i (room)}
         <SecondaryNavItem href={makeSpacePath(url, room)}>
           <Icon icon="hashtag" />
-          <ChannelName {url} {room} />
+          <div class="min-w-0 overflow-hidden text-ellipsis">
+            <ChannelName {url} {room} />
+          </div>
         </SecondaryNavItem>
       {/each}
       <SecondaryNavItem on:click={addRoom}>

src/app/components/MenuSpaceRoomItem.svelte

@@ -14,5 +14,7 @@
 
 <SecondaryNavItem href={path} notification={$notification}>
   <Icon icon="hashtag" />
-  <ChannelName {url} {room} />
+  <div class="min-w-0 overflow-hidden text-ellipsis">
+    <ChannelName {url} {room} />
+  </div>
 </SecondaryNavItem>

src/app/state.ts

@@ -605,6 +605,9 @@ export const displayChannel = (url: string, room: string) => {
   return channelsById.get().get(makeChannelId(url, room))?.name || room
 }
 
+export const roomComparator = (url: string) => (room: string) =>
+  displayChannel(url, room).toLowerCase()
+
 // User stuff
 
 export const userSettings = withGetter(
@@ -633,6 +636,20 @@ export const userMembership = withGetter(
   }),
 )
 
+export const deriveUserRooms = (url: string) =>
+  derived(userMembership, $userMembership => [
+    GENERAL,
+    ...sortBy(roomComparator(url), getMembershipRoomsByUrl(url, $userMembership)),
+  ])
+
+export const deriveOtherRooms = (url: string) =>
+  derived([deriveUserRooms(url), channelsByUrl], ([$userRooms, $channelsByUrl]) =>
+    sortBy(
+      roomComparator(url),
+      ($channelsByUrl.get(url) || []).filter(c => !$userRooms.includes(c.room)).map(c => c.room),
+    ),
+  )
+
 // Other utils
 
 export const encodeRelay = (url: string) => encodeURIComponent(normalizeRelayUrl(url))

src/routes/spaces/[relay]/+page.svelte

@@ -10,11 +10,13 @@
   import ChannelName from "@app/components/ChannelName.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import {decodeRelay, channelsByUrl} from "@app/state"
+  import {decodeRelay, deriveUserRooms, deriveOtherRooms} from "@app/state"
   import {makeChatPath, makeRoomPath, makeSpacePath} from "@app/routes"
 
   const url = decodeRelay($page.params.relay)
   const relay = deriveRelay(url)
+  const userRooms = deriveUserRooms(url)
+  const otherRooms = deriveOtherRooms(url)
 
   $: pubkey = $relay?.profile?.pubkey
 </script>
@@ -89,18 +91,26 @@
       {/if}
     </div>
     <div class="grid grid-cols-3 gap-2">
-      <Link
-        href={makeSpacePath(url, "threads")}
-        class="bg-alt btn btn-neutral justify-start border-none">
+      <Link href={makeSpacePath(url, "threads")} class="btn btn-primary justify-start border-none">
         <Icon icon="notes-minimalistic" /> Threads
       </Link>
-      {#each $channelsByUrl.get(url) || [] as channel (channel.room)}
+      {#each $userRooms as room (room)}
         <Link
-          href={makeRoomPath(url, channel.room)}
+          href={makeRoomPath(url, room)}
+          class="btn btn-neutral flex-nowrap justify-start whitespace-nowrap border-none">
+          <Icon icon="hashtag" />
+          <div class="min-w-0 overflow-hidden text-ellipsis">
+            <ChannelName {url} {room} />
+          </div>
+        </Link>
+      {/each}
+      {#each $otherRooms as room (room)}
+        <Link
+          href={makeRoomPath(url, room)}
           class="bg-alt btn btn-neutral flex-nowrap justify-start whitespace-nowrap border-none">
           <Icon icon="hashtag" />
           <div class="min-w-0 overflow-hidden text-ellipsis">
-            <ChannelName {...channel} />
+            <ChannelName {url} {room} />
           </div>
         </Link>
       {/each}