Rework recent activity page

src/app/components/NoteCard.svelte

@@ -35,7 +35,7 @@
   let muted = $state(getPubkeyTagValues(getListTags($userMuteList)).includes(event.pubkey))
 </script>
 
-<div class="flex flex-col gap-2 {restProps.class}">
+<div class="flex flex-col gap-2 shadow-md {restProps.class}">
   {#if muted}
     <div class="flex items-center justify-between">
       <div class="row-2 relative">
@@ -45,7 +45,7 @@
       <Button class="link ml-8" onclick={ignoreMute}>Show anyway</Button>
     </div>
   {:else}
-    <div class="flex justify-between gap-2">
+    <div class="flex items-start justify-between gap-2">
       {#if !hideProfile}
         {#if minimal}
           @<ProfileName pubkey={event.pubkey} {url} />

src/app/components/NoteContentThread.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
-  import {formatTimestamp} from "@welshman/lib"
   import {getTagValue} from "@welshman/util"
   import Content from "@app/components/Content.svelte"
 
@@ -11,16 +10,7 @@
 
 <div class="flex flex-col gap-2">
   {#if title}
-    <div class="flex w-full items-center justify-between gap-2">
-      <p class="text-xl">{title}</p>
-      <p class="text-sm opacity-75">
-        {formatTimestamp(props.event.created_at)}
-      </p>
-    </div>
-  {:else}
-    <p class="mb-3 h-0 text-xs opacity-75">
-      {formatTimestamp(props.event.created_at)}
-    </p>
+    <p class="text-xl">{title}</p>
   {/if}
   {#if props.event.content}
     <Content {...props} />

src/app/components/NoteItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
@@ -9,7 +10,13 @@
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
 
-  const {url, event} = $props()
+  type Props = {
+    url: string
+    event: TrustedEvent
+    children?: Snippet
+  }
+
+  const {url, event, children}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -36,5 +43,6 @@
         <Icon icon={SmileCircle} size={4} />
       </EmojiButton>
     </ReactionSummary>
+    {@render children?.()}
   </div>
 </NoteCard>

src/app/components/ReactionSummary.svelte

@@ -116,7 +116,7 @@
   })
 </script>
 
-{#if $reactions.length > 0 || $zaps.length || $reports.length > 0}
+{#if $reactions.length > 0 || $zaps.length || $reports.length > 0 || children}
   <div class="flex min-w-0 flex-wrap gap-2">
     {#if url && $reports.length > 0}
       <button

src/app/components/RecentConversation.svelte

@@ -2,8 +2,9 @@
   import {goto} from "$app/navigation"
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
   import ChatRoundDots from "@assets/icons/chat-round-dots.svg?dataurl"
-  import Reply from "@assets/icons/reply.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
@@ -13,24 +14,18 @@
 
   type Props = {
     url: string
-    h?: string
-    latest: TrustedEvent
+    event: TrustedEvent
     count: number
   }
 
-  const {url, h, latest, count}: Props = $props()
+  const {url, event, count}: Props = $props()
 
-  const navigateToRoom = () => {
-    goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
-  }
+  const h = getTagValue("h", event.tags)
 
-  const handleReplyClick = (e: Event) => {
-    e.stopPropagation()
-    navigateToRoom()
-  }
+  const onClick = () => goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
 </script>
 
-<Button class="card2 bg-alt shadow-md" onclick={navigateToRoom}>
+<Button class="card2 bg-alt shadow-md" onclick={onClick}>
   <div class="flex flex-col gap-3">
     <div class="flex items-center gap-2 text-sm">
       {#if h}
@@ -40,23 +35,23 @@
         <span class="truncate font-semibold">Chat</span>
       {/if}
       <span class="ml-auto text-nowrap opacity-50">
-        {formatTimestamp(latest.created_at)}
+        {formatTimestamp(event.created_at)}
       </span>
     </div>
     <div class="flex items-start gap-3">
-      <ProfileCircle pubkey={latest.pubkey} size={10} />
+      <ProfileCircle pubkey={event.pubkey} size={10} />
       <div class="min-w-0 flex-1">
-        <NoteContentMinimal event={latest} />
+        <NoteContentMinimal {event} />
       </div>
     </div>
     <div class="flex items-center justify-between gap-2 text-xs">
       <span class="opacity-50">
         {count}
-        {count === 1 ? "message" : "messages"} this week
+        recent messages{count === 1 ? "" : "s"}
       </span>
-      <Button class="btn btn-sm btn-primary" onclick={handleReplyClick}>
-        <Icon icon={Reply} />
-        Reply
+      <Button class="btn btn-sm btn-primary" onclick={onClick}>
+        View Conversation
+        <Icon icon={AltArrowRight} />
       </Button>
     </div>
   </div>