refactor: UX enhancement for drawer

frontend/src/pages/Drawer.tsx

@@ -18,6 +18,53 @@ export default function Drawer() {
 
   if (!user) return null;
 
+  function PasskeyModal() {
+    return (
+      <div className="modal modal-open bg-base-100/20 backdrop-blur-md">
+        <div className="modal-box p-12 flex flex-col items-center">
+          <LockKeyIcon
+            size={48}
+            className="text-primary mx-auto mb-8 animate-pulse"
+          />
+          <h3 className="font-bold text-lg font-display text-primary">
+            Authentication Required
+          </h3>
+          <p className="py-4 font-sans">
+            We need your passkey to open your letters
+          </p>
+          <div className="divider w-1/2 mx-auto text-xs text-neutral-content/30 mt-0"></div>
+          <p className="text-xs text-neutral-content/30 font-mono italic">
+            P.S. We don't validate your input at the moment.
+          </p>
+          <div className="modal-action items-center gap-4">
+            <form
+              className="form-control w-full inline-flex"
+              onSubmit={async (e: React.SubmitEvent<HTMLFormElement>) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                const password = formData.get("password") as string;
+                if (!password) return;
+                await unlock(password);
+              }}
+            >
+              <input
+                name="password"
+                required
+                type="password"
+                placeholder="password"
+                className="font-sans validator input input-bordered rounded-r-none"
+              />
+              <div className="validator-message text-xs text-error"></div>
+              <button type="submit" className="btn btn-primary rounded-l-none">
+                Unlock
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const toggleSection = (id: string) =>
     setOpenSection(openSection === id ? null : id);
 
@@ -25,53 +72,7 @@ export default function Drawer() {
     <div className="min-h-screen w-full bg-base-100 text-base-content flex flex-col items-center py-12 px-5 pb-32 font-serif transition-colors">
       <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
 
-      {isAuthRequired && (
-        <div className="modal modal-open bg-base-100/20 backdrop-blur-md">
-          <div className="modal-box p-12 flex flex-col items-center">
-            <LockKeyIcon
-              size={48}
-              className="text-primary mx-auto mb-8 animate-pulse"
-            />
-            <h3 className="font-bold text-lg font-display text-primary">
-              Authentication Required
-            </h3>
-            <p className="py-4 font-sans">
-              We need your passkey to open your letters
-            </p>
-            <div className="divider w-1/2 mx-auto text-xs text-neutral-content/30 mt-0"></div>
-            <p className="text-xs text-neutral-content/30 font-mono italic">
-              P.S. We don't validate your input at the moment.
-            </p>
-            <div className="modal-action items-center gap-4">
-              <form
-                className="form-control w-full inline-flex"
-                onSubmit={async (e: React.SubmitEvent<HTMLFormElement>) => {
-                  e.preventDefault();
-                  const formData = new FormData(e.currentTarget);
-                  const password = formData.get("password") as string;
-                  if (!password) return;
-                  unlock(password);
-                }}
-              >
-                <input
-                  name="password"
-                  required
-                  type="password"
-                  placeholder="password"
-                  className="font-sans validator input input-bordered rounded-r-none"
-                />
-                <div className="validator-message text-xs text-error"></div>
-                <button
-                  type="submit"
-                  className="btn btn-primary rounded-l-none"
-                >
-                  Unlock
-                </button>
-              </form>
-            </div>
-          </div>
-        </div>
-      )}
+      {isAuthRequired && <PasskeyModal />}
       <header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-1000">
         <Logo />
         <div className="font-sans text-xs tracking-[0.3em] uppercase text-base-content/40 mt-2">

frontend/src/pages/Reader.test.tsx

@@ -9,20 +9,6 @@ import Reader from "./Reader";
 
 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
-const spyDecryptLetter = vi.spyOn(
-  CryptoUtils.prototype,
-  "decryptLetterWithSharingKey",
-);
-const spyDecryptMetadata = vi.spyOn(
-  CryptoUtils.prototype,
-  "decryptMetadataWithSharingKey",
-);
-const spyDecryptImage = vi.spyOn(
-  CryptoUtils.prototype,
-  "decryptImageWithSharingKey",
-);
-
 // Fabric.js needs to know when fonts are loaded
 Object.defineProperty(document, "fonts", {
   value: { ready: Promise.resolve() },
@@ -30,13 +16,16 @@ Object.defineProperty(document, "fonts", {
 });
 
 describe("Reader Page", () => {
-  beforeEach(() => {
+  let masterKey: CryptoKey;
+  let utils: CryptoUtils;
+
+  beforeEach(async () => {
     vi.clearAllMocks();
 
-    // Default mock behavior for successful decryption
-    spyDecryptLetter.mockResolvedValue('{"objects": []}');
-    spyDecryptMetadata.mockResolvedValue({ recipient: "Guest" });
-    spyDecryptImage.mockResolvedValue("blob:url");
+    utils = new CryptoUtils();
+    await utils.initialize();
+    const bundle = await CryptoUtils.deriveKeyBundle("password", "salt");
+    masterKey = bundle.masterKey;
 
     // Clear the URL hash
     vi.stubGlobal("location", {
@@ -61,19 +50,27 @@ 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";
+    const letterContent = JSON.stringify({ objects: [] });
+    const metadata = { recipient: "Guest" };
+
+    const encryptedLetter = await utils.encryptLetter(letterContent, masterKey);
+    const encryptedMetadata = await utils.encryptMetadata(metadata, masterKey);
+
+    const sharingKey = encryptedLetter.sharingKey as string;
+
     server.use(
       http.get(`${API_URL}${endpoints.LETTERS}${mockPublicId}/`, () => {
         return HttpResponse.json({
-          encrypted_content: "packed-content",
-          encrypted_metadata: "packed-metadata",
+          encrypted_content: encryptedLetter.encrypted_content,
+          encrypted_metadata: encryptedMetadata.encrypted_content, // Reader expects .encrypted_content for metadata too
+          encrypted_dek: encryptedLetter.encrypted_dek,
           images: [],
         });
       }),
     );
 
     render(
-      <MemoryRouter initialEntries={[`/read/${mockPublicId}#${mockKey}`]}>
+      <MemoryRouter initialEntries={[`/read/${mockPublicId}#${sharingKey}`]}>
         <Routes>
           <Route path="/read/:public_id" element={<Reader />} />
         </Routes>
@@ -81,11 +78,10 @@ describe("Reader Page", () => {
     );
 
     // Should show loading state first
-    expect(screen.getByText(/Decrypting.../i)).toBeInTheDocument();
+    expect(screen.getByText(/Breaking the seal.../i)).toBeInTheDocument();
 
-    expect(
-      await screen.findByText(/A sealed message for/i),
-    ).toBeInTheDocument();
+    expect(await screen.findByText(/A sealed letter for/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/Guest/i).length).toBeGreaterThanOrEqual(1);
   });
 
   it("should display an error message if the server request fails", async () => {