1 files changed, 11 insertions, 23 deletions
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index a04af269..7daf5270 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -8,59 +8,45 @@ import { HeaderBase } from "./header-base";
 import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import { Input } from "@/components/ui/input";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
   const { activeProject, renameProject } = useProjectStore();
-  // State for edit mode and project name input
   const [isEditing, setIsEditing] = useState(false);
   const [newName, setNewName] = useState(activeProject?.name || "");
-  // Ref for focusing/selecting the input
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleExport = () => {
     // TODO: Implement export functionality
+    // NOTE: This is already being worked on
     console.log("Export project");
   };
 
-  // When user clicks the project name, enter edit mode
   const handleNameClick = () => {
     if (!activeProject) return;
     setNewName(activeProject.name);
     setIsEditing(true);
   };
 
-  // Focus/select input when entering edit mode
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-
-  // Save the new name if changed, exit edit mode
   const handleNameSave = async () => {
     if (activeProject && newName.trim() && newName !== activeProject.name) {
       try {
         await renameProject(activeProject.id, newName.trim());
-      }catch (error) {
-        console.error('Failed to rename project:', error);
-        // Reset to original name on error
+      } catch (error) {
+        console.error("Failed to rename project:", error);
         setNewName(activeProject.name);
       }
     }
     setIsEditing(false);
   };
 
-  // Handle Enter (save) and Escape (cancel) in the input
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") handleNameSave();
     else if (e.key === "Escape") setIsEditing(false);
   };
 
-  // Project name in header: editable input or span
   const leftContent = (
     <div className="flex items-center gap-2">
       <Link
@@ -71,28 +57,30 @@ export function EditorHeader() {
       </Link>
       <div className="w-[14rem] h-9 flex items-center">
         {isEditing ? (
-          // Editable input for project name using standard Input component
           <Input
             ref={inputRef}
             className="text-sm font-medium px-2 py-1 h-9 truncate"
             value={newName}
-            onChange={e => setNewName(e.target.value)}
+            onChange={(e) => setNewName(e.target.value)}
             onBlur={handleNameSave}
             onKeyDown={handleInputKeyDown}
+            onFocus={(e) => e.target.select()}
             maxLength={64}
             aria-label="Project name"
             autoFocus
           />
         ) : (
-          // Display project name as span, click to edit
           <span
             className="text-sm font-medium cursor-pointer hover:underline"
             title="Click to rename"
             role="button"
             tabIndex={0}
             onClick={handleNameClick}
-            onKeyDown={e => e.key === 'Enter' && handleNameClick()}
-          ><div className="truncate text-ellipsis overflow-clip w-40">{activeProject?.name}</div>
+            onKeyDown={(e) => e.key === "Enter" && handleNameClick()}
+          >
+            <div className="truncate text-ellipsis overflow-clip w-40">
+              {activeProject?.name}
+            </div>
           </span>
         )}
       </div>