refactor: add pointer-events disabling for envelope states and update e2e tests to match UI interactions

frontend/e2e/letter.spec.ts

@@ -86,10 +86,10 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Seal] Navigating to Editor via UI...");
-    await page.getByRole("button", { name: /write something/i }).click();
+    await page.locator("#write-letter-btn").click();
 
     const recipientInput = page.locator("#recipient");
-    await recipientInput.waitFor({ state: "visible", timeout: 20000 });
+    await recipientInput.waitFor({ state: "visible", timeout: 10000 });
     await recipientInput.fill("A Secret Guest");
 
     const canvasInput = page.getByLabel("Canvas text input");
@@ -123,6 +123,10 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/breaking the seal/i)).toBeHidden({
       timeout: 10000,
     });
+    // Flip the envelope to show the seal
+    await page.locator("#env-front").click();
+    await page.waitForTimeout(2500); // Wait for flip transition
+
     await page.getByAltText("Seal").click();
     await page.waitForTimeout(1500);
     await page.locator("#letter").click({ position: { x: 30, y: 15 } });
@@ -133,7 +137,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.locator("#share-letter-btn").click();
 
     // Verify share modal with a valid link
-    await expect(page.getByText(/share this letter/i)).toBeVisible();
+    await expect(page.getByText(/send this letter/i)).toBeVisible();
     const linkInput = page.locator("#share-link-input");
     const linkValue = await linkInput.inputValue();
     expect(linkValue).toContain("/read/");
@@ -142,7 +146,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
 
     await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
     await page.getByRole("button", { name: /close/i }).click();
-    await expect(page.getByText(/share this letter/i)).toBeHidden();
+    await expect(page.getByText(/send this letter/i)).toBeHidden();
   });
 
   test("should allow author to access sealed letter from drawer without sharing key", async ({
@@ -183,10 +187,6 @@ test.describe("Letter Drafting (Real Backend)", () => {
     });
     await page.getByRole("button", { name: /keep it/i }).click();
 
-    // Navigate to Drawer - use ID or precise label
-    logger.info(">> [Drawer] Navigating to Drawer...");
-    await page.locator("button[aria-label='Open Drawer']").click();
-
     // Open "Kept" section - search for the section with id='kept' and click its toggle button
     logger.info(">> [Drawer] Opening Kept section...");
     const keptSection = page.locator("#kept");

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -48,7 +48,9 @@ export function EnvelopeReveal({
         <div
           className={`relative h-70 w-105 transform-3d transition-transform duration-2000 ${isFlipped ? "rotate-y-180" : ""}`}
         >
-          <div className=" flex backface-hidden rotate-y-180 justify-center transition-all duration-1000">
+          <div
+            className={` flex backface-hidden rotate-y-180 justify-center transition-all duration-1000 ${isFlipped ? "" : "pointer-events-none"}`}
+          >
             <div
               id="env-top"
               className="z-4 delay-500 transition-all duration-2000 absolute peer h-40 w-54 mt-0 bg-base-200 mask mask-triangle-2 scale-x-234 has-checked:scale-y-[-1] has-checked:-translate-y-full has-checked:z-1 has-checked:duration-1000"
@@ -93,7 +95,7 @@ export function EnvelopeReveal({
           <button
             id="env-front"
             type="button"
-            className="text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2"
+            className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
             onClick={() => setIsFlipped((prev) => !prev)}
           >
             <span className={"text-neutral-content/60 font-xs font-display"}>

frontend/src/pages/Drawer.tsx

@@ -142,6 +142,7 @@ export default function Drawer() {
 
       <button
         type="button"
+        id="write-letter-btn"
         className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
         onClick={() => navigate(PATHS.write(""))}
       >

frontend/src/pages/Reader.tsx

@@ -315,7 +315,7 @@ export default function Reader() {
           >
             <PaperPlaneTiltIcon size={16} weight="duotone" />
             <span className="text-md uppercase font-sans tracking-widest">
-              Send to someone...
+              Send to someone
             </span>
           </button>
           <button