From b6a8ca79f6ca184bcb4923814ba80b0c9436de87 Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 13:15:39 +0530
Subject: [PATCH 1/7] feat: add project renaming functionality in editor header

---
 apps/web/src/components/editor-header.tsx | 51 +++++++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 3b51e182..cf86df81 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -8,16 +8,42 @@ 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 } from "react";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
-  const { activeProject } = useProjectStore();
+  const { activeProject, renameProject } = useProjectStore();
+  const [isEditing, setIsEditing] = useState(false);
+  const [newName, setNewName] = useState(activeProject?.name || "");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleExport = () => {
     // TODO: Implement export functionality
     console.log("Export project");
   };
 
+  const handleNameClick = () => {
+    if (!activeProject) return;
+    setNewName(activeProject.name);
+    setIsEditing(true);
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 0);
+  };
+
+  const handleNameSave = async () => {
+    if (activeProject && newName.trim() && newName !== activeProject.name) {
+      await renameProject(activeProject.id, newName.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") handleNameSave();
+    else if (e.key === "Escape") setIsEditing(false);
+  };
+
   const leftContent = (
     <div className="flex items-center gap-2">
       <Link
@@ -25,8 +51,27 @@ export function EditorHeader() {
         className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"
       >
         <ChevronLeft className="h-4 w-4" />
-        <span className="text-sm">{activeProject?.name}</span>
       </Link>
+      <div className="w-[8rem] h-6 flex items-center">
+        {isEditing ? (
+          <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"
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            onBlur={handleNameSave}
+            onKeyDown={handleInputKeyDown}
+          />
+        ) : (
+          <span
+            className="text-sm font-medium cursor-pointer hover:underline truncate w-full h-6 flex items-center"
+            title="Click to rename"
+            onClick={handleNameClick}
+          >
+            {activeProject?.name}
+          </span>
+        )}
+      </div>
     </div>
   );
 
@@ -62,7 +107,7 @@ export function EditorHeader() {
       leftContent={leftContent}
       centerContent={centerContent}
       rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4"
+      className="bg-background h-[3.2rem] px-4 items-center"
     />
   );
 }

From 26f5966ebdba3f609abea3393061f037e9e63d31 Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 13:25:50 +0530
Subject: [PATCH 2/7] refactor: enhance comments for project name editing
 functionality in editor header

---
 apps/web/src/components/editor-header.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

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"

From 853509dd2ca6233af8e746ec8bd5a9bc214b4eed Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 13:58:27 +0530
Subject: [PATCH 3/7] refactor: streamline project name editing by removing
 timeout and enhancing focus handling

---
 apps/web/src/components/editor-header.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index e9bad2e1..ecd2291d 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -8,7 +8,7 @@ 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 } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -24,17 +24,21 @@ export function EditorHeader() {
     console.log("Export project");
   };
 
-  // When user clicks the project name, enter edit mode and select all text
+  // When user clicks the project name, enter edit mode
   const handleNameClick = () => {
     if (!activeProject) return;
     setNewName(activeProject.name);
     setIsEditing(true);
-    setTimeout(() => {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }, 0);
   };
 
+  // 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) {
@@ -74,7 +78,10 @@ export function EditorHeader() {
           <span
             className="text-sm font-medium cursor-pointer hover:underline truncate w-full h-6 flex items-center"
             title="Click to rename"
+            role="button"
+            tabIndex={0}
             onClick={handleNameClick}
+            onKeyDown={e => e.key === 'Enter' && handleNameClick()}
           >
             {activeProject?.name}
           </span>

From 097c574d9ce021c80e925d2d156fa79719e66a76 Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 15:27:46 +0530
Subject: [PATCH 4/7] feat: enhance project name input in editor header and
 improve properties panel display

---
 apps/web/src/components/editor-header.tsx       | 17 ++++++++++-------
 .../editor/properties-panel/index.tsx           |  4 ++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index ecd2291d..7b915897 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -9,6 +9,7 @@ import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState, useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -62,28 +63,30 @@ export function EditorHeader() {
       >
         <ChevronLeft className="h-4 w-4" />
       </Link>
-      <div className="w-[8rem] h-6 flex items-center">
+      <div className="w-[14rem] h-9 flex items-center">
         {isEditing ? (
-          // Editable input for project name
-          <input
+          // Editable input for project name using standard Input component
+          <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"
+            className="text-sm font-medium px-2 py-1 h-7 truncate"
             value={newName}
             onChange={e => setNewName(e.target.value)}
             onBlur={handleNameSave}
             onKeyDown={handleInputKeyDown}
+            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 truncate w-full h-6 flex items-center"
+            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()}
-          >
-            {activeProject?.name}
+          ><div className="truncate text-ellipsis overflow-clip w-40">{activeProject?.name}</div>
           </span>
         )}
       </div>
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..d96e1e99 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -34,7 +34,7 @@ export function PropertiesPanel() {
   const emptyView = (
     <div className="space-y-4 p-5">
       {/* Media Properties */}
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 ">
         <PropertyItem label="Name:" value={activeProject?.name || ""} />
         <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
         <PropertyItem
@@ -103,7 +103,7 @@ function PropertyItem({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex justify-between">
       <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right">{value}</span>
+      <span className="text-xs text-right truncate text-ellipsis overflow-clip w-40" title={value}>{value}</span>
     </div>
   );
 }

From 747630ef3f51b8b51aaeb448135925fa3e572788 Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 15:56:42 +0530
Subject: [PATCH 5/7] fix: handle project renaming errors and adjust input
 styling in properties panel

---
 apps/web/src/components/editor-header.tsx             | 11 +++++++++--
 .../src/components/editor/properties-panel/index.tsx  |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 7b915897..45414ecc 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -43,7 +43,14 @@ export function EditorHeader() {
   // 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());
+      try {
+        await renameProject(activeProject.id, newName.trim());
+      }
+      catch (error) {
+        console.error('Failed to rename project:', error);
+        // Reset to original name on error
+        setNewName(activeProject.name);
+      }
     }
     setIsEditing(false);
   };
@@ -68,7 +75,7 @@ export function EditorHeader() {
           // Editable input for project name using standard Input component
           <Input
             ref={inputRef}
-            className="text-sm font-medium px-2 py-1 h-7 truncate"
+            className="text-sm font-medium px-2 py-1 h-9 truncate"
             value={newName}
             onChange={e => setNewName(e.target.value)}
             onBlur={handleNameSave}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index d96e1e99..d30cd0ff 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -34,7 +34,7 @@ export function PropertiesPanel() {
   const emptyView = (
     <div className="space-y-4 p-5">
       {/* Media Properties */}
-      <div className="flex flex-col gap-3 ">
+      <div className="flex flex-col gap-3">
         <PropertyItem label="Name:" value={activeProject?.name || ""} />
         <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
         <PropertyItem
@@ -103,7 +103,7 @@ function PropertyItem({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex justify-between">
       <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right truncate text-ellipsis overflow-clip w-40" title={value}>{value}</span>
++     <span className="text-xs text-right truncate w-40" title={value}>{value}</span>
     </div>
   );
 }

From 6de16395b794cc8a3a1dee59aeb36765723d20a6 Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 16:08:41 +0530
Subject: [PATCH 6/7] fix: improve property item display by adding truncation
 and tooltip for long values

---
 apps/web/src/components/editor/properties-panel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..50f6c5f9 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -103,7 +103,7 @@ function PropertyItem({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex justify-between">
       <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right">{value}</span>
+      <span className="text-xs text-right truncate overflow-hidden whitespace-nowrap w-40" title={value}>{value}</span>
     </div>
   );
 }

From 4350f9898eb1cd68dc71693fc0fbd6a02104340a Mon Sep 17 00:00:00 2001
From: ayush18pop <ayushsp05@gmail.com>
Date: Tue, 22 Jul 2025 16:09:40 +0530
Subject: [PATCH 7/7] feat: enhance project name editing with error handling
 and improved input component

---
 apps/web/src/components/editor-header.tsx | 25 +++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index ecd2291d..a04af269 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -9,6 +9,7 @@ import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState, useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -42,7 +43,13 @@ export function EditorHeader() {
   // 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());
+      try {
+        await renameProject(activeProject.id, newName.trim());
+      }catch (error) {
+        console.error('Failed to rename project:', error);
+        // Reset to original name on error
+        setNewName(activeProject.name);
+      }
     }
     setIsEditing(false);
   };
@@ -62,28 +69,30 @@ export function EditorHeader() {
       >
         <ChevronLeft className="h-4 w-4" />
       </Link>
-      <div className="w-[8rem] h-6 flex items-center">
+      <div className="w-[14rem] h-9 flex items-center">
         {isEditing ? (
-          // Editable input for project name
-          <input
+          // Editable input for project name using standard Input component
+          <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"
+            className="text-sm font-medium px-2 py-1 h-9 truncate"
             value={newName}
             onChange={e => setNewName(e.target.value)}
             onBlur={handleNameSave}
             onKeyDown={handleInputKeyDown}
+            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 truncate w-full h-6 flex items-center"
+            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()}
-          >
-            {activeProject?.name}
+          ><div className="truncate text-ellipsis overflow-clip w-40">{activeProject?.name}</div>
           </span>
         )}
       </div>