diff options
| -rw-r--r-- | apps/web/src/components/editor-header.tsx | 25 |
1 files 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>
|