feat: add post seal modal for vault

frontend/src/components/editor/PostSealModal.tsx

@@ -5,11 +5,13 @@ import { PATHS, ROUTES } from "../../config/routes";
 interface PostSealModalProps {
   sealedTargetId: string | null;
   navigate: NavigateFunction;
+  type: "KEPT" | "VAULT";
 }
 
 export function PostSealModal({
   sealedTargetId,
   navigate,
+  type = "KEPT",
 }: PostSealModalProps) {
   if (!sealedTargetId) return null;
   return (
@@ -20,17 +22,37 @@ export function PostSealModal({
         <p className="text-base-content/60">
           It's encrypted and always safe in your drawer.
         </p>
-        <p className="text-base-content font-sans">
+        {type === "KEPT" ? (
+          <p className="text-base-content/80 text-sm font-sans">
             When you're ready,
             <br />
             you can{" "}
-          <span className="text-primary font-bold font-display">read</span> it,{" "}
+            <span className="text-primary font-bold font-display">read</span>{" "}
-          <span className="text-accent font-bold font-display">send</span> it to
+            it, <span className="text-accent font-bold font-display">send</span>{" "}
-          someone, or{" "}
+            it to someone, or{" "}
-          <span className="text-error font-bold font-display">burn</span> it to
+            <span className="text-error font-bold font-display">burn</span> it
-          release
+            to release
           </p>
+        ) : (
+          <p className="text-base-content/80 text-sm font-sans">
+            Be assured that the letter will find you when the time is right.
+            <br />
+            Till then,{" "}
+            <span className="font-bold font-display text-primary">
+              take a deep breath
+            </span>
+            ,{" "}
+            <span className="font-bold font-display text-accent">manifest</span>
+            , and{" "}
+            <span className="font-bold font-display text-success">
+              let it rest
+            </span>
+            .
+          </p>
+        )}
         <div className="modal-action w-full justify-center gap-3 mt-4 mb-4">
+          {type === "KEPT" ? (
+            <>
               <button
                 type="button"
                 className="btn btn-ghost btn-sm"
@@ -41,12 +63,20 @@ export function PostSealModal({
               <button
                 type="button"
                 className="btn btn-primary btn-sm"
-            onClick={() =>
+                onClick={() => navigate(PATHS.read(sealedTargetId))}
-              navigate(PATHS.read(sealedTargetId), { replace: true })
-            }
               >
                 View letter
               </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => navigate(ROUTES.DRAWER)}
+            >
+              Step Away...
+            </button>
+          )}
         </div>
       </div>
     </div>

frontend/src/components/editor/ToolBar.tsx

@@ -105,7 +105,20 @@ export function ToolBar({
         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={""} />
+        <div className="tooltip tooltip-left">
+          <div className="tooltip-content -translate-x-38 text-left">
+            <span className="font-bold text-accent">Seal</span> puts the letter
+            in an envelope, ready to be read right away.
+            <div className="divider my-0"></div>
+            <span className="font-bold text-success">Vault</span> keeps it
+            locked away until the right moment, even from yourself.
+          </div>
+          <QuestionIcon
+            weight="duotone"
+            size={20}
+            className={"absolute -translate-x-38 -translate-y-3"}
+          />
+        </div>
       </button>
     </div>
   );
@@ -136,21 +149,23 @@ export function VaultConfirmModal({
   setUnlockDate,
 }: VaultConfirmModalProps) {
   return (
-    <div className={"modal modal-open bg-base-100/20 backdrop-blur-md"}>
+    <div className={"modal modal-open bg-base-100/10 backdrop-blur-md"}>
-      <div className="modal-box p-12 flex flex-col items-center">
+      <div className="modal-box p-12 flex flex-col items-center bg-base-100/90">
         <VaultIcon
           size={48}
           className="text-primary mx-auto mb-8 animate-pulse"
         />
-        <h3 className="font-serif text-3xl">Vault this letter?</h3>
+        <h3 className="font-serif text-3xl">Take it away, then?</h3>
         <p className="text-base-content/60 text-sm text-center mt-4">
-          Vaulting locks the letter permanently and will be{" "}
+          By vaulting this letter, you ask me to hold on to this.
-          <span className={"font-bold text-primary"}>mailed</span> to you
-          automatically on the unlock date.
           <br />
-          <span className={"underline"}>
+          I'll remember to mail you this on the unlock date.
-            You cannot edit or view the contents of the letter until then.
+          <br />
+          <span className={"font-bold text-primary"}>
+            {" "}
+            But I won't let you read or rewrite this letter until then.
           </span>
+          <br />
         </p>
         <form
           onSubmit={async (e) => {
@@ -158,11 +173,13 @@ 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);
           }}
           id="vault-form"
+          className="min-w-75"
         >
           <div className={"divider tracking-tightest font-display text-sm"}>
             Set an unlock date
@@ -173,21 +190,22 @@ export function VaultConfirmModal({
             className="input input-bordered w-full"
             name="vault-date"
           />
+          <div className="w-full flex justify-center gap-8 mt-4">
             <button
-            className="btn btn-primary mt-4"
+              type="button"
+              className="btn btn-ghost btn-sm mt-4"
+              onClick={() => setConfirmModal(null)}
+            >
+              I need time
+            </button>
+            <button
+              className="btn btn-primary btn-sm mt-4"
               type="submit"
               form="vault-form"
             >
-            Vault
+              Take it
-          </button>
-
-          <button
-            type="button"
-            className="btn btn-ghost mt-4"
-            onClick={() => setConfirmModal(null)}
-          >
-            Cancel
             </button>
+          </div>
         </form>
       </div>
     </div>

frontend/src/components/reader/PostActionOverlay.tsx

@@ -1,7 +1,11 @@
 import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../config/routes";
 
-export function PostActionOverlay({ revealState }) {
+interface PostActionOverlayProps {
+  revealState: "sealed" | "revealed" | "burning" | "burned";
+}
+
+export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
   const navigate = useNavigate();
   return (
     <div