Merge pull request #81 from pulkitgarg04/feature/project-name-editing

feature: add project name editing functionality

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 = (

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

@@ -0,0 +1,110 @@
+"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, updateProjectName } = 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()) {
+      updateProjectName(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>
+  );
+} 

apps/web/src/stores/project-store.ts

@@ -7,6 +7,7 @@ interface ProjectStore {
   // Actions
   createNewProject: (name: string) => void;
   closeProject: () => void;
+  updateProjectName: (name: string) => void;
 }
 
 export const useProjectStore = create<ProjectStore>((set) => ({
@@ -25,4 +26,16 @@ export const useProjectStore = create<ProjectStore>((set) => ({
   closeProject: () => {
     set({ activeProject: null });
   },
+
+  updateProjectName: (name: string) => {
+    set((state) => ({
+      activeProject: state.activeProject
+        ? {
+            ...state.activeProject,
+            name,
+            updatedAt: new Date(),
+          }
+        : null,
+    }));
+  },
 }));