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

1 files changed, 8 insertions, 0 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index cf86df81..e9bad2e1 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/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"