feat: playlist grid view (#1476)

* feat: grid view for playlists
2026-06-21 03:14:16 +02:00 · 2026-01-01 21:21:47 +01:00
parent b7627fd469
commit e5c5985f0f
4 changed files with 112 additions and 9 deletions
@@ -0,0 +1,76 @@
+import { forwardRef, useMemo } from 'react';
+import { useEffect } from 'react';
+
+import { useGridRows } from '/@/renderer/components/item-list/helpers/use-grid-rows';
+import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
+import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
+import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
+import { useListContext } from '/@/renderer/context/list-context';
+import { usePlaylistSongListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-song-list-filters';
+import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
+import { searchLibraryItems } from '/@/renderer/features/shared/utils';
+import { useListSettings } from '/@/renderer/store';
+import { sortSongList } from '/@/shared/api/utils';
+import {
+    LibraryItem,
+    PlaylistSongListQuery,
+    PlaylistSongListResponse,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+interface PlaylistDetailSongListGridProps
+    extends Omit<ItemListGridComponentProps<PlaylistSongListQuery>, 'query'> {
+    data: PlaylistSongListResponse;
+}
+
+export const PlaylistDetailSongListGrid = forwardRef<any, PlaylistDetailSongListGridProps>(
+    ({ data, saveScrollOffset = true }) => {
+        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+            enabled: saveScrollOffset,
+        });
+
+        const { searchTerm } = useSearchTermFilter();
+        const { query } = usePlaylistSongListFilters();
+        const { setListData } = useListContext();
+
+        const songData = useMemo(() => {
+            let items = data?.items || [];
+
+            if (searchTerm) {
+                items = searchLibraryItems(items, searchTerm, LibraryItem.SONG);
+            }
+
+            return sortSongList(items, query.sortBy, query.sortOrder);
+        }, [data?.items, searchTerm, query.sortBy, query.sortOrder]);
+
+        useEffect(() => {
+            if (setListData) {
+                setListData(songData);
+            }
+        }, [songData, setListData]);
+
+        const gridProps = useListSettings(ItemListKey.PLAYLIST_SONG).grid;
+
+        const rows = useGridRows(
+            LibraryItem.PLAYLIST_SONG,
+            ItemListKey.PLAYLIST_SONG,
+            gridProps.size,
+        );
+
+        return (
+            <ItemGridList
+                data={songData}
+                gap={gridProps.itemGap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={gridProps.itemsPerRowEnabled ? gridProps.itemsPerRow : undefined}
+                itemType={LibraryItem.SONG}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+                size={gridProps.size}
+            />
+        );
+    },
+);