optimize playqueue performance for active song styles

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -8,7 +8,6 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListItem } from '/@/renderer/components/item-list/types';
-import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
 import { usePlayerStatus } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -73,7 +72,8 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
 
 const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     const status = usePlayerStatus();
-    const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong);
+    const song = props.data[props.rowIndex] as QueueSong;
+    const isActive = props.activeRowId === song?._uniqueId;
 
     const adjustedRowIndex =
         props.adjustedRowIndexMap?.get(props.rowIndex) ??

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -10,7 +10,6 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
@@ -70,7 +69,8 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
         props.columns[props.columnIndex].id
     ];
 
-    const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong);
+    const song = props.data[props.rowIndex] as QueueSong;
+    const isActive = props.activeRowId === song?._uniqueId;
 
     if (typeof row === 'string') {
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -10,7 +10,6 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Image } from '/@/shared/components/image/image';
 import { Text } from '/@/shared/components/text/text';
@@ -79,7 +78,8 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
 export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
     const row: object | undefined = (props.data as (any | undefined)[])[props.rowIndex];
 
-    const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong);
+    const song = props.data[props.rowIndex] as QueueSong;
+    const isActive = props.activeRowId === song?._uniqueId;
 
     const artists = useMemo(() => {
         if (row && 'artists' in row && Array.isArray(row.artists)) {

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -84,6 +84,7 @@ enum TableItemSize {
 }
 
 interface VirtualizedTableGridProps {
+    activeRowId?: string;
     calculatedColumnWidths: number[];
     CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
     cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -125,6 +126,7 @@ interface VirtualizedTableGridProps {
 
 const VirtualizedTableGrid = React.memo(
     ({
+        activeRowId,
         calculatedColumnWidths,
         CellComponent,
         cellPadding,
@@ -271,6 +273,7 @@ const VirtualizedTableGrid = React.memo(
 
         const itemProps: TableItemProps = useMemo(
             () => ({
+                activeRowId,
                 adjustedRowIndexMap,
                 calculatedColumnWidths,
                 cellPadding,
@@ -300,11 +303,12 @@ const VirtualizedTableGrid = React.memo(
                 tableId,
             }),
             [
+                activeRowId,
                 adjustedRowIndexMap,
                 calculatedColumnWidths,
                 cellPadding,
-                controls,
                 parsedColumns,
+                controls,
                 dataWithGroups,
                 enableAlternateRowColors,
                 enableColumnReorder,
@@ -622,7 +626,8 @@ export interface TableGroupHeader {
 }
 
 export interface TableItemProps {
-    adjustedRowIndexMap?: Map<number, number>; // Maps rowIndex to adjustedRowIndex (1-indexed, excluding group rows)
+    activeRowId?: string; // Active row's uniqueId for QUEUE_SONG performance optimization
+    adjustedRowIndexMap?: Map<number, number>;
     calculatedColumnWidths?: number[];
     cellPadding?: ItemTableListProps['cellPadding'];
     columns: ItemTableListColumnConfig[];
@@ -653,6 +658,7 @@ export interface TableItemProps {
 }
 
 interface ItemTableListProps {
+    activeRowId?: string;
     autoFitColumns?: boolean;
     CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
     cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -692,6 +698,7 @@ interface ItemTableListProps {
 }
 
 export const ItemTableList = ({
+    activeRowId,
     autoFitColumns = false,
     CellComponent,
     cellPadding = 'sm',
@@ -2026,6 +2033,7 @@ export const ItemTableList = ({
             {StickyHeader}
             {StickyGroupRow}
             <VirtualizedTableGrid
+                activeRowId={activeRowId}
                 calculatedColumnWidths={calculatedColumnWidths}
                 CellComponent={CellComponent}
                 cellPadding={cellPadding}

src/renderer/features/now-playing/components/play-queue.tsx

@@ -24,6 +24,7 @@ import {
     useListSettings,
     usePlayerActions,
     usePlayerQueueType,
+    usePlayerSong,
 } from '/@/renderer/store';
 import { searchSongs } from '/@/renderer/utils/search-songs';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -156,10 +157,14 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
         itemListKey: listKey,
     });
 
+    const currentSong = usePlayerSong();
+    const currentSongUniqueId = currentSong?._uniqueId;
+
     return (
         <div className={styles.container}>
             <LoadingOverlay pos="absolute" visible={isFetching} />
             <ItemTableList
+                activeRowId={currentSongUniqueId}
                 autoFitColumns={table.autoFitColumns}
                 CellComponent={ItemTableListColumn}
                 columns={table.columns}