1 files changed, 41 insertions, 57 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index f2b79479..837bd97a 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { Button } from "./ui/button";
-import { SquarePen, Download } from "lucide-react";
+import { ChevronLeft, Download } from "lucide-react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
 import { formatTimeCode } from "@/lib/time";
@@ -10,13 +10,6 @@ import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState, useRef } from "react";
 import { Input } from "@/components/ui/input";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "./ui/breadcrumb";
 import { toast } from "sonner";
 
 export function EditorHeader() {
@@ -30,10 +23,10 @@ export function EditorHeader() {
     // TODO: Implement export functionality
     // NOTE: This is already being worked on
     console.log("Export project");
-    window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
+    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
   };
 
-  const handleNameEdit = () => {
+  const handleNameClick = () => {
     if (!activeProject) return;
     setNewName(activeProject.name);
     setIsEditing(true);
@@ -58,55 +51,46 @@ export function EditorHeader() {
 
   const leftContent = (
     <div className="flex items-center gap-2">
-      <Breadcrumb>
-        <BreadcrumbList className="text-current">
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link
-                href="/projects"
-                className="hover:text-muted-foreground inline-flex items-center"
-              >
-                All Projects
-              </Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            {isEditing ? (
-              <Input
-                ref={inputRef}
-                className="text-sm font-medium w-40 xl:w-60 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
-              />
-            ) : (
-              <Button
-                className="text-sm font-medium cursor-pointer hover:text-muted-foreground flex items-center gap-2 group"
-                title="Click to rename"
-                variant="text"
-                tabIndex={0}
-                onClick={handleNameEdit}
-              >
-                <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
-                  {activeProject?.name}
-                </div>
-                <SquarePen className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
-              </Button>
-            )}
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+      <Link
+        href="/projects"
+        className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Link>
+      <div className="w-40 xl:w-60 h-9 flex items-center">
+        {isEditing ? (
+          <Input
+            ref={inputRef}
+            className="text-sm font-medium w-full 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 max-w-40 xl:max-w-60">
+              {activeProject?.name}
+            </div>
+          </span>
+        )}
+      </div>
     </div>
   );
 
   const centerContent = (
-    <div className="flex items-center justify-center gap-2 text-xs">
+    <div className="flex items-center gap-2 text-xs">
       <span>
         {formatTimeCode(
           getTotalDuration(),
@@ -118,7 +102,7 @@ export function EditorHeader() {
   );
 
   const rightContent = (
-     <nav className="flex items-center justify-end gap-2">
+    <nav className="flex items-center gap-2">
       <KeyboardShortcutsHelp />
       <Button
         size="sm"
@@ -137,7 +121,7 @@ export function EditorHeader() {
       leftContent={leftContent}
       centerContent={centerContent}
       rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"
+      className="bg-background h-[3.2rem] px-4 items-center"
     />
   );
 }