From 49177a5b120cedd9c9cf67bfb5c43db8017c2684 Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Thu, 30 Apr 2026 06:00:48 +0530
Subject: [PATCH] refactor: optimize ComposeCanvas textbox pick and canvas
 focus logic

---
 .../src/components/editor/ComposeCanvas.tsx   | 20 ++++++-------------
 .../src/components/login/WelcomeModal.tsx     |  2 +-
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/editor/ComposeCanvas.tsx b/frontend/src/components/editor/ComposeCanvas.tsx
index 01e851e..07ce500 100644
--- a/frontend/src/components/editor/ComposeCanvas.tsx
+++ b/frontend/src/components/editor/ComposeCanvas.tsx
@@ -1,4 +1,3 @@
-import type { FabricText } from "fabric";
 import * as fabric from "fabric";
 import type * as React from "react";
 import { useCallback, useEffect, useImperativeHandle, useRef } from "react";
@@ -220,7 +219,7 @@ export function ComposeCanvas({
 
       // Hack: Fabric needs a small initial delay to mount before it will accept focus.
       // otherwise it goes to the front
-      if (!(readOnly || data)) {
+      if (!readOnly) {
         setTimeout(() => focusTextbox(textbox), 200);
       }
     },
@@ -353,24 +352,17 @@ export function ComposeCanvas({
     },
 
     setStyle: (style: CanvasStyle) => {
-      if (!fabricRef.current) return;
-      const textBoxes = fabricRef.current.getObjects("Textbox") as FabricText[];
+      const textBox = textboxRef.current;
+      if (!textBox) return;
 
-      for (const textBox of textBoxes) {
-        textBox.fontFamily = style.fontFamily || textBox.fontFamily;
-        textBox.fill = style.fontColor || textBox.fill;
-      }
+      textBox.fontFamily = style.fontFamily || textBox.fontFamily;
+      textBox.fill = style.fontColor || textBox.fill;
 
       syncViewport();
     },
 
     getStyle: () => {
-      if (!fabricRef.current)
-        return {
-          fontColor: DEFAULT_FONT_COLOR,
-          fontFamily: DEFAULT_FONT_FAMILY,
-        };
-      const textBox = fabricRef.current.getObjects("Textbox")[0] as FabricText;
+      const textBox = textboxRef.current;
 
       return {
         fontFamily: textBox?.fontFamily || DEFAULT_FONT_FAMILY,
diff --git a/frontend/src/components/login/WelcomeModal.tsx b/frontend/src/components/login/WelcomeModal.tsx
index 47c4369..b07b1ce 100644
--- a/frontend/src/components/login/WelcomeModal.tsx
+++ b/frontend/src/components/login/WelcomeModal.tsx
@@ -74,7 +74,7 @@ export default function WelcomeModal({
           </div>
         </div>
       </Modal>
-      <div className="absolute bottom-0 z-1000 font-sans w-full">
+      <div className="absolute bottom-0 right-0 z-1000 font-sans w-full">
         <Saajan
           position="top"
           message={"I've lost words before.\nI know what it feels like."}