remove ag-grid

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,16 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
-import { forwardRef, Ref, useCallback, useMemo } from 'react';
+import { forwardRef, Ref, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, useParams } from 'react-router';
-import { Link } from 'react-router';
+import { generatePath, Link, useParams } from 'react-router';
 
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
 import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useSongChange } from '/@/renderer/hooks/use-song-change';
-import { queryClient } from '/@/renderer/lib/react-query';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
@@ -20,7 +16,7 @@ import { Pill } from '/@/shared/components/pill/pill';
 import { Rating } from '/@/shared/components/rating/rating';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
-import { AlbumDetailResponse, LibraryItem, ServerType } from '/@/shared/types/domain-types';
+import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
 
 interface AlbumDetailHeaderProps {
     background: {
@@ -52,36 +48,6 @@ export const AlbumDetailHeader = forwardRef(
             ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
             : '♫';
 
-        const songIds = useMemo(() => {
-            return new Set(detailQuery.data?.songs?.map((song) => song.id));
-        }, [detailQuery.data?.songs]);
-
-        const handleSongChange = useCallback(
-            (id: string) => {
-                if (songIds.has(id)) {
-                    const queryKey = queryKeys.albums.detail(server?.id, { id: albumId });
-                    queryClient.setQueryData<AlbumDetailResponse | undefined>(
-                        queryKey,
-                        (previous) => {
-                            if (!previous) return undefined;
-
-                            return {
-                                ...previous,
-                                playCount: previous.playCount ? previous.playCount + 1 : 1,
-                            };
-                        },
-                    );
-                }
-            },
-            [albumId, server?.id, songIds],
-        );
-
-        useSongChange((ids, event) => {
-            if (event.event === 'play') {
-                handleSongChange(ids[0]);
-            }
-        }, detailQuery.data !== undefined);
-
         const releaseTypes = useMemo(
             () =>
                 normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
@@ -139,8 +105,9 @@ export const AlbumDetailHeader = forwardRef(
             updateRatingMutation.mutate({
                 apiClientProps: { serverId: detailQuery.data._serverId },
                 query: {
-                    item: [detailQuery.data],
+                    id: [detailQuery.data.id],
                     rating,
+                    type: LibraryItem.ALBUM,
                 },
             });
         };

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -1,5 +1,3 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { useQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { useParams } from 'react-router';
@@ -17,7 +15,6 @@ import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumDetailRoute = () => {
-    const tableRef = useRef<AgGridReactType | null>(null);
     const scrollAreaRef = useRef<HTMLDivElement>(null);
     const headerRef = useRef<HTMLDivElement>(null);
     const { albumBackground, albumBackgroundBlur } = useGeneralSettings();
@@ -74,7 +71,7 @@ const AlbumDetailRoute = () => {
                     }}
                     ref={headerRef}
                 />
-                <AlbumDetailContent background={background} tableRef={tableRef} />
+                <AlbumDetailContent background={background} />
             </NativeScrollArea>
         </AnimatedPage>
     );

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1,4 +1,3 @@
-import { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { useQuery } from '@tanstack/react-query';
 import { Suspense, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +31,6 @@ import {
     AlbumArtist,
     AlbumListSort,
     LibraryItem,
-    QueueSong,
     ServerType,
     SortOrder,
 } from '/@/shared/types/domain-types';
@@ -194,10 +192,6 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         });
     };
 
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
-        if (!e.data || !topSongsQuery?.data) return;
-    };
-
     const createFavoriteMutation = useCreateFavorite({});
     const deleteFavoriteMutation = useDeleteFavorite({});
 
@@ -268,7 +262,6 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                             icon="ellipsisHorizontal"
                             onClick={(e) => {
                                 if (!detailQuery?.data) return;
-                                // handleGeneralContextMenu(e, [detailQuery.data!]);
                             }}
                             size="lg"
                             variant="transparent"

src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx

@@ -1,9 +1,8 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useRef } from 'react';
 import { useParams } from 'react-router';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { ListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
@@ -12,7 +11,7 @@ import { useCurrentServer } from '/@/renderer/store/auth.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumArtistDetailTopSongsListRoute = () => {
-    const tableRef = useRef<AgGridReactType | null>(null);
+    const tableRef = useRef<ItemListHandle | null>(null);
     const { albumArtistId, artistId } = useParams() as {
         albumArtistId?: string;
         artistId?: string;

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -1,14 +1,13 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { useRef, useState } from 'react';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 import { Flex } from '/@/shared/components/flex/flex';
-import { Song } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
 
 export const DrawerPlayQueue = () => {
-    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
+    const queueRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
@@ -23,11 +22,11 @@ export const DrawerPlayQueue = () => {
                     handleSearch={setSearch}
                     searchTerm={search}
                     tableRef={queueRef}
-                    type="sideQueue"
+                    type={ItemListKey.SIDE_QUEUE}
                 />
             </div>
             <Flex bg="var(--theme-colors-background)" h="100%" mb="0.6rem">
-                <PlayQueue ref={queueRef} searchTerm={search} listKey="sideQueue" />
+                <PlayQueue listKey={ItemListKey.SIDE_QUEUE} ref={queueRef} searchTerm={search} />
             </Flex>
         </Flex>
     );

src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

@@ -1,10 +1,9 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { useQuery } from '@tanstack/react-query';
 import { MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
@@ -20,10 +19,9 @@ import { Play } from '/@/shared/types/types';
 
 interface PlaylistDetailHeaderProps {
     handlePlay: (playType: Play) => void;
-
     handleToggleShowQueryBuilder: () => void;
     itemCount?: number;
-    tableRef: MutableRefObject<AgGridReactType | null>;
+    tableRef: MutableRefObject<ItemListHandle | null>;
 }
 
 export const PlaylistDetailSongListHeader = ({

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -1,5 +1,3 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { closeAllModals, openModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import { motion } from 'motion/react';
@@ -7,6 +5,7 @@ import { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useNavigate, useParams } from 'react-router';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { PlaylistDetailSongListHeader } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header';
 import { PlaylistQueryBuilder } from '/@/renderer/features/playlists/components/playlist-query-builder';
@@ -16,7 +15,6 @@ import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/dele
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
-import { searchSongs } from '/@/renderer/utils/search-songs';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Box } from '/@/shared/components/box/box';
 import { Group } from '/@/shared/components/group/group';
@@ -28,7 +26,7 @@ import { Play } from '/@/shared/types/types';
 const PlaylistDetailSongListRoute = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const tableRef = useRef<AgGridReactType | null>(null);
+    const tableRef = useRef<ItemListHandle | null>(null);
     const { playlistId } = useParams() as { playlistId: string };
     const server = useCurrentServer();
 

src/renderer/features/similar-songs/components/similar-songs-list.tsx

@@ -1,9 +1,8 @@
-import { RowDoubleClickedEvent } from '@ag-grid-community/core';
-import { AgGridReact } from '@ag-grid-community/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { ErrorFallback } from '/@/renderer/features/action-required/components/error-fallback';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -16,7 +15,7 @@ export type SimilarSongsListProps = {
 };
 
 export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListProps) => {
-    const tableRef = useRef<AgGridReact<Song> | null>(null);
+    const tableRef = useRef<ItemListHandle | null>(null);
     // const tableConfig = useTableSettings(fullScreen ? 'fullScreen' : 'songs');
 
     const songQuery = useQuery(
@@ -40,16 +39,6 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
 
     // const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
 
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent<Song>) => {
-        if (!e.data || !songQuery.data) return;
-
-        // handlePlayQueueAdd?.({
-        //     byData: songQuery.data,
-        //     initialSongId: e.data.id,
-        //     playType: playButtonBehavior,
-        // });
-    };
-
     return songQuery.isLoading ? (
         <Spinner container size={25} />
     ) : (