refactor: extract Editor components into modular files and implement PostSealModal

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>
+  );
+}