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]);
+  }
+}

src/routes/+page.svelte

@@ -1,6 +1,56 @@
 <script lang="ts">
-  import { threads } from "$lib/mock";
-  import ThreadItem from "$lib/components/ThreadItem.svelte";
+  import { onMount } from "svelte";
+  import {
+    threadStore,
+    loadThreads,
+    type ThreadData,
+  } from "$lib/threads.svelte";
+  import ThreadItem, {
+    type ThreadRow,
+    type Author,
+  } from "$lib/components/ThreadItem.svelte";
+  import type { NostrUser } from "@nostr/gadgets/metadata";
+
+  onMount(loadThreads);
+
+  function relativeTime(ts: number): string {
+    const diff = Math.floor(Date.now() / 1000) - ts;
+    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+    return `${Math.floor(diff / 86400)}d`;
+  }
+
+  function resolveAuthor(
+    pubkey: string,
+    profiles: Record<string, NostrUser>,
+  ): Author {
+    const user = profiles[pubkey];
+    return {
+      pubkey,
+      name: user?.shortName ?? pubkey.slice(0, 8),
+      picture: user?.metadata.picture,
+    };
+  }
+
+  function toRow(
+    t: ThreadData,
+    profiles: Record<string, NostrUser>,
+  ): ThreadRow {
+    return {
+      id: t.id,
+      title: t.title,
+      author: resolveAuthor(t.authorPubkey, profiles),
+      replyCount: t.replyCount,
+      repliers: t.replierPubkeys.map((pk) => resolveAuthor(pk, profiles)),
+      lastActiveAuthor: resolveAuthor(t.latestPubkey, profiles),
+      lastActivity: relativeTime(t.latestAt),
+      score: 0,
+    };
+  }
+
+  const rows = $derived(
+    threadStore.threads.map((t) => toRow(t, threadStore.profiles)),
+  );
 </script>
 
 <svelte:head>
@@ -18,7 +68,7 @@
   </div>
 
   <div>
-    {#each threads as thread}
+    {#each rows as thread}
       <ThreadItem {thread} />
     {/each}
   </div>

src/routes/room/[slug]/+page.svelte

@@ -1,10 +1,29 @@
 <script lang="ts">
-  import { threads, rooms } from "$lib/mock";
-  import ThreadItem from "$lib/components/ThreadItem.svelte";
+  import { threads, rooms, type Thread } from "$lib/mock";
+  import ThreadItem, {
+    type ThreadRow,
+  } from "$lib/components/ThreadItem.svelte";
   import { page } from "$app/state";
 
   const slug = $derived(page.params.slug);
   const room = $derived(rooms.find((r) => r.slug === slug));
+
+  function mockToRow(t: Thread): ThreadRow {
+    return {
+      id: t.id,
+      title: t.title,
+      author: t.op.author,
+      replyCount: t.replyCount,
+      repliers: t.participants
+        .filter((p) => p.pubkey !== t.op.author.pubkey)
+        .slice(0, 4),
+      lastActiveAuthor: t.participants[t.participants.length - 1],
+      lastActivity: t.lastActivity,
+      score: t.op.reactions.reduce((s, r) => s + r.count, 0) + t.op.zaps,
+    };
+  }
+
+  const rows = $derived(threads.map(mockToRow));
 </script>
 
 <svelte:head>
@@ -22,7 +41,7 @@
   </div>
 
   <div>
-    {#each threads as thread}
+    {#each rows as thread}
       <ThreadItem {thread} />
     {/each}
   </div>