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-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>
   {/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
+    event: TrustedEvent
-    latest: TrustedEvent
     count: number
   }
 
-  const {url, h, latest, count}: Props = $props()
+  const {url, event, count}: Props = $props()
 
-  const navigateToRoom = () => {
+  const h = getTagValue("h", event.tags)
-    goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
-  }
 
-  const handleReplyClick = (e: Event) => {
+  const onClick = () => goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
-    e.stopPropagation()
-    navigateToRoom()
-  }
 </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}>
+      <Button class="btn btn-sm btn-primary" onclick={onClick}>
-        <Icon icon={Reply} />
+        View Conversation
-        Reply
+        <Icon icon={AltArrowRight} />
       </Button>
     </div>
   </div>

src/routes/spaces/[relay]/recent/+page.svelte

@@ -2,125 +2,88 @@
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {groupBy, ago, WEEK, first, sortBy, now} from "@welshman/lib"
+  import {groupBy, ago, MONTH, first, sortBy, uniqBy} from "@welshman/lib"
-  import {MESSAGE, THREAD, ZAP_GOAL, EVENT_TIME, COMMENT, getTagValue} from "@welshman/util"
+  import {
+    MESSAGE,
+    THREAD,
+    ZAP_GOAL,
+    EVENT_TIME,
+    COMMENT,
+    getTagValue,
+    getTagValues,
+    getIdAndAddress,
+  } from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {repository} from "@welshman/app"
   import History from "@assets/icons/history.svg?dataurl"
-  import Add from "@assets/icons/add.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
-  import ConversationCard from "@app/components/ConversationCard.svelte"
+  import NoteItem from "@app/components/NoteItem.svelte"
-  import ThreadCard from "@app/components/ThreadCard.svelte"
+  import RecentConversation from "@app/components/RecentConversation.svelte"
-  import GoalCard from "@app/components/GoalCard.svelte"
+  import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
-  import CalendarEventCard from "@app/components/CalendarEventCard.svelte"
+  import {makeThreadPath, makeCalendarPath, makeGoalPath} from "@app/util/routes"
-  import CommentCard from "@app/components/CommentCard.svelte"
-  import {decodeRelay, deriveEventsForUrl} from "@app/core/state"
-  import {goToSpace} from "@app/util/routes"
 
   const url = decodeRelay($page.params.relay!)
-  const since = ago(WEEK)
+  const since = ago(MONTH)
-  const currentTime = now()
 
   const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE], since}])
-  const threads = deriveEventsForUrl(url, [{kinds: [THREAD], since}])
+  const content = deriveEventsForUrl(url, [{kinds: CONTENT_KINDS, since}])
-  const goals = deriveEventsForUrl(url, [{kinds: [ZAP_GOAL], since}])
-  const events = deriveEventsForUrl(url, [{kinds: [EVENT_TIME]}])
   const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], since}])
 
   const recentActivity = derived(
-    [messages, threads, goals, events, comments],
+    [messages, content, comments],
-    ([$messages, $threads, $goals, $events, $comments]) => {
+    ([$messages, $content, $comments]) => {
       const activity: Array<{
-        type: "message" | "thread" | "goal" | "event" | "upcoming" | "comment"
+        type: "message" | "content"
-        event: any
+        event: TrustedEvent
+        count: number
         timestamp: number
-        h?: string
-        latest?: any
-        count?: number
-        replyCount?: number
       }> = []
 
       const byRoom = groupBy(e => getTagValue("h", e.tags), $messages)
-      for (const [h, roomMessages] of byRoom.entries()) {
+      for (const roomMessages of byRoom.values()) {
         const latest = first(roomMessages)
         if (latest) {
           activity.push({
             type: "message",
             event: latest,
-            timestamp: latest.created_at,
-            h,
-            latest,
             count: roomMessages.length,
+            timestamp: latest.created_at,
           })
         }
       }
 
-      for (const thread of $threads) {
+      const latestActivityByKey = new Map<string, number>()
-        const replies = $comments.filter(c => getTagValue("E", c.tags) === thread.id)
+
-        activity.push({
+      for (const event of $content) {
-          type: "thread",
+        for (const k of getIdAndAddress(event)) {
-          event: thread,
+          latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
-          timestamp: thread.created_at,
+        }
-          h: getTagValue("h", thread.tags),
-          replyCount: replies.length,
-        })
       }
 
-      for (const goal of $goals) {
+      for (const event of $comments) {
-        const replies = $comments.filter(c => getTagValue("E", c.tags) === goal.id)
+        for (const k of getTagValues(["E", "A"], event.tags)) {
-        activity.push({
+          latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
-          type: "goal",
+        }
-          event: goal,
-          timestamp: goal.created_at,
-          h: getTagValue("h", goal.tags),
-          replyCount: replies.length,
-        })
       }
 
-      const pastEvents = $events.filter(e => {
+      for (const [address, timestamp] of latestActivityByKey.entries()) {
-        const start = getTagValue("start", e.tags)
+        const event = repository.getEvent(address)
-        return start && parseInt(start) < currentTime
+
-      })
+        if (event) {
-      for (const event of pastEvents.slice(0, 5)) {
+          activity.push({type: "content", event, timestamp, count: 1})
-        const replies = $comments.filter(c => getTagValue("E", c.tags) === event.id)
+        }
-        activity.push({
-          type: "event",
-          event,
-          timestamp: event.created_at,
-          h: getTagValue("h", event.tags),
-          replyCount: replies.length,
-        })
       }
 
-      const upcomingEvents = $events.filter(e => {
+      return sortBy(
-        const start = getTagValue("start", e.tags)
+        a => -a.timestamp,
-        return start && parseInt(start) >= currentTime
+        uniqBy(a => a.event.id, activity),
-      })
+      )
-      for (const event of upcomingEvents.slice(0, 3)) {
-        const replies = $comments.filter(c => getTagValue("E", c.tags) === event.id)
-        const start = getTagValue("start", event.tags)
-        activity.push({
-          type: "upcoming",
-          event,
-          timestamp: start ? parseInt(start) : event.created_at,
-          h: getTagValue("h", event.tags),
-          replyCount: replies.length,
-        })
-      }
-
-      for (const comment of $comments) {
-        activity.push({
-          type: "comment",
-          event: comment,
-          timestamp: comment.created_at,
-          h: getTagValue("h", comment.tags),
-        })
-      }
-
-      return sortBy(a => -a.timestamp, activity)
     },
   )
 
@@ -158,35 +121,30 @@
 <div bind:this={element}>
   <PageContent class="flex flex-col gap-2 p-2 pt-4">
     {#if $recentActivity.length === 0}
-      <div class="flex flex-col items-center gap-4 py-12 text-center">
+      <p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
-        <Icon icon={History} class="h-16 w-16 opacity-30" />
-        <div class="flex flex-col gap-2">
-          <h3 class="text-lg font-semibold">No Recent Activity</h3>
-          <p class="opacity-70">There hasn't been any activity in the last week.</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Button class="btn-primary" onclick={() => goToSpace(url)}>
-            <Icon icon={Add} />
-            Browse Rooms
-          </Button>
-        </div>
-      </div>
     {:else}
-      {#each $recentActivity.slice(0, limit) as activity (activity.event.id)}
+      {#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
-        {#if activity.type === "message"}
+        {#if type === "message"}
-          <ConversationCard
+          <RecentConversation {url} {event} {count} />
-            {url}
+        {:else}
-            h={activity.h}
+          <NoteItem {url} {event}>
-            latest={activity.latest}
+            {#if event.kind === THREAD}
-            count={activity.count || 0} />
+              <Link href={makeThreadPath(url, event.id)} class="btn btn-primary btn-sm">
-        {:else if activity.type === "thread"}
+                View Thread
-          <ThreadCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+                <Icon icon={AltArrowRight} />
-        {:else if activity.type === "goal"}
+              </Link>
-          <GoalCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+            {:else if event.kind === ZAP_GOAL}
-        {:else if activity.type === "event" || activity.type === "upcoming"}
+              <Link href={makeGoalPath(url, event.id)} class="btn btn-primary btn-sm">
-          <CalendarEventCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+                View Goal
-        {:else if activity.type === "comment"}
+                <Icon icon={AltArrowRight} />
-          <CommentCard {url} event={activity.event} />
+              </Link>
+            {:else if event.kind === EVENT_TIME}
+              <Link href={makeCalendarPath(url, event.id)} class="btn btn-primary btn-sm">
+                View Event
+                <Icon icon={AltArrowRight} />
+              </Link>
+            {/if}
+          </NoteItem>
         {/if}
       {/each}
     {/if}