Problem: Can't Comment On Problems

Solution:
Create a comments component - publish events of kind 1 with root marker for parent comments and with reply marker for threaded replies

src/components/comments/Comment.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+    import {
+        Button,
+        InlineNotification,
+        StructuredList,
+        StructuredListBody,
+        StructuredListCell,
+        StructuredListHead,
+        StructuredListRow,
+        TextArea,
+        ToastNotification
+    } from "carbon-components-svelte";
+    import {NDKEvent} from "@nostr-dev-kit/ndk";
+    import {ndk} from "$lib/stores/event_sources/relays/ndk";
+    import {currentUser} from "$lib/stores/hot_resources/current-user";
+    import {onMount} from "svelte";
+    import CommentUser from "./CommentUser.svelte";
+    import {formatDateTime} from "$lib/helpers/mundane";
+
+    export let parentId: string;
+    export let isRoot: boolean = false
+
+    let comment: string
+    let commentEvents: Set<NDKEvent>
+    let selectedCommentId: string;
+    let toastTimeout: number = 0;
+
+    const postComment = async (content: string) => {
+        const ndkEvent = new NDKEvent($ndk)
+        const eventMarker = isRoot ? 'root' : 'reply'
+        const eventId = isRoot ? parentId : selectedCommentId
+
+        ndkEvent.kind = 1
+        ndkEvent.content = content
+        ndkEvent.tags = [...ndkEvent.tags, ...[["e", eventId, "", eventMarker], ["p", $currentUser!.pubkey]]]
+        await ndkEvent.publish()
+
+        toastTimeout = 2000
+        comment = ''
+        const timeout = setTimeout(() => {
+            toastTimeout = 0
+            clearTimeout(timeout)
+        }, toastTimeout)
+    }
+
+    const onReplyComment = (commentId) => {
+        selectedCommentId = commentId
+        isRoot = false
+    }
+
+    onMount(() => {
+        (async () => {
+            commentEvents = await $ndk.fetchEvents({kinds: [1], '#e': [parentId]})
+        })()
+    })
+
+</script>
+
+
+{#if commentEvents}
+    {#each commentEvents?.entries() as [key, commentEvent]}
+        <StructuredList key={commentEvent.id} style="margin-bottom: 1rem">
+            <StructuredListHead>
+                <StructuredListRow head style="border-bottom: none; padding-bottom: 0">
+                    <StructuredListCell head style="display: flex; align-items: center; justify-content: space-between">
+                        <div>
+                            <CommentUser pubkey={commentEvent.pubkey}/>
+                            <span style="color: rgb(148, 163, 184);">
+                                &nbsp;commented {formatDateTime(commentEvent.created_at)}
+                            </span>
+                        </div>
+
+                        <Button kind="ghost" size="small" on:click={() => onReplyComment(commentEvent.id)}>reply
+                        </Button>
+                    </StructuredListCell>
+                </StructuredListRow>
+            </StructuredListHead>
+            <StructuredListBody>
+                <StructuredListRow>
+                    <StructuredListCell>
+                        {commentEvent.content}
+                    </StructuredListCell>
+                </StructuredListRow>
+            </StructuredListBody>
+        </StructuredList>
+    {/each}
+{/if}
+
+{#if $currentUser}
+    {#if toastTimeout > 0}
+        <ToastNotification
+                fullWidth
+                kind="success"
+                title="Success"
+                subtitle="Your comment has been successfully posted"
+                timeout={toastTimeout}
+        />
+    {/if}
+    <TextArea hideLabel placeholder="Write your comment here..." bind:value={comment}/>
+    <Button size="field" style="margin-top: 1rem; text-align: center" on:click={() => postComment(comment)}>
+        Comment
+    </Button>
+{:else}
+    <InlineNotification
+            fullWidth
+            hideCloseButton
+            kind="warning"
+            title="Login required:"
+            subtitle="You need to login to post a comment."
+    />
+{/if}
+
+
+

src/components/comments/CommentUser.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type {NDKUser, NDKUserProfile} from "@nostr-dev-kit/ndk";
+    import {ndk} from "$lib/stores/event_sources/relays/ndk";
+
+    export let pubkey: string;
+
+    let commentUser: NDKUser;
+    let userProfile: NDKUserProfile | undefined
+
+    $: if (userProfile === undefined) {
+        (async () => {
+            commentUser = $ndk.getUser({ hexpubkey: pubkey });
+            await commentUser.fetchProfile();
+            userProfile = commentUser?.profile
+        })()
+    }
+</script>
+
+
+<span style="color: #fb923c">{userProfile?.name}</span>
+

src/lib/helpers/mundane.ts

@@ -1,5 +1,12 @@
 import type { NDKEvent } from "@nostr-dev-kit/ndk";
 import * as showdown from "showdown";
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInMonths,
+  differenceInSeconds, differenceInYears, format
+} from "date-fns";
 
 export function unixTimeNow() {
   return Math.floor(new Date().getTime() / 1000);
@@ -67,3 +74,30 @@ const bindings = Object.keys(classMap).map((key) => ({
   regex: new RegExp(`<${key}(.*)>`, "g"),
   replace: `<${key} class="${classMap[key]}" $1>`,
 }));
+
+
+/**
+ *
+ * @param unixTimestamp
+ */
+export const formatDateTime = (unixTimestamp: number): string => {
+  const now = new Date();
+  const timestampDate = new Date(unixTimestamp * 1000);
+
+  const diffInSeconds = differenceInSeconds(now, timestampDate);
+  const diffInMinutes = differenceInMinutes(now, timestampDate);
+  const diffInHours = differenceInHours(now, timestampDate);
+  const diffInDays = differenceInDays(now, timestampDate);
+  const diffInMonths = differenceInMonths(now, timestampDate);
+  const diffInYears = differenceInYears(now, timestampDate);
+
+  if (diffInSeconds < 60) return `${diffInSeconds} seconds ago`;
+  if (diffInMinutes < 60) return `${diffInMinutes} minutes ago`;
+  if (diffInHours < 24) return `${diffInHours} hours ago`;
+  if (diffInDays < 3) return `${diffInDays} days ago`;
+  if (diffInMonths < 11) return format(timestampDate, "d MMM, h:mm a");
+  if (diffInMonths >= 11 || diffInYears >= 1)
+    return `${diffInYears} years ago`;
+
+  return "";
+};

src/routes/problems/[id]/+page.svelte

@@ -28,6 +28,7 @@
   import LogNewProblemModal from "../../../components/problems/LogNewProblemModal.svelte";
   import { HandleProblemEvent, hasOpenChildren } from "$lib/stores/nostrocket_state/soft_state/simplifiedProblems";
   import { rootProblem } from "../../../settings";
+  import Comment from "../../../components/comments/Comment.svelte";
 
   let problem: Problem | undefined;
   let createdBy: NDKUserProfile | undefined;
@@ -125,6 +126,12 @@
           >{@html makeHtml(problem?.FullText)}</Column
         >
       </Row>
+
+      <Row padding>
+        <Column>
+            <Comment parentId={problem?.UID} isRoot={true} />
+        </Column>
+      </Row>
     </Column>
 
     <Column md={2} lg={3} class="problem-sidebar">
@@ -314,3 +321,4 @@
     </Column>
   </Row>
 {/if}
+

src/routes/styles.css

@@ -53,3 +53,7 @@ html {
     justify-content: left;
   }
 }
+
+.bx--structured-list-td, .bx--structured-list-th {
+  padding: 1rem 0 !important;
+}