refactor: extract Editor components into modular files and implement PostSealModal

frontend/src/pages/Drawer.tsx

@@ -1,9 +1,10 @@
-import { FeatherIcon, LockKeyIcon } from "@phosphor-icons/react";
+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/DrawerSection";
 import { LetterItem } from "../components/ui/LetterItem";
+import { PasskeyModal } from "../components/ui/PasskeyModal";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
@@ -12,57 +13,6 @@ import {
   formatRelativeDateWithoutTime,
 } from "../utils/dateFormat.ts";
 
-interface PasskeyModalProps {
-  onUnlock: (password: string) => Promise<void>;
-}
-
-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 you to re-enter 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 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>
-  );
-}
-
 export default function Drawer() {
   const { user, logout, unlock } = useAuth();