Rework recent activity page

src/app/components/ConversationCard.svelte

@@ -1,75 +1,63 @@
 <script lang="ts">
+  import {goto} from "$app/navigation"
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import ChatRoundDots from "@assets/icons/chat-round-dots.svg?dataurl"
+  import Reply from "@assets/icons/reply.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import {goToEvent} from "@app/util/routes"
-  import {displayRoom} from "@app/core/state"
+  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import {makeRoomPath, makeSpaceChatPath} from "@app/util/routes"
 
   type Props = {
     url: string
     h?: string
-    events: TrustedEvent[]
     latest: TrustedEvent
-    earliest: TrustedEvent
-    participants: string[]
+    count: number
   }
 
-  const {url, h, events, latest, earliest, participants}: Props = $props()
+  const {url, h, latest, count}: Props = $props()
+
+  const navigateToRoom = () => {
+    goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
+  }
+
+  const handleReplyClick = (e: Event) => {
+    e.stopPropagation()
+    navigateToRoom()
+  }
 </script>
 
-<Button class="card2 bg-alt shadow-lg" onclick={() => goToEvent(earliest)}>
+<Button class="card2 bg-alt shadow-md" onclick={navigateToRoom}>
   <div class="flex flex-col gap-3">
+    <div class="flex items-center gap-2 text-sm">
+      {#if h}
+        <RoomNameWithImage {url} {h} class="font-semibold" />
+      {:else}
+        <Icon icon={ChatRoundDots} class="h-6 w-6 opacity-50" />
+        <span class="truncate font-semibold">Chat</span>
+      {/if}
+      <span class="ml-auto text-nowrap opacity-50">
+        {formatTimestamp(latest.created_at)}
+      </span>
+    </div>
     <div class="flex items-start gap-3">
-      <ProfileCircle pubkey={earliest.pubkey} size={10} />
+      <ProfileCircle pubkey={latest.pubkey} size={10} />
       <div class="min-w-0 flex-1">
-        <div class="flex items-center gap-2 text-sm opacity-70">
-          {#if h}
-            <span class="truncate font-medium text-blue-400">
-              #{displayRoom(url, h)}
-            </span>
-            <span class="opacity-50">•</span>
-          {/if}
-          <span class="text-nowrap">{formatTimestamp(earliest.created_at)}</span>
-        </div>
-        <NoteContentMinimal event={earliest} />
+        <NoteContentMinimal event={latest} />
       </div>
     </div>
-    <div class="ml-13 flex items-center justify-between">
-      <div class="flex gap-1">
-        <Icon icon={AltArrowLeft} />
-        <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>
-          <NoteContentMinimal event={latest} />
-        </div>
+    <div class="flex items-center justify-between gap-2 text-xs">
+      <span class="opacity-50">
+        {count}
+        {count === 1 ? "message" : "messages"} this week
+      </span>
+      <Button class="btn btn-sm btn-primary" onclick={handleReplyClick}>
+        <Icon icon={Reply} />
+        Reply
       </Button>
-    {/if}
+    </div>
   </div>
 </Button>