1 files changed, 34 insertions, 1 deletions

diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index 5c412435..70161054 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -68,6 +68,7 @@ import {
 	ScissorIcon,
 	Delete02Icon,
 	Copy01Icon,
+	Edit02Icon,
 	ViewIcon,
 	ViewOffSlashIcon,
 	VolumeHighIcon,
@@ -80,7 +81,7 @@ import {
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { uppercase } from "@/utils/string";
-import { useMemo, type ComponentProps, type ReactNode } from "react";
+import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
 import type { SelectedKeyframeRef, ElementKeyframe } from "@/animation/types";
 import { cn } from "@/utils/ui";
 import { usePropertiesStore } from "@/components/editor/panels/properties/stores/properties-store";
@@ -92,6 +93,7 @@ import {
 	getExpansionHeight,
 	type ExpandedRow,
 } from "./expanded-layout";
+import { RenameDialog } from "@/components/editor/rename-dialog";
 
 const KEYFRAME_INDICATOR_MIN_WIDTH_PX = 40;
 const ELEMENT_RING_WIDTH_PX = 1.5;
@@ -233,7 +235,9 @@ export function TimelineElement({
 	isDropTarget = false,
 }: TimelineElementProps) {
 	const mediaAssets = useEditor((e) => e.media.getAssets());
+	const editor = useEditor();
 	const { selectedElements } = useElementSelection();
+	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
 	const requestRevealMedia = useAssetsPanelStore((s) => s.requestRevealMedia);
 	const { renderElement } = useElementPreview({
 		trackId: track.id,
@@ -348,6 +352,19 @@ export function TimelineElement({
 			: "Extract audio";
 	const isElementSourceAudioSeparated =
 		element.type === "video" && isSourceAudioSeparated({ element });
+	const handleRenameConfirm = (newName: string) => {
+		editor.timeline.updateElements({
+			updates: [
+				{
+					trackId: track.id,
+					elementId: element.id,
+					patch: { name: newName },
+				},
+			],
+		});
+		setIsRenameDialogOpen(false);
+	};
+
 	const hasKeyframes = elementKeyframes.length > 0;
 	const expansionHeight = getExpansionHeight({ rows: expandedRows });
 	const baseTrackHeight = getTrackHeight({ type: track.type });
@@ -425,6 +442,15 @@ export function TimelineElement({
 					</div>
 				</ContextMenuTrigger>
 				<ContextMenuContent className="w-64">
+					<ContextMenuItem
+						icon={<HugeiconsIcon icon={Edit02Icon} />}
+						onClick={(event: React.MouseEvent) => {
+							event.stopPropagation();
+							setIsRenameDialogOpen(true);
+						}}
+					>
+						Rename
+					</ContextMenuItem>
 					<ActionMenuItem
 						action="split"
 						icon={<HugeiconsIcon icon={ScissorIcon} />}
@@ -509,6 +535,13 @@ export function TimelineElement({
 					/>
 				</ContextMenuContent>
 			</ContextMenu>
+			<RenameDialog
+				isOpen={isRenameDialogOpen}
+				onOpenChange={setIsRenameDialogOpen}
+				onConfirm={handleRenameConfirm}
+				currentName={element.name}
+				title="Rename clip"
+			/>
 		</PixelsPerSecondContext.Provider>
 	);
 }