add context to item list table

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

@@ -8,6 +8,7 @@ import {
     TableColumnContainer,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { usePlayerStatus } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -87,9 +88,7 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
 const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     const status = usePlayerStatus();
     const song = props.data[props.rowIndex] as QueueSong;
-    const isActive =
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
 
     const isActiveAndPlaying = isActive && status === PlayerStatus.PLAYING;
 

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

@@ -10,6 +10,7 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
@@ -75,9 +76,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
     ];
 
     const song = props.data[props.rowIndex] as QueueSong;
-    const isActive =
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || 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

@@ -12,6 +12,7 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import {
@@ -162,9 +163,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
     const internalState = (props as any).internalState;
     const playButtonBehavior = usePlayButtonBehavior();
     const [isHovered, setIsHovered] = useState(false);
-    const isActive =
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
 
     const handlePlay = (playType: Play, event: React.MouseEvent<HTMLButtonElement>) => {
         if (!item) {

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

@@ -0,0 +1,125 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { useSyncExternalStore } from 'react';
+
+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { ItemControls, ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
+import { PlayerContext } from '/@/renderer/features/player/context/player-context';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+/**
+ * Stage A/B: Provide table-scoped config + external stores so churny values can update
+ * without forcing `cellProps` identity changes (and therefore without rerendering every visible cell).
+ */
+
+export type ItemTableListConfig = {
+    cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    columns: ItemTableListColumnConfig[];
+    controls: ItemControls;
+    enableHeader: boolean;
+    enableRowHoverHighlight: boolean;
+    enableSelection: boolean;
+    internalState: ItemListStateActions;
+    itemType: LibraryItem;
+    playerContext: PlayerContext;
+    size: 'compact' | 'default' | 'large';
+    startRowIndex?: number;
+    tableId: string;
+};
+
+const ItemTableListConfigContext = createContext<ItemTableListConfig | null>(null);
+
+export const ItemTableListConfigProvider = ({
+    children,
+    value,
+}: {
+    children: React.ReactNode;
+    value: ItemTableListConfig;
+}) => {
+    // Keep reference stable when the input reference is stable.
+    const memoValue = useMemo(() => value, [value]);
+    return (
+        <ItemTableListConfigContext.Provider value={memoValue}>
+            {children}
+        </ItemTableListConfigContext.Provider>
+    );
+};
+
+export const useItemTableListConfig = (): ItemTableListConfig | null => {
+    return useContext(ItemTableListConfigContext);
+};
+
+type ItemTableListStoreContextValue = {
+    activeRowStore: ActiveRowStore;
+};
+
+class ActiveRowStore {
+    private activeRowId: null | string = null;
+    private listeners = new Set<() => void>();
+
+    getActiveRowId(): null | string {
+        return this.activeRowId;
+    }
+
+    setActiveRowId(next: null | string | undefined): void {
+        const normalized = next ?? null;
+        if (this.activeRowId === normalized) return;
+        this.activeRowId = normalized;
+        this.listeners.forEach((l) => l());
+    }
+
+    subscribe(listener: () => void): () => void {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+}
+
+const ItemTableListStoreContext = createContext<ItemTableListStoreContextValue | null>(null);
+
+export const ItemTableListStoreProvider = ({
+    activeRowId,
+    children,
+}: {
+    activeRowId?: string;
+    children: React.ReactNode;
+}) => {
+    const storeRef = useRef<ActiveRowStore | null>(null);
+    if (!storeRef.current) {
+        storeRef.current = new ActiveRowStore();
+    }
+    const store = storeRef.current;
+
+    useEffect(() => {
+        store.setActiveRowId(activeRowId);
+    }, [activeRowId, store]);
+
+    const value = useMemo<ItemTableListStoreContextValue>(
+        () => ({ activeRowStore: store }),
+        [store],
+    );
+
+    return (
+        <ItemTableListStoreContext.Provider value={value}>
+            {children}
+        </ItemTableListStoreContext.Provider>
+    );
+};
+
+export const useItemTableListStore = (): ItemTableListStoreContextValue | null => {
+    return useContext(ItemTableListStoreContext);
+};
+
+export const useActiveRowSubscription = <T,>(selector: (activeRowId: null | string) => T): T => {
+    const store = useItemTableListStore()?.activeRowStore ?? null;
+
+    return useSyncExternalStore(store?.subscribe.bind(store) || (() => () => {}), () =>
+        selector(store?.getActiveRowId() ?? null),
+    );
+};
+
+export const useIsActiveRow = (...rowIds: Array<string | undefined>): boolean => {
+    return useActiveRowSubscription((activeRowId) =>
+        rowIds.some((id) => !!id && id === activeRowId),
+    );
+};

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

@@ -36,6 +36,10 @@ import { parseTableColumns } from '/@/renderer/components/item-list/helpers/pars
 import { useListHotkeys } from '/@/renderer/components/item-list/helpers/use-list-hotkeys';
 import { useStickyTableGroupRows } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows';
 import { useStickyTableHeader } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-header';
+import {
+    ItemTableListConfigProvider,
+    ItemTableListStoreProvider,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import {
     ItemControls,
     ItemListHandle,
@@ -88,7 +92,6 @@ enum TableItemSize {
 }
 
 interface VirtualizedTableGridProps {
-    activeRowId?: string;
     calculatedColumnWidths: number[];
     CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
     cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -132,7 +135,6 @@ interface VirtualizedTableGridProps {
 }
 
 const VirtualizedTableGrid = ({
-    activeRowId,
     calculatedColumnWidths,
     CellComponent,
     cellPadding,
@@ -442,7 +444,6 @@ const VirtualizedTableGrid = ({
 
     const dynamicDataProps = useMemo(
         () => ({
-            activeRowId,
             calculatedColumnWidths,
             data: dataWithGroups,
             getAdjustedRowIndex,
@@ -455,7 +456,6 @@ const VirtualizedTableGrid = ({
             startRowIndex,
         }),
         [
-            activeRowId,
             calculatedColumnWidths,
             dataWithGroups,
             getAdjustedRowIndex,
@@ -779,7 +779,6 @@ VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
 
 const MemoizedVirtualizedTableGrid = memo(VirtualizedTableGrid, (prevProps, nextProps) => {
     return (
-        prevProps.activeRowId === nextProps.activeRowId &&
         prevProps.calculatedColumnWidths === nextProps.calculatedColumnWidths &&
         prevProps.cellPadding === nextProps.cellPadding &&
         prevProps.controls === nextProps.controls &&
@@ -837,7 +836,6 @@ export interface TableGroupHeader {
 }
 
 export interface TableItemProps {
-    activeRowId?: string;
     adjustedRowIndexMap?: Map<number, number>;
     calculatedColumnWidths?: number[];
     cellPadding?: ItemTableListProps['cellPadding'];
@@ -2531,7 +2529,40 @@ const BaseItemTableList = ({
         itemType,
     });
 
+    const tableConfigValue = useMemo(
+        () => ({
+            cellPadding,
+            columns: parsedColumns,
+            controls,
+            enableHeader,
+            enableRowHoverHighlight,
+            enableSelection,
+            internalState,
+            itemType,
+            playerContext,
+            size,
+            startRowIndex,
+            tableId,
+        }),
+        [
+            cellPadding,
+            parsedColumns,
+            controls,
+            enableHeader,
+            enableRowHoverHighlight,
+            enableSelection,
+            internalState,
+            itemType,
+            playerContext,
+            size,
+            startRowIndex,
+            tableId,
+        ],
+    );
+
     return (
+        <ItemTableListStoreProvider activeRowId={activeRowId}>
+            <ItemTableListConfigProvider value={tableConfigValue}>
                 <motion.div
                     className={styles.itemTableListContainer}
                     onKeyDown={handleKeyDown}
@@ -2550,7 +2581,6 @@ const BaseItemTableList = ({
                     {StickyHeader}
                     {StickyGroupRow}
                     <MemoizedVirtualizedTableGrid
-                activeRowId={activeRowId}
                         calculatedColumnWidths={calculatedColumnWidths}
                         CellComponent={CellComponent}
                         cellPadding={cellPadding}
@@ -2595,6 +2625,8 @@ const BaseItemTableList = ({
                     <ExpandedContainer internalState={internalState} itemType={itemType} />
                     {/* {enableSelectionDialog && <SelectionDialog internalState={internalState} />} */}
                 </motion.div>
+            </ItemTableListConfigProvider>
+        </ItemTableListStoreProvider>
     );
 };