diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-07-01 16:06:36 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-07-01 16:06:36 +0200 |
| commit | 849fb3d2af29187abb4f21e724ff557614b90280 (patch) | |
| tree | 63c480d630aa5f23ce2de3afb44f65c020e2d3a4 /apps/web/src/components/editor | |
| parent | 364e541d576a8c8f36f401669f6d96cf58e95c67 (diff) | |
| download | opencut-849fb3d2af29187abb4f21e724ff557614b90280.tar.gz | |
refactor: editor header
Diffstat (limited to 'apps/web/src/components/editor')
| -rw-r--r-- | apps/web/src/components/editor/project-name-editor.tsx | 110 |
1 files changed, 0 insertions, 110 deletions
diff --git a/apps/web/src/components/editor/project-name-editor.tsx b/apps/web/src/components/editor/project-name-editor.tsx deleted file mode 100644 index a4ff3878..00000000 --- a/apps/web/src/components/editor/project-name-editor.tsx +++ /dev/null @@ -1,110 +0,0 @@ -"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, renameProject } = 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() && activeProject) { - renameProject(activeProject.id, 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> - ); -}
\ No newline at end of file |
