From 3dd919d73036c2dcbba1012771895c37d3e6ccfa Mon Sep 17 00:00:00 2001
From: Hellen Luo <luohellen05@gmail.com>
Date: Fri, 13 Feb 2026 13:10:11 -0500
Subject: [PATCH 1/3] wrote comments panel again

---
 frontend/components/CommentsPanel.tsx | 48 +++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 frontend/components/CommentsPanel.tsx

diff --git a/frontend/components/CommentsPanel.tsx b/frontend/components/CommentsPanel.tsx
new file mode 100644
index 0000000..9b711f9
--- /dev/null
+++ b/frontend/components/CommentsPanel.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+
+import { CommentBox } from './CommentBox';
+
+import type { Comment } from '../api/commentService';
+
+type CommentsPanelProps = {
+	comments: Comment[];
+};
+
+const getThreadedComments = (comments: Comment[]) => {
+	const threads: Record<number, Comment[]> = {};
+	comments.forEach((comment) => {
+		if (!threads[comment.answer]) {
+			threads[comment.answer] = [];
+		}
+		threads[comment.answer].push(comment);
+	});
+	return Object.values(threads);
+};
+
+const Thread: React.FC<{ comments: Comment[] }> = ({ comments }) => {
+	return (
+		<div className='thread'>
+			{comments.map((comment, idx) => (
+				<div key={comment.id}>
+					<CommentBox comment={comment} showThreadLine={idx < comments.length - 1} />
+				</div>
+			))}
+		</div>
+	);
+};
+
+const CommentsPanel: React.FC<CommentsPanelProps> = ({ comments }) => {
+	const threads = getThreadedComments(comments);
+
+	return (
+		<div className='comments-panel flex flex-col gap-6'>
+			{threads.map((threadComments) => (
+				<Thread comments={threadComments} key={threadComments[0].answer} />
+			))}
+		</div>
+	);
+};
+
+export default CommentsPanel;

From 8071078423570dc14f377297f2eb593254de2ff7 Mon Sep 17 00:00:00 2001
From: Hellen Luo <luohellen05@gmail.com>
Date: Fri, 20 Feb 2026 15:30:32 -0500
Subject: [PATCH 2/3] changed div to Pane and removed threads

---
 frontend/components/CommentsPanel.tsx | 35 ++++++---------------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/frontend/components/CommentsPanel.tsx b/frontend/components/CommentsPanel.tsx
index 9b711f9..14de499 100644
--- a/frontend/components/CommentsPanel.tsx
+++ b/frontend/components/CommentsPanel.tsx
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { Pane } from 'evergreen-ui';
+
 import { CommentBox } from './CommentBox';
 
 import type { Comment } from '../api/commentService';
@@ -10,38 +12,15 @@ type CommentsPanelProps = {
 	comments: Comment[];
 };
 
-const getThreadedComments = (comments: Comment[]) => {
-	const threads: Record<number, Comment[]> = {};
-	comments.forEach((comment) => {
-		if (!threads[comment.answer]) {
-			threads[comment.answer] = [];
-		}
-		threads[comment.answer].push(comment);
-	});
-	return Object.values(threads);
-};
-
-const Thread: React.FC<{ comments: Comment[] }> = ({ comments }) => {
+const CommentsPanel: React.FC<CommentsPanelProps> = ({ comments }) => {
 	return (
-		<div className='thread'>
+		<Pane className='comments-panel flex flex-col gap-6'>
 			{comments.map((comment, idx) => (
-				<div key={comment.id}>
+				<Pane key={comment.id}>
 					<CommentBox comment={comment} showThreadLine={idx < comments.length - 1} />
-				</div>
-			))}
-		</div>
-	);
-};
-
-const CommentsPanel: React.FC<CommentsPanelProps> = ({ comments }) => {
-	const threads = getThreadedComments(comments);
-
-	return (
-		<div className='comments-panel flex flex-col gap-6'>
-			{threads.map((threadComments) => (
-				<Thread comments={threadComments} key={threadComments[0].answer} />
+				</Pane>
 			))}
-		</div>
+		</Pane>
 	);
 };
 

From 35759ad4e79b95f2cf8f07b47be50985ffec4db2 Mon Sep 17 00:00:00 2001
From: issacli-0821 <tl1719@princeton.edu>
Date: Wed, 25 Feb 2026 14:57:28 -0500
Subject: [PATCH 3/3] Pass showThreadLine in CommentBox to conditionally render
 thread line

---
 frontend/components/CommentBox.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/components/CommentBox.tsx b/frontend/components/CommentBox.tsx
index db0e8aa..654a2b3 100644
--- a/frontend/components/CommentBox.tsx
+++ b/frontend/components/CommentBox.tsx
@@ -30,7 +30,8 @@ import type { Comment } from '../types';
 
 export interface CommentBoxProps {
 	comment: Comment;
-	username?: string;
+	username?: string; // TODO: Pass username into CommentBox and make it required
+	showThreadLine: boolean;
 }
 
 function formatDate(dateString: string): string {
@@ -62,7 +63,7 @@ function formatDate(dateString: string): string {
 
 const DEFAULT_MAX_LENGTH = 200;
 
-export function CommentBox({ comment, username }: CommentBoxProps) {
+export function CommentBox({ comment, username, showThreadLine }: CommentBoxProps) {
 	const theme = useTheme();
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [isLiked, setIsLiked] = useState(false);
@@ -94,13 +95,15 @@ export function CommentBox({ comment, username }: CommentBoxProps) {
 					size={32}
 					backgroundColor={isAnonymous ? theme.colors.orange100 : theme.colors.gray300}
 				/>
-				<Pane
-					width={2}
-					flex={1}
-					minHeight={20}
-					marginTop={majorScale(1)}
-					backgroundColor={theme.colors.gray200}
-				/>
+				{showThreadLine && (
+					<Pane
+						width={2}
+						flex={1}
+						minHeight={20}
+						marginTop={majorScale(1)}
+						backgroundColor={theme.colors.gray200}
+					/>
+				)}
 			</Pane>
 
 			{/* Comment content */}