refactor: editor header

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

@@ -5,11 +5,12 @@ import { Button } from "./ui/button";
 import { ChevronLeft, Download } from "lucide-react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
-import { ProjectNameEditor } from "./editor/project-name-editor";
 import { formatTimeCode } from "@/lib/time";
+import { useProjectStore } from "@/stores/project-store";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
+  const { activeProject } = useProjectStore();
 
   const handleExport = () => {
     // TODO: Implement export functionality
@@ -19,12 +20,12 @@ export function EditorHeader() {
   const leftContent = (
     <div className="flex items-center gap-2">
       <Link
-        href="/"
+        href="/projects"
         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>
-      <ProjectNameEditor />
     </div>
   );
 

apps/web/src/components/editor/project-name-editor.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import { Input } from "../ui/input";
-import { useProjectStore } from "@/stores/project-store";
-import { Edit2, Check, X } from "lucide-react";
-import { Button } from "../ui/button";
-
-interface ProjectNameEditorProps {
-  className?: string;
-}
-
-export function ProjectNameEditor({ className }: ProjectNameEditorProps) {
-  const { activeProject, renameProject } = useProjectStore();
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (activeProject) {
-      setEditValue(activeProject.name);
-    }
-  }, [activeProject]);
-
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-
-  const handleStartEdit = () => {
-    if (activeProject) {
-      setEditValue(activeProject.name);
-      setIsEditing(true);
-    }
-  };
-
-  const handleSave = () => {
-    if (editValue.trim() && activeProject) {
-      renameProject(activeProject.id, editValue.trim());
-      setIsEditing(false);
-    }
-  };
-
-  const handleCancel = () => {
-    if (activeProject) {
-      setEditValue(activeProject.name);
-    }
-    setIsEditing(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      handleSave();
-    } else if (e.key === "Escape") {
-      handleCancel();
-    }
-  };
-
-  if (!activeProject) {
-    return <span className="text-sm text-muted-foreground">Loading...</span>;
-  }
-
-  if (isEditing) {
-    return (
-      <div className="flex items-center gap-1">
-        <Input
-          ref={inputRef}
-          value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          className="h-7 text-sm px-3 py-1 min-w-[200px]"
-          size={1}
-        />
-        <Button
-          size="sm"
-          variant="text"
-          onClick={handleSave}
-          className="h-7 w-7 p-0"
-          disabled={!editValue.trim()}
-        >
-          <Check className="h-3 w-3" />
-        </Button>
-        <Button
-          size="sm"
-          variant="text"
-          onClick={handleCancel}
-          className="h-7 w-7 p-0"
-        >
-          <X className="h-3 w-3" />
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-1 group">
-      <span className="text-sm font-medium">{activeProject.name}</span>
-      <Button
-        size="sm"
-        variant="text"
-        onClick={handleStartEdit}
-        className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
-      >
-        <Edit2 className="h-3 w-3" />
-      </Button>
-    </div>
-  );
-}