feature: add project name editing functionality

1 files changed, 10 insertions, 7 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index c6cecbe8..6f9f0b2f 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -6,6 +6,7 @@ import { ChevronLeft, Download } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";

 import { useTimelineStore } from "@/stores/timeline-store";

 import { HeaderBase } from "./header-base";

+import { ProjectNameEditor } from "./editor/project-name-editor";

 

 export function EditorHeader() {

   const { activeProject } = useProjectStore();

@@ -24,13 +25,15 @@ export function EditorHeader() {
   };

 

   const leftContent = (

-    <Link

-      href="/"

-      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 || "Loading..."}</span>

-    </Link>

+    <div className="flex items-center gap-2">

+      <Link

+        href="/"

+        className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"

+      >

+        <ChevronLeft className="h-4 w-4" />

+      </Link>

+      <ProjectNameEditor />

+    </div>

   );

 

   const centerContent = (