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

thoughts-frontend/components/reply-form.tsx

@@ -0,0 +1,90 @@
+// components/reply-form.tsx
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { CreateThoughtSchema, createThought } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+import { toast } from "sonner";
+
+interface ReplyFormProps {
+  parentThoughtId: string;
+  onReplySuccess: () => void; // A callback to close the form after success
+}
+
+export function ReplyForm({ parentThoughtId, onReplySuccess }: ReplyFormProps) {
+  const router = useRouter();
+  const { token } = useAuth();
+
+  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
+    resolver: zodResolver(CreateThoughtSchema),
+    defaultValues: {
+      content: "",
+      replyToId: parentThoughtId,
+      visibility: "Public", // Replies default to Public
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
+    if (!token) {
+      toast.error("You must be logged in to reply.");
+      return;
+    }
+
+    try {
+      await createThought(values, token);
+      toast.success("Your reply has been posted!");
+      form.reset();
+      onReplySuccess(); // Call the callback
+      router.refresh(); // Refresh the page to show the new reply
+    } catch (err) {
+      toast.error("Failed to post reply. Please try again.");
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 pt-4">
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Post your reply..."
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onReplySuccess} // Close button
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting ? "Replying..." : "Reply"}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

thoughts-frontend/components/thought-card.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
 import { UserAvatar } from "./user-avatar";
 import { deleteThought, Me, Thought } from "@/lib/api";
 import { formatDistanceToNow } from "date-fns";
@@ -14,6 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,7 +30,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { MoreHorizontal, Trash2 } from "lucide-react";
+import {
+  CornerUpLeft,
+  MessageSquare,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+import { ReplyForm } from "@/components/reply-form";
+import Link from "next/link";
 
 interface ThoughtCardProps {
   thought: Thought;
@@ -33,14 +46,17 @@ interface ThoughtCardProps {
     avatarUrl?: string | null;
   };
   currentUser: Me | null;
+  isReply?: boolean;
 }
 
 export function ThoughtCard({
   thought,
   author,
   currentUser,
+  isReply = false,
 }: ThoughtCardProps) {
   const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
   const { token } = useAuth();
   const router = useRouter();
   const timeAgo = formatDistanceToNow(new Date(thought.createdAt), {
@@ -64,6 +80,25 @@ export function ThoughtCard({
 
   return (
     <>
+      <div
+        id={thought.id}
+        className={!isReply ? "bg-card rounded-xl border shadow-sm" : ""}
+      >
+        {thought.replyToId && isReply && (
+          <div className="px-4 pt-2 text-sm text-muted-foreground flex items-center gap-2">
+            <CornerUpLeft className="h-4 w-4" />
+            <span>
+              Replying to{" "}
+              <Link
+                href={`#${thought.replyToId}`}
+                className="hover:underline text-primary"
+              >
+                parent thought
+              </Link>
+            </span>
+          </div>
+        )}
+      </div>
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0">
           <div className="flex items-center gap-4">
@@ -95,6 +130,26 @@ export function ThoughtCard({
         <CardContent>
           <p className="whitespace-pre-wrap break-words">{thought.content}</p>
         </CardContent>
+
+        <CardFooter className="border-t px-4 pt-2 pb-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsReplyOpen(!isReplyOpen)}
+          >
+            <MessageSquare className="mr-2 h-4 w-4" />
+            Reply
+          </Button>
+        </CardFooter>
+
+        {isReplyOpen && (
+          <div className="border-t p-4">
+            <ReplyForm
+              parentThoughtId={thought.id}
+              onReplySuccess={() => setIsReplyOpen(false)}
+            />
+          </div>
+        )}
       </Card>
       <AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
         <AlertDialogContent>

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>
+  );
+}