From 18c4779f58611985e6b58a0bb687fde1f28f900f Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Tue, 19 May 2026 11:20:29 -0400
Subject: [PATCH] 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
---
 .../apps/web/src/components/editor/AssetsPanel.tsx   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
index 4cb500a..f532b03 100644
--- a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
+++ b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
@@ -111,6 +111,7 @@ const MediaThumbnail: React.FC<{
   onDelete: () => void;
   onReplace: () => void;
   onDragStart: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
   onAddToTimeline: () => void;
   onKieAI?: () => void;
   onRetryKieAI?: () => void;
@@ -122,6 +123,7 @@ const MediaThumbnail: React.FC<{
   onDelete,
   onReplace,
   onDragStart,
+  onDragEnd,
   onAddToTimeline,
   onKieAI,
   onRetryKieAI,
@@ -242,6 +244,7 @@ const MediaThumbnail: React.FC<{
       <div
         draggable
         onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         onClick={onSelect}
         onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }}
         onMouseEnter={() => setIsHovered(true)}
@@ -389,6 +392,7 @@ const MediaThumbnail: React.FC<{
       <div
         draggable
         onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         onClick={onSelect}
         onDoubleClick={(e) => {
           e.stopPropagation();
@@ -605,7 +609,7 @@ export const AssetsPanel: React.FC = () => {
   const { retryTask } = useKieAIStore();
 
   // UI store
-  const { select, isSelected, startDrag } = useUIStore();
+  const { select, isSelected, startDrag, endDrag } = useUIStore();
 
   // Count missing assets
   const missingAssetsCount = mediaItems.filter(
@@ -811,6 +815,11 @@ export const AssetsPanel: React.FC = () => {
     [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 { addClipToNewTrack } = useProjectStore.getState();
     await addClipToNewTrack(item.id);
@@ -1019,6 +1028,7 @@ export const AssetsPanel: React.FC = () => {
                         onDelete={() => handleDeleteItem(item.id)}
                         onReplace={() => handleReplaceAsset(item.id)}
                         onDragStart={(e) => handleItemDragStart(e, item)}
+                        onDragEnd={handleItemDragEnd}
                         onAddToTimeline={() => handleAddToTimeline(item)}
                         onKieAI={item.type === "image" && !item.isPending && !item.kieaiError ? () => handleOpenKieAI(item) : undefined}
                         onRetryKieAI={item.kieaiError && item.kieaiTaskId ? () => handleRetryKieAI(item) : undefined}