From d8b87db784ac4fb2f5bde2a8a975fde34069a9e1 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 5 Jun 2025 10:16:05 -0700
Subject: [PATCH] Flesh out recent activity component

---
 CLAUDE.md                                     |  71 +------
 src/app/components/Content.svelte             |   2 +-
 src/app/components/SpaceRecentActivity.svelte | 187 +++++++++---------
 3 files changed, 102 insertions(+), 158 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 682c0d22..f9017159 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,28 +6,6 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 Flotilla is a Discord-like Nostr client that operates on the concept of "relays as groups/spaces." Built with SvelteKit 2.5 and Svelte 5, it provides messaging, threads, calendar events, and social features across Nostr relays.
 
-## Development Commands
-
-```bash
-# Development
-pnpm run dev          # Start dev server on port 1847
-pnpm run check        # TypeScript checking
-pnpm run check:watch  # Watch mode TypeScript checking
-
-# Production
-pnpm run build        # Custom build with env processing
-./build.sh            # Main build script with PWA assets
-pnpm run sourcemaps   # Build with sourcemap upload
-
-# Code Quality
-pnpm run lint         # ESLint + Prettier checking
-pnpm run format       # Auto-format with Prettier
-
-# Mobile
-pnpm run release:android  # Android APK build
-npx cap sync             # Sync web assets to native
-```
-
 ## Architecture
 
 ### Core Technology Stack
@@ -37,58 +15,18 @@ npx cap sync             # Sync web assets to native
 - **Capacitor 7** - Cross-platform mobile deployment
 - **TypeScript** - Full type safety throughout
 
-### Key Directories
-- `/src/app/state.ts` - Global state management, stores, derived values
-- `/src/app/components/` - 80+ feature-specific Svelte components
-- `/src/lib/components/` - Shared/generic UI components
-- `/src/routes/` - SvelteKit file-based routing with dynamic relay/room routes
-- `/src/app/commands.ts` - User actions and business logic
-- `/src/assets/icons/` - 60+ custom SVG icons
-
 ### State Management Patterns
 - Svelte stores with Welshman reactive patterns
 - Repository pattern for Nostr event storage with 10k event limit
 - Derived stores for computed values and real-time updates
 - Event-based architecture with reactive data flow
 
-### Nostr Integration Architecture
-- **NIP-29 support** - Group chat functionality via relays
-- **NIP-46 support** - Remote signing (Nostr Connect/Bunker)
-- **Event unwrapping** - Handles gift-wrapped messages for privacy
-- **Real-time relay management** - Automatic connection and authentication
-- **Web of trust calculations** - User reputation and content filtering
-
-### Mobile & PWA Features
-- Responsive navigation (drawer on mobile, sidebar on desktop)
-- Capacitor integration for native mobile apps
-- PWA with offline support and auto-updating
-- Safe area handling for iOS/Android
-
-## Environment Configuration
-
-All environment variables are optional and enable platform customization:
-
-```bash
-# Branding
-VITE_PLATFORM_NAME="Custom Name"
-VITE_PLATFORM_LOGO="/custom-logo.png"
-VITE_PLATFORM_DESCRIPTION="Custom description"
-
-# Platform Mode (single-relay instance)
-VITE_PLATFORM_RELAYS="wss://relay.example.com"
-
-# Bootstrap and Discovery
-VITE_DEFAULT_PUBKEYS="npub1...,npub2..."  # Web of trust seed
-VITE_INDEXER_RELAYS="wss://indexer1.com,wss://indexer2.com"
-
-# Monitoring
-VITE_GLITCHTIP_API_KEY="..."  # Error reporting
-```
-
-The `build.sh` script processes these variables and generates theme files.
-
 ## Important Patterns
 
+### Finding Code
+- Prefer navigating from one file to the next following imports when possible
+- If search is necessary, use `ack`, not `grep` or `rg`.
+
 ### Component Organization
 - Components are organized by feature (Chat, Calendar, Profile, Space)
 - Use existing components from `/lib/components/` before creating new ones
@@ -103,6 +41,7 @@ The `build.sh` script processes these variables and generates theme files.
 - Events flow through the repository pattern in `state.ts`
 - Use Welshman utilities for event validation and parsing
 - Handle both plain and gift-wrapped events for privacy
+- Prefer seconds to milliseconds when handling nostr events.
 
 ### Styling Conventions
 - TailwindCSS with DaisyUI components
diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index 776d6ddd..ec947b03 100644
--- a/src/app/components/Content.svelte
+++ b/src/app/components/Content.svelte
@@ -130,7 +130,7 @@
     </div>
   {:else}
     <div
-      class="flex flex-col overflow-hidden text-ellipsis break-words"
+      class="overflow-hidden text-ellipsis break-words"
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i}
         {#if isNewline(parsed) && !isBlock(i - 1)}
diff --git a/src/app/components/SpaceRecentActivity.svelte b/src/app/components/SpaceRecentActivity.svelte
index 14b2d0c5..c0b7473c 100644
--- a/src/app/components/SpaceRecentActivity.svelte
+++ b/src/app/components/SpaceRecentActivity.svelte
@@ -1,70 +1,70 @@
 <script lang="ts">
+  import {derived} from "svelte/store"
+  import {groupBy, 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 {formatTimestamp} from "@welshman/lib"
+  import {deriveEventsForUrl} from "@app/state"
 
-  interface Props {
+  type Props = {
     url: string
   }
 
   const {url}: Props = $props()
 
-  // Mock conversation data similar to Slack's threads view
-  const mockConversations = [
-    {
-      id: "conv1",
-      starter: {
-        pubkey: "npub1xyz123",
-        content:
-          "What's everyone's thoughts on the new relay implementation? I'm seeing some interesting performance improvements...",
-        timestamp: Date.now() - 3600000, // 1 hour ago
-      },
-      room: "general",
-      replyCount: 12,
-      lastActivity: Date.now() - 900000, // 15 minutes ago
-      participants: ["npub1abc", "npub1def", "npub1ghi", "npub1jkl"],
-      latestReply: {
-        pubkey: "npub1abc",
-        content: "The latency improvements are definitely noticeable in my tests",
-      },
-    },
-    {
-      id: "conv2",
-      starter: {
-        pubkey: "npub2abc456",
-        content:
-          "Has anyone tried the new calendar integration? Looking for feedback before we roll it out to more spaces",
-        timestamp: Date.now() - 7200000, // 2 hours ago
-      },
-      room: "development",
-      replyCount: 8,
-      lastActivity: Date.now() - 1800000, // 30 minutes ago
-      participants: ["npub2def", "npub2ghi", "npub2jkl"],
-      latestReply: {
-        pubkey: "npub2def",
-        content: "Works great on mobile, had one small sync issue but figured it out",
-      },
-    },
-    {
-      id: "conv3",
-      starter: {
-        pubkey: "npub3def789",
-        content:
-          "Quick question about zap splitting - should we implement this at the relay level or client level?",
-        timestamp: Date.now() - 10800000, // 3 hours ago
-      },
-      room: "random",
-      replyCount: 5,
-      lastActivity: Date.now() - 3600000, // 1 hour ago
-      participants: ["npub3abc", "npub3ghi"],
-      latestReply: {
-        pubkey: "npub3abc",
-        content: "I think client level makes more sense for privacy",
-      },
-    },
-  ]
+  const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE]}])
+
+  const conversations = derived(messages, $messages => {
+    const convs = []
+
+    for (const [room, messages] of groupBy(e => getTagValue("h", e.tags), $messages).entries()) {
+      const avgTime = avg(overlappingPairs(messages).map(([a, b]) => a.created_at - b.created_at))
+      const groups: TrustedEvent[][] = []
+      const group: TrustedEvent[] = []
+
+      // Group conversations by time between messages
+      let prevCreatedAt = messages[0].created_at
+      for (const message of messages) {
+        if (prevCreatedAt - message.created_at < avgTime) {
+          group.push(message)
+        } else {
+          groups.push(group.splice(0))
+        }
+
+        prevCreatedAt = message.created_at
+      }
+
+      if (group.length > 0) {
+        groups.push(group.splice(0))
+      }
+
+      // Convert each group into a conversation
+      for (const events of groups) {
+        if (events.length < 2) {
+          continue
+        }
+
+        const latest = first(events)!
+        const earliest = last(events)!
+        const participants = uniq(events.map(msg => msg.pubkey))
+
+        convs.push({room, events, latest, earliest, participants})
+      }
+    }
+
+    return convs
+  })
+
+  const viewMore = () => {
+    limit += 3
+  }
+
+  let limit = $state(3)
 </script>
 
 <div class="card2 bg-alt">
@@ -74,53 +74,58 @@
       Recent Conversations
     </h3>
     <div class="flex flex-col gap-4">
-      {#each mockConversations as conversation (conversation.id)}
-        <div class="card2 bg-alt">
-          <div class="flex flex-col gap-3">
-            <div class="flex items-start gap-3">
-              <ProfileCircle pubkey={conversation.starter.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">#{conversation.room}</span>
-                  <span class="opacity-50">•</span>
-                  <span>{formatTimestamp(conversation.starter.timestamp)}</span>
-                </div>
-                <div class="flex flex-col gap-2">
-                  <p class="text-base leading-relaxed">{conversation.starter.content}</p>
+      {#if $conversations.length === 0}
+        <div class="py-8 text-center opacity-70">
+          <p>No recent conversations</p>
+        </div>
+      {:else}
+        {#each $conversations.slice(0, limit) as { room, events, latest, earliest, participants } (latest.id)}
+          <div class="card2 bg-alt">
+            <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={200} event={earliest} />
                 </div>
               </div>
-            </div>
-            <div class="ml-13 flex items-center justify-between">
-              <div class="flex items-center gap-4">
-                <span class="flex items-center gap-2 text-sm opacity-70">
-                  <Icon icon="alt-arrow-left" size={4} />
-                  {conversation.replyCount} replies
+              <div class="ml-13 flex items-center justify-between">
+                <div class="flex items-center gap-4">
+                  <span class="flex items-center gap-2 text-sm opacity-70">
+                    <Icon icon="alt-arrow-left" size={4} />
+                    {events.length} messages
+                  </span>
+                  <div class="flex -space-x-2">
+                    <ProfileCircles pubkeys={participants} size={6} />
+                  </div>
+                </div>
+                <span class="text-sm opacity-50">
+                  {formatTimestamp(latest.created_at)}
                 </span>
-                <div class="flex -space-x-2">
-                  <ProfileCircles pubkeys={conversation.participants} size={6} />
-                </div>
               </div>
-              <span class="text-sm opacity-50">
-                {formatTimestamp(conversation.lastActivity)}
-              </span>
-            </div>
-            {#if conversation.latestReply}
               <div class="card2 bg-alt">
                 <div class="flex flex-col gap-2">
                   <div class="flex items-center gap-2 text-sm opacity-70">
-                    <ProfileCircle pubkey={conversation.latestReply.pubkey} size={5} />
+                    <ProfileCircle pubkey={latest.pubkey} size={5} />
                     <span class="font-medium">Latest reply:</span>
                   </div>
-                  <p class="text-sm leading-relaxed opacity-90">
-                    {conversation.latestReply.content}
-                  </p>
+                  <Content minimalQuote minLength={100} maxLength={200} event={latest} />
                 </div>
               </div>
-            {/if}
+            </div>
           </div>
-        </div>
-      {/each}
-      <Button class="btn btn-primary btn-sm">View all conversations →</Button>
+        {/each}
+        {#if $conversations.length > limit}
+          <Button class="btn btn-primary" onclick={viewMore}>
+            View more conversations
+            <Icon icon="alt-arrow-down" />
+          </Button>
+        {/if}
+      {/if}
     </div>
   </div>
 </div>