fix: some issues with on select clip

src/components/video-editor/timeline/Item.tsx

@@ -20,6 +20,7 @@ interface ItemProps {
 	children: React.ReactNode;
 	isSelected?: boolean;
 	onSelect?: () => void;
+	onSelectId?: (id: string) => void;
 	zoomDepth?: number;
 	zoomMode?: "auto" | "manual";
 	speedValue?: number;
@@ -52,6 +53,7 @@ export default function Item({
 	rowId,
 	isSelected = false,
 	onSelect,
+	onSelectId,
 	zoomDepth = 1,
 	zoomMode = "auto",
 	speedValue,
@@ -88,6 +90,10 @@ export default function Item({
 	);
 
 	const MIN_ITEM_PX = 6;
+	const handleSelect = () => {
+		onSelect?.();
+		onSelectId?.(id);
+	};
 	const safeItemStyle = {
 		...itemStyle,
 		minWidth: MIN_ITEM_PX,
@@ -101,7 +107,7 @@ export default function Item({
 			style={safeItemStyle}
 			{...listeners}
 			{...attributes}
-			onPointerDownCapture={() => onSelect?.()}
+			onPointerDownCapture={handleSelect}
 			className="group h-full"
 		>
 			<div
@@ -127,7 +133,7 @@ export default function Item({
 					}}
 					onClick={(event) => {
 						event.stopPropagation();
-						onSelect?.();
+						handleSelect();
 					}}
 				>
 					<div

src/components/video-editor/timeline/components/viewport/TimelineCanvasRows.tsx

@@ -18,6 +18,10 @@ import type { TimelineRenderItem } from "../../model/timelineModel";
 import type { AudioPeaksData } from "../../useAudioPeaks";
 import ClipMarkerOverlay from "../overlays/ClipMarkerOverlay";
 
+const HINT_CLIP = "Press C to split clip";
+const HINT_ANNOTATION = "Press A to add annotation";
+const HINT_AUDIO = "Click music icon to add audio";
+
 interface TimelineCanvasRowsProps {
 	items: TimelineRenderItem[];
 	videoDurationMs: number;
@@ -94,7 +98,7 @@ export function TimelineCanvasRows({
 
 	return (
 		<>
-			<Row id={CLIP_ROW_ID} isEmpty={clipItems.length === 0} hint="Press C to split clip">
+			<Row id={CLIP_ROW_ID} isEmpty={clipItems.length === 0} hint={HINT_CLIP}>
 				{audioPeaks && <AudioWaveform peaks={audioPeaks} />}
 				<ClipMarkerOverlay videoDurationMs={videoDurationMs} />
 				{clipItems.map((item) => (
@@ -104,7 +108,7 @@ export function TimelineCanvasRows({
 						rowId={item.rowId}
 						span={item.span}
 						isSelected={selectAllBlocksActive || item.id === selectedClipId}
-						onSelect={() => onSelectClip?.(item.id)}
+						onSelectId={onSelectClip}
 						variant="clip"
 					>
 						{item.label}
@@ -152,7 +156,7 @@ export function TimelineCanvasRows({
 						rowId={item.rowId}
 						span={item.span}
 						isSelected={selectAllBlocksActive || item.id === selectedZoomId}
-						onSelect={() => onSelectZoom?.(item.id)}
+						onSelectId={onSelectZoom}
 						zoomDepth={item.zoomDepth}
 						zoomMode={item.zoomMode}
 						variant="zoom"
@@ -171,7 +175,7 @@ export function TimelineCanvasRows({
 						key={rowId}
 						id={rowId}
 						isEmpty={rowItems.length === 0}
-						hint={index === 0 ? "Press A to add annotation" : undefined}
+						hint={index === 0 ? HINT_ANNOTATION : undefined}
 					>
 						{rowItems.map((item) => (
 							<Item
@@ -180,7 +184,7 @@ export function TimelineCanvasRows({
 								rowId={item.rowId}
 								span={item.span}
 								isSelected={selectAllBlocksActive || item.id === selectedAnnotationId}
-								onSelect={() => onSelectAnnotation?.(item.id)}
+								onSelectId={onSelectAnnotation}
 								variant="annotation"
 							>
 								{item.label}
@@ -199,7 +203,7 @@ export function TimelineCanvasRows({
 						key={rowId}
 						id={rowId}
 						isEmpty={rowItems.length === 0}
-						hint={index === 0 ? "Click music icon to add audio" : undefined}
+						hint={index === 0 ? HINT_AUDIO : undefined}
 					>
 						{rowItems.map((item) => (
 							<Item
@@ -208,7 +212,7 @@ export function TimelineCanvasRows({
 								rowId={item.rowId}
 								span={item.span}
 								isSelected={selectAllBlocksActive || item.id === selectedAudioId}
-								onSelect={() => onSelectAudio?.(item.id)}
+								onSelectId={onSelectAudio}
 								variant="audio"
 							>
 								{item.label}