From 9385c25ea94825636fc2058fb1edd29335baaf1d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 7 Dec 2025 00:20:27 -0800
Subject: [PATCH] fix drag styles on playlist reorder

---
 .../playlist-reorder-column.module.css        |  3 +++
 .../columns/playlist-reorder-column.tsx       | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.module.css

diff --git a/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.module.css b/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.module.css
new file mode 100644
index 000000000..8ace98c39
--- /dev/null
+++ b/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.module.css
@@ -0,0 +1,3 @@
+.group {
+    justify-content: center;
+}
diff --git a/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx b/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx
index 4a68e2068..6f098fe69 100644
--- a/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx
@@ -2,7 +2,10 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
+import styles from './playlist-reorder-column.module.css';
+
 import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
+import { useItemDraggingState } from '/@/renderer/components/item-list/helpers/item-list-state';
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
@@ -25,7 +28,11 @@ export const PlaylistReorderColumn = (props: ItemTableListInnerColumn) => {
 
     const isPlaylistSong = props.itemType === LibraryItem.PLAYLIST_SONG;
 
-    const { isDraggedOver, ref: dragRef } = useDragDrop<HTMLButtonElement>({
+    const {
+        isDraggedOver,
+        isDragging: isDraggingLocal,
+        ref: dragRef,
+    } = useDragDrop<HTMLButtonElement>({
         drag: {
             getId: () => {
                 if (!item || !isDataRow || !isPlaylistSong) {
@@ -134,6 +141,17 @@ export const PlaylistReorderColumn = (props: ItemTableListInnerColumn) => {
     const draggedOverEdge: 'bottom' | 'top' | null =
         isDraggedOver === 'top' || isDraggedOver === 'bottom' ? isDraggedOver : null;
 
+    const itemRowId =
+        item && typeof item === 'object' && 'id' in item && props.internalState
+            ? props.internalState.extractRowId(item)
+            : undefined;
+    const isDraggingState = useItemDraggingState(
+        props.internalState,
+        itemRowId ||
+            (item && typeof item === 'object' && 'id' in item ? (item as any).id : undefined),
+    );
+    const isDragging = props.internalState ? isDraggingState : isDraggingLocal;
+
     const getValidDataItems = useCallback(() => {
         return props.data.filter((d) => d !== null && (d as any).id);
     }, [props.data]);
@@ -281,8 +299,8 @@ export const PlaylistReorderColumn = (props: ItemTableListInnerColumn) => {
     });
 
     return (
-        <TableColumnContainer {...props} isDraggedOver={draggedOverEdge}>
-            <ActionIconGroup w="100%">
+        <TableColumnContainer {...props} isDraggedOver={draggedOverEdge} isDragging={isDragging}>
+            <ActionIconGroup className={styles.group} w="100%">
                 <ActionIcon
                     {...upButtonHandlers}
                     icon="arrowUp"