Revert "merge main"

This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.

1 files changed, 142 insertions, 135 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index b0b384da..e7df2896 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -1,135 +1,142 @@
-"use client";
-
-import Link from "next/link";
-import { Button } from "./ui/button";
-import { Download, SquarePen } from "lucide-react";
-import { useTimelineStore } from "@/stores/timeline-store";
-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";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "./ui/breadcrumb";
-
-export function EditorHeader() {
-  const { getTotalDuration } = useTimelineStore();
-  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 handleNameEdit = () => {
-    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">
-      <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>
-    </div>
-  );
-
-  const centerContent = (
-    <div className="flex items-center justify-center gap-2 text-xs">
-      <span>
-        {formatTimeCode(
-          getTotalDuration(),
-          "HH:MM:SS:FF",
-          activeProject?.fps || 30
-        )}
-      </span>
-    </div>
-  );
-
-  const rightContent = (
-    <nav className="flex items-center justify-end gap-2">
-      <KeyboardShortcutsHelp />
-      <Button
-        size="sm"
-        variant="primary"
-        className="h-7 text-xs"
-        onClick={handleExport}
-      >
-        <Download className="h-4 w-4" />
-        <span className="text-sm">Export</span>
-      </Button>
-    </nav>
-  );
-
-  return (
-    <HeaderBase
-      leftContent={leftContent}
-      centerContent={centerContent}
-      rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"
-    />
-  );
-}
+"use client";

+

+import { Download, SquarePen } from "lucide-react";

+import Link from "next/link";

+import { type MouseEvent, useRef, useState } from "react";

+import { Input } from "@/components/ui/input";

+import { formatTimeCode } from "@/lib/time";

+import { useProjectStore } from "@/stores/project-store";

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

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

+import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";

+import {

+  Breadcrumb,

+  BreadcrumbItem,

+  BreadcrumbLink,

+  BreadcrumbList,

+  BreadcrumbSeparator,

+} from "./ui/breadcrumb";

+import { Button } from "./ui/button";

+

+export function EditorHeader() {

+  const { getTotalDuration } = useTimelineStore();

+  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 handleNameEdit = (e: MouseEvent<HTMLButtonElement>) => {

+    if (!activeProject) return;

+    e.stopPropagation();

+    setIsEditing(true);

+    setNewName(activeProject.name);

+  };

+

+  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">

+      <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>

+    </div>

+  );

+

+  const centerContent = (

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

+      <span>

+        {formatTimeCode(

+          getTotalDuration(),

+          "HH:MM:SS:FF",

+          activeProject?.fps || 30,

+        )}

+      </span>

+    </div>

+  );

+

+  const rightContent = (

+    <nav className="flex items-center justify-end gap-2">

+      <KeyboardShortcutsHelp />

+      <Button

+        size="sm"

+        variant="primary"

+        className="h-7 text-xs"

+        onClick={handleExport}

+      >

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

+        <span className="text-sm">Export</span>

+      </Button>

+    </nav>

+  );

+

+  return (

+    <HeaderBase

+      leftContent={leftContent}

+      centerContent={centerContent}

+      rightContent={rightContent}

+      className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"

+    />

+  );

+}