refactor: improve type safety, update navigation, and optimize base64 encoding in auth and editor components

frontend/src/pages/Editor.tsx

@@ -1,15 +1,18 @@
 import { ImageIcon, LockIcon, TrayIcon } from "@phosphor-icons/react";
 import { useRef, useState } from "react";
-import { ComposeCanvas } from "../components/ui/ComposeCanvas";
+import {
+  type CanvasTools,
+  ComposeCanvas,
+} from "../components/ui/ComposeCanvas";
 import DateDisplay from "../components/ui/DateDisplay";
 
 export default function Editor() {
   const [recipient, setRecipient] = useState("");
 
-  const canvasRef = useRef<any>(null);
-  const _fileInputRef = useRef<HTMLInputElement>(null);
-  const _handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
+  const canvasRef = useRef<CanvasTools>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]; // pick one file at a time
     if (file) {
       const url = URL.createObjectURL(file);
       canvasRef.current?.addImage(url);
@@ -47,14 +50,14 @@ export default function Editor() {
             <button
               type="button"
               className="btn btn-ghost btn-sm"
-              onClick={() => _fileInputRef.current?.click()}
+              onClick={() => fileInputRef.current?.click()}
             >
               <ImageIcon size={18} weight="bold" />
             </button>
             <input
               type="file"
-              ref={_fileInputRef}
-              onChange={_handleImageUpload}
+              ref={fileInputRef}
+              onChange={handleImageUpload}
               accept="image/*"
               className="hidden"
             />

frontend/src/pages/Register.tsx

@@ -9,6 +9,7 @@ import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
 import { endpoints } from "../config/endpoints";
+import { ROUTES } from "../config/routes";
 
 // validation logic
 const registerSchema = z
@@ -47,7 +48,7 @@ export default function Register() {
         email: data.email,
         password: data.password,
       });
-      navigate("/verify-email");
+      navigate(ROUTES.VERIFY_EMAIL);
     } catch (err) {
       console.error("Registration error:", err);
       let message = "Registration failed. Please try again.";

frontend/src/pages/VerifyEmail.tsx

@@ -29,13 +29,14 @@ export default function VerifyEmail() {
         </p>
       </div>
 
-      <p
+      <button
+        type="button"
         className="text-xs italic opacity-40 cursor-pointer underline"
         onClick={() => window.close()}
         onKeyDown={(e) => e.key === "Enter" && window.close()}
       >
         You can close this window now.
-      </p>
+      </button>
     </div>
   );
 }