normalize controls onto lists

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

@@ -2,19 +2,14 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-import { LibraryItem } from '/@/shared/types/domain-types';
 
 export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
     const row: boolean | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
     ];
 
-    const createFavorite = useCreateFavorite({});
-    const deleteFavorite = useDeleteFavorite({});
-
     if (typeof row === 'boolean') {
         return (
             <TableColumnContainer {...props}>
@@ -26,36 +21,14 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
                         fill: row ? 'primary' : undefined,
                         size: 'md',
                     }}
-                    onClick={() => {
-                        if (!props.data?.[props.rowIndex]) {
-                            return;
-                        }
-
-                        if (row) {
-                            deleteFavorite.mutate({
-                                apiClientProps: {
-                                    serverId: (props.data as any)[props.rowIndex]
-                                        .serverId as string,
-                                },
-                                query: {
-                                    id: [(props.data as any)[props.rowIndex].id as string],
-                                    type: (props.data as any)[props.rowIndex]
-                                        .itemType as LibraryItem,
-                                },
-                            });
-                        } else {
-                            createFavorite.mutate({
-                                apiClientProps: {
-                                    serverId: (props.data as any)[props.rowIndex]
-                                        .serverId as string,
-                                },
-                                query: {
-                                    id: [(props.data as any)[props.rowIndex].id as string],
-                                    type: (props.data as any)[props.rowIndex]
-                                        .itemType as LibraryItem,
-                                },
-                            });
-                        }
+                    onClick={(event) => {
+                        props.controls.onFavorite?.({
+                            event,
+                            favorite: !row,
+                            internalState: props.internalState,
+                            item: props.data[props.rowIndex] as ItemListItem,
+                            itemType: props.itemType,
+                        });
                     }}
                     size="xs"
                     variant="subtle"

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

@@ -2,7 +2,7 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
+import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { Rating } from '/@/shared/components/rating/rating';
 
 export const RatingColumn = (props: ItemTableListInnerColumn) => {
@@ -10,35 +10,20 @@ export const RatingColumn = (props: ItemTableListInnerColumn) => {
         props.columns[props.columnIndex].id
     ];
 
-    const setRatingMutation = useSetRating({});
-
-    const handleChangeRating = (rating: number) => {
-        const previousRating = row || 0;
-
-        let newRating = rating;
-
-        if (previousRating === rating) {
-            newRating = 0;
-        }
-
-        const item = props.data[props.rowIndex] as any;
-
-        setRatingMutation.mutate({
-            apiClientProps: { serverId: item.serverId as string },
-            query: {
-                id: [item.id],
-                rating: newRating,
-                type: item.itemType,
-            },
-        });
-    };
-
     if (typeof row === 'number' || row === null) {
         return (
             <TableColumnContainer {...props}>
                 <Rating
                     className={row ? undefined : 'hover-only-flex'}
-                    onChange={handleChangeRating}
+                    onChange={(rating) => {
+                        props.controls.onRating?.({
+                            event: null,
+                            internalState: props.internalState,
+                            item: props.data[props.rowIndex] as ItemListItem,
+                            itemType: props.itemType,
+                            rating,
+                        });
+                    }}
                     size="xs"
                     value={row || 0}
                 />

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

@@ -21,11 +21,7 @@ export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
                     icon="arrowDownS"
                     iconProps={{ color: 'muted', size: 'md' }}
                     onClick={(e) =>
-                        controls.onItemExpand?.(
-                            props.data[props.rowIndex] as any,
-                            props.itemType,
-                            e,
-                        )
+                        controls.onExpand?.(props.data[props.rowIndex] as any, props.itemType, e)
                     }
                     size="xs"
                     variant="subtle"

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

@@ -5,7 +5,6 @@ import { CellComponentProps } from 'react-window-v2';
 import styles from './item-table-list-column.module.css';
 
 import i18n from '/@/i18n/i18n';
-import { itemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
 import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
 import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
 import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
@@ -29,7 +28,7 @@ import { TextColumn } from '/@/renderer/components/item-list/item-table-list/col
 import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-column';
 import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column';
 import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
-import { ItemControls } from '/@/renderer/components/item-list/types';
+import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
@@ -47,36 +46,10 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
 
     const isHeaderEnabled = !!props.enableHeader;
 
-    const controls: ItemControls = {
-        onClick: (item, itemType, event) => {
-            if (props.onRowClick && item) {
-                props.onRowClick(item, event);
-            } else {
-                itemListControls.handleItemClick(item, itemType, props.internalState);
-            }
-        },
-        onDoubleClick: (item, itemType) =>
-            itemListControls.handleItemDoubleClick(item, itemType, props.internalState),
-        onFavorite: (item, itemType) =>
-            itemListControls.handleItemFavorite(item, itemType, props.internalState),
-        onItemExpand: (item, itemType) =>
-            itemListControls.handleItemExpand(item, itemType, props.internalState),
-        onMore: (item, itemType) =>
-            itemListControls.handleItemMore(item, itemType, props.internalState),
-        onPlay: (item, itemType, playType) =>
-            itemListControls.handleItemPlay(item, itemType, playType, props.internalState),
-        onRating: (item, itemType) =>
-            itemListControls.handleItemRating(item, itemType, props.internalState),
-    };
+    const controls = props.controls;
 
     if (isHeaderEnabled && props.rowIndex === 0) {
-        return (
-            <TableColumnHeaderContainer
-                {...props}
-                controls={controls}
-                type={type}
-            ></TableColumnHeaderContainer>
-        );
+        return <TableColumnHeaderContainer {...props} controls={controls} type={type} />;
     }
 
     switch (type) {
@@ -211,7 +184,12 @@ export const TableColumnTextContainer = (
         }
 
         if (isDataRow && item && props.enableSelection) {
-            props.controls.onClick?.(item as any, props.itemType, event);
+            props.controls.onClick?.({
+                event,
+                internalState: props.internalState,
+                item: item as ItemListItem,
+                itemType: props.itemType,
+            });
         }
     };
 
@@ -315,7 +293,12 @@ export const TableColumnContainer = (
         }
 
         if (isDataRow && item && props.enableSelection) {
-            props.controls.onClick?.(item as any, props.itemType, event);
+            props.controls.onClick?.({
+                event,
+                internalState: props.internalState,
+                item: item as ItemListItem,
+                itemType: props.itemType,
+            });
         }
     };
 

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

@@ -21,19 +21,25 @@ import styles from './item-table-list.module.css';
 
 import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
 import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
+import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
 import {
     ItemListItem,
     ItemListStateActions,
     useItemListState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
-import { ItemListHandle, ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
+import {
+    ItemControls,
+    ItemListHandle,
+    ItemTableListColumnConfig,
+} from '/@/renderer/components/item-list/types';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface VirtualizedTableGridProps {
     calculatedColumnWidths: number[];
     CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
     cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    controls: ItemControls;
     data: unknown[];
     enableAlternateRowColors: boolean;
     enableExpansion: boolean;
@@ -68,6 +74,7 @@ const VirtualizedTableGrid = React.memo(
         calculatedColumnWidths,
         CellComponent,
         cellPadding,
+        controls,
         data,
         enableAlternateRowColors,
         enableExpansion,
@@ -105,6 +112,7 @@ const VirtualizedTableGrid = React.memo(
             () => ({
                 cellPadding,
                 columns: parsedColumns,
+                controls,
                 data: enableHeader ? [null, ...data] : data,
                 enableAlternateRowColors,
                 enableExpansion,
@@ -121,6 +129,7 @@ const VirtualizedTableGrid = React.memo(
             }),
             [
                 cellPadding,
+                controls,
                 parsedColumns,
                 enableHeader,
                 data,
@@ -402,6 +411,7 @@ VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
 export interface TableItemProps {
     cellPadding?: ItemTableListProps['cellPadding'];
     columns: ItemTableListColumnConfig[];
+    controls: ItemControls;
     data: ItemTableListProps['data'];
     enableAlternateRowColors?: ItemTableListProps['enableAlternateRowColors'];
     enableExpansion?: ItemTableListProps['enableExpansion'];
@@ -918,9 +928,9 @@ export const ItemTableList = ({
             }
 
             const itemListItem: ItemListItem = {
+                _serverId: item.serverId,
                 id: item.id,
                 itemType,
-                serverId: item.serverId,
             };
 
             // Check if ctrl/cmd key is held for multi-selection
@@ -971,9 +981,9 @@ export const ItemTableList = ({
                                 'serverId' in rangeItem
                             ) {
                                 rangeItems.push({
+                                    _serverId: (rangeItem as any).serverId,
                                     id: (rangeItem as any).id,
                                     itemType,
-                                    serverId: (rangeItem as any).serverId,
                                 });
                             }
                         }
@@ -1071,12 +1081,15 @@ export const ItemTableList = ({
         handleRef.current = imperativeHandle;
     }, [imperativeHandle]);
 
+    const controls = useDefaultItemListControls();
+
     return (
         <div className={styles.itemTableListContainer}>
             <VirtualizedTableGrid
                 calculatedColumnWidths={calculatedColumnWidths}
                 CellComponent={CellComponent}
                 cellPadding={cellPadding}
+                controls={controls}
                 data={data}
                 enableAlternateRowColors={enableAlternateRowColors}
                 enableExpansion={enableExpansion}