Fetch and show real threads

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>