feat: implement letter sealing UI with save confirmation

frontend/src/pages/Editor.tsx

@@ -1,4 +1,9 @@
-import { ImageIcon, LockIcon, TrayIcon } from "@phosphor-icons/react";
+import {
+  DownloadSimpleIcon,
+  ImageIcon,
+  LockIcon,
+  TrayIcon,
+} from "@phosphor-icons/react";
 import type { FabricObject } from "fabric";
 import { useRef, useState } from "react";
 import { api } from "../api/apiClient";
@@ -12,6 +17,10 @@ import { useKeyStore } from "../store/useKeyStore";
 import { CryptoUtils } from "../utils/crypto";
 
 export default function Editor() {
+  const [_letterId] = useState(() => crypto.randomUUID());
+  const [isSealing, setIsSealing] = useState(false);
+  const [isSaveSuccess, setIsSaveSuccess] = useState(false);
+
   const [recipient, setRecipient] = useState("");
   const masterKey = useKeyStore.getState().masterKey;
 
@@ -26,6 +35,8 @@ export default function Editor() {
   };
 
   async function handleSeal(): Promise<void> {
+    if (isSealing) return;
+    setIsSealing(true);
     const cryptoUtils = new CryptoUtils();
     await cryptoUtils.initialize();
 
@@ -63,8 +74,6 @@ export default function Editor() {
     const encrypted_metadata = "";
 
     // upload to server
-
-    // sample payload
     /*
     payload = {
             "type": "SENT",
@@ -84,11 +93,40 @@ export default function Editor() {
     encImageFilesMap.forEach((image, filename) => {
       formData.append("image_files", image, filename);
     });
-    await api.post(endpoints.LETTERS, formData);
+    try {
+      await api.post(endpoints.LETTERS, formData);
+      setIsSaveSuccess(true);
+      setTimeout(() => {
+        setIsSaveSuccess(false);
+      }, 5000);
+    } catch (error) {
+      console.error("Error sealing letter:", error);
+    } finally {
+      setIsSealing(false);
+    }
   }
 
   return (
     <section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300">
+      {isSaveSuccess && (
+        <div className="modal modal-open">
+          <div className="modal-box">
+            <div className="alert alert-success">
+              <DownloadSimpleIcon size={18} weight="bold" />
+              <h3 className="font-bold text-lg">Letter saved successfully!</h3>
+            </div>
+            <div className="modal-action">
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={() => setIsSaveSuccess(false)}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="max-w-[720px] mx-auto px-1 md:px-0">
         <div className="flex justify-between items-end mb-16 border-b border-base-content/5 pb-8 px-0">
           <div className="flex flex-col gap-2 flex-1">