Add dedicated playlist song list page

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 { useCurrentServer, useSetSongTable, useSongListStore } from '/@/renderer/store';
-import { LibraryItem } from '/@/renderer/types';
+import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components';
+import {
+  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';
-
-const ContentContainer = styled.div`
-  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%);
-  }
-`;
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
 
 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 setPagination = useSetSongTablePagination();
-  const setTable = useSetSongTable();
+  const p = usePlaylistDetailTablePagination(playlistId);
+  const pagination = {
+    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(
-  //   (params: GridReadyEvent) => {
-  //     const dataSource: IDatasource = {
-  //       getRows: async (params) => {
-  //         const limit = params.endRow - params.startRow;
-  //         const startIndex = params.startRow;
+  const onGridReady = useCallback(
+    (params: GridReadyEvent) => {
+      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,
-  //         });
+          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,
-  //             },
-  //             server,
-  //             signal,
-  //           }),
-  //         );
+          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);
-  //       },
-  //       rowCount: undefined,
-  //     };
-  //     params.api.setDatasource(dataSource);
-  //     params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
-  //   },
-  //   [page.table.scrollOffset, playlistId, queryClient, server],
-  // );
+          const songs = api.normalize.songList(songsRes, server);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+        },
+        rowCount: undefined,
+      };
+      params.api.setDatasource(dataSource);
+      params.api.ensureIndexVisible(pagination.scrollOffset, 'top');
+    },
+    [filters, pagination.scrollOffset, playlistId, queryClient, server],
+  );
 
-  // const onPaginationChanged = useCallback(
-  //   (event: PaginationChangedEvent) => {
-  //     if (!isPaginationEnabled || !event.api) return;
+  const onPaginationChanged = useCallback(
+    (event: PaginationChangedEvent) => {
+      if (!isPaginationEnabled || !event.api) return;
 
-  //     // Scroll to top of page on pagination change
-  //     const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
-  //     event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+      // Scroll to top of page on pagination change
+      const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+      event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
 
-  //     setPagination({
-  //       itemsPerPage: event.api.paginationGetPageSize(),
-  //       totalItems: event.api.paginationGetRowCount(),
-  //       totalPages: event.api.paginationGetTotalPages() + 1,
-  //     });
-  //   },
-  //   [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
-  // );
+      setPagination(playlistId, {
+        itemsPerPage: event.api.paginationGetPageSize(),
+        totalItems: event.api.paginationGetRowCount(),
+        totalPages: event.api.paginationGetTotalPages() + 1,
+      });
+    },
+    [
+      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}
-        rowHeight={page.table.rowHeight || 60}
+        getRowId={(data) => data.data.id}
+        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) => {
-          params.api.setDomLayout('autoHeight');
-          params.api.sizeColumnsToFit();
-        }}
+        onGridReady={onGridReady}
         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> */}
-    </ContentContainer>
+      </AnimatePresence>
+    </>
   );
 };

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>
+  );
+};