From 89c269025481c4510b52fe887efd5da3e03d0b62 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 4 Jun 2025 13:52:00 -0700
Subject: [PATCH] Add new room dashboard layout

---
 src/routes/spaces/[relay]/+page.svelte | 308 ++++++++++++++++---------
 1 file changed, 197 insertions(+), 111 deletions(-)

diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index fe546dc7..4f0c383c 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -7,7 +7,6 @@
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Divider from "@lib/components/Divider.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
@@ -42,8 +41,22 @@
   const addRoom = () => pushModal(RoomCreate, {url})
 
   let relayAdminEvents: TrustedEvent[] = $state([])
+  let roomSearchQuery = $state("")
 
   const pubkey = $derived($relay?.profile?.pubkey)
+
+  const filteredRooms = $derived(() => {
+    if (!roomSearchQuery) return [...$userRooms, ...$otherRooms]
+
+    const query = roomSearchQuery.toLowerCase()
+    const allRooms = [...$userRooms, ...$otherRooms]
+
+    return allRooms.filter(room => {
+      const channel = $channelsById.get(makeChannelId(url, room))
+      const roomName = channel?.name || room
+      return roomName.toLowerCase().includes(query)
+    })
+  })
 </script>
 
 <PageBar>
@@ -73,129 +86,202 @@
   {/snippet}
 </PageBar>
 
-<PageContent class="flex flex-col p-2 pt-4">
-  <div class="card2 bg-alt col-4 text-left">
+<PageContent class="flex flex-col gap-2 p-2 pt-4">
+  <div class="card2 bg-alt flex flex-col gap-4 text-left">
     <div class="relative flex gap-4">
       <div class="relative">
         <div class="avatar relative">
           <div
-            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
             {#if $relay?.profile?.icon}
               <img alt="" src={$relay.profile.icon} />
             {:else}
-              <Icon icon="ghost" size={5} />
+              <Icon icon="ghost" size={6} />
             {/if}
           </div>
         </div>
       </div>
-      <div class="min-w-0">
-        <h2 class="ellipsize whitespace-nowrap text-xl">
+      <div class="min-w-0 flex-1">
+        <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">
           <RelayName {url} />
-        </h2>
-        <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
+        </h1>
+        <p class="ellipsize mb-2 text-sm opacity-75">{displayRelayUrl(url)}</p>
+        {#if $relay?.profile?.pubkey}
+          <p class="text-sm opacity-60">
+            <Icon icon="user-rounded" size={4} class="mr-1 inline" />
+            Relay Admin: {$relay.profile.pubkey.slice(0, 8)}...{$relay.profile.pubkey.slice(-8)}
+          </p>
+        {/if}
       </div>
     </div>
-    <RelayDescription {url} />
-    {#if $relay?.profile}
-      {@const {software, version, supported_nips, limitation} = $relay.profile}
-      <div class="flex flex-wrap gap-1">
-        {#if limitation?.auth_required}
-          <p class="badge badge-neutral">
-            <span class="ellipsize">Authentication Required</span>
-          </p>
-        {/if}
-        {#if limitation?.payment_required}
-          <p class="badge badge-neutral"><span class="ellipsize">Payment Required</span></p>
-        {/if}
-        {#if limitation?.min_pow_difficulty}
-          <p class="badge badge-neutral">
-            <span class="ellipsize">Requires PoW {limitation?.min_pow_difficulty}</span>
-          </p>
-        {/if}
-        {#if Array.isArray(supported_nips)}
-          <p class="badge badge-neutral">
-            <span class="ellipsize">NIPs: {supported_nips.join(", ")}</span>
-          </p>
-        {/if}
-        {#if software}
-          <p class="badge badge-neutral"><span class="ellipsize">Software: {software}</span></p>
-        {/if}
-        {#if version}
-          <p class="badge badge-neutral"><span class="ellipsize">Version: {version}</span></p>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <Divider>Your Rooms</Divider>
-  <div class="grid grid-cols-3 gap-2">
-    <Link href={threadsPath} class="btn btn-primary">
-      <div class="relative flex items-center gap-2">
-        <Icon icon="notes-minimalistic" />
-        Threads
-        {#if $notifications.has(threadsPath)}
-          <div
-            class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
-            transition:fade>
-          </div>
-        {/if}
-      </div>
-    </Link>
-    <Link href={calendarPath} class="btn btn-secondary">
-      <div class="relative flex items-center gap-2">
-        <Icon icon="notes-minimalistic" />
-        Calendar
-        {#if $notifications.has(calendarPath)}
-          <div
-            class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
-            transition:fade>
-          </div>
-        {/if}
-      </div>
-    </Link>
-    {#each $userRooms as room (room)}
-      {@const roomPath = makeRoomPath(url, room)}
-      {@const channel = $channelsById.get(makeChannelId(url, room))}
-      <Link href={roomPath} class="btn btn-neutral relative">
-        <div class="flex min-w-0 items-center gap-2 overflow-hidden text-nowrap">
-          {#if channel?.closed || channel?.private}
-            <Icon icon="lock" size={4} />
-          {:else}
-            <Icon icon="hashtag" />
-          {/if}
-          <ChannelName {url} {room} />
-        </div>
-        {#if $notifications.has(roomPath)}
-          <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" transition:fade></div>
-        {/if}
-      </Link>
-    {/each}
-  </div>
-  <Divider>Other Rooms</Divider>
-  <div class="grid grid-cols-3 gap-2">
-    {#each $otherRooms as room (room)}
-      {@const channel = $channelsById.get(makeChannelId(url, room))}
-      <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
-        <div class="relative flex min-w-0 items-center gap-2 overflow-hidden text-nowrap">
-          {#if channel?.closed || channel?.private}
-            <Icon icon="lock" size={4} />
-          {:else}
-            <Icon icon="hashtag" />
-          {/if}
-          <ChannelName {url} {room} />
-        </div>
-      </Link>
-    {/each}
-    {#if hasNip29($relay)}
-      <Button onclick={addRoom} class="btn btn-neutral whitespace-nowrap">
-        <Icon icon="add-circle" />
-        Create
-      </Button>
-    {/if}
-  </div>
-  {#if pubkey}
-    <Divider>Recent posts from the relay admin</Divider>
-    <div class="hidden flex-col gap-2" class:!flex={relayAdminEvents.length > 0}>
-      <ProfileFeed hideLoading {url} {pubkey} bind:events={relayAdminEvents} />
+    <div class="mt-4">
+      <RelayDescription {url} />
     </div>
-  {/if}
+  </div>
+  <div class="card2 bg-alt md:hidden">
+    <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
+      <Icon icon="compass-big" />
+      Quick Links
+    </h3>
+    <div class="flex flex-col gap-2">
+      <Link href={threadsPath} class="btn btn-primary w-full justify-start">
+        <div class="relative flex items-center gap-2">
+          <Icon icon="notes-minimalistic" />
+          Threads
+          {#if $notifications.has(threadsPath)}
+            <div
+              class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
+              transition:fade>
+            </div>
+          {/if}
+        </div>
+      </Link>
+      <Link href={calendarPath} class="btn btn-secondary w-full justify-start">
+        <div class="relative flex items-center gap-2">
+          <Icon icon="calendar-minimalistic" />
+          Calendar
+          {#if $notifications.has(calendarPath)}
+            <div
+              class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
+              transition:fade>
+            </div>
+          {/if}
+        </div>
+      </Link>
+      {#if $userRooms.length + $otherRooms.length > 10}
+        <div class="mt-4">
+          <input
+            type="text"
+            placeholder="Search rooms..."
+            class="input input-sm mb-2 w-full"
+            bind:value={roomSearchQuery} />
+        </div>
+      {/if}
+      {#each ($userRooms.length + $otherRooms.length > 10 ? filteredRooms() : [...$userRooms, ...$otherRooms]).slice(0, 10) as room (room)}
+        {@const roomPath = makeRoomPath(url, room)}
+        {@const channel = $channelsById.get(makeChannelId(url, room))}
+        <Link href={roomPath} class="btn btn-neutral btn-sm relative w-full justify-start">
+          <div class="flex min-w-0 items-center gap-2 overflow-hidden text-nowrap">
+            {#if channel?.closed || channel?.private}
+              <Icon icon="lock" size={4} />
+            {:else}
+              <Icon icon="hashtag" />
+            {/if}
+            <ChannelName {url} {room} />
+          </div>
+          {#if $notifications.has(roomPath)}
+            <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" transition:fade>
+            </div>
+          {/if}
+        </Link>
+      {/each}
+      {#if hasNip29($relay)}
+        <Button onclick={addRoom} class="btn btn-neutral btn-sm w-full justify-start">
+          <Icon icon="add-circle" />
+          Create Room
+        </Button>
+      {/if}
+    </div>
+  </div>
+  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+    <div class="flex flex-col gap-2">
+      {#if pubkey}
+        <div class="card2 bg-alt">
+          <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
+            <Icon icon="user-rounded" />
+            Recent Posts from Relay Admin
+          </h3>
+          <div class="flex flex-col gap-3">
+            {#if relayAdminEvents.length > 0}
+              <ProfileFeed hideLoading {url} {pubkey} bind:events={relayAdminEvents} />
+            {:else}
+              <p class="text-sm opacity-60">No recent posts from the relay admin</p>
+            {/if}
+          </div>
+        </div>
+      {/if}
+      <div class="card2 bg-alt">
+        <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
+          <Icon icon="chat-round" />
+          Recent Activity
+        </h3>
+        <div class="flex flex-col gap-3">
+          {#if $userRooms.length > 0}
+            {#each $userRooms.slice(0, 3) as room (room)}
+              {@const channel = $channelsById.get(makeChannelId(url, room))}
+              <div class="flex items-center gap-3 rounded bg-base-100 p-2">
+                <div class="flex items-center gap-2">
+                  {#if channel?.closed || channel?.private}
+                    <Icon icon="lock" size={4} />
+                  {:else}
+                    <Icon icon="hashtag" />
+                  {/if}
+                  <span class="font-medium">
+                    <ChannelName {url} {room} />
+                  </span>
+                </div>
+                <span class="ml-auto text-sm opacity-60">Active conversations</span>
+              </div>
+            {/each}
+          {:else}
+            <p class="text-sm opacity-60">No recent activity</p>
+          {/if}
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-6">
+      <div class="card2 bg-alt">
+        <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
+          <Icon icon="server" />
+          Relay Status
+        </h3>
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center gap-2">
+            <div class="h-2 w-2 rounded-full bg-green-500"></div>
+            <span class="text-sm">Connected</span>
+          </div>
+          {#if $relay?.profile}
+            {@const {software, version, supported_nips, limitation} = $relay.profile}
+            <div class="flex flex-wrap gap-1">
+              {#if $relay?.profile?.contact}
+                <div class="badge badge-neutral">
+                  <span class="ellipsize">Contact: {$relay.profile.contact}</span>
+                </div>
+              {/if}
+              {#if software}
+                <div class="badge badge-neutral">
+                  <span class="ellipsize">Software: {software}</span>
+                </div>
+              {/if}
+              {#if version}
+                <div class="badge badge-neutral">
+                  <span class="ellipsize">Version: {version}</span>
+                </div>
+              {/if}
+              {#if Array.isArray(supported_nips)}
+                <p class="badge badge-neutral">
+                  <span class="ellipsize">Supported NIPs: {supported_nips.join(", ")}</span>
+                </p>
+              {/if}
+              {#if limitation?.auth_required}
+                <p class="badge badge-warning">
+                  <span class="ellipsize">Auth Required</span>
+                </p>
+              {/if}
+              {#if limitation?.payment_required}
+                <p class="badge badge-warning">
+                  <span class="ellipsize">Payment Required</span>
+                </p>
+              {/if}
+              {#if limitation?.min_pow_difficulty}
+                <p class="badge badge-warning">
+                  <span class="ellipsize">Min PoW: {limitation?.min_pow_difficulty}</span>
+                </p>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
 </PageContent>