From 68492df3028d2f5aa840b4b7b55930b5467b5a73 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 22 Jul 2025 12:43:27 +0200
Subject: [PATCH] Merge pull request
 [#422](https://github.com/mazeincoding/AppCut/issues/422)

---
 apps/web/src/components/editor-header.tsx     | 63 ++++++++++++++++++-
 .../editor/properties-panel/index.tsx         |  4 +-
 2 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 3b51e182..7daf5270 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -8,16 +8,45 @@ import { HeaderBase } from "./header-base";
 import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
+import { useState, useRef } from "react";
+import { Input } from "@/components/ui/input";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
-  const { activeProject } = useProjectStore();
+  const { activeProject, renameProject } = useProjectStore();
+  const [isEditing, setIsEditing] = useState(false);
+  const [newName, setNewName] = useState(activeProject?.name || "");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleExport = () => {
     // TODO: Implement export functionality
+    // NOTE: This is already being worked on
     console.log("Export project");
   };
 
+  const handleNameClick = () => {
+    if (!activeProject) return;
+    setNewName(activeProject.name);
+    setIsEditing(true);
+  };
+
+  const handleNameSave = async () => {
+    if (activeProject && newName.trim() && newName !== activeProject.name) {
+      try {
+        await renameProject(activeProject.id, newName.trim());
+      } catch (error) {
+        console.error("Failed to rename project:", error);
+        setNewName(activeProject.name);
+      }
+    }
+    setIsEditing(false);
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") handleNameSave();
+    else if (e.key === "Escape") setIsEditing(false);
+  };
+
   const leftContent = (
     <div className="flex items-center gap-2">
       <Link
@@ -25,8 +54,36 @@ export function EditorHeader() {
         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>
+      <div className="w-[14rem] h-9 flex items-center">
+        {isEditing ? (
+          <Input
+            ref={inputRef}
+            className="text-sm font-medium px-2 py-1 h-9 truncate"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onBlur={handleNameSave}
+            onKeyDown={handleInputKeyDown}
+            onFocus={(e) => e.target.select()}
+            maxLength={64}
+            aria-label="Project name"
+            autoFocus
+          />
+        ) : (
+          <span
+            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>
+          </span>
+        )}
+      </div>
     </div>
   );
 
@@ -62,7 +119,7 @@ export function EditorHeader() {
       leftContent={leftContent}
       centerContent={centerContent}
       rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4"
+      className="bg-background h-[3.2rem] px-4 items-center"
     />
   );
 }
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..4fc5d89d 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -103,7 +103,9 @@ function PropertyItem({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex justify-between">
       <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right">{value}</span>
+      <span className="text-xs text-right truncate w-40" title={value}>
+        {value}
+      </span>
     </div>
   );
 }