refactor: improve code formatting and structure in ThoughtForm component

thoughts-frontend/components/thought-form.tsx

@@ -1,60 +1,86 @@
-"use client"
+"use client";
 
-import { useForm } from "react-hook-form"
+import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod"
+import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod"
+import { z } from "zod";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Form,
   FormField,
   FormItem,
   FormControl,
   FormMessage,
-} from "@/components/ui/form"
+} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea"
+import { Textarea } from "@/components/ui/textarea";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/select";
-import { CreateThoughtSchema, type Me } from "@/lib/api"
+import { CreateThoughtSchema, type Me } from "@/lib/api";
-import { useAuth } from "@/hooks/use-auth"
+import { useAuth } from "@/hooks/use-auth";
-import { toast } from "sonner"
+import { toast } from "sonner";
-import { Globe, Lock, Users } from "lucide-react"
+import { Globe, Lock, Users } from "lucide-react";
-import { useState } from "react"
+import { useState } from "react";
-import { Confetti } from "./confetti"
+import { Confetti } from "./confetti";
-import { createThought } from "@/app/actions/thoughts"
+import { createThought } from "@/app/actions/thoughts";
 
 const DEFAULT_MOODS = [
-  "relaxed 😌", "happy 😊", "excited 🤩", "grateful 🙏", "inspired ✨",
+  "relaxed 😌",
-  "thoughtful 🤔", "curious 🧐", "amused 😄", "proud 💪", "hopeful 🌟",
+  "happy 😊",
-  "tired 😴", "stressed 😰", "anxious 😟", "sad 😢", "frustrated 😤",
+  "excited 🤩",
-  "angry 😠", "bored 😑", "confused 😕", "nostalgic 🥹", "silly 🤪",
+  "grateful 🙏",
-]
+  "inspired ✨",
+  "thoughtful 🤔",
+  "curious 🧐",
+  "amused 😄",
+  "proud 💪",
+  "hopeful 🌟",
+  "tired 😴",
+  "stressed 😰",
+  "anxious 😟",
+  "sad 😢",
+  "frustrated 😤",
+  "angry 😠",
+  "bored 😑",
+  "confused 😕",
+  "nostalgic 🥹",
+  "silly 🤪",
+];
 
 interface ThoughtFormProps {
   /** Set to the parent thought ID when composing a reply. */
-  replyToId?: string
+  replyToId?: string;
   /** Called after successful submit (e.g. close the reply panel). */
-  onSuccess?: () => void
+  onSuccess?: () => void;
   /** Whether to wrap in a Card. Defaults to true when no replyToId. */
-  card?: boolean
+  card?: boolean;
-  currentUser?: Me | null
+  currentUser?: Me | null;
 }
 
-export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUser }: ThoughtFormProps) {
+export function ThoughtForm({
-  const { token } = useAuth()
+  replyToId,
-  const [showConfetti, setShowConfetti] = useState(false)
+  onSuccess,
+  card = !replyToId,
+  currentUser,
+}: ThoughtFormProps) {
+  const { token } = useAuth();
+  const [showConfetti, setShowConfetti] = useState(false);
 
   const allMoods = [
     ...DEFAULT_MOODS,
     ...(currentUser?.customMoods ?? [])
-      .filter(m => !DEFAULT_MOODS.some(d => d.toLowerCase().startsWith(m.name.toLowerCase())))
+      .filter(
-      .map(m => `${m.name} ${m.value}`),
+        (m) =>
-  ]
+          !DEFAULT_MOODS.some((d) =>
+            d.toLowerCase().startsWith(m.name.toLowerCase()),
+          ),
+      )
+      .map((m) => `${m.name} ${m.value}`),
+  ];
 
   const form = useForm<z.infer<typeof CreateThoughtSchema>>({
     resolver: zodResolver(CreateThoughtSchema),
@@ -63,21 +89,23 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUs
       visibility: "public",
       ...(replyToId ? { inReplyToId: replyToId } : {}),
     },
-  })
+  });
 
   async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
     if (!token) {
-      toast.error("You must be logged in.")
+      toast.error("You must be logged in.");
-      return
+      return;
     }
     try {
-      await createThought(values)
+      await createThought(values);
-      toast.success(replyToId ? "Reply posted!" : "Thought posted!")
+      toast.success(replyToId ? "Reply posted!" : "Thought posted!");
-      setShowConfetti(true)
+      setShowConfetti(true);
-      form.reset()
+      form.reset();
-      onSuccess?.()
+      onSuccess?.();
     } catch {
-      toast.error(replyToId ? "Failed to post reply." : "Failed to post thought.")
+      toast.error(
+        replyToId ? "Failed to post reply." : "Failed to post thought.",
+      );
     }
   }
 
@@ -91,7 +119,9 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUs
             <FormItem>
               <FormControl>
                 <Textarea
-                  placeholder={replyToId ? "Post your reply..." : "What's on your mind?"}
+                  placeholder={
+                    replyToId ? "Post your reply..." : "What's on your mind?"
+                  }
                   className={`resize-none ${replyToId ? "bg-white shadow-fa-sm" : ""}`}
                   {...field}
                 />
@@ -100,31 +130,44 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUs
             </FormItem>
           )}
         />
-        <div className={`flex ${replyToId ? "justify-end gap-2" : "justify-between items-center"}`}>
+        <div
-          <div className="flex gap-2">
+          className={`flex ${replyToId ? "justify-end gap-2" : "justify-between items-center"}`}
+        >
+          <div className="flex gap-2 flex-col md:flex-row">
             {!replyToId && (
               <FormField
                 control={form.control}
                 name="visibility"
                 render={({ field }) => (
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
                     <FormControl>
-                      <SelectTrigger className="w-[150px]">
+                      <SelectTrigger className="w-[170px]">
                         <SelectValue placeholder="Visibility" />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
                       <SelectItem value="public">
-                        <div className="flex items-center gap-2"><Globe className="h-4 w-4" /> Public</div>
+                        <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>
+                        <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>
+                        <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>
+                        <div className="flex items-center gap-2">
+                          <Lock className="h-4 w-4" /> Direct
+                        </div>
                       </SelectItem>
                     </SelectContent>
                   </Select>
@@ -135,7 +178,12 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUs
               control={form.control}
               name="mood"
               render={({ field }) => (
-                <Select onValueChange={(v) => field.onChange(v === "__none__" ? undefined : v)} value={field.value ?? "__none__"}>
+                <Select
+                  onValueChange={(v) =>
+                    field.onChange(v === "__none__" ? undefined : v)
+                  }
+                  value={field.value ?? "__none__"}
+                >
                   <FormControl>
                     <SelectTrigger className="w-[170px]">
                       <SelectValue placeholder="How are you feeling?" />
@@ -144,35 +192,48 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUs
                   <SelectContent>
                     <SelectItem value="__none__">No mood</SelectItem>
                     {allMoods.map((mood) => (
-                      <SelectItem key={mood} value={mood}>{mood}</SelectItem>
+                      <SelectItem key={mood} value={mood}>
+                        {mood}
+                      </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               )}
             />
             {replyToId && (
-              <Button type="button" variant="ghost" onClick={() => onSuccess?.()}>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => onSuccess?.()}
+              >
                 Cancel
               </Button>
             )}
           </div>
           <Button type="submit" disabled={form.formState.isSubmitting}>
             {form.formState.isSubmitting
-              ? (replyToId ? "Replying..." : "Posting...")
+              ? replyToId
-              : (replyToId ? "Reply" : "Post Thought")}
+                ? "Replying..."
+                : "Posting..."
+              : replyToId
+                ? "Reply"
+                : "Post Thought"}
           </Button>
         </div>
       </form>
     </Form>
-  )
+  );
 
   return (
     <>
       <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
-      {card
+      {card ? (
-        ? <Card><CardContent className="p-4">{inner}</CardContent></Card>
+        <Card>
-        : <div className="space-y-2 p-4">{inner}</div>
+          <CardContent className="p-4">{inner}</CardContent>
-      }
+        </Card>
+      ) : (
+        <div className="space-y-2 p-4">{inner}</div>
+      )}
     </>
-  )
+  );
 }