feat(PRPage): display pr commits and responses

- add thread wrapper
 - add event wrapper
 - display pr events

src/lib/components/events/EventWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import UserHeader from "../users/UserHeader.svelte";
+    import type { User } from "../users/type";
+    import { defaults as user_defaults } from "../users/type";
+
+    export let author: User = { ...user_defaults };
+</script>
+
+<div class="pl-3 p-3 border-b border-base-300">
+    <UserHeader user={author} />
+    <div class="ml-11">
+        <slot />
+    </div>
+</div>

src/lib/components/events/ThreadWrapper.svelte

@@ -0,0 +1,3 @@
+<div class="border-l border-blue-500 pl-1">
+    <slot />
+</div>

src/lib/components/events/type.ts

@@ -0,0 +1,12 @@
+import { defaults as user_defaults } from "../users/type";
+import type { User } from "../users/type";
+
+export interface Event {
+    author: User;
+    content: any;
+}
+
+let defaults: Event = {
+    author: { ...user_defaults },
+    content: [],
+}

src/lib/components/prs/type.ts

@@ -1,5 +1,7 @@
 import type { User } from "../users/type";
 import { defaults as user_defaults } from "../users/type";
+import type { Event } from "../events/type";
+import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
 export interface PRSummary {
     title: string;
@@ -35,11 +37,15 @@ export const summaries_defaults: PRSummaries = {
 
 export interface PRFull {
     summary: PRSummary;
+    pr_event: NDKEvent | undefined;
+    events: Event[];
     loading: boolean;
 }
 
 export const full_defaults: PRFull = {
     summary: { ...summary_defaults },
+    pr_event: undefined,
+    events: [],
     loading: true,
 };
 

src/lib/stores/PR.ts

@@ -50,6 +50,7 @@ export let ensurePRFull = (repo_id: string, pr_id: string) => {
                 selected_pr_full.update(full => {
                     return {
                         ...full,
+                        pr_event: event,
                         summary: {
                             ...full.summary,
                             title: event.tagValue("name") || "",

src/lib/wrappers/EventCard.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import EventWrapper from "$lib/components/events/EventWrapper.svelte";
+    import type { User } from "$lib/components/users/type";
+    import { defaults as user_defaults } from "$lib/components/users/type";
+    import { ensureUser } from "$lib/stores/users";
+    import type { NDKEvent } from "@nostr-dev-kit/ndk";
+    import { onDestroy } from "svelte";
+    import { writable } from "svelte/store";
+
+    export let event: NDKEvent;
+
+    let author = writable({ ...user_defaults });
+    let author_unsubsriber = ensureUser(event.pubkey).subscribe((u) => {
+        author.set({ ...u });
+    });
+    onDestroy(() => {
+        author_unsubsriber();
+    });
+</script>
+
+<EventWrapper author={$author}>{event.content}</EventWrapper>

src/lib/wrappers/Thread.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { User } from "$lib/components/users/type";
+    import { defaults as user_defaults } from "$lib/components/users/type";
+    import { ndk } from "$lib/stores/ndk";
+    import { ensureUser } from "$lib/stores/users";
+    import type { NDKEvent } from "@nostr-dev-kit/ndk";
+    import { onDestroy } from "svelte";
+    import EventCard from "./EventCard.svelte";
+    import ThreadWrapper from "$lib/components/events/ThreadWrapper.svelte";
+
+    export let event: NDKEvent;
+
+    let replies = ndk.storeSubscribe({
+        "#e": [event.id],
+    });
+</script>
+
+<EventCard {event} />
+
+<ThreadWrapper>
+    {#each $replies as event}
+        <EventCard {event} />
+    {/each}
+</ThreadWrapper>

src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte

@@ -3,6 +3,7 @@
     import { ensurePRFull, selected_pr_full } from "$lib/stores/PR";
     import PrHeader from "$lib/components/prs/PRHeader.svelte";
     import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
+    import Thread from "$lib/wrappers/Thread.svelte";
 
     export let data: {
         repo_id: string;
@@ -21,8 +22,9 @@
 
 <div class="flex">
     <div class="w-2/3 mx-2">
-        <div>placeholder for PR summary</div>
-        <div>placeholder for all related events</div>
+        {#if $selected_pr_full.pr_event}
+            <Thread event={$selected_pr_full.pr_event} />
+        {/if}
     </div>
     <div class="w-1/3 mx-2 prose">
         <div>placeholder for status, tags, contributors</div>