RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: add breadcrumb to editor header

This commit is contained in:
Kha Nguyen 2025-07-23 17:08:56 -05:00
parent b208f355e2
commit 7bd952b080
1 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/web/src/components/editor-header.tsx
View File

@ -2,14 +2,21 @@
import Link from "next/link"; import Link from "next/link";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { ChevronLeft, Download } from "lucide-react"; import { ChevronLeft, Download, SquarePen } from "lucide-react";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { HeaderBase } from "./header-base"; import { HeaderBase } from "./header-base";
import { formatTimeCode } from "@/lib/time"; import { formatTimeCode } from "@/lib/time";
import { useProjectStore } from "@/stores/project-store"; import { useProjectStore } from "@/stores/project-store";
import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help"; import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
import { useState, useRef } from "react"; import { useState, useRef, MouseEvent } from "react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from "./ui/breadcrumb";
export function EditorHeader() { export function EditorHeader() {
const { getTotalDuration } = useTimelineStore(); const { getTotalDuration } = useTimelineStore();
@ -24,10 +31,11 @@ export function EditorHeader() {
console.log("Export project"); console.log("Export project");
}; };
const handleNameClick = () => { const handleNameEdit = (e: MouseEvent<HTMLButtonElement>) => {
if (!activeProject) return; if (!activeProject) return;
setNewName(activeProject.name); e.stopPropagation();
setIsEditing(true); setIsEditing(true);
setNewName(activeProject.name);
}; };
const handleNameSave = async () => { const handleNameSave = async () => {
@ -49,17 +57,24 @@ export function EditorHeader() {
const leftContent = ( const leftContent = (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Breadcrumb>
<BreadcrumbList className="text-current">
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link <Link
href="/projects" href="/projects"
className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity" className="hover:text-muted-foreground inline-flex items-center"
> >
<ChevronLeft className="h-4 w-4" /> All Projects
</Link> </Link>
<div className="w-[14rem] h-9 flex items-center"> </BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
{isEditing ? ( {isEditing ? (
<Input <Input
ref={inputRef} ref={inputRef}
className="text-sm font-medium px-2 py-1 h-9 truncate" className="text-sm font-medium w-40 xl:w-60 px-2 py-1 h-9 truncate"
value={newName} value={newName}
onChange={(e) => setNewName(e.target.value)} onChange={(e) => setNewName(e.target.value)}
onBlur={handleNameSave} onBlur={handleNameSave}
@ -71,36 +86,38 @@ export function EditorHeader() {
/> />
) : ( ) : (
<span <span
className="text-sm font-medium cursor-pointer hover:underline" className="text-sm font-medium cursor-pointer hover:text-muted-foreground flex items-center gap-2 group"
title="Click to rename" title="Click to rename"
role="button" role="button"
tabIndex={0} tabIndex={0}
onClick={handleNameClick} onClick={handleNameEdit}
onKeyDown={(e) => e.key === "Enter" && handleNameClick()}
> >
<div className="truncate text-ellipsis overflow-clip w-40"> <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
{activeProject?.name} {activeProject?.name}
</div> </div>
<SquarePen className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
</span> </span>
)} )}
</div> </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div> </div>
); );
const centerContent = ( const centerContent = (
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center justify-center gap-2 text-xs">
<span> <span>
{formatTimeCode( {formatTimeCode(
getTotalDuration(), getTotalDuration(),
"HH:MM:SS:FF", "HH:MM:SS:FF",
activeProject?.fps || 30 activeProject?.fps || 30,
)} )}
</span> </span>
</div> </div>
); );
const rightContent = ( const rightContent = (
<nav className="flex items-center gap-2"> <nav className="flex items-center justify-end gap-2">
<KeyboardShortcutsHelp /> <KeyboardShortcutsHelp />
<Button <Button
size="sm" size="sm"
@ -119,7 +136,7 @@ export function EditorHeader() {
leftContent={leftContent} leftContent={leftContent}
centerContent={centerContent} centerContent={centerContent}
rightContent={rightContent} rightContent={rightContent}
className="bg-background h-[3.2rem] px-4 items-center" className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"
/> />
); );
} }