refactor: enhance comments for project name editing functionality in editor header

apps/web/src/components/editor-header.tsx

@@ -13,8 +13,10 @@ import { useState, useRef } from "react";
 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 = () => {
@@ -22,6 +24,7 @@ export function EditorHeader() {
     console.log("Export project");
   };
 
+  // When user clicks the project name, enter edit mode and select all text
   const handleNameClick = () => {
     if (!activeProject) return;
     setNewName(activeProject.name);
@@ -32,6 +35,7 @@ export function EditorHeader() {
     }, 0);
   };
 
+  // Save the new name if changed, exit edit mode
   const handleNameSave = async () => {
     if (activeProject && newName.trim() && newName !== activeProject.name) {
       await renameProject(activeProject.id, newName.trim());
@@ -39,11 +43,13 @@ export function EditorHeader() {
     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
@@ -54,6 +60,7 @@ export function EditorHeader() {
       </Link>
       <div className="w-[8rem] h-6 flex items-center">
         {isEditing ? (
+          // Editable input for project name
           <input
             ref={inputRef}
             className="text-sm font-medium bg-transparent border-b border-primary outline-none px-1 w-full h-6 flex items-center"
@@ -63,6 +70,7 @@ export function EditorHeader() {
             onKeyDown={handleInputKeyDown}
           />
         ) : (
+          // Display project name as span, click to edit
           <span
             className="text-sm font-medium cursor-pointer hover:underline truncate w-full h-6 flex items-center"
             title="Click to rename"