Factor space recent activity into its own component

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>