feat: implement threaded replies and enhance feed layout with ThoughtThread component

thoughts-frontend/components/thought-thread.tsx

@@ -0,0 +1,52 @@
+import { Me, Thought } from "@/lib/api";
+import { ThoughtCard } from "./thought-card";
+
+interface ThoughtThreadProps {
+  thought: Thought;
+  repliesByParentId: Map<string, Thought[]>;
+  authorDetails: Map<string, { avatarUrl?: string | null }>;
+  currentUser: Me | null;
+  isReply?: boolean;
+}
+
+export function ThoughtThread({
+  thought,
+  repliesByParentId,
+  authorDetails,
+  currentUser,
+  isReply = false,
+}: ThoughtThreadProps) {
+  const author = {
+    username: thought.authorUsername,
+    avatarUrl: null,
+    ...authorDetails.get(thought.authorUsername),
+  };
+
+  const directReplies = repliesByParentId.get(thought.id) || [];
+
+  return (
+    <div className="flex flex-col gap-0">
+      <ThoughtCard
+        thought={thought}
+        author={author}
+        currentUser={currentUser}
+        isReply={isReply}
+      />
+
+      {directReplies.length > 0 && (
+        <div className="pl-6 border-l-2 border-dashed ml-6 flex flex-col gap-4 pt-4">
+          {directReplies.map((reply) => (
+            <ThoughtThread // RECURSIVE CALL
+              key={reply.id}
+              thought={reply}
+              repliesByParentId={repliesByParentId} // Pass the full map down
+              authorDetails={authorDetails}
+              currentUser={currentUser}
+              isReply={true}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}