From 2efd4969e7a3f905475fb1fd2af9cd656453b7b5 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Thu, 6 Nov 2025 12:47:35 +0100
Subject: [PATCH] add:enhance comments list with scroll, limit, and styling

- Add maxComments, showCommentForm and isScrollable props to
CommentsList
to limit displayed comments, toggle the form, and enable a scrollable
comments container. Show a "+N more comments" indicator when limited.
- Adjust CommentForm and list styles (padding, background, flex
behavior, responsive heights). Pass currentUserId and new props from
FindPreview and FindCard where applicable.
---
 src/lib/components/CommentForm.svelte  |  4 +-
 src/lib/components/CommentsList.svelte | 51 ++++++++++++++++++++++++--
 src/lib/components/FindCard.svelte     |  8 +++-
 src/lib/components/FindPreview.svelte  | 41 ++++++++++++++++++++-
 src/routes/+page.svelte                |  2 +-
 5 files changed, 98 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/CommentForm.svelte b/src/lib/components/CommentForm.svelte
index 19a2b7e..08faa7c 100644
--- a/src/lib/components/CommentForm.svelte
+++ b/src/lib/components/CommentForm.svelte
@@ -74,8 +74,10 @@
 
 <style>
 	.comment-form {
-		padding: 0.75rem 0;
+		padding: 0.75rem 1rem;
 		border-top: 1px solid hsl(var(--border));
+		background: hsl(var(--background));
+		flex-shrink: 0;
 	}
 
 	.input-container {
diff --git a/src/lib/components/CommentsList.svelte b/src/lib/components/CommentsList.svelte
index 96ffffa..6ebc642 100644
--- a/src/lib/components/CommentsList.svelte
+++ b/src/lib/components/CommentsList.svelte
@@ -9,9 +9,19 @@
 		findId: string;
 		currentUserId?: string;
 		collapsed?: boolean;
+		maxComments?: number;
+		showCommentForm?: boolean;
+		isScrollable?: boolean;
 	}
 
-	let { findId, currentUserId, collapsed = true }: CommentsListProps = $props();
+	let {
+		findId,
+		currentUserId,
+		collapsed = true,
+		maxComments,
+		showCommentForm = true,
+		isScrollable = false
+	}: CommentsListProps = $props();
 
 	let isExpanded = $state(!collapsed);
 	let hasLoadedComments = $state(false);
@@ -90,8 +100,8 @@
 					<button class="retry-button" onclick={loadComments}> Try again </button>
 				</div>
 			{:else}
-				<div class="comments">
-					{#each $commentsState.comments as comment (comment.id)}
+				<div class="comments" class:scrollable={isScrollable}>
+					{#each maxComments ? $commentsState.comments.slice(0, maxComments) : $commentsState.comments as comment (comment.id)}
 						<Comment
 							{comment}
 							showDeleteButton={canDeleteComment(comment)}
@@ -100,10 +110,19 @@
 					{:else}
 						<div class="no-comments">No comments yet. Be the first to comment!</div>
 					{/each}
+					{#if maxComments && $commentsState.comments.length > maxComments}
+						<div class="see-more">
+							<div class="see-more-text">
+								+{$commentsState.comments.length - maxComments} more comments
+							</div>
+						</div>
+					{/if}
 				</div>
 			{/if}
 
-			<CommentForm onSubmit={handleAddComment} />
+			{#if showCommentForm}
+				<CommentForm onSubmit={handleAddComment} />
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -131,12 +150,36 @@
 	.comments-container {
 		border-top: 1px solid hsl(var(--border));
 		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
 	}
 
 	.comments {
 		padding: 0.75rem 0;
 	}
 
+	.comments.scrollable {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem 1rem;
+		min-height: 0;
+	}
+
+	.see-more {
+		padding: 0.5rem 0;
+		border-top: 1px solid hsl(var(--border));
+		margin-top: 0.5rem;
+	}
+
+	.see-more-text {
+		text-align: center;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.75rem;
+		font-style: italic;
+	}
+
 	.no-comments {
 		text-align: center;
 		color: hsl(var(--muted-foreground));
diff --git a/src/lib/components/FindCard.svelte b/src/lib/components/FindCard.svelte
index 6e80801..211246b 100644
--- a/src/lib/components/FindCard.svelte
+++ b/src/lib/components/FindCard.svelte
@@ -148,7 +148,13 @@
 	<!-- Comments Section -->
 	{#if showComments}
 		<div class="comments-section">
-			<CommentsList findId={id} {currentUserId} collapsed={false} />
+			<CommentsList
+				findId={id}
+				{currentUserId}
+				collapsed={false}
+				maxComments={5}
+				showCommentForm={true}
+			/>
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/FindPreview.svelte b/src/lib/components/FindPreview.svelte
index c869bba..bc9d300 100644
--- a/src/lib/components/FindPreview.svelte
+++ b/src/lib/components/FindPreview.svelte
@@ -3,6 +3,7 @@
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
 	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+	import CommentsList from '$lib/components/CommentsList.svelte';
 
 	interface Find {
 		id: string;
@@ -30,9 +31,10 @@
 	interface Props {
 		find: Find | null;
 		onClose: () => void;
+		currentUserId?: string;
 	}
 
-	let { find, onClose }: Props = $props();
+	let { find, onClose, currentUserId }: Props = $props();
 
 	let showModal = $state(true);
 	let currentMediaIndex = $state(0);
@@ -251,6 +253,15 @@
 						</button>
 					</div>
 				</div>
+
+				<div class="comments-section">
+					<CommentsList
+						findId={find.id}
+						{currentUserId}
+						isScrollable={true}
+						showCommentForm={true}
+					/>
+				</div>
 			</div>
 		</SheetContent>
 	</Sheet>
@@ -542,6 +553,30 @@
 		background: hsl(var(--secondary) / 0.8);
 	}
 
+	.comments-section {
+		flex: 1;
+		min-height: 0;
+		border-top: 1px solid hsl(var(--border));
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Desktop comments section */
+	@media (min-width: 768px) {
+		.comments-section {
+			height: calc(100vh - 400px);
+			min-height: 200px;
+		}
+	}
+
+	/* Mobile comments section */
+	@media (max-width: 767px) {
+		.comments-section {
+			height: calc(80vh - 350px);
+			min-height: 150px;
+		}
+	}
+
 	/* Mobile specific adjustments */
 	@media (max-width: 640px) {
 		:global(.sheet-header) {
@@ -573,5 +608,9 @@
 		.action-button {
 			width: 100%;
 		}
+
+		.comments-section {
+			height: calc(80vh - 380px);
+		}
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2fe23a4..aae9dd4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -288,7 +288,7 @@
 {/if}
 
 {#if selectedFind}
-	<FindPreview find={selectedFind} onClose={closeFindPreview} />
+	<FindPreview find={selectedFind} onClose={closeFindPreview} currentUserId={data.user?.id} />
 {/if}
 
 <style>