[slightly less scuffed bugfix]: Update table rating/favorite when updated anywhere … (#707)

* [scuffed bugfix]: Update table rating/favorite when updated anywhere else

Modify player store to have temporary state for favorite/rating update
Add effect handler for `virtual-table` to update rating/favorite for players

Note that this does not handle song grid view.
Using a similar handler for gird view did not work, as it appeared to result in inconsistent state.

Finally, this is probably not the optimal solution.
Performance appears fine for ~20k items, but no guarantees.

* restore should update song

* update song rating/favorite/played everywhere except playlist

* special rule for playlists

* use iterator instead

src/renderer/features/songs/components/song-list-grid-view.tsx

@@ -1,5 +1,5 @@
 import { QueryKey, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
+import { MutableRefObject, useCallback, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
@@ -16,6 +16,7 @@ import { SONG_CARD_ROWS } from '/@/renderer/components';
 import {
     VirtualGridAutoSizerContainer,
     VirtualInfiniteGrid,
+    VirtualInfiniteGridRef,
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
@@ -23,8 +24,14 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
 import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
+import { useEventStore } from '/@/renderer/store/event.store';
 
-export const SongListGridView = ({ gridRef, itemCount }: any) => {
+interface SongListGridViewProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
+}
+
+export const SongListGridView = ({ gridRef, itemCount }: SongListGridViewProps) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
@@ -38,6 +45,30 @@ export const SongListGridView = ({ gridRef, itemCount }: any) => {
 
     const handleFavorite = useHandleFavorite({ gridRef, server });
 
+    useEffect(() => {
+        const unSub = useEventStore.subscribe((state) => {
+            const event = state.event;
+            if (event && event.event === 'favorite') {
+                const idSet = new Set(state.ids);
+                const userFavorite = event.favorite;
+
+                gridRef.current?.updateItemData((data) => {
+                    if (idSet.has(data.id)) {
+                        return {
+                            ...data,
+                            userFavorite,
+                        };
+                    }
+                    return data;
+                });
+            }
+        });
+
+        return () => {
+            unSub();
+        };
+    }, [gridRef]);
+
     const cardRows = useMemo(() => {
         const rows: CardRow<Song>[] = [
             SONG_CARD_ROWS.name,

src/renderer/features/songs/components/song-list-table-view.tsx

@@ -56,6 +56,7 @@ export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProp
                 key={`table-${tableProps.rowHeight}-${server?.id}`}
                 ref={tableRef}
                 {...tableProps}
+                shouldUpdateSong
                 context={{
                     ...tableProps.context,
                     currentSong,