normalize controls onto lists

2026-05-07 20:40:15 +02:00 · 2025-11-08 14:28:22 -08:00
parent fb75717ae0
commit 3c996407d5
15 changed files with 401 additions and 347 deletions
@@ -75,6 +75,13 @@
    }
 }

+.play-button.disabled,
+.play-button.loading {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1);
+}
+
 .play-button.primary {
    left: 50%;
    width: 25%;
@@ -4,7 +4,9 @@ import { MouseEvent } from 'react';

 import styles from './item-card-controls.module.css';

+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
+import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
 import { animationVariants } from '/@/shared/components/animations/animation-variants';
 import { AppIcon, Icon } from '/@/shared/components/icon/icon';
 import { Rating } from '/@/shared/components/rating/rating';
@@ -19,7 +21,8 @@ import {
 import { Play } from '/@/shared/types/types';

 interface ItemCardControlsProps {
-    controls: ItemControls;
+    controls?: ItemControls;
+    internalState?: ItemListStateActions;
    item: Album | AlbumArtist | Artist | Playlist | Song | undefined;
    itemType: LibraryItem;
    type?: 'compact' | 'default' | 'poster';
@@ -48,58 +51,152 @@ const containerProps = {

 export const ItemCardControls = ({
    controls,
+    internalState,
    item,
    itemType,
    type = 'default',
 }: ItemCardControlsProps) => {
+    const isPlayerFetching = useIsPlayerFetching();
+
    return (
        <motion.div className={clsx(styles.container)} {...containerProps[type]}>
-            <PlayButton
-                onClick={(e) => {
-                    e.stopPropagation();
-                    controls?.onPlay?.(item, itemType, Play.NOW, e);
-                }}
-            />
-            <SecondaryPlayButton
-                className={styles.left}
-                icon="mediaPlayNext"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    controls?.onPlay?.(item, itemType, Play.NEXT, e);
-                }}
-            />
-            <SecondaryPlayButton
-                className={styles.right}
-                icon="mediaPlayLast"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    controls?.onPlay?.(item, itemType, Play.LAST, e);
-                }}
-            />
-            <SecondaryButton
-                className={styles.favorite}
-                icon="favorite"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    controls?.onFavorite?.(item, itemType, e);
-                }}
-            />
-            <Rating className={styles.rating} size="xs" />
-            <SecondaryButton
-                className={styles.options}
-                icon="ellipsisHorizontal"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    controls?.onMore?.(item, itemType, e);
-                }}
-            />
-            {controls?.onItemExpand && (
+            {controls?.onPlay && (
+                <>
+                    <PlayButton
+                        disabled={isPlayerFetching}
+                        onClick={(e) => {
+                            e.stopPropagation();
+
+                            if (!item) {
+                                return;
+                            }
+
+                            controls?.onPlay?.({
+                                event: e,
+                                internalState,
+                                item,
+                                itemType,
+                                playType: Play.NOW,
+                            });
+                        }}
+                    />
+                    <SecondaryPlayButton
+                        className={styles.left}
+                        icon="mediaPlayNext"
+                        onClick={(e) => {
+                            e.stopPropagation();
+
+                            if (!item) {
+                                return;
+                            }
+
+                            controls?.onPlay?.({
+                                event: e,
+                                internalState,
+                                item,
+                                itemType,
+                                playType: Play.NEXT,
+                            });
+                        }}
+                    />
+                    <SecondaryPlayButton
+                        className={styles.right}
+                        icon="mediaPlayLast"
+                        onClick={(e) => {
+                            e.stopPropagation();
+
+                            if (!item) {
+                                return;
+                            }
+
+                            controls?.onPlay?.({
+                                event: e,
+                                internalState,
+                                item,
+                                itemType,
+                                playType: Play.LAST,
+                            });
+                        }}
+                    />
+                </>
+            )}
+            {controls?.onFavorite && (
+                <SecondaryButton
+                    className={styles.favorite}
+                    icon="favorite"
+                    onClick={(e) => {
+                        e.stopPropagation();
+
+                        if (!item) {
+                            return;
+                        }
+
+                        const newFavorite = !(item as { userFavorite: boolean }).userFavorite;
+                        controls?.onFavorite?.({
+                            event: e,
+                            favorite: newFavorite,
+                            internalState,
+                            item,
+                            itemType,
+                        });
+                    }}
+                />
+            )}
+            {controls?.onRating && (
+                <Rating
+                    className={styles.rating}
+                    onChange={(rating) => {
+                        if (!item) {
+                            return;
+                        }
+
+                        let newRating = rating;
+
+                        if (rating === (item as { userRating: number }).userRating) {
+                            newRating = 0;
+                        }
+
+                        controls?.onRating?.({
+                            event: null,
+                            internalState,
+                            item,
+                            itemType,
+                            rating: newRating,
+                        });
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                    size="xs"
+                />
+            )}
+            {controls?.onMore && (
+                <SecondaryButton
+                    className={styles.options}
+                    icon="ellipsisHorizontal"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        controls?.onMore?.({
+                            event: e,
+                            internalState,
+                            item,
+                            itemType,
+                        });
+                    }}
+                />
+            )}
+            {controls?.onExpand && (
                <SecondaryButton
                    className={styles.expand}
                    icon="arrowDownS"
                    onClick={(e) => {
                        e.stopPropagation();
-                        controls?.onItemExpand?.(item, itemType, e);
+                        controls?.onExpand?.({
+                            event: e,
+                            internalState,
+                            item,
+                            itemType,
+                        });
                    }}
                />
            )}
@@ -107,12 +204,26 @@ export const ItemCardControls = ({
    );
 };

-const PlayButton = ({ onClick }: { onClick?: (e: MouseEvent<HTMLButtonElement>) => void }) => {
+const PlayButton = ({
+    disabled,
+    loading,
+    onClick,
+}: {
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}) => {
    return (
        <button
-            className={clsx(styles.playButton, styles.primary)}
+            className={clsx(styles.playButton, styles.primary, {
+                [styles.disabled]: disabled,
+            })}
+            disabled={disabled}
            onClick={(e) => {
                e.stopPropagation();
+                if (disabled || loading) {
+                    return;
+                }
                onClick?.(e);
            }}
        >
@@ -6,6 +6,7 @@ import { generatePath, Link } from 'react-router';
 import styles from './item-card.module.css';

 import { ItemCardControls } from '/@/renderer/components/item-card/item-card-controls';
+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Image } from '/@/shared/components/image/image';
@@ -21,24 +22,26 @@ import {
    Song,
 } from '/@/shared/types/domain-types';

-type DataRow = {
-    format: (data: Album | AlbumArtist | Artist | Playlist | Song) => ReactNode | string;
-    id: string;
-    isMuted?: boolean;
-};
-
-interface ItemCardProps {
-    controls: ItemControls;
+export interface ItemCardProps {
+    controls?: ItemControls;
    data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
+    internalState?: ItemListStateActions;
    isRound?: boolean;
    itemType: LibraryItem;
    type?: 'compact' | 'default' | 'poster';
    withControls?: boolean;
 }

+type DataRow = {
+    format: (data: Album | AlbumArtist | Artist | Playlist | Song) => ReactNode | string;
+    id: string;
+    isMuted?: boolean;
+};
+
 export const ItemCard = ({
    controls,
    data,
+    internalState,
    isRound,
    itemType,
    type = 'poster',
@@ -54,6 +57,7 @@ export const ItemCard = ({
                    controls={controls}
                    data={data}
                    imageUrl={imageUrl}
+                    internalState={internalState}
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
@@ -66,6 +70,7 @@ export const ItemCard = ({
                    controls={controls}
                    data={data}
                    imageUrl={imageUrl}
+                    internalState={internalState}
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
@@ -79,6 +84,7 @@ export const ItemCard = ({
                    controls={controls}
                    data={data}
                    imageUrl={imageUrl}
+                    internalState={internalState}
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
@@ -89,8 +95,9 @@ export const ItemCard = ({
 };

 export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
-    controls: ItemControls;
+    controls?: ItemControls;
    imageUrl: string | undefined;
+    internalState?: ItemListStateActions;
    rows: DataRow[];
 }

@@ -119,7 +126,7 @@ const CompactItemCard = ({
        };

        const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-            controls?.onClick?.(data, itemType, e);
+            // controls?.onClick?.(data, itemType, e);
        };

        return (
@@ -195,7 +202,7 @@ const DefaultItemCard = ({
        };

        const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-            controls?.onClick?.(data, itemType, e);
+            // controls?.onClick?.(data, itemType, e);
        };

        return (
@@ -250,6 +257,7 @@ const PosterItemCard = ({
    controls,
    data,
    imageUrl,
+    internalState,
    isRound,
    itemType,
    rows,
@@ -271,7 +279,7 @@ const PosterItemCard = ({
        };

        const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-            controls?.onClick?.(data, itemType, e);
+            // controls?.onClick?.(data, itemType, e);
        };

        return (
@@ -289,6 +297,7 @@ const PosterItemCard = ({
                    {withControls && showControls && data && (
                        <ItemCardControls
                            controls={controls}
+                            internalState={internalState}
                            item={data}
                            itemType={itemType}
                            type="poster"
@@ -1,102 +1,104 @@
-import { MouseEvent } from 'react';
+import { useMemo } from 'react';

-import {
-    ItemListItem,
-    ItemListStateActions,
-} from '/@/renderer/components/item-list/helpers/item-list-state';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import { ItemListItem } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { DefaultItemControlProps, ItemControls } from '/@/renderer/components/item-list/types';
+import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
 import { Play } from '/@/shared/types/types';

-const handleItemClick = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    if (!item) {
-        return;
-    }
+export const useDefaultItemListControls = () => {
+    const player = usePlayerContext();

-    const itemListItem: ItemListItem = {
-        id: item.id,
-        itemType,
-        serverId: item.serverId,
-    };
+    const controls: ItemControls = useMemo(() => {
+        return {
+            onClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
+                if (!item) {
+                    return;
+                }

-    // Regular click - deselect all others and select only this item
-    // If this item is already the only selected item, deselect it
-    const selectedItems = internalState.getSelected();
-    const isOnlySelected = selectedItems.length === 1 && selectedItems[0].id === item.id;
+                const itemListItem: ItemListItem = {
+                    _serverId: item._serverId,
+                    id: item.id,
+                    itemType,
+                };

-    if (isOnlySelected) {
-        internalState.clearSelected();
-    } else {
-        internalState.setSelected([itemListItem]);
-    }
-};
-
-const handleItemDoubleClick = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    console.log('handleItemDoubleClick', item, itemType, internalState);
-};
-
-const handleItemExpand = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    if (!item) {
-        return;
-    }
-
-    return internalState.toggleExpanded({
-        id: item.id,
-        itemType,
-        serverId: item.serverId,
-    });
-};
-
-const handleItemFavorite = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    console.log('handleItemFavorite', item, itemType, internalState);
-};
-
-const handleItemRating = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    console.log('handleItemRating', item, itemType, internalState);
-};
-
-const handleItemMore = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    console.log('handleItemMore', item, itemType, internalState);
-};
-
-const handleItemPlay = (
-    item: (ItemListItem & object) | undefined,
-    itemType: LibraryItem,
-    playType: Play,
-    internalState: ItemListStateActions,
-) => {
-    console.log('handleItemPlay', item, itemType, playType, internalState);
-};
-
-export const itemListControls = {
-    handleItemClick,
-    handleItemDoubleClick,
-    handleItemExpand,
-    handleItemFavorite,
-    handleItemMore,
-    handleItemPlay,
-    handleItemRating,
+                // Regular click - deselect all others and select only this item
+                // If this item is already the only selected item, deselect it
+                const selectedItems = internalState.getSelected();
+                const isOnlySelected =
+                    selectedItems.length === 1 && selectedItems[0].id === item.id;
+
+                if (isOnlySelected) {
+                    internalState.clearSelected();
+                } else {
+                    internalState.setSelected([itemListItem]);
+                }
+            },
+
+            onDoubleClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
+                console.log('onDoubleClick', item, itemType, internalState);
+            },
+
+            onExpand: ({ internalState, item, itemType }: DefaultItemControlProps) => {
+                if (!item || !internalState) {
+                    return;
+                }
+
+                return internalState?.toggleExpanded({
+                    _serverId: item._serverId,
+                    id: item.id,
+                    itemType,
+                });
+            },
+
+            onFavorite: ({
+                favorite,
+                item,
+                itemType,
+            }: DefaultItemControlProps & { favorite: boolean }) => {
+                if (!item) {
+                    return;
+                }
+
+                player.setFavorite(item._serverId, [item.id], itemType, favorite);
+            },
+
+            onMore: ({ internalState, item, itemType }: DefaultItemControlProps) => {
+                console.log('handleItemMore', item, itemType, internalState);
+            },
+
+            onPlay: ({
+                item,
+                itemType,
+                playType,
+            }: DefaultItemControlProps & { playType: Play }) => {
+                if (!item) {
+                    return;
+                }
+
+                player.addToQueueByFetch(item._serverId, [item.id], itemType, playType);
+            },
+
+            onRating: ({
+                item,
+                itemType,
+                rating,
+            }: DefaultItemControlProps & { rating: number }) => {
+                if (!item) {
+                    return;
+                }
+
+                const previousRating = (item as { userRating: number }).userRating || 0;
+
+                let newRating = rating;
+
+                if (previousRating === rating) {
+                    newRating = 0;
+                }
+
+                player.setRating(item._serverId, [item.id], itemType, newRating);
+            },
+        };
+    }, [player]);
+
+    return controls;
 };
@@ -13,9 +13,9 @@ export type ItemListAction =
    | { type: 'CLEAR_SELECTED' };

 export interface ItemListItem {
+    _serverId: string;
    id: string;
    itemType: LibraryItem;
-    serverId: string;
 }

 export interface ItemListState {
@@ -81,6 +81,8 @@ export const itemListReducer = (state: ItemListState, action: ItemListAction): I
            const newExpanded = new Set<string>();
            const newExpandedItems = new Map<string, ItemListItem>();

+            console.log('SET_EXPANDED', action.payload);
+
            if (action.payload.length > 0) {
                const firstItem = action.payload[0];
                newExpanded.add(firstItem.id);
@@ -158,9 +160,6 @@ export const itemListReducer = (state: ItemListState, action: ItemListAction): I
    }
 };

-/**
- * Initial state for item grid
- */
 export const initialItemListState: ItemListState = {
    expanded: new Set(),
    expandedItems: new Map(),
@@ -125,7 +125,7 @@ export const ItemDetailList = ({
                internalState.toggleExpanded({
                    id: item.id as string,
                    itemType: itemType,
-                    serverId: item.serverId as string,
+                    _serverId: item.serverId as string,
                });
            }
        },
@@ -24,12 +24,16 @@ import {
    ListOnScrollProps,
 } from 'react-window';

-import { ExpandedListContainer } from '../expanded-list-container';
 import styles from './item-grid-list.module.css';

-import { getDataRowsCount, ItemCard } from '/@/renderer/components/item-card/item-card';
+import {
+    getDataRowsCount,
+    ItemCard,
+    ItemCardProps,
+} from '/@/renderer/components/item-card/item-card';
+import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
 import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
-import { itemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
+import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
 import {
    ItemListStateActions,
    useItemListState,
@@ -38,6 +42,7 @@ import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/t
 import { LibraryItem } from '/@/shared/types/domain-types';

 interface VirtualizedGridListProps {
+    controls: ItemControls;
    data: unknown[];
    enableExpansion: boolean;
    enableSelection: boolean;
@@ -59,6 +64,7 @@ interface VirtualizedGridListProps {

 const VirtualizedGridList = React.memo(
    ({
+        controls,
        data,
        enableExpansion,
        enableSelection,
@@ -76,50 +82,7 @@ const VirtualizedGridList = React.memo(
        const itemData: GridItemProps = useMemo(() => {
            return {
                columns: tableMeta?.columnCount || 0,
-                controls: {
-                    onClick: enableSelection
-                        ? (item, itemType) => {
-                              return itemListControls.handleItemClick(
-                                  item,
-                                  itemType,
-                                  internalState,
-                              );
-                          }
-                        : undefined,
-                    onDoubleClick: (item, itemType) => {
-                        return itemListControls.handleItemDoubleClick(
-                            item,
-                            itemType,
-                            internalState,
-                        );
-                    },
-                    onFavorite: (item, itemType) => {
-                        return itemListControls.handleItemFavorite(item, itemType, internalState);
-                    },
-                    onItemExpand: enableExpansion
-                        ? (item, itemType) => {
-                              return itemListControls.handleItemExpand(
-                                  item,
-                                  itemType,
-                                  internalState,
-                              );
-                          }
-                        : undefined,
-                    onMore: (item, itemType) => {
-                        return itemListControls.handleItemMore(item, itemType, internalState);
-                    },
-                    onPlay: (item, itemType, playType) => {
-                        return itemListControls.handleItemPlay(
-                            item,
-                            itemType,
-                            playType,
-                            internalState,
-                        );
-                    },
-                    onRating: (item, itemType) => {
-                        return itemListControls.handleItemRating(item, itemType, internalState);
-                    },
-                },
+                controls,
                data,
                enableExpansion,
                enableSelection,
@@ -128,7 +91,16 @@ const VirtualizedGridList = React.memo(
                itemType,
                tableMeta,
            };
-        }, [enableSelection, enableExpansion, internalState, tableMeta, data, itemType, gap]);
+        }, [
+            tableMeta,
+            controls,
+            data,
+            enableExpansion,
+            enableSelection,
+            gap,
+            internalState,
+            itemType,
+        ]);

        const debouncedOnScrollEnd = useMemo(
            () =>
@@ -253,7 +225,7 @@ const createThrottledSetTableMeta = (itemsPerRow?: number) => {

 export interface GridItemProps {
    columns: number;
-    controls: ItemControls;
+    controls: ItemCardProps['controls'];
    data: any[];
    enableExpansion?: boolean;
    enableSelection?: boolean;
@@ -354,6 +326,8 @@ export const ItemGridList = ({
        throttledSetTableMeta(containerWidth, data.length, itemType, setTableMeta);
    }, [containerWidth, data.length, itemType, throttledSetTableMeta]);

+    const controls = useDefaultItemListControls();
+
    return (
        <div
            className={styles.itemGridContainer}
@@ -361,6 +335,7 @@ export const ItemGridList = ({
            ref={mergedContainerRef}
        >
            <VirtualizedGridList
+                controls={controls}
                data={data}
                enableExpansion={enableExpansion}
                enableSelection={enableSelection}
@@ -411,7 +386,13 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
                    key={`card-${i}-${index}`}
                    style={{ '--columns': columns } as CSSProperties}
                >
-                    <ItemCard controls={controls} data={data[i]} itemType={itemType} withControls />
+                    <ItemCard
+                        controls={controls}
+                        data={data[i]}
+                        internalState={props.data.internalState}
+                        itemType={itemType}
+                        withControls
+                    />
                </div>,
            );
        } else {
@@ -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"
@@ -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}
                />
@@ -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"
@@ -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,
+            });
        }
    };

@@ -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}
@@ -1,5 +1,3 @@
-import { MouseEvent } from 'react';
-
 import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
 import {
    Album,
@@ -11,43 +9,35 @@ import {
 } from '/@/shared/types/domain-types';
 import { Play, TableColumn } from '/@/shared/types/types';

+export interface DefaultItemControlProps {
+    event: null | React.MouseEvent<unknown>;
+    internalState?: ItemListStateActions;
+    item: ItemListItem | undefined;
+    itemType: LibraryItem;
+}
+
 export interface ItemControls {
-    onClick?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLDivElement>,
-    ) => void;
-    onDoubleClick?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLDivElement>,
-    ) => void;
-    onFavorite?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLButtonElement>,
-    ) => void;
-    onItemExpand?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLButtonElement>,
-    ) => void;
-    onMore?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLButtonElement>,
-    ) => void;
-    onPlay?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        playType: Play,
-        e: MouseEvent<HTMLButtonElement>,
-    ) => void;
-    onRating?: (
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
-        itemType: LibraryItem,
-        e: MouseEvent<HTMLDivElement>,
-    ) => void;
+    onClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
+    onDoubleClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
+    onExpand?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
+    onFavorite?: ({
+        internalState,
+        item,
+        itemType,
+    }: DefaultItemControlProps & { favorite: boolean }) => void;
+    onMore?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
+    onPlay?: ({
+        internalState,
+        item,
+        itemType,
+        playType,
+    }: DefaultItemControlProps & { playType: Play }) => void;
+    onRating?: ({
+        internalState,
+        item,
+        itemType,
+        rating,
+    }: DefaultItemControlProps & { rating: number }) => void;
 }

 export interface ItemListComponentProps<TQuery> {
@@ -73,6 +63,8 @@ export interface ItemListHandle {
    scrollToOffset: (offset: number, options?: { behavior?: 'auto' | 'smooth' }) => void;
 }

+export type ItemListItem = Album | AlbumArtist | Artist | Playlist | Song | undefined;
+
 export interface ItemListTableComponentProps<TQuery> extends ItemListComponentProps<TQuery> {
    columns: ItemTableListColumnConfig[];
    enableAlternateRowColors?: boolean;
@@ -25,7 +25,7 @@ export const ExpandedAlbumListItem = ({ item }: ExpandedAlbumListItemProps) => {
    const { data, isLoading } = useSuspenseQuery(
        albumQueries.detail({
            query: { id: item.id },
-            serverId: item.serverId,
+            serverId: item._serverId,
        }),
    );

@@ -1140,4 +1140,7 @@ export const migrateSettings = (settings: SettingsState, settingsVersion: number
    useSettingsStore.persist.getOptions().migrate!(settings, settingsVersion) as SettingsState;

 export const useListSettings = (type: ItemListKey) =>
-    useSettingsStore((state) => state.lists[type as keyof typeof state.lists], shallow);
+    useSettingsStore(
+        (state) => state.lists[type as keyof typeof state.lists],
+        shallow,
+    ) as ItemListSettings;