Rework recent activity page

AGENTS.md

@@ -167,6 +167,7 @@ src/
 - Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
 - When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
 - When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
+- Do not define svelte event handlers inline, instead name them and put them in the script section of templates
 
 ## Common Tasks
 

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 RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
-  import {goToEvent} from "@app/util/routes"
+  import {makeRoomPath, makeSpaceChatPath} from "@app/util/routes"
-  import {displayRoom} from "@app/core/state"
 
   type Props = {
     url: string
     h?: string
-    events: TrustedEvent[]
     latest: TrustedEvent
-    earliest: TrustedEvent
+    count: number
-    participants: string[]
   }
 
-  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">
+        <NoteContentMinimal event={latest} />
-          {#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} />
       </div>
     </div>
-    <div class="ml-13 flex items-center justify-between">
+    <div class="flex items-center justify-between gap-2 text-xs">
-      <div class="flex gap-1">
+      <span class="opacity-50">
-        <Icon icon={AltArrowLeft} />
+        {count}
-        <span class="text-sm opacity-70">
+        {count === 1 ? "message" : "messages"} this week
-          {events.length}
+      </span>
-          {events.length === 1 ? "message" : "messages"}
+      <Button class="btn btn-sm btn-primary" onclick={handleReplyClick}>
-        </span>
+        <Icon icon={Reply} />
-      </div>
+        Reply
-      <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>
       </Button>
-    {/if}
+    </div>
   </div>
 </Button>

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

@@ -2,71 +2,136 @@
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {groupBy, ago, MONTH, first, last, uniq, avg, overlappingPairs} from "@welshman/lib"
+  import {groupBy, ago, WEEK, first, sortBy, now} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
+  import {MESSAGE, THREAD, ZAP_GOAL, EVENT_TIME, COMMENT, getTagValue} from "@welshman/util"
-  import {MESSAGE, getTagValue} from "@welshman/util"
   import History from "@assets/icons/history.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.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 ThreadCard from "@app/components/ThreadCard.svelte"
+  import GoalCard from "@app/components/GoalCard.svelte"
+  import CalendarEventCard from "@app/components/CalendarEventCard.svelte"
+  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(MONTH)
+  const since = ago(WEEK)
+  const currentTime = now()
+
   const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE], since}])
+  const threads = deriveEventsForUrl(url, [{kinds: [THREAD], since}])
+  const goals = deriveEventsForUrl(url, [{kinds: [ZAP_GOAL], since}])
+  const events = deriveEventsForUrl(url, [{kinds: [EVENT_TIME]}])
+  const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], since}])
 
-  const conversations = derived(messages, $messages => {
+  const recentActivity = derived(
-    const convs = []
+    [messages, threads, goals, events, comments],
+    ([$messages, $threads, $goals, $events, $comments]) => {
+      const activity: Array<{
+        type: "message" | "thread" | "goal" | "event" | "upcoming" | "comment"
+        event: any
+        timestamp: number
+        h?: string
+        latest?: any
+        count?: number
+        replyCount?: number
+      }> = []
 
-    for (const [h, messages] of groupBy(e => getTagValue("h", e.tags), $messages).entries()) {
+      const byRoom = groupBy(e => getTagValue("h", e.tags), $messages)
-      const avgTime = avg(overlappingPairs(messages).map(([a, b]) => a.created_at - b.created_at))
+      for (const [h, roomMessages] of byRoom.entries()) {
-      const groups: TrustedEvent[][] = []
+        const latest = first(roomMessages)
-      const group: TrustedEvent[] = []
+        if (latest) {
-
+          activity.push({
-      // Group conversations by time between messages
+            type: "message",
-      let prevCreatedAt = messages[0].created_at
+            event: latest,
-      for (const message of messages) {
+            timestamp: latest.created_at,
-        if (prevCreatedAt - message.created_at < avgTime) {
+            h,
-          group.push(message)
+            latest,
-        } else {
+            count: roomMessages.length,
-          groups.push(group.splice(0))
+          })
         }
-
-        prevCreatedAt = message.created_at
       }
 
-      if (group.length > 0) {
+      for (const thread of $threads) {
-        groups.push(group.splice(0))
+        const replies = $comments.filter(c => getTagValue("E", c.tags) === thread.id)
+        activity.push({
+          type: "thread",
+          event: thread,
+          timestamp: thread.created_at,
+          h: getTagValue("h", thread.tags),
+          replyCount: replies.length,
+        })
       }
 
-      // Convert each group into a conversation
+      for (const goal of $goals) {
-      for (const events of groups) {
+        const replies = $comments.filter(c => getTagValue("E", c.tags) === goal.id)
-        if (events.length < 2) {
+        activity.push({
-          continue
+          type: "goal",
-        }
+          event: goal,
-
+          timestamp: goal.created_at,
-        const latest = first(events)!
+          h: getTagValue("h", goal.tags),
-        const earliest = last(events)!
+          replyCount: replies.length,
-        const participants = uniq(events.map(msg => msg.pubkey))
+        })
-
-        convs.push({h, events, latest, earliest, participants})
       }
-    }
 
-    return convs
+      const pastEvents = $events.filter(e => {
-  })
+        const start = getTagValue("start", e.tags)
+        return start && parseInt(start) < currentTime
+      })
+      for (const event of pastEvents.slice(0, 5)) {
+        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,
+        })
+      }
 
-  let limit = $state(3)
+      const upcomingEvents = $events.filter(e => {
+        const start = getTagValue("start", e.tags)
+        return start && parseInt(start) >= currentTime
+      })
+      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)
+    },
+  )
+
+  let limit = $state(20)
   let element: Element | undefined = $state()
 
   onMount(() => {
     const scroller = createScroller({
       element: element!,
       onScroll: () => {
-        limit += 3
+        limit += 10
       },
     })
 
@@ -92,26 +157,37 @@
 
 <div bind:this={element}>
   <PageContent class="flex flex-col gap-2 p-2 pt-4">
-    {#if $conversations.length === 0}
+    {#if $recentActivity.length === 0}
-      {#if $messages.length > 0}
+      <div class="flex flex-col items-center gap-4 py-12 text-center">
-        {@const events = $messages.slice(0, 1)}
+        <Icon icon={History} class="h-16 w-16 opacity-30" />
-        {@const event = events[0]}
+        <div class="flex flex-col gap-2">
-        {@const h = getTagValue("h", event.tags)}
+          <h3 class="text-lg font-semibold">No Recent Activity</h3>
-        <ConversationCard
+          <p class="opacity-70">There hasn't been any activity in the last week.</p>
-          {h}
-          {url}
-          {events}
-          latest={event}
-          earliest={event}
-          participants={[event.pubkey]} />
-      {:else}
-        <div class="py-8 text-center opacity-70">
-          <p>No recent conversations</p>
         </div>
-      {/if}
+        <div class="flex flex-col gap-2">
+          <Button class="btn-primary" onclick={() => goToSpace(url)}>
+            <Icon icon={Add} />
+            Browse Rooms
+          </Button>
+        </div>
+      </div>
     {:else}
-      {#each $conversations.slice(0, limit) as { h, events, latest, earliest, participants } (latest.id)}
+      {#each $recentActivity.slice(0, limit) as activity (activity.event.id)}
-        <ConversationCard {h} {url} {events} {latest} {earliest} {participants} />
+        {#if activity.type === "message"}
+          <ConversationCard
+            {url}
+            h={activity.h}
+            latest={activity.latest}
+            count={activity.count || 0} />
+        {:else if activity.type === "thread"}
+          <ThreadCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+        {:else if activity.type === "goal"}
+          <GoalCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+        {:else if activity.type === "event" || activity.type === "upcoming"}
+          <CalendarEventCard {url} event={activity.event} replyCount={activity.replyCount || 0} />
+        {:else if activity.type === "comment"}
+          <CommentCard {url} event={activity.event} />
+        {/if}
       {/each}
     {/if}
   </PageContent>