add context to item list table

2026-05-07 04:20:12 +02:00 · 2026-01-16 12:09:59 -08:00
parent 79e7d7a010
commit a5fa022eb6
5 changed files with 232 additions and 78 deletions
@@ -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 =
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);

    const isActiveAndPlaying = isActive && status === PlayerStatus.PLAYING;

@@ -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 =
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);

    if (typeof row === 'string') {
        const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
@@ -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 =
-        !!props.activeRowId &&
-        (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
+    const isActive = useIsActiveRow(song?.id, song?._uniqueId);

    const handlePlay = (playType: Play, event: React.MouseEvent<HTMLButtonElement>) => {
        if (!item) {
@@ -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),
+    );
+};
@@ -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,70 +2529,104 @@ 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 (
-        <motion.div
-            className={styles.itemTableListContainer}
-            onKeyDown={handleKeyDown}
-            onMouseDown={(e) => {
-                const element = e.currentTarget as HTMLDivElement;
-                // Focus without scrolling into view
-                if (element.focus) {
-                    element.focus({ preventScroll: true });
-                }
-            }}
-            ref={mergedContainerRef}
-            tabIndex={0}
-            {...animationProps.fadeIn}
-            transition={{ duration: enableEntranceAnimation ? 1 : 0, ease: 'anticipate' }}
-        >
-            {StickyHeader}
-            {StickyGroupRow}
-            <MemoizedVirtualizedTableGrid
-                activeRowId={activeRowId}
-                calculatedColumnWidths={calculatedColumnWidths}
-                CellComponent={CellComponent}
-                cellPadding={cellPadding}
-                controls={controls}
-                data={data}
-                dataWithGroups={dataWithGroups}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableColumnReorder={!!onColumnReordered}
-                enableColumnResize={!!onColumnResized}
-                enableDrag={enableDrag}
-                enableExpansion={enableExpansion}
-                enableHeader={enableHeader}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableScrollShadow={enableScrollShadow}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                getRowHeight={getRowHeight}
-                groups={groups}
-                headerHeight={headerHeight}
-                internalState={internalState}
-                itemType={itemType}
-                mergedRowRef={mergedRowRef}
-                onRangeChanged={onRangeChanged}
-                parsedColumns={parsedColumns}
-                pinnedLeftColumnCount={pinnedLeftColumnCount}
-                pinnedLeftColumnRef={pinnedLeftColumnRef}
-                pinnedRightColumnCount={pinnedRightColumnCount}
-                pinnedRightColumnRef={pinnedRightColumnRef}
-                pinnedRowCount={pinnedRowCount}
-                pinnedRowRef={pinnedRowRef}
-                playerContext={playerContext}
-                showLeftShadow={showLeftShadow}
-                showRightShadow={showRightShadow}
-                showTopShadow={showTopShadow}
-                size={size}
-                startRowIndex={startRowIndex}
-                tableId={tableId}
-                totalColumnCount={totalColumnCount}
-                totalRowCount={totalRowCount}
-            />
-            <ExpandedContainer internalState={internalState} itemType={itemType} />
-            {/* {enableSelectionDialog && <SelectionDialog internalState={internalState} />} */}
-        </motion.div>
+        <ItemTableListStoreProvider activeRowId={activeRowId}>
+            <ItemTableListConfigProvider value={tableConfigValue}>
+                <motion.div
+                    className={styles.itemTableListContainer}
+                    onKeyDown={handleKeyDown}
+                    onMouseDown={(e) => {
+                        const element = e.currentTarget as HTMLDivElement;
+                        // Focus without scrolling into view
+                        if (element.focus) {
+                            element.focus({ preventScroll: true });
+                        }
+                    }}
+                    ref={mergedContainerRef}
+                    tabIndex={0}
+                    {...animationProps.fadeIn}
+                    transition={{ duration: enableEntranceAnimation ? 1 : 0, ease: 'anticipate' }}
+                >
+                    {StickyHeader}
+                    {StickyGroupRow}
+                    <MemoizedVirtualizedTableGrid
+                        calculatedColumnWidths={calculatedColumnWidths}
+                        CellComponent={CellComponent}
+                        cellPadding={cellPadding}
+                        controls={controls}
+                        data={data}
+                        dataWithGroups={dataWithGroups}
+                        enableAlternateRowColors={enableAlternateRowColors}
+                        enableColumnReorder={!!onColumnReordered}
+                        enableColumnResize={!!onColumnResized}
+                        enableDrag={enableDrag}
+                        enableExpansion={enableExpansion}
+                        enableHeader={enableHeader}
+                        enableHorizontalBorders={enableHorizontalBorders}
+                        enableRowHoverHighlight={enableRowHoverHighlight}
+                        enableScrollShadow={enableScrollShadow}
+                        enableSelection={enableSelection}
+                        enableVerticalBorders={enableVerticalBorders}
+                        getRowHeight={getRowHeight}
+                        groups={groups}
+                        headerHeight={headerHeight}
+                        internalState={internalState}
+                        itemType={itemType}
+                        mergedRowRef={mergedRowRef}
+                        onRangeChanged={onRangeChanged}
+                        parsedColumns={parsedColumns}
+                        pinnedLeftColumnCount={pinnedLeftColumnCount}
+                        pinnedLeftColumnRef={pinnedLeftColumnRef}
+                        pinnedRightColumnCount={pinnedRightColumnCount}
+                        pinnedRightColumnRef={pinnedRightColumnRef}
+                        pinnedRowCount={pinnedRowCount}
+                        pinnedRowRef={pinnedRowRef}
+                        playerContext={playerContext}
+                        showLeftShadow={showLeftShadow}
+                        showRightShadow={showRightShadow}
+                        showTopShadow={showTopShadow}
+                        size={size}
+                        startRowIndex={startRowIndex}
+                        tableId={tableId}
+                        totalColumnCount={totalColumnCount}
+                        totalRowCount={totalRowCount}
+                    />
+                    <ExpandedContainer internalState={internalState} itemType={itemType} />
+                    {/* {enableSelectionDialog && <SelectionDialog internalState={internalState} />} */}
+                </motion.div>
+            </ItemTableListConfigProvider>
+        </ItemTableListStoreProvider>
    );
 };