From b38dcc6f2b862897a203fb2fbafb99cb37397602 Mon Sep 17 00:00:00 2001
From: Nizzy <nizabizaher@gmail.com>
Date: Tue, 8 Apr 2025 23:03:04 -0700
Subject: [PATCH] auto focus

---
 apps/mail/components/create/create-email.tsx | 31 ++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/apps/mail/components/create/create-email.tsx b/apps/mail/components/create/create-email.tsx
index b121f7b36..9b1a225e4 100644
--- a/apps/mail/components/create/create-email.tsx
+++ b/apps/mail/components/create/create-email.tsx
@@ -271,7 +271,36 @@ export function CreateEmail({
 
   // Add ref for to input
   const toInputRef = React.useRef<HTMLInputElement>(null);
+  // Add refs for subject and editor
+  const subjectInputRef = React.useRef<HTMLInputElement>(null);
+  const editorRef = React.useRef<any>(null);
 
+  // Add a mount ref to ensure we only auto-focus once
+  const isFirstMount = React.useRef(true);
+
+  // Auto-focus logic
+  React.useEffect(() => {
+    if (!isFirstMount.current) return;
+    isFirstMount.current = false;
+
+    requestAnimationFrame(() => {
+      if (toEmails.length === 0 && !toInput) {
+        toInputRef.current?.focus();
+        console.log('Focusing to input');
+      } else if (!subjectInput.trim()) {
+        subjectInputRef.current?.focus();
+        console.log('Focusing subject input');
+      } else {
+        const editorElement = document.querySelector('.ProseMirror');
+        if (editorElement instanceof HTMLElement) {
+          editorElement.focus();
+          console.log('Focusing editor');
+        }
+      }
+    });
+  }, []); // Empty dependency array since we only want this on mount
+
+  // Keyboard shortcut handler
   React.useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       // Only trigger if "/" is pressed and no input/textarea is focused
@@ -376,6 +405,7 @@ export function CreateEmail({
                     </div>
                   ))}
                   <input
+                    ref={toInputRef}
                     disabled={isLoading}
                     type="email"
                     className="text-md relative left-[3px] min-w-[120px] flex-1 bg-transparent placeholder:text-[#616161] placeholder:opacity-50 focus:outline-none"
@@ -405,6 +435,7 @@ export function CreateEmail({
                   {t('common.searchBar.subject')}
                 </div>
                 <input
+                  ref={subjectInputRef}
                   disabled={isLoading}
                   type="text"
                   className="text-md relative left-[7.5px] w-full bg-transparent placeholder:text-[#616161] placeholder:opacity-50 focus:outline-none"