feat: add image upload functionality to editor via ComposeCanvas imperative handle

frontend/src/components/ui/ComposeCanvas.tsx

@@ -1,9 +1,9 @@
 import * as fabric from "fabric";
-import { useEffect, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 
 const PAD = 36;
 
-export default function ComposeCanvas() {
+export const ComposeCanvas = forwardRef((_props, ref) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const fabricRef = useRef<fabric.Canvas | null>(null);
@@ -125,6 +125,22 @@ export default function ComposeCanvas() {
     };
   }, []);
 
+  useImperativeHandle(ref, () => ({
+    addImage: (url: string) => {
+      if (!fabricRef.current) return;
+      fabric.FabricImage.fromURL(url).then((img) => {
+        img.scaleToWidth(300);
+        img.set({
+          left: PAD,
+          top: PAD,
+        });
+        fabricRef.current?.add(img);
+        fabricRef.current?.setActiveObject(img);
+        fabricRef.current?.requestRenderAll();
+      });
+    },
+  }));
+
   return (
     <div
       ref={wrapperRef}
@@ -138,4 +154,4 @@ export default function ComposeCanvas() {
       />
     </div>
   );
-}
+});

frontend/src/hooks/useAuth.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { api, publicApi } from "../api/apiClient";
 import { endpoints } from "../config/endpoints";
 import { useAuthStore } from "../store/useAuthStore";
@@ -9,14 +10,8 @@ interface UserProfile {
 }
 
 export const useAuth = () => {
-  const {
+  const { accessToken, user, isInitializing, setAuth, clearAuth } =
-    accessToken,
+    useAuthStore();
-    user,
-    isInitializing,
-    setAuth,
-    clearAuth,
-    setInitializing,
-  } = useAuthStore();
 
   const isAuthenticated = !!accessToken;
 
@@ -32,8 +27,11 @@ export const useAuth = () => {
     }
   };
 
-  const initialize = async () => {
+  const initialize = useCallback(async () => {
-    // If we already have a session in memory, don't trigger refresh/me again
+    const { accessToken, user, setAuth, clearAuth, setInitializing } =
+      useAuthStore.getState();
+
+    // If session in memory, don't trigger refresh/me again
     if (accessToken && user) {
       setInitializing(false);
       return;
@@ -42,19 +40,17 @@ export const useAuth = () => {
     try {
       // try refresh
       const { data: refreshData } = await publicApi.post(endpoints.REFRESH);
-
       // fetch user profile with the new access token
       const { data: userData } = await api.get(endpoints.ME, {
         headers: { Authorization: `Bearer ${refreshData.access}` },
       });
-
       // update auth details in memory
       setAuth(refreshData.access, userData);
     } catch (err) {
       console.error("Initialization failed:", err);
       clearAuth();
     }
-  };
+  }, []);
 
   return {
     isAuthenticated,

frontend/src/pages/Editor.tsx

@@ -1,11 +1,21 @@
-import { LockIcon, TrayIcon } from "@phosphor-icons/react";
+import { ImageIcon, LockIcon, TrayIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useRef, useState } from "react";
-import ComposeCanvas from "../components/ui/ComposeCanvas";
+import { 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];
+    if (file) {
+      const url = URL.createObjectURL(file);
+      canvasRef.current?.addImage(url);
+    }
+  };
+
   return (
     <section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300">
       <div className="max-w-[720px] mx-auto px-1 md:px-0">
@@ -33,7 +43,22 @@ export default function Editor() {
           id="writer-toolbar"
           className="flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
         >
-          <div className="flex gap-4">Toolbar Placeholder</div>
+          <div className="flex gap-4">
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => _fileInputRef.current?.click()}
+            >
+              <ImageIcon size={18} weight="bold" />
+            </button>
+            <input
+              type="file"
+              ref={_fileInputRef}
+              onChange={_handleImageUpload}
+              accept="image/*"
+              className="hidden"
+            />
+          </div>
 
           <div className="flex items-center gap-2">
             <button
@@ -56,7 +81,7 @@ export default function Editor() {
             </button>
           </div>
         </div>
-        <ComposeCanvas />
+        <ComposeCanvas ref={canvasRef} />
       </div>
     </section>
   );