From 4861420d6311c7c07c15ae39e59c3ec02b4e4e89 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Fri, 12 Jan 2024 00:00:00 +0000
Subject: [PATCH] feat(PRPage): display pr commits and responses

 - add thread wrapper
 - add event wrapper
 - display pr events
---
 src/lib/components/events/EventWrapper.svelte | 14 +++++++++++
 .../components/events/ThreadWrapper.svelte    |  3 +++
 src/lib/components/events/type.ts             | 12 ++++++++++
 src/lib/components/prs/type.ts                |  6 +++++
 src/lib/stores/PR.ts                          |  1 +
 src/lib/wrappers/EventCard.svelte             | 21 ++++++++++++++++
 src/lib/wrappers/Thread.svelte                | 24 +++++++++++++++++++
 .../repo/[repo_id]/pr/[pr_id]/+page.svelte    |  6 +++--
 8 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/events/EventWrapper.svelte
 create mode 100644 src/lib/components/events/ThreadWrapper.svelte
 create mode 100644 src/lib/components/events/type.ts
 create mode 100644 src/lib/wrappers/EventCard.svelte
 create mode 100644 src/lib/wrappers/Thread.svelte

diff --git a/src/lib/components/events/EventWrapper.svelte b/src/lib/components/events/EventWrapper.svelte
new file mode 100644
index 0000000..3a57a6d
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/events/ThreadWrapper.svelte b/src/lib/components/events/ThreadWrapper.svelte
new file mode 100644
index 0000000..d150fbd
--- /dev/null
+++ b/src/lib/components/events/ThreadWrapper.svelte
@@ -0,0 +1,3 @@
+<div class="border-l border-blue-500 pl-1">
+    <slot />
+</div>
diff --git a/src/lib/components/events/type.ts b/src/lib/components/events/type.ts
new file mode 100644
index 0000000..ef7247f
--- /dev/null
+++ b/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: [],
+}
\ No newline at end of file
diff --git a/src/lib/components/prs/type.ts b/src/lib/components/prs/type.ts
index 6ca9d52..c4c889d 100644
--- a/src/lib/components/prs/type.ts
+++ b/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,
 };
 
diff --git a/src/lib/stores/PR.ts b/src/lib/stores/PR.ts
index 7d5f43a..2ff35de 100644
--- a/src/lib/stores/PR.ts
+++ b/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") || "",
diff --git a/src/lib/wrappers/EventCard.svelte b/src/lib/wrappers/EventCard.svelte
new file mode 100644
index 0000000..72d7451
--- /dev/null
+++ b/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>
diff --git a/src/lib/wrappers/Thread.svelte b/src/lib/wrappers/Thread.svelte
new file mode 100644
index 0000000..d3e7e2d
--- /dev/null
+++ b/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>
diff --git a/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte b/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
index ecc2e91..09324a0 100644
--- a/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
+++ b/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>