From d450a1d8d8822dc865e5c1d84d38f9e0d4ac9efd Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 15 May 2026 20:01:00 +0200
Subject: [PATCH] refactor(frontend): EmptyState + LoadingSkeleton primitives;
 unified ThoughtForm replaces PostThoughtForm and ReplyForm

---
 thoughts-frontend/app/page.tsx                |   9 +-
 thoughts-frontend/app/search/page.tsx         |   9 +-
 thoughts-frontend/app/tags/[tagName]/page.tsx |   5 +-
 .../app/users/[username]/page.tsx             |  10 +-
 thoughts-frontend/components/empty-state.tsx  |  12 ++
 .../components/loading-skeleton.tsx           |  34 +++++
 .../components/post-thought-form.tsx          | 130 ----------------
 thoughts-frontend/components/reply-form.tsx   |  97 ------------
 thoughts-frontend/components/thought-card.tsx |   8 +-
 thoughts-frontend/components/thought-form.tsx | 142 ++++++++++++++++++
 10 files changed, 203 insertions(+), 253 deletions(-)
 create mode 100644 thoughts-frontend/components/empty-state.tsx
 create mode 100644 thoughts-frontend/components/loading-skeleton.tsx
 delete mode 100644 thoughts-frontend/components/post-thought-form.tsx
 delete mode 100644 thoughts-frontend/components/reply-form.tsx
 create mode 100644 thoughts-frontend/components/thought-form.tsx

diff --git a/thoughts-frontend/app/page.tsx b/thoughts-frontend/app/page.tsx
index c95f232..ebac652 100644
--- a/thoughts-frontend/app/page.tsx
+++ b/thoughts-frontend/app/page.tsx
@@ -7,7 +7,8 @@ import {
   getTopFriends,
   Me,
 } from "@/lib/api";
-import { PostThoughtForm } from "@/components/post-thought-form";
+import { ThoughtForm } from "@/components/thought-form";
+import { EmptyState } from "@/components/empty-state";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { PopularTags } from "@/components/popular-tags";
@@ -80,7 +81,7 @@ async function FeedPage({
           <header className="mb-6">
             <h1 className="text-3xl font-bold text-shadow-sm">Your Feed</h1>
           </header>
-          <PostThoughtForm />
+          <ThoughtForm />
 
           <div className="block lg:hidden space-y-6">
             <PopularTags />
@@ -102,9 +103,7 @@ async function FeedPage({
               />
             ))}
             {thoughtThreads.length === 0 && (
-              <p className="text-center text-muted-foreground pt-8">
-                Your feed is empty. Follow some users to see their thoughts!
-              </p>
+              <EmptyState message="Your feed is empty. Follow some users to see their thoughts!" />
             )}
           </div>
           <PaginationNav
diff --git a/thoughts-frontend/app/search/page.tsx b/thoughts-frontend/app/search/page.tsx
index e53b11b..69b99a6 100644
--- a/thoughts-frontend/app/search/page.tsx
+++ b/thoughts-frontend/app/search/page.tsx
@@ -16,6 +16,7 @@ export async function generateMetadata({
       : "Search for people and thoughts on Thoughts",
   };
 }
+import { EmptyState } from "@/components/empty-state";
 import { UserListCard } from "@/components/user-list-card";
 import { RemoteUserCard } from "@/components/remote-user-card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -67,9 +68,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
               <RemoteUserCard actor={remoteActor} />
             </div>
           ) : (
-            <p className="text-center text-muted-foreground pt-8">
-              No user found at {query}
-            </p>
+            <EmptyState message={`No user found at ${query}`} />
           )
         ) : results ? (
           <Tabs defaultValue="thoughts" className="w-full">
@@ -92,9 +91,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
             </TabsContent>
           </Tabs>
         ) : (
-          <p className="text-center text-muted-foreground pt-8">
-            No results found or an error occurred.
-          </p>
+          <EmptyState message="No results found or an error occurred." />
         )}
       </main>
     </div>
diff --git a/thoughts-frontend/app/tags/[tagName]/page.tsx b/thoughts-frontend/app/tags/[tagName]/page.tsx
index 94293e9..953df10 100644
--- a/thoughts-frontend/app/tags/[tagName]/page.tsx
+++ b/thoughts-frontend/app/tags/[tagName]/page.tsx
@@ -23,6 +23,7 @@ export async function generateMetadata({
     },
   };
 }
+import { EmptyState } from "@/components/empty-state";
 import { buildThoughtThreads } from "@/lib/utils";
 import { ThoughtThread } from "@/components/thought-thread";
 import { notFound } from "next/navigation";
@@ -66,9 +67,7 @@ export default async function TagPage({ params }: TagPageProps) {
           />
         ))}
         {thoughtThreads.length === 0 && (
-          <p className="text-center text-muted-foreground pt-8">
-            No thoughts found for this tag.
-          </p>
+          <EmptyState message="No thoughts found for this tag." />
         )}
       </main>
     </div>
diff --git a/thoughts-frontend/app/users/[username]/page.tsx b/thoughts-frontend/app/users/[username]/page.tsx
index 1d2a745..bbb4ef1 100644
--- a/thoughts-frontend/app/users/[username]/page.tsx
+++ b/thoughts-frontend/app/users/[username]/page.tsx
@@ -44,6 +44,7 @@ export async function generateMetadata({
     },
   };
 }
+import { EmptyState } from "@/components/empty-state";
 import { UserAvatar } from "@/components/user-avatar";
 import { Calendar, Settings } from "lucide-react";
 import { Card } from "@/components/ui/card";
@@ -278,14 +279,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
                 />
               ))}
               {thoughtThreads.length === 0 && (
-                <Card
-                  id="profile-card__no-thoughts"
-                  className="flex items-center justify-center h-48"
-                >
-                  <p className="text-center text-muted-foreground">
-                    This user hasn&apos;t posted any public thoughts yet.
-                  </p>
-                </Card>
+                <EmptyState message="This user hasn't posted any public thoughts yet." />
               )}
             </TabsContent>
             {isOwnProfile && (
diff --git a/thoughts-frontend/components/empty-state.tsx b/thoughts-frontend/components/empty-state.tsx
new file mode 100644
index 0000000..5dcc01d
--- /dev/null
+++ b/thoughts-frontend/components/empty-state.tsx
@@ -0,0 +1,12 @@
+interface EmptyStateProps {
+  message: string
+  className?: string
+}
+
+export function EmptyState({ message, className }: EmptyStateProps) {
+  return (
+    <p className={`text-center text-muted-foreground pt-8 ${className ?? ""}`}>
+      {message}
+    </p>
+  )
+}
diff --git a/thoughts-frontend/components/loading-skeleton.tsx b/thoughts-frontend/components/loading-skeleton.tsx
new file mode 100644
index 0000000..8b7cbbe
--- /dev/null
+++ b/thoughts-frontend/components/loading-skeleton.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function ThoughtSkeleton() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center gap-4">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-4/5" />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ProfileSkeleton() {
+  return (
+    <Card>
+      <CardContent className="pt-6 flex items-center gap-4">
+        <Skeleton className="h-16 w-16 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/thoughts-frontend/components/post-thought-form.tsx b/thoughts-frontend/components/post-thought-form.tsx
deleted file mode 100644
index 124fa63..0000000
--- a/thoughts-frontend/components/post-thought-form.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"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 { Card, CardContent } from "@/components/ui/card";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { CreateThoughtSchema, createThought } from "@/lib/api";
-import { useAuth } from "@/hooks/use-auth";
-import { toast } from "sonner";
-import { Globe, Lock, Users } from "lucide-react";
-import { useState } from "react";
-import { Confetti } from "./confetti";
-
-export function PostThoughtForm() {
-  const router = useRouter();
-  const { token } = useAuth();
-  const [showConfetti, setShowConfetti] = useState(false);
-
-  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
-    resolver: zodResolver(CreateThoughtSchema),
-    defaultValues: { content: "", visibility: "public" },
-  });
-
-  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
-    if (!token) {
-      toast.error("You must be logged in to post.");
-      return;
-    }
-
-    try {
-      await createThought(values, token);
-      toast.success("Your thought has been posted!");
-      setShowConfetti(true);
-      form.reset();
-      router.refresh(); // This is the key to updating the feed
-    } catch {
-      toast.error("Failed to post thought. Please try again.");
-    }
-  }
-
-  return (
-    <>
-      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
-      <Card>
-        <CardContent className="p-4">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="content"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Textarea
-                        placeholder="What's on your mind?"
-                        className="resize-none"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <div className="flex justify-between items-center">
-                <FormField
-                  control={form.control}
-                  name="visibility"
-                  render={({ field }) => (
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger className="w-[150px]">
-                          <SelectValue placeholder="Visibility" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="public">
-                          <div className="flex items-center gap-2">
-                            <Globe className="h-4 w-4" /> Public
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="followers">
-                          <div className="flex items-center gap-2">
-                            <Users className="h-4 w-4" /> Followers
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="unlisted">
-                          <div className="flex items-center gap-2">
-                            <Lock className="h-4 w-4" /> Unlisted
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="direct">
-                          <div className="flex items-center gap-2">
-                            <Lock className="h-4 w-4" /> Direct
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                <Button type="submit" disabled={form.formState.isSubmitting}>
-                  {form.formState.isSubmitting ? "Posting..." : "Post Thought"}
-                </Button>
-              </div>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </>
-  );
-}
diff --git a/thoughts-frontend/components/reply-form.tsx b/thoughts-frontend/components/reply-form.tsx
deleted file mode 100644
index 12076c7..0000000
--- a/thoughts-frontend/components/reply-form.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"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";
-import { useState } from "react";
-import { Confetti } from "./confetti";
-
-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 [showConfetti, setShowConfetti] = useState(false);
-
-  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
-    resolver: zodResolver(CreateThoughtSchema),
-    defaultValues: {
-      content: "",
-      inReplyToId: parentThoughtId,
-      visibility: "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();
-      setShowConfetti(true);
-      console.log("Showing confetti");
-      onReplySuccess();
-      router.refresh();
-    } catch {
-      toast.error("Failed to post reply. Please try again.");
-    }
-  }
-
-  return (
-    <>
-      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 p-4">
-          <FormField
-            control={form.control}
-            name="content"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Textarea
-                    placeholder="Post your reply..."
-                    className="resize-none bg-white glass-effect glossy-efect bottom shadow-fa-sm"
-                    {...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>
-    </>
-  );
-}
diff --git a/thoughts-frontend/components/thought-card.tsx b/thoughts-frontend/components/thought-card.tsx
index 8373d05..cbfe1f4 100644
--- a/thoughts-frontend/components/thought-card.tsx
+++ b/thoughts-frontend/components/thought-card.tsx
@@ -36,7 +36,7 @@ import {
   MoreHorizontal,
   Trash2,
 } from "lucide-react";
-import { ReplyForm } from "@/components/reply-form";
+import { ThoughtForm } from "@/components/thought-form";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 
@@ -195,9 +195,9 @@ export function ThoughtCard({
 
         {isReplyOpen && (
           <div className="border-t m-4 rounded-2xl border-border/50 bg-secondary/20 ">
-            <ReplyForm
-              parentThoughtId={thought.id}
-              onReplySuccess={() => setIsReplyOpen(false)}
+            <ThoughtForm
+              replyToId={thought.id}
+              onSuccess={() => setIsReplyOpen(false)}
             />
           </div>
         )}
diff --git a/thoughts-frontend/components/thought-form.tsx b/thoughts-frontend/components/thought-form.tsx
new file mode 100644
index 0000000..bf1c490
--- /dev/null
+++ b/thoughts-frontend/components/thought-form.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { CreateThoughtSchema } from "@/lib/api"
+import { useAuth } from "@/hooks/use-auth"
+import { toast } from "sonner"
+import { Globe, Lock, Users } from "lucide-react"
+import { useState } from "react"
+import { Confetti } from "./confetti"
+import { createThought } from "@/app/actions/thoughts"
+
+interface ThoughtFormProps {
+  /** Set to the parent thought ID when composing a reply. */
+  replyToId?: string
+  /** Called after successful submit (e.g. close the reply panel). */
+  onSuccess?: () => void
+  /** Whether to wrap in a Card. Defaults to true when no replyToId. */
+  card?: boolean
+}
+
+export function ThoughtForm({ replyToId, onSuccess, card = !replyToId }: ThoughtFormProps) {
+  const { token } = useAuth()
+  const [showConfetti, setShowConfetti] = useState(false)
+
+  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
+    resolver: zodResolver(CreateThoughtSchema),
+    defaultValues: {
+      content: "",
+      visibility: "public",
+      ...(replyToId ? { inReplyToId: replyToId } : {}),
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
+    if (!token) {
+      toast.error("You must be logged in.")
+      return
+    }
+    try {
+      await createThought(values)
+      toast.success(replyToId ? "Reply posted!" : "Thought posted!")
+      setShowConfetti(true)
+      form.reset()
+      onSuccess?.()
+    } catch {
+      toast.error(replyToId ? "Failed to post reply." : "Failed to post thought.")
+    }
+  }
+
+  const inner = (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder={replyToId ? "Post your reply..." : "What's on your mind?"}
+                  className={`resize-none ${replyToId ? "bg-white glass-effect glossy-effect bottom shadow-fa-sm" : ""}`}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className={`flex ${replyToId ? "justify-end gap-2" : "justify-between items-center"}`}>
+          {!replyToId && (
+            <FormField
+              control={form.control}
+              name="visibility"
+              render={({ field }) => (
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger className="w-[150px]">
+                      <SelectValue placeholder="Visibility" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="public">
+                      <div className="flex items-center gap-2"><Globe className="h-4 w-4" /> Public</div>
+                    </SelectItem>
+                    <SelectItem value="followers">
+                      <div className="flex items-center gap-2"><Users className="h-4 w-4" /> Followers</div>
+                    </SelectItem>
+                    <SelectItem value="unlisted">
+                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Unlisted</div>
+                    </SelectItem>
+                    <SelectItem value="direct">
+                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Direct</div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          )}
+          {replyToId && (
+            <Button type="button" variant="ghost" onClick={onSuccess}>
+              Cancel
+            </Button>
+          )}
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting
+              ? (replyToId ? "Replying..." : "Posting...")
+              : (replyToId ? "Reply" : "Post Thought")}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+
+  return (
+    <>
+      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
+      {card
+        ? <Card><CardContent className="p-4">{inner}</CardContent></Card>
+        : <div className="space-y-2 p-4">{inner}</div>
+      }
+    </>
+  )
+}