Update comment threads and tweak layout

sant0s12 · Mar 17, 2024 · c2be9ed · c2be9ed
1 parent e488aca
commit c2be9ed
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/src/lib/components/Comment.svelte b/src/lib/components/Comment.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { CommunityPost } from '$lib/nostr';
+	import { Card, Heading } from 'flowbite-svelte';
+	import PostInteraction from '$lib/components/PostInteraction.svelte';
+	import { base } from '$app/paths';
+	import PostHeader from './PostHeader.svelte';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+
+	export let post: NDKEvent;
+	export let showCommunity: boolean = false;
+</script>
+
+<div class="space-y-1">
+	<PostHeader {post} {showCommunity} />
+	<div class="flex flex-row w-auto">
+		<p class="break-all hyphens-auto line-clamp-5">{post.content}</p>
+	</div>
+	<PostInteraction {post} hideCommentsButton showReplyButton />
+</div>
diff --git a/src/lib/components/PostInteraction.svelte b/src/lib/components/PostInteraction.svelte
@@ -3,12 +3,21 @@
 	import { getPostReactions, CommunityPost } from '$lib/nostr';
 	import ndk from '$lib/stores/ndk';
 	import { Button, ButtonGroup, Spinner } from 'flowbite-svelte';
-	import { ChevronDownOutline, ChevronUpOutline, MessageDotsSolid } from 'flowbite-svelte-icons';
+	import {
+		ChevronDownOutline,
+		ChevronUpOutline,
+		MessageDotsSolid,
+		ReplyOutline,
+		ReplySolid
+	} from 'flowbite-svelte-icons';
 	import { kinds } from 'nostr-tools';
 	import { onMount } from 'svelte';
 	import { toast } from 'svelte-french-toast';
+	import ReplyThread from './ReplyThread.svelte';
 
 	export let post: CommunityPost;
+	export let hideCommentsButton = false;
+	export let showReplyButton = false;
 
 	let comments = 0;
 
@@ -93,7 +102,7 @@
 	}
 </script>
 
-<div class="flex flex-row w-full pt-2 space-x-2 items-stretch h-10">
+<div class="flex flex-row w-full space-x-2 h-8">
 	<ButtonGroup>
 		<Button
 			disabled={clickedVote != 0}
@@ -122,9 +131,17 @@
 			{/if}
 		</Button>
 	</ButtonGroup>
-	<Button href="{base}/post/{post.id}" color="alternative" size="xs">
-		<MessageDotsSolid class="me-1" />
-		{comments}
-	</Button>
+	{#if !hideCommentsButton}
+		<Button href="{base}/post/{post.id}" color="alternative" size="xs">
+			<MessageDotsSolid class="me-1" />
+			{comments}
+		</Button>
+	{/if}
+	{#if showReplyButton}
+		<Button outline={false} class="!focus:outline-0 py-1 px-1 border-0" color="light" size="xs">
+			<ReplyOutline size="sm" class="me-1" />
+			Reply
+		</Button>
+	{/if}
 	<div class="ml-auto"></div>
 </div>
diff --git a/src/lib/components/ReplyThread.svelte b/src/lib/components/ReplyThread.svelte
@@ -3,6 +3,7 @@
 	import ndk from '$lib/stores/ndk';
 	import { Button } from 'flowbite-svelte';
 	import { ChevronDoubleDownOutline, ChevronDoubleDownSolid } from 'flowbite-svelte-icons';
+	import Comment from './Comment.svelte';
 
 	export let event: NDKEvent;
 
@@ -43,9 +44,7 @@
 		{#if isRoot || showNested > 0}
 			{#each directChildren as child}
 				<li class="ml-2 space-y-2">
-					<p class="border">
-						{child.content}
-					</p>
+					<Comment post={child} showCommunity={false} />
 					<svelte:self event={child} {rootId} showNested={showNested - 1} />
 				</li>
 			{/each}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -91,7 +91,7 @@
 		</Navbar>
 	</header>
 
-	<div class="grid grid-cols-[1fr_min-content_minmax(0,640px)_min-content_1fr]">
+	<div class="grid grid-cols-[0.8fr_min-content_minmax(0,768px)_min-content_1fr]">
 		{#key sidebarOpen}
 			<div
 				class="fixed h-screen top-0 left-0