refactor/optimize e2e test (#3)

how fast i'll go 🏄‍♂️

---------

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #3

frontend/src/components/drawer/DrawerSection.tsx

@@ -35,6 +35,7 @@ export function DrawerSection({
       <button
         type="button"
         onClick={onClick}
+        data-testid={`drawer-section-${id}`}
         className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
       >
         <div className="flex-1">

frontend/src/components/drawer/LetterItem.tsx

@@ -33,6 +33,7 @@ export function LetterItem({
     <button
       type="button"
       onClick={handleNavigate}
+      data-testid={`letter-item-${id}`}
       className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
     >
       <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">

frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -1,77 +1,78 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { getWelcomeLetterContent } from "../../config/welcomeLetter";
 import { formatDate } from "../../utils/dateFormat";
 import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";
 
-interface WelcomeLetterOverlayProps {
-  onComplete: () => void;
-  userName: string;
+export interface WelcomeLetterOverlayProps {
+    onComplete: () => void;
+    userName: string;
 }
 
 export function WelcomeLetterOverlay({
-  onComplete,
-  userName,
+    onComplete,
+    userName,
 }: WelcomeLetterOverlayProps) {
-  const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
-    "SEALED",
-  );
-  const canvasRef = useRef<CanvasTools>(null);
+    const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
+        "SEALED",
+    );
+    const canvasRef = useRef<CanvasTools>(null);
 
-  useEffect(() => {
-    if (revealState === "REVEALED" && canvasRef.current) {
-      const welcomeContent = getWelcomeLetterContent(userName);
-      canvasRef.current.loadData(welcomeContent);
-    }
-  }, [revealState, userName]);
+    useEffect(() => {
+        if (revealState === "REVEALED" && canvasRef.current) {
+            const welcomeContent = getWelcomeLetterContent(userName);
+            canvasRef.current.loadData(welcomeContent);
+        }
+    }, [revealState, userName]);
 
-  return (
-    <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
-      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
+    return (
+        <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
+            <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
 
-      <div className="w-full max-w-4xl z-10 flex flex-col items-center">
-        <AnimatePresence mode="wait">
-          {revealState === "SEALED" && (
-            <motion.div
-              key="envelope"
-              initial={{ scale: 0.5, opacity: 0 }}
-              animate={{ scale: 0.8, opacity: 1 }}
-              exit={{
-                scale: 1,
-                opacity: 0,
-                transition: { duration: 0.5, ease: "easeOut" },
-              }}
-              transition={{ duration: 4, delay: 1 }}
-            >
-              <EnvelopeReveal
-                recipient={userName}
-                date={formatDate(new Date())}
-                onRevealComplete={() => setRevealState("REVEALED")}
-                ignite={false}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-        <div
-          className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
-        >
-          <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
-            <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
-            <ComposeCanvas ref={canvasRef} readOnly />
-          </div>
+            <div className="w-full max-w-4xl z-10 flex flex-col items-center">
+                <AnimatePresence mode="wait">
+                    {revealState === "SEALED" && (
+                        <motion.div
+                            key="envelope"
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 0.8, opacity: 1 }}
+                            exit={{
+                                scale: 1,
+                                opacity: 0,
+                                transition: { duration: 0.5, ease: "easeOut" },
+                            }}
+                            transition={{ duration: 4, delay: 1 }}
+                        >
+                            <EnvelopeReveal
+                                recipient={userName}
+                                date={formatDate(new Date())}
+                                onRevealComplete={() => setRevealState("REVEALED")}
+                                ignite={false}
+                            />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+                <div
+                    className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
+                >
+                    <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
+                        <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
+                        <ComposeCanvas ref={canvasRef} readOnly />
+                    </div>
 
-          <div className="flex justify-center mt-12">
-            <button
-              type="button"
-              onClick={onComplete}
-              className="btn btn-accent opacity-80 px-12 shadow-lg"
-            >
-              I'll see you
-            </button>
-          </div>
+                    <div className="flex justify-center mt-12">
+                        <button
+                            type="button"
+                            data-testid="dismiss-welcome-letter-btn"
+                            onClick={onComplete}
+                            className="btn btn-accent opacity-80 px-12 shadow-lg"
+                        >
+                            I'll see you
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }