normalize controls onto lists

src/renderer/components/item-card/item-card-controls.module.css

@@ -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%;

src/renderer/components/item-card/item-card-controls.tsx

@@ -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
+            {controls?.onPlay && (
-                onClick={(e) => {
+                <>
-                    e.stopPropagation();
+                    <PlayButton
-                    controls?.onPlay?.(item, itemType, Play.NOW, e);
+                        disabled={isPlayerFetching}
-                }}
+                        onClick={(e) => {
-            />
+                            e.stopPropagation();
-            <SecondaryPlayButton
+
-                className={styles.left}
+                            if (!item) {
-                icon="mediaPlayNext"
+                                return;
-                onClick={(e) => {
+                            }
-                    e.stopPropagation();
+
-                    controls?.onPlay?.(item, itemType, Play.NEXT, e);
+                            controls?.onPlay?.({
-                }}
+                                event: e,
-            />
+                                internalState,
-            <SecondaryPlayButton
+                                item,
-                className={styles.right}
+                                itemType,
-                icon="mediaPlayLast"
+                                playType: Play.NOW,
-                onClick={(e) => {
+                            });
-                    e.stopPropagation();
+                        }}
-                    controls?.onPlay?.(item, itemType, Play.LAST, e);
+                    />
-                }}
+                    <SecondaryPlayButton
-            />
+                        className={styles.left}
-            <SecondaryButton
+                        icon="mediaPlayNext"
-                className={styles.favorite}
+                        onClick={(e) => {
-                icon="favorite"
+                            e.stopPropagation();
-                onClick={(e) => {
+
-                    e.stopPropagation();
+                            if (!item) {
-                    controls?.onFavorite?.(item, itemType, e);
+                                return;
-                }}
+                            }
-            />
+
-            <Rating className={styles.rating} size="xs" />
+                            controls?.onPlay?.({
-            <SecondaryButton
+                                event: e,
-                className={styles.options}
+                                internalState,
-                icon="ellipsisHorizontal"
+                                item,
-                onClick={(e) => {
+                                itemType,
-                    e.stopPropagation();
+                                playType: Play.NEXT,
-                    controls?.onMore?.(item, itemType, e);
+                            });
-                }}
+                        }}
-            />
+                    />
-            {controls?.onItemExpand && (
+                    <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);
             }}
         >

src/renderer/components/item-card/item-card.tsx

@@ -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 = {
+export interface ItemCardProps {
-    format: (data: Album | AlbumArtist | Artist | Playlist | Song) => ReactNode | string;
+    controls?: ItemControls;
-    id: string;
-    isMuted?: boolean;
-};
-
-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"

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -1,102 +1,104 @@
-import { MouseEvent } from 'react';
+import { useMemo } from 'react';
 
-import {
+import { ItemListItem } from '/@/renderer/components/item-list/helpers/item-list-state';
-    ItemListItem,
+import { DefaultItemControlProps, ItemControls } from '/@/renderer/components/item-list/types';
-    ItemListStateActions,
+import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
-} from '/@/renderer/components/item-list/helpers/item-list-state';
-import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
-const handleItemClick = (
+export const useDefaultItemListControls = () => {
-    item: (ItemListItem & object) | undefined,
+    const player = usePlayerContext();
-    itemType: LibraryItem,
-    internalState: ItemListStateActions,
-) => {
-    if (!item) {
-        return;
-    }
 
-    const itemListItem: ItemListItem = {
+    const controls: ItemControls = useMemo(() => {
-        id: item.id,
+        return {
-        itemType,
+            onClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
-        serverId: item.serverId,
+                if (!item) {
-    };
+                    return;
+                }
 
-    // Regular click - deselect all others and select only this item
+                const itemListItem: ItemListItem = {
-    // If this item is already the only selected item, deselect it
+                    _serverId: item._serverId,
-    const selectedItems = internalState.getSelected();
+                    id: item.id,
-    const isOnlySelected = selectedItems.length === 1 && selectedItems[0].id === item.id;
+                    itemType,
+                };
 
-    if (isOnlySelected) {
+                // Regular click - deselect all others and select only this item
-        internalState.clearSelected();
+                // If this item is already the only selected item, deselect it
-    } else {
+                const selectedItems = internalState.getSelected();
-        internalState.setSelected([itemListItem]);
+                const isOnlySelected =
-    }
+                    selectedItems.length === 1 && selectedItems[0].id === item.id;
-};
+
-
+                if (isOnlySelected) {
-const handleItemDoubleClick = (
+                    internalState.clearSelected();
-    item: (ItemListItem & object) | undefined,
+                } else {
-    itemType: LibraryItem,
+                    internalState.setSelected([itemListItem]);
-    internalState: ItemListStateActions,
+                }
-) => {
+            },
-    console.log('handleItemDoubleClick', item, itemType, internalState);
+
-};
+            onDoubleClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
-
+                console.log('onDoubleClick', item, itemType, internalState);
-const handleItemExpand = (
+            },
-    item: (ItemListItem & object) | undefined,
+
-    itemType: LibraryItem,
+            onExpand: ({ internalState, item, itemType }: DefaultItemControlProps) => {
-    internalState: ItemListStateActions,
+                if (!item || !internalState) {
-) => {
+                    return;
-    if (!item) {
+                }
-        return;
+
-    }
+                return internalState?.toggleExpanded({
-
+                    _serverId: item._serverId,
-    return internalState.toggleExpanded({
+                    id: item.id,
-        id: item.id,
+                    itemType,
-        itemType,
+                });
-        serverId: item.serverId,
+            },
-    });
+
-};
+            onFavorite: ({
-
+                favorite,
-const handleItemFavorite = (
+                item,
-    item: (ItemListItem & object) | undefined,
+                itemType,
-    itemType: LibraryItem,
+            }: DefaultItemControlProps & { favorite: boolean }) => {
-    internalState: ItemListStateActions,
+                if (!item) {
-) => {
+                    return;
-    console.log('handleItemFavorite', item, itemType, internalState);
+                }
-};
+
-
+                player.setFavorite(item._serverId, [item.id], itemType, favorite);
-const handleItemRating = (
+            },
-    item: (ItemListItem & object) | undefined,
+
-    itemType: LibraryItem,
+            onMore: ({ internalState, item, itemType }: DefaultItemControlProps) => {
-    internalState: ItemListStateActions,
+                console.log('handleItemMore', item, itemType, internalState);
-) => {
+            },
-    console.log('handleItemRating', item, itemType, internalState);
+
-};
+            onPlay: ({
-
+                item,
-const handleItemMore = (
+                itemType,
-    item: (ItemListItem & object) | undefined,
+                playType,
-    itemType: LibraryItem,
+            }: DefaultItemControlProps & { playType: Play }) => {
-    internalState: ItemListStateActions,
+                if (!item) {
-) => {
+                    return;
-    console.log('handleItemMore', item, itemType, internalState);
+                }
-};
+
-
+                player.addToQueueByFetch(item._serverId, [item.id], itemType, playType);
-const handleItemPlay = (
+            },
-    item: (ItemListItem & object) | undefined,
+
-    itemType: LibraryItem,
+            onRating: ({
-    playType: Play,
+                item,
-    internalState: ItemListStateActions,
+                itemType,
-) => {
+                rating,
-    console.log('handleItemPlay', item, itemType, playType, internalState);
+            }: DefaultItemControlProps & { rating: number }) => {
-};
+                if (!item) {
-
+                    return;
-export const itemListControls = {
+                }
-    handleItemClick,
+
-    handleItemDoubleClick,
+                const previousRating = (item as { userRating: number }).userRating || 0;
-    handleItemExpand,
+
-    handleItemFavorite,
+                let newRating = rating;
-    handleItemMore,
+
-    handleItemPlay,
+                if (previousRating === rating) {
-    handleItemRating,
+                    newRating = 0;
+                }
+
+                player.setRating(item._serverId, [item.id], itemType, newRating);
+            },
+        };
+    }, [player]);
+
+    return controls;
 };

src/renderer/components/item-list/helpers/item-list-state.ts

@@ -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(),

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

@@ -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,
                 });
             }
         },

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

@@ -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: {
+                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);
-                    },
-                },
                 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 {

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 { ItemListItem } from '/@/renderer/components/item-list/types';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 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={() => {
+                    onClick={(event) => {
-                        if (!props.data?.[props.rowIndex]) {
+                        props.controls.onFavorite?.({
-                            return;
+                            event,
-                        }
+                            favorite: !row,
-
+                            internalState: props.internalState,
-                        if (row) {
+                            item: props.data[props.rowIndex] as ItemListItem,
-                            deleteFavorite.mutate({
+                            itemType: props.itemType,
-                                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,
-                                },
-                            });
-                        }
                     }}
                     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?.(
+                        controls.onExpand?.(props.data[props.rowIndex] as any, props.itemType, e)
-                            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 = {
+    const controls = props.controls;
-        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),
-    };
 
     if (isHeaderEnabled && props.rowIndex === 0) {
-        return (
+        return <TableColumnHeaderContainer {...props} controls={controls} type={type} />;
-            <TableColumnHeaderContainer
-                {...props}
-                controls={controls}
-                type={type}
-            ></TableColumnHeaderContainer>
-        );
     }
 
     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}

src/renderer/components/item-list/types.ts

@@ -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?: (
+    onClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+    onDoubleClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
-        itemType: LibraryItem,
+    onExpand?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
-        e: MouseEvent<HTMLDivElement>,
+    onFavorite?: ({
-    ) => void;
+        internalState,
-    onDoubleClick?: (
+        item,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        itemType,
-        itemType: LibraryItem,
+    }: DefaultItemControlProps & { favorite: boolean }) => void;
-        e: MouseEvent<HTMLDivElement>,
+    onMore?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
-    ) => void;
+    onPlay?: ({
-    onFavorite?: (
+        internalState,
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        item,
-        itemType: LibraryItem,
+        itemType,
-        e: MouseEvent<HTMLButtonElement>,
+        playType,
-    ) => void;
+    }: DefaultItemControlProps & { playType: Play }) => void;
-    onItemExpand?: (
+    onRating?: ({
-        item: Album | AlbumArtist | Artist | Playlist | Song | undefined,
+        internalState,
-        itemType: LibraryItem,
+        item,
-        e: MouseEvent<HTMLButtonElement>,
+        itemType,
-    ) => void;
+        rating,
-    onMore?: (
+    }: DefaultItemControlProps & { rating: number }) => void;
-        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;
 }
 
 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;

src/renderer/features/albums/components/expanded-album-list-item.tsx

@@ -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,
         }),
     );
 

src/renderer/store/settings.store.ts

@@ -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;