refactor: extract Editor components into modular files and implement PostSealModal

frontend/src/components/editor/PostSealModal.tsx

@@ -0,0 +1,54 @@
+import { LockIcon } from "@phosphor-icons/react";
+import type { NavigateFunction } from "react-router-dom";
+import { PATHS, ROUTES } from "../../config/routes";
+
+interface PostSealModalProps {
+  sealedTargetId: string | null;
+  navigate: NavigateFunction;
+}
+
+export function PostSealModal({
+  sealedTargetId,
+  navigate,
+}: 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">
+        <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">
+          It's encrypted and always safe in your drawer.
+        </p>
+        <p className="text-base-content font-sans">
+          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
+        </p>
+        <div className="modal-action w-full justify-center gap-3 mt-4 mb-4">
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={() => navigate(ROUTES.DRAWER)}
+          >
+            Keep it to myself
+          </button>
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={() =>
+              navigate(PATHS.read(sealedTargetId), { replace: true })
+            }
+          >
+            View letter
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/editor/ToolBar.tsx

@@ -0,0 +1,195 @@
+import {
+  ImageIcon,
+  LockIcon,
+  QuestionIcon,
+  StampIcon,
+  TrayIcon,
+  VaultIcon,
+} from "@phosphor-icons/react";
+
+interface ToolBarProps {
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  sealBtnClicked: boolean;
+  setSealBtnClicked: (v: boolean) => void;
+  onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
+  setConfirmModal: (v: "VAULT" | "SEAL" | null) => void;
+}
+
+export function ToolBar({
+  fileInputRef,
+  sealBtnClicked,
+  setSealBtnClicked,
+  onSave,
+  setConfirmModal,
+}: ToolBarProps) {
+  return (
+    <div
+      id="writer-toolbar"
+      className="flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
+    >
+      <div className="flex gap-4">
+        <button
+          type="button"
+          className="btn btn-ghost btn-sm group"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <ImageIcon size={18} weight="bold" />
+          <span className="hidden md:inline group-hover:inline transition-all duration-1000">
+            Add Image
+          </span>
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="btn btn-ghost btn-sm text-[10px] group tracking-[0.2em] uppercase font-bold text-base-content/60 hover:text-base-content"
+          title="Store in your private drawer"
+          onClick={() => onSave("DRAFT")}
+        >
+          <TrayIcon size={18} weight="bold" />
+          <span className="hidden md:inline group-hover:inline transition-all duration-1000">
+            Draft
+          </span>
+        </button>
+
+        <div className="w-px h-4 bg-base-content/10 mx-2" />
+
+        <button
+          type="button"
+          className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
+          onClick={() => setSealBtnClicked(true)}
+        >
+          <StampIcon
+            size={16}
+            weight="fill"
+            className="mr-1 group-hover:animate-bounce"
+          />
+          <span
+            className={`hidden md:inline ${sealBtnClicked ? "inline" : ""} group-hover:inline transition-all duration-1000`}
+          >
+            Seal
+          </span>
+        </button>
+      </div>
+
+      <div
+        className={`flex-col items-center gap-2 absolute right-0 z-100000 bg-primary/20 rounded-full p-8 -m-2 ${sealBtnClicked ? "" : "hidden"}`}
+      >
+        <button
+          type="button"
+          className="btn btn-accent btn-sm rounded-full px-6 group"
+          onClick={() => onSave("SEALED")}
+        >
+          <StampIcon
+            size={16}
+            weight="fill"
+            className="mr-1 group-hover:animate-bounce"
+          />
+          <span className="transition-all duration-1000">Seal</span>
+        </button>
+        <div className="w-full divider text-neutral-content/60 mt-2 mb-2">
+          or
+        </div>
+        <button
+          type="button"
+          className="btn btn-neutral btn-sm rounded-full px-6 group"
+          onClick={() => setConfirmModal("VAULT")}
+        >
+          <VaultIcon size={16} weight="fill" className="mr-1" />
+          <span className="transition-all duration-1000">Vault</span>
+        </button>
+      </div>
+      <button
+        type="button"
+        onClick={() => setSealBtnClicked(false)}
+        className={`bg-transparent cursor-pointer -mt-2 absolute z-1000001 right-0 text-primary  ${sealBtnClicked ? "" : "hidden"}`}
+      >
+        <QuestionIcon weight="duotone" size={20} className={""} />
+      </button>
+    </div>
+  );
+}
+
+export function LetterHead() {
+  return (
+    <div className="flex items-center justify-center mb-8 h-14">
+      <div className="badge badge-outline border-primary/20 bg-primary/5 text-primary gap-2 p-4 rounded-full">
+        <LockIcon size={14} weight="fill" />
+        <span className="text-[10px] uppercase tracking-widest font-bold">
+          Sealed & View Only
+        </span>
+      </div>
+    </div>
+  );
+}
+
+interface VaultConfirmModalProps {
+  onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
+  setConfirmModal: (v: "VAULT" | "SEAL" | null) => void;
+  setUnlockDate: (d: Date | null) => void;
+}
+
+export function VaultConfirmModal({
+  onSave,
+  setConfirmModal,
+  setUnlockDate,
+}: VaultConfirmModalProps) {
+  return (
+    <div className={"modal modal-open bg-base-100/20 backdrop-blur-md"}>
+      <div className="modal-box p-12 flex flex-col items-center">
+        <VaultIcon
+          size={48}
+          className="text-primary mx-auto mb-8 animate-pulse"
+        />
+        <h3 className="font-serif text-3xl">Vault this letter?</h3>
+        <p className="text-base-content/60 text-sm text-center mt-4">
+          Vaulting locks the letter permanently and will be{" "}
+          <span className={"font-bold text-primary"}>mailed</span> to you
+          automatically on the unlock date.
+          <br />
+          <span className={"underline"}>
+            You cannot edit or view the contents of the letter until then.
+          </span>
+        </p>
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            const unlockDateStr = formData.get("vault-date") as string;
+            const newUnlockDate = new Date(unlockDateStr);
+            setUnlockDate(newUnlockDate);
+            await onSave("VAULT", newUnlockDate);
+            setConfirmModal(null);
+          }}
+          id="vault-form"
+        >
+          <div className={"divider tracking-tightest font-display text-sm"}>
+            Set an unlock date
+          </div>
+          <input
+            required
+            type="date"
+            className="input input-bordered w-full"
+            name="vault-date"
+          />
+          <button
+            className="btn btn-primary mt-4"
+            type="submit"
+            form="vault-form"
+          >
+            Vault
+          </button>
+
+          <button
+            type="button"
+            className="btn btn-ghost mt-4"
+            onClick={() => setConfirmModal(null)}
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/EnvelopeReveal.tsx

@@ -66,8 +66,10 @@ export function EnvelopeReveal({
               src={waxSeal}
               alt="Seal"
               onClick={() => flapCheckbox.current?.click()}
+              onKeyDown={() => flapCheckbox.current?.click()}
             />
             <button
+              type="button"
               id="letter"
               className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen max-w-4xl h-screen  z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
               onClick={handleClick}
@@ -82,12 +84,14 @@ export function EnvelopeReveal({
               className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3 pointer-events-none"
             ></div>
             <button
+              type="button"
               id="env-bottom"
               className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3"
             ></button>
           </div>
 
-          <div
+          <button
+            type="button"
             className="p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2"
             onClick={() => setIsFlipped((prev) => !prev)}
           >
@@ -113,7 +117,7 @@ export function EnvelopeReveal({
               className={"absolute mt-0 mr-4 top-18 right-8 text-primary"}
               size={50}
             />
-          </div>
+          </button>
         </div>
       </div>
       {ignite && (

frontend/src/components/ui/PasskeyModal.tsx

@@ -0,0 +1,52 @@
+import { LockKeyIcon } from "@phosphor-icons/react";
+
+interface PasskeyModalProps {
+  onUnlock: (password: string) => Promise<void>;
+}
+
+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">
+        <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">
+          Your passkey is used to decrypt your data locally.
+        </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 onUnlock(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>
+  );
+}