feat: enhance project name editing with error handling and improved input component

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
+          // Editable input for project name using standard Input component
-          <input
+          <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()}
-          >
+          ><div className="truncate text-ellipsis overflow-clip w-40">{activeProject?.name}</div>
-            {activeProject?.name}
           </span>
         )}
       </div>