refactor: implement reusable Modal component

frontend/src/components/drawer/PasskeyModal.tsx

@@ -1,4 +1,5 @@
 import { LockKeyIcon } from "@phosphor-icons/react";
+import { Modal } from "../ui/Modal";
 
 interface PasskeyModalProps {
   onUnlock: (password: string) => Promise<void>;
@@ -6,8 +7,7 @@ interface PasskeyModalProps {
 
 export function PasskeyModal({ onUnlock }: PasskeyModalProps) {
   return (
-    <div className="modal modal-open bg-base-100/20 backdrop-blur-md z-100">
-      <div className="modal-box p-12 flex flex-col items-center">
+    <Modal isOpen={true}>
       <LockKeyIcon
         size={48}
         className="text-primary mx-auto mb-8 animate-pulse"
@@ -46,7 +46,6 @@ export function PasskeyModal({ onUnlock }: PasskeyModalProps) {
           </button>
         </form>
       </div>
-      </div>
-    </div>
+    </Modal>
   );
 }

frontend/src/components/editor/PostSealModal.tsx

@@ -1,6 +1,7 @@
 import { LockIcon } from "@phosphor-icons/react";
 import type { NavigateFunction } from "react-router-dom";
 import { PATHS, ROUTES } from "../../config/routes";
+import { Modal } from "../ui/Modal";
 
 interface PostSealModalProps {
   sealedTargetId: string | null;
@@ -13,10 +14,8 @@ export function PostSealModal({
   navigate,
   type = "KEPT",
 }: PostSealModalProps) {
-  if (!sealedTargetId) return null;
   return (
-    <div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md z-1000">
-      <div className="modal-box flex flex-col items-center text-center gap-6">
+    <Modal isOpen={!!sealedTargetId}>
       <LockIcon size={32} weight="duotone" className="text-primary mt-3" />
       <h3 className="font-serif text-2xl">Your letter is sealed</h3>
       <p className="text-base-content/60">
@@ -27,11 +26,11 @@ export function PostSealModal({
           When you're ready,
           <br />
           you can{" "}
-            <span className="text-primary font-bold font-display">read</span>{" "}
-            it, <span className="text-accent font-bold font-display">send</span>{" "}
-            it to someone, or{" "}
-            <span className="text-error font-bold font-display">burn</span> it
-            to release
+          <span className="text-primary font-bold font-display">read</span> it,{" "}
+          <span className="text-accent font-bold font-display">send</span> it to
+          someone, or{" "}
+          <span className="text-error font-bold font-display">burn</span> it to
+          release
         </p>
       ) : (
         <p className="text-base-content/80 text-sm font-sans">
@@ -41,8 +40,7 @@ export function PostSealModal({
           <span className="font-bold font-display text-primary">
             take a deep breath
           </span>
-            ,{" "}
-            <span className="font-bold font-display text-accent">manifest</span>
+          , <span className="font-bold font-display text-accent">manifest</span>
           , and{" "}
           <span className="font-bold font-display text-success">
             let it rest
@@ -63,7 +61,7 @@ export function PostSealModal({
             <button
               type="button"
               className="btn btn-primary btn-sm"
-                onClick={() => navigate(PATHS.read(sealedTargetId))}
+              onClick={() => navigate(PATHS.read(sealedTargetId!))}
             >
               View letter
             </button>
@@ -78,7 +76,6 @@ export function PostSealModal({
           </button>
         )}
       </div>
-      </div>
-    </div>
+    </Modal>
   );
 }

frontend/src/components/editor/ToolBar.tsx

@@ -6,6 +6,7 @@ import {
   TrayIcon,
   VaultIcon,
 } from "@phosphor-icons/react";
+import { Modal } from "../ui/Modal";
 
 interface ToolBarProps {
   fileInputRef: React.RefObject<HTMLInputElement | null>;
@@ -150,8 +151,7 @@ export function VaultConfirmModal({
   setUnlockDate,
 }: VaultConfirmModalProps) {
   return (
-    <div className={"modal modal-open bg-base-100/10 backdrop-blur-md"}>
-      <div className="modal-box p-12 flex flex-col items-center bg-base-100/90">
+    <Modal isOpen={true}>
       <VaultIcon
         size={48}
         className="text-primary mx-auto mb-8 animate-pulse"
@@ -174,7 +174,6 @@ export function VaultConfirmModal({
           const formData = new FormData(e.currentTarget);
           const unlockDateStr = formData.get("vault-date") as string;
           const newUnlockDate = new Date(unlockDateStr);
-            console.log(newUnlockDate);
           setUnlockDate(newUnlockDate);
           await onSave("VAULT", newUnlockDate);
           setConfirmModal(null);
@@ -208,7 +207,6 @@ export function VaultConfirmModal({
           </button>
         </div>
       </form>
-      </div>
-    </div>
+    </Modal>
   );
 }

frontend/src/components/reader/BurnModal.tsx

@@ -1,11 +1,12 @@
-import { CampfireIcon, FlameIcon, XCircleIcon } from "@phosphor-icons/react";
+import { CampfireIcon, FlameIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
+import { Modal } from "../ui/Modal";
 
 interface BurnModalProps {
   burnLetter: () => void;
   isBurning: boolean;
   setShowBurnModal: (show: boolean) => void;
-  setRevealState: (state: "sealed" | "revealed" | "burning" | "burned") => void;
+  setRevealState: (state: "SEALED" | "REVEALED" | "BURNING" | "BURNED") => void;
 }
 
 export function BurnModal({
@@ -20,7 +21,7 @@ export function BurnModal({
   useEffect(() => {
     if (!burnClicked) return;
     if (flameOn === 100) {
-      setRevealState("sealed");
+      setRevealState("SEALED");
       burnLetter();
     }
     const interval = setInterval(() => {
@@ -33,23 +34,15 @@ export function BurnModal({
   const burnStyle = flameOn < 30 ? "" : `contrast(${flameOn / 30})`;
 
   return (
-    <div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md">
+    <Modal isOpen={true} onClose={() => setShowBurnModal(false)}>
       <div
-        className={`modal-box flex flex-col items-center gap-4 py-8 text-center transition-all duration-200 ease-in-out ${burnClicked ? "animate-[pulse_15s_linear_infinite]" : ""}`}
+        className={`flex flex-col items-center gap-4 text-center transition-all duration-200 ease-in-out ${burnClicked ? "animate-[pulse_15s_linear_infinite]" : ""}`}
         style={
           {
             transform: `rotate(${rotate}deg)`,
           } as React.CSSProperties
         }
       >
-        <button
-          type="button"
-          className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-          onClick={() => setShowBurnModal(false)}
-          aria-label="Close"
-        >
-          <XCircleIcon size={18} weight="bold" />
-        </button>
         <CampfireIcon
           size={48}
           weight="duotone"
@@ -101,6 +94,6 @@ export function BurnModal({
           </button>
         </div>
       </div>
-    </div>
+    </Modal>
   );
 }

frontend/src/components/reader/PostActionOverlay.tsx

@@ -2,22 +2,22 @@ import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../config/routes";
 
 interface PostActionOverlayProps {
-  revealState: "sealed" | "revealed" | "burning" | "burned";
+  revealState: "SEALED" | "REVEALED" | "BURNING" | "BURNED";
 }
 
 export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
   const navigate = useNavigate();
   return (
     <div
-      className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "burned" ? "opacity-100" : "opacity-0"} transition-all delay-300 duration-1000`}
+      className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} transition-all delay-1000 duration-1000`}
     >
       <h1
-        className={`text-6xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
+        className={`text-6xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
       >
         It is done
       </h1>
       <div
-        className={`text-xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
+        className={`text-xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
       >
         <p className="w-full">
           May your <span className="italic text-primary">soul</span> find

frontend/src/components/reader/ShareModal.tsx

@@ -1,8 +1,6 @@
-import {
-  EyeSlashIcon,
-  PaperPlaneTiltIcon,
-  XCircleIcon,
-} from "@phosphor-icons/react";
+import { EyeSlashIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react";
+import { Modal } from "../ui/Modal";
+import Saajan from "../ui/Saajan";
 
 interface ShareModalProps {
   shareLink: string | null;
@@ -15,16 +13,8 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
     await navigator.clipboard.writeText(shareLink);
   };
   return (
-    <div className="modal modal-open 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">
-        <button
-          type="button"
-          className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-          onClick={() => setShareLink(null)}
-          aria-label="Close"
-        >
-          <XCircleIcon size={18} weight="bold" />
-        </button>
+    <>
+      <Modal isOpen={!!shareLink} onClose={() => setShareLink(null)}>
         <div className="flex flex-col items-center justify-center text-center gap-6 py-4">
           <div className="space-y-2">
             <PaperPlaneTiltIcon
@@ -34,14 +24,17 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
             />
             <h3 className="font-serif text-3xl">Send this letter</h3>
             <p className="text-base-content/80 text-sm font-sans mt-4">
-              You've carried these words long enough. Send your letter now, and
-              let the <span className="text-accent font-display">unsaid</span>{" "}
-              finally find its home.
+              You've carried these words long enough.
+              <br />
+              Send your letter now, and let the{" "}
+              <span className="text-accent font-display">unsaid</span> finally
+              find its home.
             </p>
             <div className="divider mx-auto" />
             <blockquote className="text-sm info text-neutral-content/60 font-sans">
-              The recipient will have the same viewing experience like you do
-              now.
+              They'll receive it exactly as you're seeing it now.
+              <br />
+              Nothing more, nothing less.
             </blockquote>
           </div>
           <div className="w-full flex items-center gap-2 bg-base-300 p-2 rounded-xl">
@@ -69,7 +62,13 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
             </p>
           </div>
         </div>
+      </Modal>
+      <div className="absolute bottom-0 z-1000 font-sans w-full">
+        <Saajan
+          position="top"
+          message={`Someone once said,\n"To send a letter is a good way to go somewhere without moving anything but your heart."\nThey were not wrong.`}
+        />
       </div>
-    </div>
+    </>
   );
 }

frontend/src/components/ui/LogModal.tsx

@@ -1,4 +1,5 @@
-import { WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
+import { WarningIcon } from "@phosphor-icons/react";
+import { Modal } from "./Modal";
 
 interface LogModalContent {
   status: "WARN" | "ERROR" | "RESET" | "SUCCESS";
@@ -15,19 +16,13 @@ export const LogModal = ({
   onClose,
   status,
 }: LogModalContent) => {
-  return status === "RESET" || !isOpen ? (
-    <div></div>
-  ) : (
-    <div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md z-100">
-      <div className="modal-box bg-transparent border-none shadow-none relative">
+  return (
+    <Modal isOpen={isOpen && status !== "RESET"} onClose={onClose}>
       <div
         className={`alert ${status === "WARN" ? "alert-warning" : "alert-error"} flex flex-col items-center text-center gap-6 py-4`}
       >
         {status === "WARN" && (
-            <WarningIcon className="text-warning" size={16} weight="bold" />
-          )}
-          {status === "ERROR" && (
-            <XCircleIcon className="text-error" size={16} weight="bold" />
+          <WarningIcon className="text-warning" size={16} weight="duotone" />
         )}
         {message}
         <div className="divider text-primary-content text-xs uppercase tracking-widest">
@@ -38,17 +33,7 @@ export const LogModal = ({
             <code>{String(log)}</code>
           </pre>
         </div>
-          <form method="dialog">
-            <button
-              type="button"
-              onClick={onClose}
-              className="btn btn-sm btn-circle btn-ghost absolute right-6 top-6"
-            >
-              <XIcon size={6} weight="bold" />
-            </button>
-          </form>
-        </div>
-      </div>
       </div>
+    </Modal>
   );
 };

frontend/src/components/ui/Modal.tsx

@@ -0,0 +1,30 @@
+import { XCircleIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+export function Modal({ isOpen, onClose, children }: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
+      <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+        {onClose && (
+          <button
+            type="button"
+            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <XCircleIcon size={18} weight="bold" />
+          </button>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Editor.tsx

@@ -23,6 +23,7 @@ import {
 } from "../components/editor/ToolBar";
 import DateDisplay from "../components/ui/DateDisplay";
 import { LogModal } from "../components/ui/LogModal";
+import { Modal } from "../components/ui/Modal";
 import { Navbar } from "../components/ui/Navbar";
 
 import { endpoints } from "../config/endpoints";
@@ -356,12 +357,7 @@ export default function Editor() {
         )}
 
         {saveOverlay !== "idle" && (
-          <div
-            className={`modal modal-open bg-base-100/20 backdrop-blur-md transition-opacity duration-300 ${
-              showSaveOverlay ? "opacity-100" : "opacity-0"
-            }`}
-          >
-            <div className="modal-box p-0 bg-transparent shadow-none transition-all duration-300">
+          <Modal isOpen={showSaveOverlay}>
             {saveOverlay === "saving" && (
               <div
                 role="alert"
@@ -407,8 +403,7 @@ export default function Editor() {
                 <span className="font-bold">Failed to save letter</span>
               </div>
             )}
-            </div>
-          </div>
+          </Modal>
         )}
 
         {confirmModal === "VAULT" && (

frontend/src/pages/Login.tsx

@@ -12,6 +12,7 @@ import { z } from "zod";
 import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import { Modal } from "../components/ui/Modal";
 import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
@@ -31,13 +32,8 @@ function WelcomeModal({
   setShowWelcome: (show: boolean) => void;
 }) {
   return (
-    <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
-      <div className="absolute bottom-1">
-        <Saajan
-          message={"I've lost words before.\nI know what it feels like."}
-        />
-      </div>
-      <div className="modal-box border bg-base-100/20 border-primary/20 shadow-2xl p-8">
+    <>
+      <Modal isOpen={true}>
         <div className="flex flex-col items-center text-center gap-4">
           <div className="bg-primary/10 p-4 rounded-full animate-pulse">
             <ShieldCheckIcon
@@ -96,8 +92,14 @@ function WelcomeModal({
             </button>
           </div>
         </div>
+      </Modal>
+      <div className="absolute bottom-0 z-1000 font-sans w-full">
+        <Saajan
+          position="top"
+          message={"I've lost words before.\nI know what it feels like."}
+        />
       </div>
-    </div>
+    </>
   );
 }
 

frontend/src/pages/Reader.tsx

@@ -33,6 +33,7 @@ interface LetterMetadata {
   updated_at?: string;
 }
 
+const WAIT_FOR_BURN_MS = 18000;
 export default function Reader() {
   const { public_id } = useParams();
   const location = useLocation();
@@ -44,13 +45,10 @@ export default function Reader() {
 
   const [isDecrypting, setIsDecrypting] = useState(true);
   const [revealState, setRevealState] = useState<
-    "sealed" | "revealed" | "burned" | "burning"
-  >("sealed");
-  const [error, setError] = useState<{
-    message: string;
-    log: string;
-  } | null>(null);
-  const [warning, setWarning] = useState<{
+    "SEALED" | "REVEALED" | "BURNED" | "BURNING"
+  >("SEALED");
+  const [logTrace, setLogTrace] = useState<{
+    type: "WARN" | "ERROR";
     message: string;
     log: string;
   } | null>(null);
@@ -92,8 +90,8 @@ export default function Reader() {
       setShowBurnModal(false);
       setIgnite(true);
       setTimeout(() => {
-        setRevealState("burned");
-      }, 13000);
+        setRevealState("BURNED");
+      }, WAIT_FOR_BURN_MS);
     }
   };
 
@@ -180,17 +178,19 @@ export default function Reader() {
                 );
           }
         } catch (err) {
-          setWarning({
+          setLogTrace({
             message:
               "Failed to decrypt elements. Images might not render in the letter as intended.",
             log: err instanceof Error ? err.message : "Unknown error",
+            type: "WARN",
           });
         }
         setDecryptedCanvasData(canvasData);
       } catch (err) {
-        setError({
-          message: `Failed to load letter :(`,
+        setLogTrace({
+          message: `Failed to load letter ☹`,
           log: err instanceof Error ? err.message : "Unknown error",
+          type: "ERROR",
         });
       } finally {
         setIsDecrypting(false);
@@ -203,7 +203,7 @@ export default function Reader() {
   useEffect(() => {
     if (
       !isDecrypting &&
-      revealState === "revealed" &&
+      revealState === "REVEALED" &&
       decryptedCanvasData &&
       canvasRef.current
     ) {
@@ -214,12 +214,12 @@ export default function Reader() {
   if (isDecrypting) {
     return (
       <div className="flex items-center justify-center bg-base-100 font-serif">
-        <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none z-0" />
+        <div className="fixed w-screen h-screen inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none z-0" />
         <div className="text-center space-y-6 z-10">
           <Logo />
           <div className="flex flex-col items-center gap-2">
             <span className="loading loading-ring loading-md text-primary/40"></span>
-            <p className="text-[10px] uppercase tracking-[0.4em] text-base-content/20 animate-pulse">
+            <p className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse">
               Breaking the seal...
             </p>
           </div>
@@ -228,14 +228,17 @@ export default function Reader() {
     );
   }
 
-  if (error) {
+  if (logTrace) {
     return (
       <LogModal
-        isOpen={!!error}
-        onClose={() => (window.location.href = "/")}
-        message={error.message}
-        log={error.log}
-        status="ERROR"
+        isOpen={!!logTrace}
+        onClose={() => {
+          if (logTrace.type === "ERROR") window.location.href = "/";
+          setLogTrace(null);
+        }}
+        message={logTrace.message}
+        log={logTrace.log}
+        status={logTrace.type}
       />
     );
   }
@@ -245,12 +248,12 @@ export default function Reader() {
       <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" />
       <div
         className={`transition-all delay-300 duration-1000 relative ${
-          revealState === "revealed"
+          revealState === "REVEALED"
             ? "opacity-0 w-0 h-0 overflow-hidden invisible"
             : "opacity-100"
         }`}
       >
-        {revealState === "sealed" && (
+        {revealState === "SEALED" && (
           <div className="h-[80vh] mx-auto flex-col items-center flex justify-center">
             <div className="perspective-distant scale-80 duration-1000 transition-all animate-[pulse_2s_linear_1]">
               <EnvelopeReveal
@@ -260,7 +263,7 @@ export default function Reader() {
                     ? formatDate(new Date(metadata.updated_at))
                     : undefined
                 }
-                onRevealComplete={() => setRevealState("revealed")}
+                onRevealComplete={() => setRevealState("REVEALED")}
                 ignite={ignite}
               />
             </div>
@@ -270,15 +273,7 @@ export default function Reader() {
 
       {ignite && <PostActionOverlay revealState={revealState} />}
 
-      <LogModal
-        isOpen={!!warning}
-        onClose={() => setWarning(null)}
-        message={warning?.message || ""}
-        log={warning?.log || ""}
-        status="WARN"
-      />
-
-      {revealState === "revealed" && (
+      {revealState === "REVEALED" && (
         <div className="max-w-4xl m-8 mx-auto space-y-8 h-full relative inset-0 z-100">
           <div className="relative group perspective-1000">
             <div className="absolute inset-0 bg-primary/5 blur-3xl rounded-full scale-75 opacity-0 group-hover:opacity-100 transition-opacity duration-1000 pointer-events-none" />
@@ -309,7 +304,7 @@ export default function Reader() {
         />
       )}
 
-      {isAuthor && revealState !== "burned" && (
+      {isAuthor && revealState !== "BURNED" && (
         <div className="flex justify-center gap-2 mt-8 z-10 relative">
           <button
             id="share-letter-btn"