diff options
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/editor-header.tsx | 96 | ||||
| -rw-r--r-- | apps/web/src/components/editor/properties-panel/index.tsx | 26 | ||||
| -rw-r--r-- | apps/web/src/components/header-base.tsx | 8 |
3 files changed, 73 insertions, 57 deletions
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx index 6e9af186..9285398e 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 { ChevronLeft, Download } from "lucide-react"; +import { SquarePen, Download } from "lucide-react"; import { useTimelineStore } from "@/stores/timeline-store"; import { HeaderBase } from "./header-base"; import { formatTimeCode } from "@/lib/time"; @@ -10,6 +10,13 @@ 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(); @@ -24,7 +31,7 @@ export function EditorHeader() { console.log("Export project"); }; - const handleNameClick = () => { + const handleNameEdit = () => { if (!activeProject) return; setNewName(activeProject.name); setIsEditing(true); @@ -49,46 +56,55 @@ export function EditorHeader() { const leftContent = ( <div className="flex items-center gap-2"> - <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-[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> + <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 gap-2 text-xs"> + <div className="flex items-center justify-center gap-2 text-xs"> <span> {formatTimeCode( getTotalDuration(), @@ -100,7 +116,7 @@ export function EditorHeader() { ); const rightContent = ( - <nav className="flex items-center gap-2"> + <nav className="flex items-center justify-end gap-2"> <KeyboardShortcutsHelp /> <Button size="sm" @@ -119,7 +135,7 @@ export function EditorHeader() { leftContent={leftContent} centerContent={centerContent} 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" /> ); } diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx index 4fc5d89d..3613f271 100644 --- a/apps/web/src/components/editor/properties-panel/index.tsx +++ b/apps/web/src/components/editor/properties-panel/index.tsx @@ -1,14 +1,12 @@ "use client"; -import { useProjectStore } from "@/stores/project-store"; +import { FPS_PRESETS } from "@/constants/timeline-constants"; import { useAspectRatio } from "@/hooks/use-aspect-ratio"; +import { useMediaStore } from "@/stores/media-store"; +import { useProjectStore } from "@/stores/project-store"; +import { useTimelineStore } from "@/stores/timeline-store"; import { Label } from "../../ui/label"; import { ScrollArea } from "../../ui/scroll-area"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { useMediaStore } from "@/stores/media-store"; -import { AudioProperties } from "./audio-properties"; -import { MediaProperties } from "./media-properties"; -import { TextProperties } from "./text-properties"; import { Select, SelectContent, @@ -16,7 +14,9 @@ import { SelectTrigger, SelectValue, } from "../../ui/select"; -import { FPS_PRESETS } from "@/constants/timeline-constants"; +import { AudioProperties } from "./audio-properties"; +import { MediaProperties } from "./media-properties"; +import { TextProperties } from "./text-properties"; export function PropertiesPanel() { const { activeProject, updateProjectFps } = useProjectStore(); @@ -79,11 +79,11 @@ export function PropertiesPanel() { } if (element?.type === "media") { const mediaItem = mediaItems.find( - (item) => item.id === element.mediaId + (item) => item.id === element.mediaId, ); if (mediaItem?.type === "audio") { - return <AudioProperties element={element} />; + return <AudioProperties key={elementId} element={element} />; } return ( @@ -101,9 +101,11 @@ export function PropertiesPanel() { 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 truncate w-40" title={value}> + <div className="grid justify-between grid-cols-6"> + <Label className="text-xs text-muted-foreground col-span-2"> + {label} + </Label> + <span className="text-xs text-right col-span-4 truncate" title={value}> {value} </span> </div> diff --git a/apps/web/src/components/header-base.tsx b/apps/web/src/components/header-base.tsx index 98f1c431..a4863d27 100644 --- a/apps/web/src/components/header-base.tsx +++ b/apps/web/src/components/header-base.tsx @@ -31,11 +31,9 @@ export function HeaderBase({ <header className={cn("px-6 h-14 flex justify-between items-center", className)} > - {leftContent && <div className="flex items-center">{leftContent}</div>} - {centerContent && ( - <div className="flex items-center">{centerContent}</div> - )} - {rightContent && <div className="flex items-center">{rightContent}</div>} + {leftContent && leftContent} + {centerContent && centerContent} + {rightContent && rightContent} </header> ); } |