Fetch and show real threads

src/lib/components/ThreadItem.svelte

@@ -1,16 +1,39 @@
 <script lang="ts">
-  import type { Thread } from "$lib/mock";
   import Tag from "./Tag.svelte";
 
-  type Props = { thread: Thread };
-  let { thread }: Props = $props();
+  export type Author = {
+    pubkey: string;
+    name: string;
+    picture?: string;
+  };
 
-  // Placeholder until scoring formula is defined
-  const score = $derived(
-    thread.op.reactions.reduce((s, r) => s + r.count, 0) + thread.op.zaps,
-  );
+  export type ThreadRow = {
+    id: string;
+    title: string;
+    author: Author;
+    replyCount: number;
+    repliers: Author[];
+    lastActiveAuthor: Author;
+    lastActivity: string;
+    score: number;
+  };
+
+  type Props = { thread: ThreadRow };
+  let { thread }: Props = $props();
 </script>
 
+{#snippet avatar(a: Author, cls: string)}
+  {#if a.picture}
+    <img src={a.picture} alt="" class={cls} />
+  {:else}
+    <span
+      class="{cls} flex items-center justify-center rounded-full bg-gray-200 text-[10px] font-semibold text-gray-500"
+    >
+      {a.name[0].toUpperCase()}
+    </span>
+  {/if}
+{/snippet}
+
 <a
   href="/thread/{thread.id}"
   class="flex items-center gap-6 border-b border-gray-100 py-4 hover:bg-gray-50"
@@ -20,55 +43,36 @@
     <div class="text-lg mb-1.5 text-gray-900 leading-6">{thread.title}</div>
     <div class="flex items-center gap-1.5 text-sm text-gray-500">
       <span>by</span>
-      <img
-        src={thread.op.author.picture}
-        alt={thread.op.author.name}
-        class="h-5 w-5 rounded-full"
-      />
-      {#if thread.participants.length > 1}
+      {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
+      {#if thread.repliers.length > 0}
         <span>and</span>
         <div class="flex -space-x-1.5">
-          {#each thread.participants
-            .filter((p) => p.pubkey !== thread.op.author.pubkey)
-            .slice(0, 4) as p}
-            <img
-              src={p.picture}
-              alt={p.name}
-              class="h-5 w-5 rounded-full ring-1 ring-white"
-            />
+          {#each thread.repliers as r, i}
+            <span class="relative" style="z-index: {thread.repliers.length - i}">
+              {@render avatar(r, "h-5 w-5 rounded-full object-cover ring-1 ring-white")}
+            </span>
           {/each}
         </div>
       {/if}
     </div>
   </div>
 
-  <!-- Col 2: tags -->
-  <div class="flex shrink-0 flex-wrap justify-end gap-1.5">
-    {#each thread.tags as tag}
-      <Tag label={tag.label} />
-    {/each}
-  </div>
-
   <!-- Col 3: replies | score | activity -->
   <div class="flex shrink-0 items-center gap-6">
     <div class="flex flex-col items-center gap-0.5">
-      <span class=" text-gray-800">{thread.replyCount}</span>
+      <span class="text-gray-800">{thread.replyCount}</span>
       <span class="text-sm text-gray-400">replies</span>
     </div>
 
     <div class="flex flex-col items-center gap-0.5">
-      <span class=" text-accent">{score}</span>
+      <span class="text-accent">{thread.score}</span>
       <span class="text-sm text-gray-400">score</span>
     </div>
 
     <div class="flex flex-col items-center gap-0.5">
       <div class="flex items-center gap-1">
-        <img
-          src={thread.participants[thread.participants.length - 1].picture}
-          alt={thread.participants[thread.participants.length - 1].name}
-          class="h-5 w-5 rounded-full"
-        />
-        <span class=" text-gray-800">{thread.lastActivity}</span>
+        {@render avatar(thread.lastActiveAuthor, "h-5 w-5 rounded-full object-cover")}
+        <span class="text-gray-800">{thread.lastActivity}</span>
       </div>
       <span class="text-sm text-gray-400">activity</span>
     </div>

src/lib/threads.svelte.ts

@@ -0,0 +1,105 @@
+import { SimplePool } from "@nostr/tools";
+import { loadNostrUser, type NostrUser } from "@nostr/gadgets/metadata";
+import { RELAY_URL, GROUP_ID } from "$lib/config";
+
+export type ThreadData = {
+  id: string;
+  title: string;
+  authorPubkey: string;
+  createdAt: number;
+  replyCount: number;
+  latestAt: number;
+  latestPubkey: string;
+  replierPubkeys: string[]; // unique reply authors, excl. OP, max 4
+};
+
+let threads = $state<ThreadData[]>([]);
+let profiles = $state<Record<string, NostrUser>>({});
+
+export const threadStore = {
+  get threads() { return threads; },
+  get profiles() { return profiles; },
+};
+
+async function loadProfile(pubkey: string) {
+  if (profiles[pubkey]) return;
+  const user = await loadNostrUser(pubkey);
+  profiles[pubkey] = user;
+}
+
+export async function loadThreads() {
+  const pool = new SimplePool();
+  try {
+    // Step 1: fetch threads
+    const events = await pool.querySync([RELAY_URL], {
+      kinds: [11],
+      "#h": [GROUP_ID],
+      limit: 50,
+    });
+
+    events.sort((a, b) => b.created_at - a.created_at);
+
+    threads = events.map((e) => ({
+      id: e.id,
+      title: e.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)",
+      authorPubkey: e.pubkey,
+      createdAt: e.created_at,
+      replyCount: 0,
+      latestAt: e.created_at,
+      latestPubkey: e.pubkey,
+      replierPubkeys: [],
+    }));
+
+    events.forEach((e) => loadProfile(e.pubkey));
+
+    if (events.length === 0) return;
+
+    // Step 2: fetch replies for all threads in one request
+    const replies = await pool.querySync([RELAY_URL], {
+      kinds: [1111],
+      "#E": events.map((e) => e.id),
+    });
+
+    // Aggregate per-thread reply data
+    const replyMap = new Map<
+      string,
+      { count: number; latestAt: number; latestPubkey: string; pubkeys: Set<string> }
+    >();
+
+    for (const reply of replies) {
+      const rootId = reply.tags.find((t) => t[0] === "E")?.[1];
+      if (!rootId) continue;
+      if (!replyMap.has(rootId)) {
+        replyMap.set(rootId, {
+          count: 0,
+          latestAt: 0,
+          latestPubkey: reply.pubkey,
+          pubkeys: new Set(),
+        });
+      }
+      const rd = replyMap.get(rootId)!;
+      rd.count++;
+      rd.pubkeys.add(reply.pubkey);
+      if (reply.created_at > rd.latestAt) {
+        rd.latestAt = reply.created_at;
+        rd.latestPubkey = reply.pubkey;
+      }
+    }
+
+    threads = threads.map((t) => {
+      const rd = replyMap.get(t.id);
+      if (!rd) return t;
+      return {
+        ...t,
+        replyCount: rd.count,
+        latestAt: rd.latestAt,
+        latestPubkey: rd.latestPubkey,
+        replierPubkeys: [...rd.pubkeys].slice(0, 4),
+      };
+    });
+
+    replies.forEach((r) => loadProfile(r.pubkey));
+  } finally {
+    pool.close([RELAY_URL]);
+  }
+}