fix: add onDragEnd to AssetsPanel to clear isDragging state

- Import endDrag from useUIStore
- Add handleItemDragEnd callback that calls endDrag()
- Add onDragEnd? prop to MediaThumbnail interface
- Wire onDragEnd={onDragEnd} to both draggable divs (list & grid views)
- Pass onDragEnd={handleItemDragEnd} when rendering MediaThumbnail
- Without this, isDragging was permanently stuck at true after every drag
This commit is contained in:
Zac Gaetano 2026-05-19 11:20:29 -04:00
parent aec55fea83
commit 18c4779f58

View file

@ -111,6 +111,7 @@ const MediaThumbnail: React.FC<{
onDelete: () => void; onDelete: () => void;
onReplace: () => void; onReplace: () => void;
onDragStart: (e: React.DragEvent) => void; onDragStart: (e: React.DragEvent) => void;
onDragEnd?: (e: React.DragEvent) => void;
onAddToTimeline: () => void; onAddToTimeline: () => void;
onKieAI?: () => void; onKieAI?: () => void;
onRetryKieAI?: () => void; onRetryKieAI?: () => void;
@ -122,6 +123,7 @@ const MediaThumbnail: React.FC<{
onDelete, onDelete,
onReplace, onReplace,
onDragStart, onDragStart,
onDragEnd,
onAddToTimeline, onAddToTimeline,
onKieAI, onKieAI,
onRetryKieAI, onRetryKieAI,
@ -242,6 +244,7 @@ const MediaThumbnail: React.FC<{
<div <div
draggable draggable
onDragStart={onDragStart} onDragStart={onDragStart}
onDragEnd={onDragEnd}
onClick={onSelect} onClick={onSelect}
onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }} onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
@ -389,6 +392,7 @@ const MediaThumbnail: React.FC<{
<div <div
draggable draggable
onDragStart={onDragStart} onDragStart={onDragStart}
onDragEnd={onDragEnd}
onClick={onSelect} onClick={onSelect}
onDoubleClick={(e) => { onDoubleClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -605,7 +609,7 @@ export const AssetsPanel: React.FC = () => {
const { retryTask } = useKieAIStore(); const { retryTask } = useKieAIStore();
// UI store // UI store
const { select, isSelected, startDrag } = useUIStore(); const { select, isSelected, startDrag, endDrag } = useUIStore();
// Count missing assets // Count missing assets
const missingAssetsCount = mediaItems.filter( const missingAssetsCount = mediaItems.filter(
@ -811,6 +815,11 @@ export const AssetsPanel: React.FC = () => {
[startDrag], [startDrag],
); );
// Clear drag state when drag ends (prevents isDragging getting stuck at true)
const handleItemDragEnd = useCallback(() => {
endDrag();
}, [endDrag]);
const addMediaToTimeline = useCallback(async (item: MediaItem) => { const addMediaToTimeline = useCallback(async (item: MediaItem) => {
const { addClipToNewTrack } = useProjectStore.getState(); const { addClipToNewTrack } = useProjectStore.getState();
await addClipToNewTrack(item.id); await addClipToNewTrack(item.id);
@ -1019,6 +1028,7 @@ export const AssetsPanel: React.FC = () => {
onDelete={() => handleDeleteItem(item.id)} onDelete={() => handleDeleteItem(item.id)}
onReplace={() => handleReplaceAsset(item.id)} onReplace={() => handleReplaceAsset(item.id)}
onDragStart={(e) => handleItemDragStart(e, item)} onDragStart={(e) => handleItemDragStart(e, item)}
onDragEnd={handleItemDragEnd}
onAddToTimeline={() => handleAddToTimeline(item)} onAddToTimeline={() => handleAddToTimeline(item)}
onKieAI={item.type === "image" && !item.isPending && !item.kieaiError ? () => handleOpenKieAI(item) : undefined} onKieAI={item.type === "image" && !item.isPending && !item.kieaiError ? () => handleOpenKieAI(item) : undefined}
onRetryKieAI={item.kieaiError && item.kieaiTaskId ? () => handleRetryKieAI(item) : undefined} onRetryKieAI={item.kieaiError && item.kieaiTaskId ? () => handleRetryKieAI(item) : undefined}