reimplement top songs list

2026-05-16 21:50:35 +02:00 · 2025-11-29 18:48:42 -08:00
parent bdc52ece9d
commit 8d829b2886
3 changed files with 267 additions and 33 deletions
@@ -2,14 +2,23 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useParams } from 'react-router';

+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { ItemControls } 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';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+import { usePlayerSong } from '/@/renderer/store';
 import { useCurrentServer } from '/@/renderer/store/auth.store';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import { useSettingsStore } from '/@/renderer/store/settings.store';
+import { LibraryItem, Song } from '/@/shared/types/domain-types';
+import { ItemListKey, Play } from '/@/shared/types/types';

 const AlbumArtistDetailTopSongsListRoute = () => {
    const { albumArtistId, artistId } = useParams() as {
@@ -36,6 +45,40 @@ const AlbumArtistDetailTopSongsListRoute = () => {
    );

    const itemCount = topSongsQuery?.data?.items?.length || 0;
+    const songs = useMemo(() => topSongsQuery?.data?.items || [], [topSongsQuery?.data?.items]);
+
+    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
+    const currentSong = usePlayerSong();
+    const player = usePlayer();
+
+    const columns = useMemo(() => {
+        return tableConfig?.columns || [];
+    }, [tableConfig?.columns]);
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const overrideControls: Partial<ItemControls> = useMemo(() => {
+        return {
+            onDoubleClick: ({ index, internalState, item }) => {
+                if (!item) {
+                    return;
+                }
+
+                const items = internalState?.getData() as Song[];
+
+                if (index !== undefined) {
+                    player.addToQueueByData(items, Play.NOW);
+                    player.mediaPlayByIndex(index);
+                }
+            },
+        };
+    }, [player]);

    const providerValue = useMemo(() => {
        return {
@@ -44,19 +87,53 @@ const AlbumArtistDetailTopSongsListRoute = () => {
        };
    }, [routeId, pageKey]);

+    const currentSongId = currentSong?.id;
+
+    if (!tableConfig || columns.length === 0) {
+        return (
+            <AnimatedPage>
+                <ListContext.Provider value={providerValue}>
+                    <LibraryContainer>
+                        <AlbumArtistDetailTopSongsListHeader
+                            data={songs}
+                            itemCount={itemCount}
+                            title={detailQuery?.data?.name || 'Unknown'}
+                        />
+                    </LibraryContainer>
+                </ListContext.Provider>
+            </AnimatedPage>
+        );
+    }
+
    return (
        <AnimatedPage>
            <ListContext.Provider value={providerValue}>
                <LibraryContainer>
                    <AlbumArtistDetailTopSongsListHeader
-                        data={topSongsQuery?.data?.items || []}
+                        data={songs}
                        itemCount={itemCount}
                        title={detailQuery?.data?.name || 'Unknown'}
                    />
-                    {/* <AlbumArtistDetailTopSongsListContent
-                        data={topSongsQuery?.data?.items || []}
-                        tableRef={tableRef}
-                    /> */}
+                    <ItemTableList
+                        activeRowId={currentSongId}
+                        autoFitColumns={tableConfig.autoFitColumns}
+                        CellComponent={ItemTableListColumn}
+                        columns={columns}
+                        data={songs}
+                        enableAlternateRowColors={tableConfig.enableAlternateRowColors}
+                        enableDrag
+                        enableExpansion={false}
+                        enableHeader
+                        enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+                        enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+                        enableSelection
+                        enableVerticalBorders={tableConfig.enableVerticalBorders}
+                        itemType={LibraryItem.SONG}
+                        onColumnReordered={handleColumnReordered}
+                        onColumnResized={handleColumnResized}
+                        overrideControls={overrideControls}
+                        size={tableConfig.size}
+                    />
                </LibraryContainer>
            </ListContext.Provider>
        </AnimatedPage>