Add dedicated playlist song list page

src/renderer/api/jellyfin.api.ts

@@ -376,8 +376,11 @@ const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<JFSongLi
   const searchParams: JFSongListParams = {
     fields: 'Genres, DateCreated, MediaSources, UserData, ParentId',
     includeItemTypes: 'Audio',
+    limit: query.limit,
+    sortBy: query.sortBy ? songListSortMap.jellyfin[query.sortBy] : undefined,
     sortOrder: query.sortOrder ? sortOrderMap.jellyfin[query.sortOrder] : undefined,
     startIndex: 0,
+    userId: server?.userId || '',
   };
 
   const data = await api

src/renderer/api/types.ts

@@ -24,7 +24,6 @@ import {
   NDAlbumListSort,
   NDAlbumDetail,
   NDSongList,
-  NDSongListSort,
   NDSongDetail,
   NDAlbumArtistList,
   NDAlbumArtistListSort,
@@ -33,6 +32,7 @@ import {
   NDPlaylistList,
   NDPlaylistListSort,
   NDPlaylistDetail,
+  NDSongListSort,
 } from '/@/renderer/api/navidrome.types';
 import {
   SSAlbumList,
@@ -404,6 +404,7 @@ export enum SongListSort {
   DURATION = 'duration',
   FAVORITED = 'favorited',
   GENRE = 'genre',
+  ID = 'id',
   NAME = 'name',
   PLAY_COUNT = 'playCount',
   RANDOM = 'random',
@@ -465,6 +466,7 @@ export const songListSortMap: SongListSortMap = {
     duration: JFSongListSort.DURATION,
     favorited: undefined,
     genre: undefined,
+    id: undefined,
     name: JFSongListSort.NAME,
     playCount: JFSongListSort.PLAY_COUNT,
     random: JFSongListSort.RANDOM,
@@ -484,6 +486,7 @@ export const songListSortMap: SongListSortMap = {
     duration: NDSongListSort.DURATION,
     favorited: NDSongListSort.FAVORITED,
     genre: NDSongListSort.GENRE,
+    id: NDSongListSort.ID,
     name: NDSongListSort.TITLE,
     playCount: NDSongListSort.PLAY_COUNT,
     random: undefined,
@@ -503,6 +506,7 @@ export const songListSortMap: SongListSortMap = {
     duration: undefined,
     favorited: undefined,
     genre: undefined,
+    id: undefined,
     name: undefined,
     playCount: undefined,
     random: undefined,

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

@@ -1,156 +0,0 @@
-import { Center, Group } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
-import { forwardRef } from 'react';
-import { RiAlbumFill } from 'react-icons/ri';
-import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { Text, TextTitle } from '/@/renderer/components';
-import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
-import { PlayButton } from '/@/renderer/features/shared';
-import { useContainerQuery } from '/@/renderer/hooks';
-import { AppRoute } from '/@/renderer/router/routes';
-
-const HeaderContainer = styled.div`
-  position: relative;
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-areas: 'image info';
-  grid-template-rows: 1fr;
-  grid-template-columns: 250px minmax(0, 1fr);
-  gap: 0.5rem;
-  width: 100%;
-  max-width: 100%;
-  height: 30vh;
-  min-height: 340px;
-  max-height: 500px;
-  padding: 5rem 2rem 2rem;
-`;
-
-const CoverImageWrapper = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: image;
-  align-items: flex-end;
-  justify-content: center;
-  height: 100%;
-  filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
-`;
-
-const MetadataWrapper = styled.div`
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
-  grid-area: info;
-  justify-content: flex-end;
-  width: 100%;
-`;
-
-const StyledImage = styled.img`
-  object-fit: cover;
-`;
-
-const BackgroundImage = styled.div<{ background: string }>`
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.background};
-`;
-
-const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
-`;
-
-interface PlaylistDetailHeaderProps {
-  background: string;
-  imageUrl?: string;
-}
-
-export const PlaylistDetailHeader = forwardRef(
-  ({ background, imageUrl }: PlaylistDetailHeaderProps, ref) => {
-    const { playlistId } = useParams() as { playlistId: string };
-    const detailQuery = usePlaylistDetail({ id: playlistId });
-    const cq = useContainerQuery();
-
-    const mergedRef = useMergedRef(ref, cq.ref);
-
-    const titleSize = cq.isXl
-      ? '6rem'
-      : cq.isLg
-      ? '5.5rem'
-      : cq.isMd
-      ? '4.5rem'
-      : cq.isSm
-      ? '3.5rem'
-      : '2rem';
-
-    return (
-      <>
-        <HeaderContainer ref={mergedRef}>
-          <BackgroundImage background={background} />
-          <BackgroundImageOverlay />
-          <CoverImageWrapper>
-            {imageUrl ? (
-              <StyledImage
-                alt="cover"
-                height={225}
-                src={imageUrl}
-                width={225}
-              />
-            ) : (
-              <Center
-                sx={{
-                  background: 'var(--placeholder-bg)',
-                  borderRadius: 'var(--card-default-radius)',
-                  height: `${225}px`,
-                  width: `${225}px`,
-                }}
-              >
-                <RiAlbumFill
-                  color="var(--placeholder-fg)"
-                  size={35}
-                />
-              </Center>
-            )}
-          </CoverImageWrapper>
-          <MetadataWrapper>
-            <Group>
-              <Text
-                $link
-                component={Link}
-                fw="600"
-                sx={{ textTransform: 'uppercase' }}
-                to={AppRoute.LIBRARY_ALBUMS}
-              >
-                Playlist
-              </Text>
-            </Group>
-            <TextTitle
-              fw="900"
-              lh="1"
-              mb="0.12em"
-              mt=".08em"
-              sx={{ fontSize: titleSize }}
-            >
-              {detailQuery?.data?.name}
-            </TextTitle>
-            <Group
-              py="1rem"
-              spacing="xs"
-            >
-              <PlayButton />
-            </Group>
-          </MetadataWrapper>
-        </HeaderContainer>
-      </>
-    );
-  },
-);

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

@@ -3,72 +3,73 @@ import type {
   BodyScrollEvent,
   CellContextMenuEvent,
   ColDef,
+  GridReadyEvent,
+  IDatasource,
+  PaginationChangedEvent,
   RowDoubleClickedEvent,
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { getColumnDefs, VirtualTable } from '/@/renderer/components';
+import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components';
-import { useCurrentServer, useSetSongTable, useSongListStore } from '/@/renderer/store';
+import {
-import { LibraryItem } from '/@/renderer/types';
+  useCurrentServer,
+  usePlaylistDetailStore,
+  usePlaylistDetailTablePagination,
+  useSetPlaylistDetailTable,
+  useSetPlaylistDetailTablePagination,
+} from '/@/renderer/store';
+import { LibraryItem, ListDisplayType } from '/@/renderer/types';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
 import debounce from 'lodash/debounce';
 import { openContextMenu } from '/@/renderer/features/context-menu';
 import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import sortBy from 'lodash/sortBy';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { QueueSong } from '/@/renderer/api/types';
+import { PlaylistSongListQuery, QueueSong, SongListSort, SortOrder } from '/@/renderer/api/types';
 import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
 import { useParams } from 'react-router';
-import styled from 'styled-components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-
+import { api } from '/@/renderer/api';
-const ContentContainer = styled.div`
+import { queryKeys } from '/@/renderer/api/query-keys';
-  display: flex;
-  flex-direction: column;
-  max-width: 1920px;
-  padding: 1rem 2rem;
-  overflow: hidden;
-
-  .ag-theme-alpine-dark {
-    --ag-header-background-color: rgba(0, 0, 0, 0%);
-  }
-
-  .ag-header-container {
-    z-index: 1000;
-  }
-
-  .ag-header-cell-resize {
-    top: 25%;
-    width: 7px;
-    height: 50%;
-    background-color: rgb(70, 70, 70, 20%);
-  }
-`;
 
 interface PlaylistDetailContentProps {
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps) => {
+export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailContentProps) => {
   const { playlistId } = useParams() as { playlistId: string };
-  // const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
   const server = useCurrentServer();
-  const page = useSongListStore();
+  const page = usePlaylistDetailStore();
+  const filters: Partial<PlaylistSongListQuery> = useMemo(() => {
+    return {
+      sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+      sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+    };
+  }, [page?.table.id, playlistId]);
 
-  // const pagination = useSongTablePagination();
+  const p = usePlaylistDetailTablePagination(playlistId);
-  // const setPagination = useSetSongTablePagination();
+  const pagination = {
-  const setTable = useSetSongTable();
+    currentPage: p?.currentPage || 0,
+    itemsPerPage: p?.itemsPerPage || 100,
+    scrollOffset: p?.scrollOffset || 0,
+    totalItems: p?.totalItems || 1,
+    totalPages: p?.totalPages || 1,
+  };
+
+  const setPagination = useSetPlaylistDetailTablePagination();
+  const setTable = useSetPlaylistDetailTable();
   const handlePlayQueueAdd = usePlayQueueAdd();
   const playButtonBehavior = usePlayButtonBehavior();
 
-  // const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
+  const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
 
-  const playlistSongsQuery = usePlaylistSongList({
+  const checkPlaylistList = usePlaylistSongList({
     id: playlistId,
-    limit: 50,
+    limit: 1,
     startIndex: 0,
   });
 
-  console.log('checkPlaylistList.data', playlistSongsQuery.data);
-
   const columnDefs: ColDef[] = useMemo(
     () => getColumnDefs(page.table.columns),
     [page.table.columns],
@@ -82,58 +83,66 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
     };
   }, []);
 
-  // const onGridReady = useCallback(
+  const onGridReady = useCallback(
-  //   (params: GridReadyEvent) => {
+    (params: GridReadyEvent) => {
-  //     const dataSource: IDatasource = {
+      const dataSource: IDatasource = {
-  //       getRows: async (params) => {
+        getRows: async (params) => {
-  //         const limit = params.endRow - params.startRow;
+          const limit = params.endRow - params.startRow;
-  //         const startIndex = params.startRow;
+          const startIndex = params.startRow;
 
-  //         const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
+          const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
-  //           id: playlistId,
+            id: playlistId,
-  //           limit,
+            limit,
-  //           startIndex,
+            startIndex,
-  //         });
+            ...filters,
+          });
 
-  //         const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+          const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
-  //           api.controller.getPlaylistSongList({
+            api.controller.getPlaylistSongList({
-  //             query: {
+              query: {
-  //               id: playlistId,
+                id: playlistId,
-  //               limit,
+                limit,
-  //               startIndex,
+                startIndex,
-  //             },
+                ...filters,
-  //             server,
+              },
-  //             signal,
+              server,
-  //           }),
+              signal,
-  //         );
+            }),
+          );
 
-  //         const songs = api.normalize.songList(songsRes, server);
+          const songs = api.normalize.songList(songsRes, server);
-  //         params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
-  //       },
+        },
-  //       rowCount: undefined,
+        rowCount: undefined,
-  //     };
+      };
-  //     params.api.setDatasource(dataSource);
+      params.api.setDatasource(dataSource);
-  //     params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
+      params.api.ensureIndexVisible(pagination.scrollOffset, 'top');
-  //   },
+    },
-  //   [page.table.scrollOffset, playlistId, queryClient, server],
+    [filters, pagination.scrollOffset, playlistId, queryClient, server],
-  // );
+  );
 
-  // const onPaginationChanged = useCallback(
+  const onPaginationChanged = useCallback(
-  //   (event: PaginationChangedEvent) => {
+    (event: PaginationChangedEvent) => {
-  //     if (!isPaginationEnabled || !event.api) return;
+      if (!isPaginationEnabled || !event.api) return;
 
-  //     // Scroll to top of page on pagination change
+      // Scroll to top of page on pagination change
-  //     const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+      const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
-  //     event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+      event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
 
-  //     setPagination({
+      setPagination(playlistId, {
-  //       itemsPerPage: event.api.paginationGetPageSize(),
+        itemsPerPage: event.api.paginationGetPageSize(),
-  //       totalItems: event.api.paginationGetRowCount(),
+        totalItems: event.api.paginationGetRowCount(),
-  //       totalPages: event.api.paginationGetTotalPages() + 1,
+        totalPages: event.api.paginationGetTotalPages() + 1,
-  //     });
+      });
-  //   },
+    },
-  //   [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
+    [
-  // );
+      isPaginationEnabled,
+      pagination.currentPage,
+      pagination.itemsPerPage,
+      playlistId,
+      setPagination,
+    ],
+  );
 
   const handleGridSizeChange = () => {
     if (page.table.autoFit) {
@@ -169,7 +178,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
 
   const handleScroll = (e: BodyScrollEvent) => {
     const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
-    setTable({ scrollOffset });
+    setPagination(playlistId, { scrollOffset });
   };
 
   const handleContextMenu = (e: CellContextMenuEvent) => {
@@ -205,50 +214,58 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
   };
 
   return (
-    <ContentContainer>
+    <>
       <VirtualTable
         // https://github.com/ag-grid/ag-grid/issues/5284
         // Key is used to force remount of table when display, rowHeight, or server changes
         key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
         ref={tableRef}
+        alwaysShowHorizontalScroll
         animateRows
-        detailRowAutoHeight
         maintainColumnOrder
         suppressCopyRowsToClipboard
         suppressMoveWhenRowDragging
         suppressPaginationPanel
         suppressRowDrag
         suppressScrollOnNewData
+        blockLoadDebounceMillis={200}
+        cacheBlockSize={500}
+        cacheOverflowSize={1}
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         enableCellChangeFlash={false}
-        rowData={playlistSongsQuery.data?.items}
+        getRowId={(data) => data.data.id}
-        rowHeight={page.table.rowHeight || 60}
+        infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
+        pagination={isPaginationEnabled}
+        paginationAutoPageSize={isPaginationEnabled}
+        paginationPageSize={pagination.itemsPerPage || 100}
+        rowBuffer={20}
+        rowHeight={page.table.rowHeight || 40}
+        rowModelType="infinite"
         rowSelection="multiple"
         onBodyScrollEnd={handleScroll}
         onCellContextMenu={handleContextMenu}
         onColumnMoved={handleColumnChange}
         onColumnResized={debouncedColumnChange}
-        onGridReady={(params) => {
+        onGridReady={onGridReady}
-          params.api.setDomLayout('autoHeight');
-          params.api.sizeColumnsToFit();
-        }}
         onGridSizeChanged={handleGridSizeChange}
+        onPaginationChanged={onPaginationChanged}
         onRowDoubleClicked={handleRowDoubleClick}
       />
-      {/* <AnimatePresence
+      <AnimatePresence
         presenceAffectsLayout
         initial={false}
         mode="wait"
       >
         {page.display === ListDisplayType.TABLE_PAGINATED && (
           <TablePagination
+            id={playlistId}
             pagination={pagination}
-            setPagination={setPagination}
+            setIdPagination={setPagination}
             tableRef={tableRef}
           />
         )}
-      </AnimatePresence> */}
+      </AnimatePresence>
-    </ContentContainer>
+    </>
   );
 };

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

@@ -0,0 +1,393 @@
+import { IDatasource } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Flex, Group, Stack } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
+import { RiArrowDownSLine, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
+import { useParams } from 'react-router';
+import styled from 'styled-components';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { PlaylistSongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
+import {
+  Button,
+  DropdownMenu,
+  MultiSelect,
+  PageHeader,
+  Slider,
+  SONG_TABLE_COLUMNS,
+  Switch,
+  Text,
+  TextTitle,
+} from '/@/renderer/components';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+  useCurrentServer,
+  usePlaylistDetailStore,
+  useSetPlaylistTablePagination,
+  useSetPlaylistDetailTable,
+  SongListFilter,
+  useSetPlaylistDetailFilters,
+  useSetPlaylistStore,
+} from '/@/renderer/store';
+import { ListDisplayType, TableColumn } from '/@/renderer/types';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
+    { defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
+    { defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
+    { defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
+    { defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+const HeaderItems = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+interface PlaylistDetailHeaderProps {
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const PlaylistDetailSongListHeader = ({ tableRef }: PlaylistDetailHeaderProps) => {
+  const { playlistId } = useParams() as { playlistId: string };
+
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+  const setPage = useSetPlaylistStore();
+  const setFilter = useSetPlaylistDetailFilters();
+  const page = usePlaylistDetailStore();
+  const filters: Partial<PlaylistSongListQuery> = {
+    sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+    sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+  };
+
+  const cq = useContainerQuery();
+
+  const setPagination = useSetPlaylistTablePagination();
+  const setTable = useSetPlaylistDetailTable();
+
+  const sortByLabel =
+    (server?.type &&
+      FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
+    'Unknown';
+
+  const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
+
+  const handleItemSize = (e: number) => {
+    setTable({ rowHeight: e });
+  };
+
+  const handleFilterChange = useCallback(
+    async (filters: SongListFilter) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
+            id: playlistId,
+            limit,
+            startIndex,
+            ...filters,
+          });
+
+          const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+            api.controller.getPlaylistSongList({
+              query: {
+                id: playlistId,
+                limit,
+                startIndex,
+                ...filters,
+              },
+              server,
+              signal,
+            }),
+          );
+
+          const songs = api.normalize.songList(songsRes, server);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || undefined);
+        },
+        rowCount: undefined,
+      };
+      tableRef.current?.api.setDatasource(dataSource);
+      tableRef.current?.api.purgeInfiniteCache();
+      tableRef.current?.api.ensureIndexVisible(0, 'top');
+
+      if (page.display === ListDisplayType.TABLE_PAGINATED) {
+        setPagination({ currentPage: 0 });
+      }
+    },
+    [tableRef, page.display, server, playlistId, queryClient, setPagination],
+  );
+
+  const handleSetSortBy = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value || !server?.type) return;
+
+      const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
+        (f) => f.value === e.currentTarget.value,
+      )?.defaultOrder;
+
+      const updatedFilters = setFilter(playlistId, {
+        sortBy: e.currentTarget.value as SongListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, playlistId, server?.type, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
+    },
+    [page, setPage],
+  );
+
+  const handleTableColumns = (values: TableColumn[]) => {
+    const existingColumns = page.table.columns;
+
+    if (values.length === 0) {
+      return setTable({
+        columns: [],
+      });
+    }
+
+    // If adding a column
+    if (values.length > existingColumns.length) {
+      const newColumn = { column: values[values.length - 1], width: 100 };
+
+      setTable({ columns: [...existingColumns, newColumn] });
+    } else {
+      // If removing a column
+      const removed = existingColumns.filter((column) => !values.includes(column.column));
+      const newColumns = existingColumns.filter((column) => !removed.includes(column));
+
+      setTable({ columns: newColumns });
+    }
+
+    return tableRef.current?.api.sizeColumnsToFit();
+  };
+
+  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
+    setTable({ autoFit: e.currentTarget.checked });
+
+    if (e.currentTarget.checked) {
+      tableRef.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  return (
+    <PageHeader p="1rem">
+      <HeaderItems ref={cq.ref}>
+        <Flex
+          align="center"
+          gap="md"
+          justify="center"
+        >
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                px={0}
+                rightIcon={<RiArrowDownSLine size={15} />}
+                size="xl"
+                variant="subtle"
+              >
+                <TextTitle
+                  fw="bold"
+                  order={3}
+                >
+                  Playlist
+                </TextTitle>
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Label>Display type</DropdownMenu.Label>
+              <DropdownMenu.Item
+                $isActive={page.display === ListDisplayType.TABLE}
+                value={ListDisplayType.TABLE}
+                onClick={handleSetViewType}
+              >
+                Table
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                $isActive={page.display === ListDisplayType.TABLE_PAGINATED}
+                value={ListDisplayType.TABLE_PAGINATED}
+                onClick={handleSetViewType}
+              >
+                Table (paginated)
+              </DropdownMenu.Item>
+              <DropdownMenu.Divider />
+              <DropdownMenu.Label>Item size</DropdownMenu.Label>
+              <DropdownMenu.Item closeMenuOnClick={false}>
+                <Slider
+                  defaultValue={page.table.rowHeight}
+                  label={null}
+                  max={100}
+                  min={25}
+                  onChangeEnd={handleItemSize}
+                />
+              </DropdownMenu.Item>
+              {(page.display === ListDisplayType.TABLE ||
+                page.display === ListDisplayType.TABLE_PAGINATED) && (
+                <>
+                  <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
+                  <DropdownMenu.Item
+                    closeMenuOnClick={false}
+                    component="div"
+                    sx={{ cursor: 'default' }}
+                  >
+                    <Stack>
+                      <MultiSelect
+                        clearable
+                        data={SONG_TABLE_COLUMNS}
+                        defaultValue={page.table?.columns.map((column) => column.column)}
+                        width={300}
+                        onChange={handleTableColumns}
+                      />
+                      <Group position="apart">
+                        <Text>Auto Fit Columns</Text>
+                        <Switch
+                          defaultChecked={page.table.autoFit}
+                          onChange={handleAutoFitColumns}
+                        />
+                      </Group>
+                    </Stack>
+                  </DropdownMenu.Item>
+                </>
+              )}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                variant="subtle"
+              >
+                {sortByLabel}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
+                <DropdownMenu.Item
+                  key={`filter-${filter.name}`}
+                  $isActive={filter.value === filters.sortBy}
+                  value={filter.value}
+                  onClick={handleSetSortBy}
+                >
+                  {filter.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <Button
+            compact
+            fw="600"
+            variant="subtle"
+            onClick={handleToggleSortOrder}
+          >
+            {cq.isMd ? (
+              sortOrderLabel
+            ) : (
+              <>
+                {filters.sortOrder === SortOrder.ASC ? (
+                  <RiSortAsc size={15} />
+                ) : (
+                  <RiSortDesc size={15} />
+                )}
+              </>
+            )}
+          </Button>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                variant="subtle"
+              >
+                <RiMoreFill size={15} />
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Item disabled>Play</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Flex>
+      </HeaderItems>
+      {/* <HeaderContainer ref={mergedRef}> */}
+      {/* <MetadataWrapper>
+        <Group>
+          <Text
+            $link
+            component={Link}
+            fw="600"
+            sx={{ textTransform: 'uppercase' }}
+            to={AppRoute.LIBRARY_ALBUMS}
+          >
+            Playlist
+          </Text>
+        </Group>
+        <TextTitle
+          fw="900"
+          lh="1"
+          mb="0.12em"
+          mt=".08em"
+          sx={{ fontSize: titleSize }}
+        >
+          {detailQuery?.data?.name}
+        </TextTitle>
+        <Group
+          py="1rem"
+          spacing="xs"
+        >
+          <PlayButton />
+        </Group>
+      </MetadataWrapper> */}
+      {/* </HeaderContainer> */}
+    </PageHeader>
+  );
+};

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

@@ -1,76 +1,32 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Group } from '@mantine/core';
-import { useIntersection } from '@mantine/hooks';
 import { useRef } from 'react';
 import { useParams } from 'react-router';
-import { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components';
+import { AnimatedPage } from '/@/renderer/features/shared';
-import { PlaylistDetailContent } from '/@/renderer/features/playlists/components/playlist-detail-content';
-import { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header';
-import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
-import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
-import { AnimatedPage, PlayButton } from '/@/renderer/features/shared';
-import { useFastAverageColor } from '/@/renderer/hooks';
 
 const PlaylistDetailRoute = () => {
-  const tableRef = useRef<AgGridReactType | null>(null);
+  // const tableRef = useRef<AgGridReactType | null>(null);
   const { playlistId } = useParams() as { playlistId: string };
 
-  const detailsQuery = usePlaylistDetail({
+  // const detailsQuery = usePlaylistDetail({
-    id: playlistId,
+  //   id: playlistId,
-  });
+  // });
 
-  const playlistSongsQuery = usePlaylistSongList({
+  // const playlistSongsQuery = usePlaylistSongList({
-    id: playlistId,
+  //   id: playlistId,
-    limit: 50,
+  //   limit: 50,
-    startIndex: 0,
+  //   startIndex: 0,
-  });
+  // });
 
-  const imageUrl = playlistSongsQuery.data?.items?.[0]?.imageUrl;
+  // const imageUrl = playlistSongsQuery.data?.items?.[0]?.imageUrl;
-  const background = useFastAverageColor(imageUrl);
+  // const background = useFastAverageColor(imageUrl);
-  const containerRef = useRef();
+  // const containerRef = useRef();
 
-  const { ref, entry } = useIntersection({
+  // const { ref, entry } = useIntersection({
-    root: containerRef.current,
+  //   root: containerRef.current,
-    threshold: 0.3,
+  //   threshold: 0.3,
-  });
+  // });
 
-  return (
+  return <AnimatedPage key={`playlist-detail-${playlistId}`}>Placeholder</AnimatedPage>;
-    <AnimatedPage key={`playlist-detail-${playlistId}`}>
-      <PageHeader
-        backgroundColor={background}
-        isHidden={entry?.isIntersecting}
-        position="absolute"
-      >
-        <Group noWrap>
-          <PlayButton />
-          <TextTitle
-            fw="bold"
-            order={2}
-            overflow="hidden"
-          >
-            {detailsQuery?.data?.name}
-          </TextTitle>
-        </Group>
-      </PageHeader>
-      <ScrollArea
-        ref={containerRef}
-        h="100%"
-        offsetScrollbars={false}
-        styles={{ scrollbar: { marginTop: '35px' } }}
-      >
-        {background && (
-          <>
-            <PlaylistDetailHeader
-              ref={ref}
-              background={background}
-              imageUrl={imageUrl || undefined}
-            />
-            <PlaylistDetailContent tableRef={tableRef} />
-          </>
-        )}
-      </ScrollArea>
-    </AnimatedPage>
-  );
 };
 
 export default PlaylistDetailRoute;

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

@@ -0,0 +1,23 @@
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { useRef } from 'react';
+import { useParams } from 'react-router';
+import { VirtualGridContainer } from '/@/renderer/components';
+import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content';
+import { PlaylistDetailSongListHeader } from '../components/playlist-detail-song-list-header';
+import { AnimatedPage } from '/@/renderer/features/shared';
+
+const PlaylistDetailSongListRoute = () => {
+  const tableRef = useRef<AgGridReactType | null>(null);
+  const { playlistId } = useParams() as { playlistId: string };
+
+  return (
+    <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
+      <VirtualGridContainer>
+        <PlaylistDetailSongListHeader tableRef={tableRef} />
+        <PlaylistDetailSongListContent tableRef={tableRef} />
+      </VirtualGridContainer>
+    </AnimatedPage>
+  );
+};
+
+export default PlaylistDetailSongListRoute;

src/renderer/features/sidebar/components/sidebar.tsx

@@ -78,7 +78,7 @@ export const Sidebar = () => {
   const showImage = sidebar.image;
 
   const playlistsQuery = usePlaylistList({
-    limit: 0,
+    limit: 100,
     sortBy: PlaylistListSort.NAME,
     sortOrder: SortOrder.ASC,
     startIndex: 0,

src/renderer/router/app-router.tsx

@@ -26,6 +26,10 @@ const PlaylistDetailRoute = lazy(
   () => import('/@/renderer/features/playlists/routes/playlist-detail-route'),
 );
 
+const PlaylistDetailSongListRoute = lazy(
+  () => import('/@/renderer/features/playlists/routes/playlist-detail-song-list-route'),
+);
+
 const PlaylistListRoute = lazy(
   () => import('/@/renderer/features/playlists/routes/playlist-list-route'),
 );
@@ -80,6 +84,10 @@ export const AppRouter = () => {
                 element={<PlaylistDetailRoute />}
                 path={AppRoute.PLAYLISTS_DETAIL}
               />
+              <Route
+                element={<PlaylistDetailSongListRoute />}
+                path={AppRoute.PLAYLISTS_DETAIL_SONGS}
+              />
               <Route
                 element={<AlbumArtistListRoute />}
                 path={AppRoute.LIBRARY_ALBUMARTISTS}

src/renderer/router/routes.ts

@@ -16,6 +16,7 @@ export enum AppRoute {
   PLAYING = '/playing',
   PLAYLISTS = '/playlists',
   PLAYLISTS_DETAIL = '/playlists/:playlistId',
+  PLAYLISTS_DETAIL_SONGS = '/playlists/:playlistId/songs',
   SEARCH = '/search',
   SERVERS = '/servers',
 }

src/renderer/store/playlist.store.ts

@@ -4,6 +4,7 @@ import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { PlaylistListArgs, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
 import { DataTableProps } from '/@/renderer/store/settings.store';
+import { SongListFilter } from '/@/renderer/store/song.store';
 import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
 
 type TableProps = {
@@ -17,14 +18,33 @@ type ListProps<T> = {
   table: TableProps;
 };
 
+type DetailPaginationProps = TablePagination & {
+  scrollOffset: number;
+};
+
+type DetailTableProps = DataTableProps & {
+  id: {
+    [key: string]: DetailPaginationProps & { filter: SongListFilter };
+  };
+};
+
+type DetailProps = {
+  display: ListDisplayType;
+  table: DetailTableProps;
+};
+
 export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
 
 interface PlaylistState {
+  detail: DetailProps;
   list: ListProps<PlaylistListFilter>;
 }
 
 export interface PlaylistSlice extends PlaylistState {
   actions: {
+    setDetailFilters: (id: string, data: Partial<SongListFilter>) => SongListFilter;
+    setDetailTable: (data: Partial<DetailTableProps>) => void;
+    setDetailTablePagination: (id: string, data: Partial<DetailPaginationProps>) => void;
     setFilters: (data: Partial<PlaylistListFilter>) => PlaylistListFilter;
     setStore: (data: Partial<PlaylistSlice>) => void;
     setTable: (data: Partial<TableProps>) => void;
@@ -37,6 +57,32 @@ export const usePlaylistStore = create<PlaylistSlice>()(
     devtools(
       immer((set, get) => ({
         actions: {
+          setDetailFilters: (id, data) => {
+            set((state) => {
+              state.detail.table.id[id] = {
+                ...state.detail.table.id[id],
+                filter: {
+                  ...state.detail.table.id[id].filter,
+                  ...data,
+                },
+              };
+            });
+
+            return get().detail.table.id[id].filter;
+          },
+          setDetailTable: (data) => {
+            set((state) => {
+              state.detail.table = { ...state.detail.table, ...data };
+            });
+          },
+          setDetailTablePagination: (id, data) => {
+            set((state) => {
+              state.detail.table.id[id] = {
+                ...state.detail.table.id[id],
+                ...data,
+              };
+            });
+          },
           setFilters: (data) => {
             set((state) => {
               state.list.filter = { ...state.list.filter, ...data };
@@ -58,6 +104,32 @@ export const usePlaylistStore = create<PlaylistSlice>()(
             });
           },
         },
+        detail: {
+          display: ListDisplayType.TABLE,
+          table: {
+            autoFit: true,
+            columns: [
+              {
+                column: TableColumn.ROW_INDEX,
+                width: 50,
+              },
+              {
+                column: TableColumn.TITLE_COMBINED,
+                width: 500,
+              },
+              {
+                column: TableColumn.DURATION,
+                width: 100,
+              },
+              {
+                column: TableColumn.ALBUM,
+                width: 500,
+              },
+            ],
+            id: {},
+            rowHeight: 60,
+          },
+        },
         list: {
           display: ListDisplayType.TABLE,
           filter: {
@@ -123,3 +195,17 @@ export const useSetPlaylistTablePagination = () =>
   usePlaylistStore((state) => state.actions.setTablePagination);
 
 export const useSetPlaylistTable = () => usePlaylistStore((state) => state.actions.setTable);
+
+export const usePlaylistDetailStore = () => usePlaylistStore((state) => state.detail);
+
+export const usePlaylistDetailTablePagination = (id: string) =>
+  usePlaylistStore((state) => state.detail.table.id[id]);
+
+export const useSetPlaylistDetailTablePagination = () =>
+  usePlaylistStore((state) => state.actions.setDetailTablePagination);
+
+export const useSetPlaylistDetailTable = () =>
+  usePlaylistStore((state) => state.actions.setDetailTable);
+
+export const useSetPlaylistDetailFilters = () =>
+  usePlaylistStore((state) => state.actions.setDetailFilters);