From f782898b62b0deba0d36738f63abe13634e09c77 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 5 Jun 2025 08:39:30 -0700
Subject: [PATCH] Factor space recent activity into its own component

---
 src/app/components/SpaceRecentActivity.svelte | 42 +++++++++++++++++++
 src/routes/spaces/[relay]/+page.svelte        | 40 ++----------------
 2 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/app/components/SpaceRecentActivity.svelte

diff --git a/src/app/components/SpaceRecentActivity.svelte b/src/app/components/SpaceRecentActivity.svelte
new file mode 100644
index 00000000..c5d4641a
--- /dev/null
+++ b/src/app/components/SpaceRecentActivity.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import ChannelName from "@app/components/ChannelName.svelte"
+  import {makeChannelId, channelsById, deriveUserRooms} from "@app/state"
+
+  interface Props {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const userRooms = deriveUserRooms(url)
+</script>
+
+<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">
+          <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>
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 35250df8..8497429b 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -11,24 +11,17 @@
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.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"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import SpaceQuickLinks from "@app/components/SpaceQuickLinks.svelte"
-  import {
-    decodeRelay,
-    makeChannelId,
-    channelsById,
-    deriveUserRooms,
-    userRoomsByUrl,
-  } from "@app/state"
+  import SpaceRecentActivity from "@app/components/SpaceRecentActivity.svelte"
+  import {decodeRelay, userRoomsByUrl} from "@app/state"
   import {makeChatPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
   const relay = deriveRelay(url)
-  const userRooms = deriveUserRooms(url)
   const joinSpace = () => pushModal(SpaceJoin, {url})
 
   const owner = $derived($relay?.profile?.pubkey)
@@ -88,34 +81,7 @@
   <SpaceQuickLinks {url} />
   <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
     <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="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">
-                <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>
+      <SpaceRecentActivity {url} />
     </div>
     <div class="flex flex-col gap-2">
       <div class="card2 bg-alt">