From c3e38d7133caf0adbcefcfe4f0526818e5ff09d8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 23 Dec 2025 20:53:07 -0800
Subject: [PATCH] fix drag preview image url generation

---
 .../drag-preview/drag-preview.module.css       |  0
 .../components/drag-preview/drag-preview.tsx   | 18 ++++++++----------
 src/renderer/hooks/use-drag-drop.tsx           |  2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)
 rename src/{shared => renderer}/components/drag-preview/drag-preview.module.css (100%)
 rename src/{shared => renderer}/components/drag-preview/drag-preview.tsx (90%)

diff --git a/src/shared/components/drag-preview/drag-preview.module.css b/src/renderer/components/drag-preview/drag-preview.module.css
similarity index 100%
rename from src/shared/components/drag-preview/drag-preview.module.css
rename to src/renderer/components/drag-preview/drag-preview.module.css
diff --git a/src/shared/components/drag-preview/drag-preview.tsx b/src/renderer/components/drag-preview/drag-preview.tsx
similarity index 90%
rename from src/shared/components/drag-preview/drag-preview.tsx
rename to src/renderer/components/drag-preview/drag-preview.tsx
index 30a623ada..a2d8d7d77 100644
--- a/src/shared/components/drag-preview/drag-preview.tsx
+++ b/src/renderer/components/drag-preview/drag-preview.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './drag-preview.module.css';
 
+import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { Icon } from '/@/shared/components/icon/icon';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { DragData } from '/@/shared/types/drag-and-drop';
@@ -23,22 +24,19 @@ const getItemName = (item: unknown): string => {
     return 'Item';
 };
 
-const getItemImage = (item: unknown): null | string => {
-    if (item && typeof item === 'object') {
-        if ('imageUrl' in item && typeof item.imageUrl === 'string') {
-            return item.imageUrl;
-        }
-    }
-    return null;
-};
-
 export const DragPreview = memo(({ data }: DragPreviewProps) => {
     const items = data.item || [];
     const { t } = useTranslation();
     const itemCount = items.length;
     const firstItem = items[0];
     const itemName = firstItem ? getItemName(firstItem) : 'Item';
-    const itemImage = firstItem ? getItemImage(firstItem) : null;
+
+    const itemImage = useItemImageUrl({
+        id: (firstItem as { id: string })?.id,
+        itemType: data.itemType || LibraryItem.SONG,
+        type: 'table',
+    });
+
     const isMultiple = itemCount > 1;
 
     return (
diff --git a/src/renderer/hooks/use-drag-drop.tsx b/src/renderer/hooks/use-drag-drop.tsx
index 35e9a4e34..42c331e50 100644
--- a/src/renderer/hooks/use-drag-drop.tsx
+++ b/src/renderer/hooks/use-drag-drop.tsx
@@ -18,7 +18,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { DragPreview } from '/@/shared/components/drag-preview/drag-preview';
+import { DragPreview } from '/@/renderer/components/drag-preview/drag-preview';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';