refactor: optimize ComposeCanvas textbox pick and canvas focus logic

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 textBox = textboxRef.current;
-      const textBoxes = fabricRef.current.getObjects("Textbox") as FabricText[];
+      if (!textBox) return;
 
-      for (const textBox of textBoxes) {
       textBox.fontFamily = style.fontFamily || textBox.fontFamily;
       textBox.fill = style.fontColor || textBox.fill;
-      }
 
       syncViewport();
     },
 
     getStyle: () => {
-      if (!fabricRef.current)
+      const textBox = textboxRef.current;
-        return {
-          fontColor: DEFAULT_FONT_COLOR,
-          fontFamily: DEFAULT_FONT_FAMILY,
-        };
-      const textBox = fabricRef.current.getObjects("Textbox")[0] as FabricText;
 
       return {
         fontFamily: textBox?.fontFamily || DEFAULT_FONT_FAMILY,

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."}