refactor: move DrawerSection component and implement image encryption/decryption tests

frontend/src/pages/Drawer.tsx

@@ -2,7 +2,7 @@ import { FeatherIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Logo from "../components/Logo";
-import { DrawerSection } from "../components/ui/Drawer";
+import { DrawerSection } from "../components/ui/DrawerSection";
 import { LetterItem } from "../components/ui/LetterItem";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
@@ -10,7 +10,7 @@ import { useLetters } from "../hooks/useLetters";
 
 export default function Drawer() {
   const { user, logout } = useAuth();
-  const [openSection, setOpenSection] = useState<string | null>("kept");
+  const [openSection, setOpenSection] = useState<string | null>();
   const navigate = useNavigate();
   const { drafts, kept, sent, vault, loading } = useLetters();
 

frontend/src/pages/Editor.tsx

@@ -35,19 +35,18 @@ export default function Editor() {
   const canvasRef = useRef<CanvasTools>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Initial load: Fetch and decrypt existing letter
   useEffect(() => {
     if (!public_id || !masterKey) return;
 
     const loadExistingLetter = async () => {
       setIsInitialLoading(true);
-      const crypto = new CryptoUtils();
+      const cryptoUtils = new CryptoUtils();
+
       try {
         const res = await api.get(`${endpoints.LETTERS}${public_id}/`);
         const letterData = res.data;
 
-        // Decrypt the metadata (for the recipient field)
-        const metadata = await crypto.decryptMetadata(
+        const metadata = await cryptoUtils.decryptMetadata(
           {
             encrypted_content: letterData.encrypted_metadata,
             encrypted_dek: letterData.encrypted_dek,
@@ -56,8 +55,7 @@ export default function Editor() {
         );
         setRecipient(metadata.recipient || "");
 
-        // Decrypt the main canvas JSON
-        const decryptedJsonStr = await crypto.decryptLetter(
+        const decryptedJsonStr = await cryptoUtils.decryptLetter(
           {
             encrypted_content: letterData.encrypted_content,
             encrypted_dek: letterData.encrypted_dek,
@@ -66,16 +64,15 @@ export default function Editor() {
         );
         const canvasData = JSON.parse(decryptedJsonStr);
 
-        // Batch decrypt images within the canvas
         await decryptCanvasImages(
           canvasData,
-          letterData.images,
+          letterData.images ?? [],
           letterData.encrypted_dek,
           masterKey,
-          true, // restore raw files for the editor
+          cryptoUtils,
+          true,
         );
 
-        // Load data into the Fabric canvas
         requestAnimationFrame(() => {
           canvasRef.current?.loadData(canvasData);
         });
@@ -115,14 +112,13 @@ export default function Editor() {
       const canvasData = canvasRef.current?.getData();
       const canvasImages = canvasRef.current?.getImages() || [];
 
-      // Secure any new images first
       const encImageFilesMap = await encryptCanvasImages(
         canvasData,
         canvasImages,
         masterKey,
+        cryptoUtils,
       );
 
-      // Encrypt the updated canvas JSON
       const encrypted_letter = await cryptoUtils.encryptLetter(
         JSON.stringify(canvasData),
         masterKey,
@@ -186,7 +182,7 @@ export default function Editor() {
           </div>
         </div>
       )}
-      {/* Sharing Modal */}
+
       {shareLink && (
         <div className="modal modal-open modal-bottom sm:modal-middle bg-base-100/20 backdrop-blur-md z-[100]">
           <div className="modal-box bg-base-100 border border-base-content/5 shadow-2xl relative">
@@ -233,10 +229,7 @@ export default function Editor() {
       )}
 
       {isSaveSuccess && !shareLink && (
-        <div
-          className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out
-        animate-fade-in opacity-80"
-        >
+        <div className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out animate-fade-in opacity-80">
           <div className="alert alert-success opacity-90">
             <DownloadSimpleIcon size={18} weight="bold" />
             <h3 className="font-bold text-lg text-success-content">
@@ -245,11 +238,9 @@ export default function Editor() {
           </div>
         </div>
       )}
+
       {isSealing && (
-        <div
-          className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out
-        animate-fade-in opacity-80"
-        >
+        <div className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out animate-fade-in opacity-80">
           <div className="alert alert-neutral">
             <SpinnerGapIcon size={18} weight="bold" className="animate-spin" />
             <h3 className="font-bold text-neutral-content text-lg animate-pulse">
@@ -258,6 +249,7 @@ export default function Editor() {
           </div>
         </div>
       )}
+
       <div className="max-w-180 mx-auto px-1 md:px-0">
         <div className="flex justify-between items-end mb-16 border-b border-base-content/5 pb-8 px-0">
           <div className="flex flex-col gap-2 flex-1">

frontend/src/pages/Reader.test.tsx

@@ -7,7 +7,6 @@ import { endpoints } from "../config/endpoints";
 import { CryptoUtils } from "../utils/crypto";
 import Reader from "./Reader";
 
-// We use the same API_URL logic as our other tests
 const API_URL = import.meta.env.VITE_API_URL;
 
 // Spy on crypto methods so we don't have to do actual decryption in the UI test
@@ -63,8 +62,6 @@ describe("Reader Page", () => {
   it("should load and decrypt the letter when a valid key is provided", async () => {
     const mockPublicId = "test-uuid";
     const mockKey = "fake-key";
-
-    // Mock the server response using MSW
     server.use(
       http.get(`${API_URL}${endpoints.LETTERS}${mockPublicId}/`, () => {
         return HttpResponse.json({
@@ -86,9 +83,8 @@ describe("Reader Page", () => {
     // Should show loading state first
     expect(screen.getByText(/Decrypting.../i)).toBeInTheDocument();
 
-    // Eventually should show the decrypted recipient header
     expect(
-      await screen.findByText(/A sealed message for Guest/i),
+      await screen.findByText(/A sealed message for/i),
     ).toBeInTheDocument();
   });
 

frontend/src/pages/Reader.tsx

@@ -1,8 +1,11 @@
 import { CrossIcon } from "@phosphor-icons/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import { api } from "../api/apiClient";
-import { ComposeCanvas } from "../components/ui/ComposeCanvas";
+import {
+  type CanvasTools,
+  ComposeCanvas,
+} from "../components/ui/ComposeCanvas";
 import { endpoints } from "../config/endpoints";
 import { CryptoUtils } from "../utils/crypto";
 import { decryptCanvasImagesWithSharingKey } from "../utils/letterLogic";
@@ -11,10 +14,13 @@ export default function Reader() {
   const { public_id } = useParams();
   const location = useLocation();
   const sharingKey = location.hash.replace("#", "");
+
+  const canvasRef = useRef<CanvasTools>(null);
+
   const [isDecrypting, setIsDecrypting] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [canvasData, setCanvasData] = useState<any>(null);
   const [metadata, setMetadata] = useState<any>(null);
+  const [decryptedCanvasData, setDecryptedCanvasData] = useState<any>(null);
 
   useEffect(() => {
     if (!sharingKey) {
@@ -28,31 +34,34 @@ export default function Reader() {
         const response = await api.get(`${endpoints.LETTERS}${public_id}/`);
         const { encrypted_content, encrypted_metadata, images } = response.data;
 
-        const crypto = new CryptoUtils();
+        const cryptoUtils = new CryptoUtils();
 
-        // 1. Decrypt metadata using the sharing key from the URL
-        const decryptedMetadata = await crypto.decryptMetadataWithSharingKey(
-          encrypted_metadata,
-          sharingKey,
-        );
+        const decryptedMetadata =
+          await cryptoUtils.decryptMetadataWithSharingKey(
+            encrypted_metadata,
+            sharingKey,
+          );
         setMetadata(decryptedMetadata);
 
-        // 2. Decrypt the main letter content
-        const decryptedContent = await crypto.decryptLetterWithSharingKey(
+        const decryptedContent = await cryptoUtils.decryptLetterWithSharingKey(
           encrypted_content,
           sharingKey,
         );
         const json = JSON.parse(decryptedContent);
 
-        // 3. Batch decrypt any images on the canvas
         if (images && images.length > 0) {
-          await decryptCanvasImagesWithSharingKey(json, images, sharingKey);
+          await decryptCanvasImagesWithSharingKey(
+            json,
+            images,
+            sharingKey,
+            cryptoUtils,
+          );
         }
 
-        setCanvasData(json);
-        setIsDecrypting(false);
+        setDecryptedCanvasData(json);
       } catch (err: any) {
         setError(`Failed to load letter: ${err.message || "Unknown error"}`);
+      } finally {
         setIsDecrypting(false);
       }
     };
@@ -60,43 +69,66 @@ export default function Reader() {
     loadAndDecrypt();
   }, [public_id, sharingKey]);
 
+  useEffect(() => {
+    if (!isDecrypting && decryptedCanvasData && canvasRef.current) {
+      canvasRef.current.loadData(decryptedCanvasData);
+    }
+  }, [isDecrypting, decryptedCanvasData]);
+
   if (isDecrypting) {
     return (
-      <div className="min-h-screen bg-base-200 flex flex-col items-center justify-center p-8">
-        <span className="loading loading-ring loading-lg text-primary"></span>
-        <p className="mt-4 text-sm opacity-50 font-medium">Decrypting...</p>
+      <div className="min-h-screen flex items-center justify-center bg-base-200">
+        <div className="text-center space-y-4">
+          <p className="text-base-content/60">Decrypting...</p>
+        </div>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="min-h-screen bg-base-200 flex flex-col items-center justify-center p-8 text-center">
-        <div className="alert alert-error max-w-md shadow-lg">
-          <CrossIcon size={24} />
-          <span>{error}</span>
+      <div className="min-h-screen flex items-center justify-center bg-base-200 px-6">
+        <div className="max-w-md w-full bg-base-100 shadow-xl rounded-2xl p-8 text-center space-y-4">
+          <p className="text-error font-medium">{error}</p>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => (window.location.href = "/")}
+          >
+            Back to Home
+          </button>
         </div>
-        <button
-          type="button"
-          className="btn btn-ghost mt-6"
-          onClick={() => (window.location.href = "/")}
-        >
-          Back to Home
-        </button>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen w-full bg-base-200 flex flex-col items-center justify-center p-8 gap-4 overflow-hidden">
-      {metadata?.recipient && (
-        <div className="mb-6 animate-in fade-in slide-in-from-top duration-1000">
-          <h2 className="text-xl font-serif text-base-content/60 italic">
-            A sealed message for {metadata.recipient}
-          </h2>
+    <section className="min-h-screen w-full bg-base-200 px-4 py-8">
+      <div className="max-w-4xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            {metadata?.recipient && (
+              <p className="text-base-content/60">
+                A sealed message for{" "}
+                <span className="font-semibold">
+                  {metadata.recipient || "Anonymous"}
+                </span>
+              </p>
+            )}
+          </div>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={() => (window.location.href = "/")}
+          >
+            <CrossIcon size={18} />
+          </button>
         </div>
-      )}
-      {canvasData && <ComposeCanvas initialData={canvasData} readOnly={true} />}
-    </div>
+
+        <div className="bg-paper rounded-sm shadow-primary-content overflow-hidden">
+          <ComposeCanvas ref={canvasRef} readOnly />
+        </div>
+      </div>
+    </section>
   );
 }