feat: add confetti animation on thought submission and update dependencies

thoughts-frontend/components/confetti.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import * as Tone from "tone";
+
+interface ConfettiProps {
+  fire: boolean;
+  onComplete: () => void;
+}
+
+const colors = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"];
+
+export function Confetti({ fire, onComplete }: ConfettiProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (fire) {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const synth = new Tone.PolySynth(Tone.Synth, {
+        oscillator: { type: "sine" },
+        envelope: { attack: 0.005, decay: 0.1, sustain: 0.3, release: 1 },
+      }).toDestination();
+
+      const notes = ["C4", "E4", "G4", "A4"];
+
+      let animationFrameId: number;
+      const confetti: {
+        x: number;
+        y: number;
+        r: number;
+        d: number;
+        color: string;
+        tilt: number;
+      }[] = [];
+      const numConfetti = 100;
+
+      const resizeCanvas = () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      };
+      window.addEventListener("resize", resizeCanvas);
+      resizeCanvas();
+
+      for (let i = 0; i < numConfetti; i++) {
+        confetti.push({
+          x: Math.random() * canvas.width,
+          y: -20,
+          r: Math.random() * 6 + 1,
+          d: Math.random() * numConfetti,
+          color: colors[Math.floor(Math.random() * colors.length)],
+          tilt: Math.floor(Math.random() * 10) - 10,
+        });
+      }
+
+      let animationFinished = false;
+
+      const draw = () => {
+        if (animationFinished) return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        let allOffScreen = true;
+
+        for (let i = 0; i < numConfetti; i++) {
+          const c = confetti[i];
+          ctx.beginPath();
+          ctx.lineWidth = c.r / 2;
+          ctx.strokeStyle = c.color;
+          ctx.moveTo(c.x + c.tilt, c.y);
+          ctx.lineTo(c.x, c.y + c.tilt + c.r);
+          ctx.stroke();
+
+          c.y += Math.cos(c.d + i + 1.2) + 1.5 + c.r / 2;
+          c.x += Math.sin(i) * 1.5;
+
+          if (c.y <= canvas.height) {
+            allOffScreen = false;
+          }
+        }
+
+        if (allOffScreen) {
+          animationFinished = true;
+          onComplete();
+        } else {
+          animationFrameId = requestAnimationFrame(draw);
+        }
+      };
+
+      try {
+        Tone.start();
+        const now = Tone.now();
+        notes.forEach((note, i) => {
+          synth.triggerAttackRelease(note, "8n", now + i * 0.1);
+        });
+        draw();
+      } catch (error) {
+        console.error("Audio could not be started", error);
+        draw();
+      }
+
+      return () => {
+        window.removeEventListener("resize", resizeCanvas);
+        cancelAnimationFrame(animationFrameId);
+      };
+    }
+  }, [fire, onComplete]);
+
+  if (!fire) return null;
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 9999,
+      }}
+    />
+  );
+}

thoughts-frontend/components/post-thought-form.tsx

@@ -25,10 +25,13 @@ 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),
@@ -44,6 +47,7 @@ export function PostThoughtForm() {
     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 {
@@ -52,67 +56,70 @@ export function PostThoughtForm() {
   }
 
   return (
-    <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">
+    <>
+      <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="visibility"
+                name="content"
                 render={({ field }) => (
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
+                  <FormItem>
                     <FormControl>
-                      <SelectTrigger className="w-[150px]">
-                        <SelectValue placeholder="Visibility" />
-                      </SelectTrigger>
+                      <Textarea
+                        placeholder="What's on your mind?"
+                        className="resize-none"
+                        {...field}
+                      />
                     </FormControl>
-                    <SelectContent>
-                      <SelectItem value="Public">
-                        <div className="flex items-center gap-2">
-                          <Globe className="h-4 w-4" /> Public
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="FriendsOnly">
-                        <div className="flex items-center gap-2">
-                          <Users className="h-4 w-4" /> Friends Only
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="Private">
-                        <div className="flex items-center gap-2">
-                          <Lock className="h-4 w-4" /> Private
-                        </div>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {form.formState.isSubmitting ? "Posting..." : "Post Thought"}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
+              <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="FriendsOnly">
+                          <div className="flex items-center gap-2">
+                            <Users className="h-4 w-4" /> Friends Only
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="Private">
+                          <div className="flex items-center gap-2">
+                            <Lock className="h-4 w-4" /> Private
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {form.formState.isSubmitting ? "Posting..." : "Post Thought"}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </>
   );
 }

thoughts-frontend/components/reply-form.tsx

@@ -1,4 +1,3 @@
-// components/reply-form.tsx
 "use client";
 
 import { useForm } from "react-hook-form";
@@ -17,6 +16,8 @@ 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;
@@ -26,6 +27,7 @@ interface ReplyFormProps {
 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),
@@ -46,45 +48,50 @@ export function ReplyForm({ parentThoughtId, onReplySuccess }: ReplyFormProps) {
       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) {
+      setShowConfetti(true);
+      console.log("Showing confetti");
+      onReplySuccess();
+      router.refresh();
+    } catch {
       toast.error("Failed to post reply. Please try again.");
     }
   }
 
   return (
-    <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>
+    <>
+      <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>
+    </>
   );
 }