From 7d617d8399623883ba745819808a647b7d0fc1cf Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 4 Jun 2025 20:37:48 -0700
Subject: [PATCH] Add latest note from admin to relay dashboard

---
 src/app/components/ProfileLatest.svelte | 40 +++++++++++++++++++++++++
 src/routes/spaces/[relay]/+page.svelte  | 36 ++++++++++------------
 2 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/app/components/ProfileLatest.svelte

diff --git a/src/app/components/ProfileLatest.svelte b/src/app/components/ProfileLatest.svelte
new file mode 100644
index 00000000..6a17bab5
--- /dev/null
+++ b/src/app/components/ProfileLatest.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {load} from "@welshman/net"
+  import {NOTE} from "@welshman/util"
+  import {fly} from "@lib/transition"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import NoteItem from "@app/components/NoteItem.svelte"
+
+  interface Props {
+    url: string
+    pubkey: string
+    limit?: number
+    fallback?: Snippet
+  }
+
+  const {url, pubkey, limit = 1, fallback}: Props = $props()
+
+  const events = load({
+    relays: [url],
+    filters: [{authors: [pubkey], kinds: [NOTE], limit}],
+  })
+</script>
+
+<div class="col-4">
+  <div class="flex flex-col gap-2">
+    {#await events}
+      <p class="center my-12 flex">
+        <Spinner loading />
+      </p>
+    {:then events}
+      {#each events as event (event.id)}
+        <div in:fly>
+          <NoteItem {url} {event} />
+        </div>
+      {:else}
+        {@render fallback?.()}
+      {/each}
+    {/await}
+  </div>
+</div>
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 692cd652..02297805 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import {page} from "$app/stores"
-  import type {TrustedEvent} from "@welshman/util"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
   import {AuthStatus, SocketStatus} from "@welshman/net"
@@ -12,7 +11,7 @@
   import PageContent from "@lib/components/PageContent.svelte"
   import StatusIndicator from "@lib/components/StatusIndicator.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
-  import ProfileFeed from "@app/components/ProfileFeed.svelte"
+  import ProfileLatest from "@app/components/ProfileLatest.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RelayName from "@app/components/RelayName.svelte"
@@ -44,7 +43,6 @@
 
   const addRoom = () => pushModal(RoomCreate, {url})
 
-  let relayAdminEvents: TrustedEvent[] = $state([])
   let roomSearchQuery = $state("")
 
   const pubkey = $derived($relay?.profile?.pubkey)
@@ -189,21 +187,6 @@
   </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" />
@@ -213,7 +196,7 @@
           {#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-3 rounded bg-base-100">
                 <div class="flex items-center gap-2">
                   {#if channel?.closed || channel?.private}
                     <Icon icon="lock" size={4} />
@@ -233,7 +216,7 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
       <div class="card2 bg-alt">
         <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
           <Icon icon="server" />
@@ -307,6 +290,19 @@
           {/if}
         </div>
       </div>
+      {#if pubkey}
+        <div class="card2 bg-alt">
+          <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
+            <Icon icon="user-rounded" />
+            Latest Updates
+          </h3>
+          <ProfileLatest {url} {pubkey}>
+            {#snippet fallback()}
+              <p class="text-sm opacity-60">No recent posts from the relay admin</p>
+            {/snippet}
+          </ProfileLatest>
+        </div>
+      {/if}
     </div>
   </div>
 </PageContent>