From 7bb54f9fa0ed3074af0957fd755c20aea0009e55 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 9 Feb 2026 02:04:23 -0800
Subject: [PATCH] add configuration for row hover highlight

---
 .../item-detail-list/item-detail.module.css   | 22 +++++++++++++++++++
 .../item-detail-list/item-detail.tsx          | 10 +++++++++
 .../components/album-list-header-filters.tsx  |  2 --
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
index d08ec688f..043ec6e41 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
@@ -164,6 +164,28 @@
     opacity: 0.5;
 }
 
+.track-row.track-row-hover-highlight-enabled {
+    position: relative;
+}
+
+.track-row.track-row-hover-highlight-enabled .track-cell {
+    position: relative;
+    z-index: 2;
+}
+
+.track-row.track-row-hover-highlight-enabled:hover::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background-color: var(--theme-colors-surface);
+    opacity: 0.7;
+}
+
 .skeleton-image {
     width: 100%;
     aspect-ratio: 1;
diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
index f717ea5cb..e499d6a7b 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
@@ -55,6 +55,7 @@ interface RowData {
     columnWidthPercents: number[];
     controls?: ItemControls;
     data: unknown[];
+    enableRowHoverHighlight: boolean;
     getItem?: (index: number) => unknown;
     internalState: ItemListStateActions;
     isMutatingFavorite: boolean;
@@ -67,6 +68,7 @@ interface TrackRowProps {
     columns: ItemTableListColumnConfig[];
     columnWidthPercents: number[];
     controls?: ItemControls;
+    enableRowHoverHighlight: boolean;
     internalState: ItemListStateActions;
     isMutatingFavorite: boolean;
     onFavoriteClick: (song: Song) => void;
@@ -83,6 +85,7 @@ const TrackRow = memo(
         columns,
         columnWidthPercents,
         controls,
+        enableRowHoverHighlight,
         internalState,
         isMutatingFavorite,
         onFavoriteClick,
@@ -186,6 +189,7 @@ const TrackRow = memo(
             <div
                 className={clsx(styles.trackRow, {
                     [styles.trackRowDragging]: isDragging,
+                    [styles.trackRowHoverHighlightEnabled]: enableRowHoverHighlight,
                     [styles.trackRowSelected]: isSelected,
                     [styles.trackRowSizeCompact]: size === 'compact',
                     [styles.trackRowSizeDefault]: size === 'default',
@@ -261,6 +265,7 @@ const RowContent = memo(
         columnWidthPercents,
         controls,
         data,
+        enableRowHoverHighlight,
         getItem,
         index,
         internalState,
@@ -387,6 +392,7 @@ const RowContent = memo(
                                 columns={trackColumns}
                                 columnWidthPercents={columnWidthPercents}
                                 controls={controls}
+                                enableRowHoverHighlight={enableRowHoverHighlight}
                                 internalState={internalState}
                                 isMutatingFavorite={isMutatingFavorite}
                                 key={song.id}
@@ -405,6 +411,7 @@ const RowContent = memo(
         prev.index === next.index &&
         prev.data === next.data &&
         prev.columnWidthPercents === next.columnWidthPercents &&
+        prev.enableRowHoverHighlight === next.enableRowHoverHighlight &&
         prev.getItem === next.getItem &&
         prev.internalState === next.internalState &&
         prev.isMutatingFavorite === next.isMutatingFavorite &&
@@ -500,6 +507,7 @@ export const ItemDetailList = ({
         });
     }, [tableConfig?.columns]);
     const trackTableSize = tableConfig?.size ?? 'default';
+    const enableRowHoverHighlight = tableConfig?.enableRowHoverHighlight ?? true;
 
     const columnWidthPercents = useMemo(() => {
         const total = trackColumns.reduce((sum, c) => sum + c.width, 0);
@@ -538,6 +546,7 @@ export const ItemDetailList = ({
             columnWidthPercents,
             controls,
             data: dataSource,
+            enableRowHoverHighlight,
             getItem,
             internalState,
             isMutatingFavorite,
@@ -550,6 +559,7 @@ export const ItemDetailList = ({
             columnWidthPercents,
             controls,
             dataSource,
+            enableRowHoverHighlight,
             getItem,
             internalState,
             isMutatingFavorite,
diff --git a/src/renderer/features/albums/components/album-list-header-filters.tsx b/src/renderer/features/albums/components/album-list-header-filters.tsx
index 7051b99c4..80fc18c78 100644
--- a/src/renderer/features/albums/components/album-list-header-filters.tsx
+++ b/src/renderer/features/albums/components/album-list-header-filters.tsx
@@ -102,8 +102,6 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                         optionsConfig: {
                             autoFitColumns: { hidden: true },
                             enableHeader: { hidden: true },
-                            itemsPerPage: { hidden: true },
-                            pagination: { hidden: true },
                         },
                         tableColumnsData: SONG_TABLE_COLUMNS,
                     }}