Show latest note as conversation

src/app/components/ConversationCard.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import {formatTimestamp} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {goToEvent} from "@app/routes"
+  import {displayChannel} from "@app/state"
+
+  type Props = {
+    url: string
+    room: string
+    events: TrustedEvent[]
+    latest: TrustedEvent
+    earliest: TrustedEvent
+    participants: string[]
+  }
+
+  const {url, room, events, latest, earliest, participants}: Props = $props()
+</script>
+
+<Button class="card2 bg-alt" onclick={() => goToEvent(earliest)}>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-start gap-3">
+      <ProfileCircle pubkey={earliest.pubkey} size={10} />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2 text-sm opacity-70">
+          <span class="font-medium text-blue-400">#{displayChannel(url, room)}</span>
+          <span class="opacity-50">•</span>
+          <span>{formatTimestamp(earliest.created_at)}</span>
+        </div>
+        <Content minimalQuote minLength={100} maxLength={400} event={earliest} />
+      </div>
+    </div>
+    <div class="ml-13 flex items-center justify-between">
+      <div class="flex gap-1">
+        <Icon icon="alt-arrow-left" />
+        <span class="text-sm opacity-70">
+          {events.length}
+          {events.length === 1 ? "message" : "messages"}
+        </span>
+      </div>
+      <div class="flex gap-2">
+        <ProfileCircles pubkeys={participants} size={6} />
+        <span class="text-sm opacity-70">
+          {participants.length}
+          {participants.length === 1 ? "participant" : "participants"}
+        </span>
+      </div>
+    </div>
+    {#if latest !== earliest}
+      <Button class="card2 bg-alt" onclick={() => goToEvent(latest)}>
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 text-sm opacity-70">
+              <ProfileCircle pubkey={latest.pubkey} size={5} />
+              <span class="font-medium">Latest reply:</span>
+            </div>
+            <span class="text-xs opacity-50">
+              {formatTimestamp(latest.created_at)}
+            </span>
+          </div>
+          <Content minimalQuote minLength={100} maxLength={400} event={latest} />
+        </div>
+      </Button>
+    {/if}
+  </div>
+</Button>

src/app/components/SpaceRecentActivity.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
   import {derived} from "svelte/store"
   import {groupBy, ago, MONTH, first, last, uniq, avg, overlappingPairs} from "@welshman/lib"
-  import {formatTimestamp} from "@welshman/lib"
   import {MESSAGE, getTagValue} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ConversationCard from "@app/components/ConversationCard.svelte"
   import {deriveEventsForUrl} from "@app/state"
-  import {goToEvent} from "@app/routes"
 
   type Props = {
     url: string
@@ -24,6 +20,8 @@
     const convs = []
 
     for (const [room, messages] of groupBy(e => getTagValue("h", e.tags), $messages).entries()) {
+      if (!room) continue
+
       const avgTime = avg(overlappingPairs(messages).map(([a, b]) => a.created_at - b.created_at))
       const groups: TrustedEvent[][] = []
       const group: TrustedEvent[] = []
@@ -66,6 +64,8 @@
   }
 
   let limit = $state(3)
+
+  $inspect($messages)
 </script>
 
 <div class="card2 bg-alt">
@@ -76,54 +76,25 @@
     </h3>
     <div class="flex flex-col gap-4">
       {#if $conversations.length === 0}
-        <div class="py-8 text-center opacity-70">
-          <p>No recent conversations</p>
-        </div>
+        {#if $messages.length > 0}
+          {@const events = $messages.slice(0, 1)}
+          {@const event = events[0]}
+          {@const room = getTagValue("h", event.tags)!}
+          <ConversationCard
+            {url}
+            {room}
+            {events}
+            latest={event}
+            earliest={event}
+            participants={[event.pubkey]} />
+        {:else}
+          <div class="py-8 text-center opacity-70">
+            <p>No recent conversations</p>
+          </div>
+        {/if}
       {:else}
         {#each $conversations.slice(0, limit) as { room, events, latest, earliest, participants } (latest.id)}
-          <Button class="card2 bg-alt" onclick={() => goToEvent(earliest)}>
-            <div class="flex flex-col gap-3">
-              <div class="flex items-start gap-3">
-                <ProfileCircle pubkey={earliest.pubkey} size={10} />
-                <div class="min-w-0 flex-1">
-                  <div class="flex items-center gap-2 text-sm opacity-70">
-                    <span class="font-medium text-blue-400">#{room}</span>
-                    <span class="opacity-50">•</span>
-                    <span>{formatTimestamp(earliest.created_at)}</span>
-                  </div>
-                  <Content minimalQuote minLength={100} maxLength={400} event={earliest} />
-                </div>
-              </div>
-              <div class="ml-13 flex items-center justify-between">
-                <div class="flex gap-1">
-                  <Icon icon="alt-arrow-left" />
-                  <span class="text-sm opacity-70">
-                    {events.length} messages
-                  </span>
-                </div>
-                <div class="flex gap-2">
-                  <ProfileCircles pubkeys={participants} size={6} />
-                  <span class="text-sm opacity-70">
-                    {participants.length} participants
-                  </span>
-                </div>
-              </div>
-              <Button class="card2 bg-alt" onclick={() => goToEvent(latest)}>
-                <div class="flex flex-col gap-2">
-                  <div class="flex items-center justify-between">
-                    <div class="flex items-center gap-2 text-sm opacity-70">
-                      <ProfileCircle pubkey={latest.pubkey} size={5} />
-                      <span class="font-medium">Latest reply:</span>
-                    </div>
-                    <span class="text-xs opacity-50">
-                      {formatTimestamp(latest.created_at)}
-                    </span>
-                  </div>
-                  <Content minimalQuote minLength={100} maxLength={400} event={latest} />
-                </div>
-              </Button>
-            </div>
-          </Button>
+          <ConversationCard {url} {room} {events} {latest} {earliest} {participants} />
         {/each}
         {#if $conversations.length > limit}
           <Button class="btn btn-primary" onclick={viewMore}>