Update to new list header style

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -0,0 +1,587 @@
+import { MutableRefObject, useCallback, MouseEvent, ChangeEvent } from 'react';
+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 { openModal } from '@mantine/modals';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  RiSortAsc,
+  RiSortDesc,
+  RiFolder2Line,
+  RiFilter3Line,
+  RiMoreFill,
+  RiAddBoxFill,
+  RiPlayFill,
+  RiAddCircleFill,
+  RiRefreshLine,
+  RiSettings3Fill,
+} from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AlbumListQuery, AlbumListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
+import {
+  ALBUM_TABLE_COLUMNS,
+  Button,
+  DropdownMenu,
+  MultiSelect,
+  Slider,
+  Switch,
+  Text,
+  VirtualInfiniteGridRef,
+} from '/@/renderer/components';
+import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
+import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+  AlbumListFilter,
+  useAlbumListStore,
+  useCurrentServer,
+  useSetAlbumFilters,
+  useSetAlbumStore,
+  useSetAlbumTable,
+  useSetAlbumTablePagination,
+} from '/@/renderer/store';
+import { ServerType, Play, ListDisplayType, TableColumn } from '/@/renderer/types';
+import { useMusicFolders } from '/@/renderer/features/shared';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: AlbumListSort.ALBUM_ARTIST },
+    {
+      defaultOrder: SortOrder.DESC,
+      name: 'Community Rating',
+      value: AlbumListSort.COMMUNITY_RATING,
+    },
+    { defaultOrder: SortOrder.DESC, name: 'Critic Rating', value: AlbumListSort.CRITIC_RATING },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumListSort.RANDOM },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: AlbumListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.DESC, name: 'Release Date', value: AlbumListSort.RELEASE_DATE },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: AlbumListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: AlbumListSort.ARTIST },
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: AlbumListSort.DURATION },
+    { defaultOrder: SortOrder.DESC, name: 'Most Played', value: AlbumListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumListSort.RANDOM },
+    { defaultOrder: SortOrder.DESC, name: 'Rating', value: AlbumListSort.RATING },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: AlbumListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: AlbumListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: AlbumListSort.SONG_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: AlbumListSort.FAVORITED },
+    { defaultOrder: SortOrder.DESC, name: 'Year', value: AlbumListSort.YEAR },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+interface AlbumListHeaderFiltersProps {
+  customFilters?: Partial<AlbumListFilter>;
+  gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  itemCount?: number;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumListHeaderFilters = ({
+  customFilters,
+  gridRef,
+  tableRef,
+  itemCount,
+}: AlbumListHeaderFiltersProps) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  const setPage = useSetAlbumStore();
+  const setFilter = useSetAlbumFilters();
+  const page = useAlbumListStore();
+  const filters = page.filter;
+  const cq = useContainerQuery();
+
+  const musicFoldersQuery = useMusicFolders();
+
+  const setPagination = useSetAlbumTablePagination();
+  const setTable = useSetAlbumTable();
+
+  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 fetch = useCallback(
+    async (skip: number, take: number, filters: AlbumListFilter) => {
+      const query: AlbumListQuery = {
+        limit: take,
+        startIndex: skip,
+        ...filters,
+        jfParams: {
+          ...filters.jfParams,
+          ...customFilters?.jfParams,
+        },
+        ndParams: {
+          ...filters.ndParams,
+          ...customFilters?.ndParams,
+        },
+        ...customFilters,
+      };
+
+      const queryKey = queryKeys.albums.list(server?.id || '', query);
+
+      const albums = await queryClient.fetchQuery(
+        queryKey,
+        async ({ signal }) =>
+          api.controller.getAlbumList({
+            query,
+            server,
+            signal,
+          }),
+        { cacheTime: 1000 * 60 * 1 },
+      );
+
+      return api.normalize.albumList(albums, server);
+    },
+    [customFilters, queryClient, server],
+  );
+
+  const handleFilterChange = useCallback(
+    async (filters: AlbumListFilter) => {
+      if (
+        page.display === ListDisplayType.TABLE ||
+        page.display === ListDisplayType.TABLE_PAGINATED
+      ) {
+        const dataSource: IDatasource = {
+          getRows: async (params) => {
+            const limit = params.endRow - params.startRow;
+            const startIndex = params.startRow;
+
+            const query: AlbumListQuery = {
+              limit,
+              startIndex,
+              ...filters,
+              ...customFilters,
+              jfParams: {
+                ...filters.jfParams,
+                ...customFilters?.jfParams,
+              },
+              ndParams: {
+                ...filters.ndParams,
+                ...customFilters?.ndParams,
+              },
+            };
+
+            const queryKey = queryKeys.albums.list(server?.id || '', query);
+
+            const albumsRes = await queryClient.fetchQuery(
+              queryKey,
+              async ({ signal }) =>
+                api.controller.getAlbumList({
+                  query,
+                  server,
+                  signal,
+                }),
+              { cacheTime: 1000 * 60 * 1 },
+            );
+
+            const albums = api.normalize.albumList(albumsRes, server);
+            params.successCallback(albums?.items || [], albumsRes?.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 });
+        }
+      } else {
+        gridRef.current?.scrollTo(0);
+        gridRef.current?.resetLoadMoreItemsCache();
+
+        // Refetching within the virtualized grid may be inconsistent due to it refetching
+        // using an outdated set of filters. To avoid this, we fetch using the updated filters
+        // and then set the grid's data here.
+        const data = await fetch(0, 200, filters);
+
+        if (!data?.items) return;
+        gridRef.current?.setItemData(data.items);
+      }
+    },
+    [page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch],
+  );
+
+  const handleOpenFiltersModal = () => {
+    openModal({
+      children: (
+        <>
+          {server?.type === ServerType.NAVIDROME ? (
+            <NavidromeAlbumFilters
+              disableArtistFilter={!!customFilters}
+              handleFilterChange={handleFilterChange}
+            />
+          ) : (
+            <JellyfinAlbumFilters
+              disableArtistFilter={!!customFilters}
+              handleFilterChange={handleFilterChange}
+            />
+          )}
+        </>
+      ),
+      title: 'Album Filters',
+    });
+  };
+
+  const handleRefresh = useCallback(() => {
+    queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
+    handleFilterChange(filters);
+  }, [filters, handleFilterChange, queryClient, server?.id]);
+
+  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({
+        sortBy: e.currentTarget.value as AlbumListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, server?.type, setFilter],
+  );
+
+  const handleSetMusicFolder = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+
+      let updatedFilters = null;
+      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
+        updatedFilters = setFilter({ musicFolderId: undefined });
+      } else {
+        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
+      }
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, page.filter.musicFolderId, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [filters.sortOrder, handleFilterChange, setFilter]);
+
+  const handlePlayQueueAdd = usePlayQueueAdd();
+
+  const handlePlay = async (play: Play) => {
+    if (!itemCount || itemCount === 0) return;
+
+    const query = {
+      startIndex: 0,
+      ...filters,
+      ...customFilters,
+      jfParams: {
+        ...filters.jfParams,
+        ...customFilters?.jfParams,
+      },
+      ndParams: {
+        ...filters.ndParams,
+        ...customFilters?.ndParams,
+      },
+    };
+    const queryKey = queryKeys.albums.list(server?.id || '', query);
+
+    const albumListRes = await queryClient.fetchQuery({
+      queryFn: ({ signal }) => api.controller.getAlbumList({ query, server, signal }),
+      queryKey,
+    });
+
+    const albumIds =
+      api.normalize.albumList(albumListRes, server).items?.map((item) => item.id) || [];
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: albumIds,
+        type: LibraryItem.ALBUM,
+      },
+      play,
+    });
+  };
+
+  const handleItemSize = (e: number) => {
+    if (
+      page.display === ListDisplayType.TABLE ||
+      page.display === ListDisplayType.TABLE_PAGINATED
+    ) {
+      setTable({ rowHeight: e });
+    } else {
+      setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
+    }
+  };
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      setPage({ list: { ...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 (
+    <Flex justify="space-between">
+      <Group
+        ref={cq.ref}
+        spacing="sm"
+        w="100%"
+      >
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw={600}
+              size="md"
+              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}
+          size="md"
+          variant="subtle"
+          onClick={handleToggleSortOrder}
+        >
+          {cq.isSm ? (
+            sortOrderLabel
+          ) : (
+            <>
+              {filters.sortOrder === SortOrder.ASC ? (
+                <RiSortAsc size={15} />
+              ) : (
+                <RiSortDesc size={15} />
+              )}
+            </>
+          )}
+        </Button>
+        {server?.type === ServerType.JELLYFIN && (
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw={600}
+                size="md"
+                variant="subtle"
+              >
+                {cq.isSm ? 'Folder' : <RiFolder2Line size="1.3rem" />}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {musicFoldersQuery.data?.map((folder) => (
+                <DropdownMenu.Item
+                  key={`musicFolder-${folder.id}`}
+                  $isActive={filters.musicFolderId === folder.id}
+                  value={folder.id}
+                  onClick={handleSetMusicFolder}
+                >
+                  {folder.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        )}
+        <Button
+          compact
+          fw={600}
+          size="md"
+          variant="subtle"
+          onClick={handleOpenFiltersModal}
+        >
+          {cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
+        </Button>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiMoreFill size={15} />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item
+              icon={<RiPlayFill />}
+              onClick={() => handlePlay(Play.NOW)}
+            >
+              Play
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddBoxFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
+              Add to queue
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddCircleFill />}
+              onClick={() => handlePlay(Play.NEXT)}
+            >
+              Add to queue next
+            </DropdownMenu.Item>
+            <DropdownMenu.Divider />
+            <DropdownMenu.Item
+              icon={<RiRefreshLine />}
+              onClick={handleRefresh}
+            >
+              Refresh
+            </DropdownMenu.Item>
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+      <Group>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiSettings3Fill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Label>Display type</DropdownMenu.Label>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.CARD}
+              value={ListDisplayType.CARD}
+              onClick={handleSetViewType}
+            >
+              Card
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.POSTER}
+              value={ListDisplayType.POSTER}
+              onClick={handleSetViewType}
+            >
+              Poster
+            </DropdownMenu.Item>
+            <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.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
+                    ? page.grid.size
+                    : 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={ALBUM_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>
+      </Group>
+    </Flex>
+  );
+};

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

@@ -1,101 +1,34 @@
-import type { ChangeEvent, MouseEvent, MutableRefObject } from 'react';
+import type { ChangeEvent, MutableRefObject } from 'react';
 import { useCallback } from 'react';
 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 { openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
-import {
-  RiArrowDownSLine,
-  RiFilter3Line,
-  RiFolder2Line,
-  RiMoreFill,
-  RiSortAsc,
-  RiSortDesc,
-} from 'react-icons/ri';
-import styled from 'styled-components';
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types';
 import {
-  AlbumListQuery,
-  AlbumListSort,
-  LibraryItem,
-  ServerType,
-  SortOrder,
-} from '/@/renderer/api/types';
-import {
-  ALBUM_TABLE_COLUMNS,
-  Badge,
-  Button,
-  DropdownMenu,
-  MultiSelect,
   PageHeader,
+  Paper,
   SearchInput,
-  Slider,
   SpinnerIcon,
-  Switch,
-  Text,
-  TextTitle,
   VirtualInfiniteGridRef,
 } from '/@/renderer/components';
-import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
-import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
-import { useMusicFolders } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
   AlbumListFilter,
   useAlbumListStore,
   useCurrentServer,
   useSetAlbumFilters,
-  useSetAlbumStore,
-  useSetAlbumTable,
   useSetAlbumTablePagination,
 } from '/@/renderer/store';
-import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
+import { ListDisplayType, Play } from '/@/renderer/types';
+import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-const FILTERS = {
-  jellyfin: [
-    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: AlbumListSort.ALBUM_ARTIST },
-    {
-      defaultOrder: SortOrder.DESC,
-      name: 'Community Rating',
-      value: AlbumListSort.COMMUNITY_RATING,
-    },
-    { defaultOrder: SortOrder.DESC, name: 'Critic Rating', value: AlbumListSort.CRITIC_RATING },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumListSort.NAME },
-    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumListSort.RANDOM },
-    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: AlbumListSort.RECENTLY_ADDED },
-    { defaultOrder: SortOrder.DESC, name: 'Release Date', value: AlbumListSort.RELEASE_DATE },
-  ],
-  navidrome: [
-    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: AlbumListSort.ALBUM_ARTIST },
-    { defaultOrder: SortOrder.ASC, name: 'Artist', value: AlbumListSort.ARTIST },
-    { defaultOrder: SortOrder.DESC, name: 'Duration', value: AlbumListSort.DURATION },
-    { defaultOrder: SortOrder.DESC, name: 'Most Played', value: AlbumListSort.PLAY_COUNT },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumListSort.NAME },
-    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumListSort.RANDOM },
-    { defaultOrder: SortOrder.DESC, name: 'Rating', value: AlbumListSort.RATING },
-    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: AlbumListSort.RECENTLY_ADDED },
-    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: AlbumListSort.RECENTLY_PLAYED },
-    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: AlbumListSort.SONG_COUNT },
-    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: AlbumListSort.FAVORITED },
-    { defaultOrder: SortOrder.DESC, name: 'Year', value: AlbumListSort.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 AlbumListHeaderProps {
   customFilters?: Partial<AlbumListFilter>;
@@ -114,34 +47,12 @@ export const AlbumListHeader = ({
 }: AlbumListHeaderProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
-  const setPage = useSetAlbumStore();
   const setFilter = useSetAlbumFilters();
   const page = useAlbumListStore();
   const filters = page.filter;
   const cq = useContainerQuery();
 
-  const musicFoldersQuery = useMusicFolders();
-
   const setPagination = useSetAlbumTablePagination();
-  const setTable = useSetAlbumTable();
-
-  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) => {
-    if (
-      page.display === ListDisplayType.TABLE ||
-      page.display === ListDisplayType.TABLE_PAGINATED
-    ) {
-      setTable({ rowHeight: e });
-    } else {
-      setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
-    }
-  };
 
   const fetch = useCallback(
     async (skip: number, take: number, filters: AlbumListFilter) => {
@@ -245,80 +156,6 @@ export const AlbumListHeader = ({
     [page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch],
   );
 
-  const handleOpenFiltersModal = () => {
-    openModal({
-      children: (
-        <>
-          {server?.type === ServerType.NAVIDROME ? (
-            <NavidromeAlbumFilters
-              disableArtistFilter={!!customFilters}
-              handleFilterChange={handleFilterChange}
-            />
-          ) : (
-            <JellyfinAlbumFilters
-              disableArtistFilter={!!customFilters}
-              handleFilterChange={handleFilterChange}
-            />
-          )}
-        </>
-      ),
-      title: 'Album Filters',
-    });
-  };
-
-  const handleRefresh = useCallback(() => {
-    queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
-    handleFilterChange(filters);
-  }, [filters, handleFilterChange, queryClient, server?.id]);
-
-  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({
-        sortBy: e.currentTarget.value as AlbumListSort,
-        sortOrder: sortOrder || SortOrder.ASC,
-      });
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, server?.type, setFilter],
-  );
-
-  const handleSetMusicFolder = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-
-      let updatedFilters = null;
-      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
-        updatedFilters = setFilter({ musicFolderId: undefined });
-      } else {
-        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
-      }
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, page.filter.musicFolderId, setFilter],
-  );
-
-  const handleToggleSortOrder = useCallback(() => {
-    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-    const updatedFilters = setFilter({ sortOrder: newSortOrder });
-    handleFilterChange(updatedFilters);
-  }, [filters.sortOrder, handleFilterChange, setFilter]);
-
-  const handleSetViewType = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
-    },
-    [page, setPage],
-  );
-
   const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
     const previousSearchTerm = page.filter.searchTerm;
     const searchTerm = e.target.value === '' ? undefined : e.target.value;
@@ -326,40 +163,8 @@ export const AlbumListHeader = ({
     if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
   }, 500);
 
-  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();
-    }
-  };
-
   const handlePlayQueueAdd = usePlayQueueAdd();
+  const playButtonBehavior = usePlayButtonBehavior();
 
   const handlePlay = async (play: Play) => {
     if (!itemCount || itemCount === 0) return;
@@ -397,220 +202,53 @@ export const AlbumListHeader = ({
   };
 
   return (
-    <PageHeader p="1rem">
+    <Stack
-      <HeaderItems ref={cq.ref}>
+      ref={cq.ref}
+      spacing={0}
+    >
+      <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
-          align="center"
+          justify="space-between"
-          gap="md"
+          py="1rem"
-          justify="center"
-        >
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                px={0}
-                rightIcon={<RiArrowDownSLine size={15} />}
-                size="xl"
-                variant="subtle"
         >
+          <LibraryHeaderBar>
             <Group noWrap>
-                  <TextTitle
+              <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-                    maw="20vw"
+              <LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
-                    order={2}
+            </Group>
-                    overflow="hidden"
+            <Paper
-                    weight={700}
+              fw="600"
-                  >
-                    {title || 'Albums'}
-                  </TextTitle>
-                  <Badge
               px="1rem"
-                    radius="xl"
+              py="0.3rem"
-                    size="xl"
+              radius="sm"
             >
               {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-                  </Badge>
+            </Paper>
-                </Group>
+          </LibraryHeaderBar>
-              </Button>
+          <Group>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Label>Display type</DropdownMenu.Label>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.CARD}
-                value={ListDisplayType.CARD}
-                onClick={handleSetViewType}
-              >
-                Card
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.POSTER}
-                value={ListDisplayType.POSTER}
-                onClick={handleSetViewType}
-              >
-                Poster
-              </DropdownMenu.Item>
-              <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.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
-                      ? page.grid.size
-                      : 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={ALBUM_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>
-          {server?.type === ServerType.JELLYFIN && (
-            <DropdownMenu position="bottom-start">
-              <DropdownMenu.Target>
-                <Button
-                  compact
-                  fw={600}
-                  variant="subtle"
-                >
-                  {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
-                </Button>
-              </DropdownMenu.Target>
-              <DropdownMenu.Dropdown>
-                {musicFoldersQuery.data?.map((folder) => (
-                  <DropdownMenu.Item
-                    key={`musicFolder-${folder.id}`}
-                    $isActive={filters.musicFolderId === folder.id}
-                    value={folder.id}
-                    onClick={handleSetMusicFolder}
-                  >
-                    {folder.name}
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Dropdown>
-            </DropdownMenu>
-          )}
-          <Button
-            compact
-            fw={600}
-            variant="subtle"
-            onClick={handleOpenFiltersModal}
-          >
-            {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
-          </Button>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                variant="subtle"
-              >
-                <RiMoreFill size={15} />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
-                Add to queue
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
-                Add to queue next
-              </DropdownMenu.Item>
-              <DropdownMenu.Divider />
-              <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-        <Flex gap="md">
             <SearchInput
               defaultValue={page.filter.searchTerm}
-            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
+              openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
               onChange={handleSearch}
             />
+          </Group>
         </Flex>
-      </HeaderItems>
       </PageHeader>
+      <Paper
+        p="1rem"
+        shadow="xl"
+        sx={{
+          boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
+          zIndex: 100,
+        }}
+      >
+        <AlbumListHeaderFilters
+          customFilters={customFilters}
+          gridRef={gridRef}
+          itemCount={itemCount}
+          tableRef={tableRef}
+        />
+      </Paper>
+    </Stack>
   );
 };

src/renderer/features/artists/components/album-artist-list-header-filters.tsx

@@ -0,0 +1,470 @@
+import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
+import { IDatasource } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Group, Stack, Flex } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  RiSortAsc,
+  RiSortDesc,
+  RiFolder2Line,
+  RiMoreFill,
+  RiSettings2Fill,
+  RiRefreshLine,
+} from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
+import {
+  DropdownMenu,
+  ALBUMARTIST_TABLE_COLUMNS,
+  VirtualInfiniteGridRef,
+  Text,
+  Button,
+  Slider,
+  MultiSelect,
+  Switch,
+} from '/@/renderer/components';
+import { useMusicFolders } from '/@/renderer/features/shared';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+  useCurrentServer,
+  useSetAlbumArtistStore,
+  useSetAlbumArtistFilters,
+  useAlbumArtistListStore,
+  useSetAlbumArtistTablePagination,
+  useSetAlbumArtistTable,
+  AlbumArtistListFilter,
+} from '/@/renderer/store';
+import { ListDisplayType, TableColumn, ServerType } from '/@/renderer/types';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: AlbumArtistListSort.ALBUM },
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: AlbumArtistListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumArtistListSort.RANDOM },
+    {
+      defaultOrder: SortOrder.DESC,
+      name: 'Recently Added',
+      value: AlbumArtistListSort.RECENTLY_ADDED,
+    },
+    // { defaultOrder: SortOrder.DESC, name: 'Release Date', value: AlbumArtistListSort.RELEASE_DATE },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.DESC, name: 'Album Count', value: AlbumArtistListSort.ALBUM_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: AlbumArtistListSort.FAVORITED },
+    { defaultOrder: SortOrder.DESC, name: 'Most Played', value: AlbumArtistListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
+    { defaultOrder: SortOrder.DESC, name: 'Rating', value: AlbumArtistListSort.RATING },
+    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: AlbumArtistListSort.SONG_COUNT },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+interface AlbumArtistListHeaderFiltersProps {
+  gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistListHeaderFilters = ({
+  gridRef,
+  tableRef,
+}: AlbumArtistListHeaderFiltersProps) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+  const setPage = useSetAlbumArtistStore();
+  const setFilter = useSetAlbumArtistFilters();
+  const page = useAlbumArtistListStore();
+  const filters = page.filter;
+  const cq = useContainerQuery();
+
+  const musicFoldersQuery = useMusicFolders();
+
+  const setPagination = useSetAlbumArtistTablePagination();
+  const setTable = useSetAlbumArtistTable();
+
+  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) => {
+    if (
+      page.display === ListDisplayType.TABLE ||
+      page.display === ListDisplayType.TABLE_PAGINATED
+    ) {
+      setTable({ rowHeight: e });
+    } else {
+      setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
+    }
+  };
+
+  const fetch = useCallback(
+    async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => {
+      const queryKey = queryKeys.albumArtists.list(server?.id || '', {
+        limit,
+        startIndex,
+        ...filters,
+      });
+
+      const albums = await queryClient.fetchQuery(
+        queryKey,
+        async ({ signal }) =>
+          api.controller.getAlbumArtistList({
+            query: {
+              limit,
+              startIndex,
+              ...filters,
+            },
+            server,
+            signal,
+          }),
+        { cacheTime: 1000 * 60 * 1 },
+      );
+
+      return api.normalize.albumArtistList(albums, server);
+    },
+    [queryClient, server],
+  );
+
+  const handleFilterChange = useCallback(
+    async (filters: AlbumArtistListFilter) => {
+      if (
+        page.display === ListDisplayType.TABLE ||
+        page.display === ListDisplayType.TABLE_PAGINATED
+      ) {
+        const dataSource: IDatasource = {
+          getRows: async (params) => {
+            const limit = params.endRow - params.startRow;
+            const startIndex = params.startRow;
+
+            const queryKey = queryKeys.albumArtists.list(server?.id || '', {
+              limit,
+              startIndex,
+              ...filters,
+            });
+
+            const albumArtistsRes = await queryClient.fetchQuery(
+              queryKey,
+              async ({ signal }) =>
+                api.controller.getAlbumArtistList({
+                  query: {
+                    limit,
+                    startIndex,
+                    ...filters,
+                  },
+                  server,
+                  signal,
+                }),
+              { cacheTime: 1000 * 60 * 1 },
+            );
+
+            const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
+            params.successCallback(
+              albumArtists?.items || [],
+              albumArtistsRes?.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 });
+        }
+      } else {
+        gridRef.current?.scrollTo(0);
+        gridRef.current?.resetLoadMoreItemsCache();
+
+        // Refetching within the virtualized grid may be inconsistent due to it refetching
+        // using an outdated set of filters. To avoid this, we fetch using the updated filters
+        // and then set the grid's data here.
+        const data = await fetch(0, 200, filters);
+
+        if (!data?.items) return;
+        gridRef.current?.setItemData(data.items);
+      }
+    },
+    [page.display, tableRef, setPagination, server, queryClient, gridRef, fetch],
+  );
+
+  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({
+        sortBy: e.currentTarget.value as AlbumArtistListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, server?.type, setFilter],
+  );
+
+  const handleSetMusicFolder = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+
+      let updatedFilters = null;
+      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
+        updatedFilters = setFilter({ musicFolderId: undefined });
+      } else {
+        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
+      }
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, page.filter.musicFolderId, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [filters.sortOrder, handleFilterChange, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      setPage({ list: { ...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();
+    }
+  };
+
+  const handleRefresh = useCallback(() => {
+    queryClient.invalidateQueries(queryKeys.albumArtists.list(server?.id || ''));
+    handleFilterChange(filters);
+  }, [filters, handleFilterChange, queryClient, server?.id]);
+
+  return (
+    <Flex justify="space-between">
+      <Group
+        ref={cq.ref}
+        spacing="sm"
+        w="100%"
+      >
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              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"
+          size="md"
+          variant="subtle"
+          onClick={handleToggleSortOrder}
+        >
+          {cq.isMd ? (
+            sortOrderLabel
+          ) : (
+            <>
+              {filters.sortOrder === SortOrder.ASC ? (
+                <RiSortAsc size={15} />
+              ) : (
+                <RiSortDesc size={15} />
+              )}
+            </>
+          )}
+        </Button>
+        {server?.type === ServerType.JELLYFIN && (
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                size="md"
+                variant="subtle"
+              >
+                {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {musicFoldersQuery.data?.map((folder) => (
+                <DropdownMenu.Item
+                  key={`musicFolder-${folder.id}`}
+                  $isActive={filters.musicFolderId === folder.id}
+                  value={folder.id}
+                  onClick={handleSetMusicFolder}
+                >
+                  {folder.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        )}
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiMoreFill size={15} />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item
+              icon={<RiRefreshLine />}
+              onClick={handleRefresh}
+            >
+              Refresh
+            </DropdownMenu.Item>
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+      <Group>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiSettings2Fill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Label>Display type</DropdownMenu.Label>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.CARD}
+              value={ListDisplayType.CARD}
+              onClick={handleSetViewType}
+            >
+              Card
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.POSTER}
+              value={ListDisplayType.POSTER}
+              onClick={handleSetViewType}
+            >
+              Poster
+            </DropdownMenu.Item>
+            <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.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
+                    ? page.grid.size
+                    : 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={ALBUMARTIST_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>
+      </Group>
+    </Flex>
+  );
+};

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -1,76 +1,30 @@
-import type { ChangeEvent, MouseEvent, MutableRefObject } from 'react';
+import type { ChangeEvent, MutableRefObject } from 'react';
 import { useCallback } from 'react';
 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 debounce from 'lodash/debounce';
-import { RiArrowDownSLine, RiFolder2Line, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
-import styled from 'styled-components';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
 import {
-  ALBUMARTIST_TABLE_COLUMNS,
-  Badge,
-  Button,
-  DropdownMenu,
-  MultiSelect,
   PageHeader,
+  Paper,
   SearchInput,
-  Slider,
   SpinnerIcon,
-  Switch,
-  Text,
-  TextTitle,
   VirtualInfiniteGridRef,
 } from '/@/renderer/components';
-import { useMusicFolders } from '/@/renderer/features/shared';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
   AlbumArtistListFilter,
   useAlbumArtistListStore,
   useCurrentServer,
   useSetAlbumArtistFilters,
-  useSetAlbumArtistStore,
-  useSetAlbumArtistTable,
   useSetAlbumArtistTablePagination,
 } from '/@/renderer/store';
-import { ListDisplayType, TableColumn } from '/@/renderer/types';
+import { ListDisplayType } from '/@/renderer/types';
-
+import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
-const FILTERS = {
-  jellyfin: [
-    { defaultOrder: SortOrder.ASC, name: 'Album', value: AlbumArtistListSort.ALBUM },
-    { defaultOrder: SortOrder.DESC, name: 'Duration', value: AlbumArtistListSort.DURATION },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
-    { defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumArtistListSort.RANDOM },
-    {
-      defaultOrder: SortOrder.DESC,
-      name: 'Recently Added',
-      value: AlbumArtistListSort.RECENTLY_ADDED,
-    },
-    // { defaultOrder: SortOrder.DESC, name: 'Release Date', value: AlbumArtistListSort.RELEASE_DATE },
-  ],
-  navidrome: [
-    { defaultOrder: SortOrder.DESC, name: 'Album Count', value: AlbumArtistListSort.ALBUM_COUNT },
-    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: AlbumArtistListSort.FAVORITED },
-    { defaultOrder: SortOrder.DESC, name: 'Most Played', value: AlbumArtistListSort.PLAY_COUNT },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
-    { defaultOrder: SortOrder.DESC, name: 'Rating', value: AlbumArtistListSort.RATING },
-    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: AlbumArtistListSort.SONG_COUNT },
-  ],
-};
-
-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 AlbumArtistListHeaderProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -85,34 +39,11 @@ export const AlbumArtistListHeader = ({
 }: AlbumArtistListHeaderProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
-  const setPage = useSetAlbumArtistStore();
   const setFilter = useSetAlbumArtistFilters();
   const page = useAlbumArtistListStore();
-  const filters = page.filter;
   const cq = useContainerQuery();
 
-  const musicFoldersQuery = useMusicFolders();
-
   const setPagination = useSetAlbumArtistTablePagination();
-  const setTable = useSetAlbumArtistTable();
-
-  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) => {
-    if (
-      page.display === ListDisplayType.TABLE ||
-      page.display === ListDisplayType.TABLE_PAGINATED
-    ) {
-      setTable({ rowHeight: e });
-    } else {
-      setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
-    }
-  };
 
   const fetch = useCallback(
     async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => {
@@ -205,54 +136,6 @@ export const AlbumArtistListHeader = ({
     [page.display, tableRef, setPagination, server, queryClient, gridRef, fetch],
   );
 
-  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({
-        sortBy: e.currentTarget.value as AlbumArtistListSort,
-        sortOrder: sortOrder || SortOrder.ASC,
-      });
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, server?.type, setFilter],
-  );
-
-  const handleSetMusicFolder = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-
-      let updatedFilters = null;
-      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
-        updatedFilters = setFilter({ musicFolderId: undefined });
-      } else {
-        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
-      }
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, page.filter.musicFolderId, setFilter],
-  );
-
-  const handleToggleSortOrder = useCallback(() => {
-    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-    const updatedFilters = setFilter({ sortOrder: newSortOrder });
-    handleFilterChange(updatedFilters);
-  }, [filters.sortOrder, handleFilterChange, setFilter]);
-
-  const handleSetViewType = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
-    },
-    [page, setPage],
-  );
-
   const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
     const previousSearchTerm = page.filter.searchTerm;
     const searchTerm = e.target.value === '' ? undefined : e.target.value;
@@ -260,245 +143,51 @@ export const AlbumArtistListHeader = ({
     if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
   }, 500);
 
-  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();
-    }
-  };
-
-  const handleRefresh = useCallback(() => {
-    queryClient.invalidateQueries(queryKeys.albumArtists.list(server?.id || ''));
-    handleFilterChange(filters);
-  }, [filters, handleFilterChange, queryClient, server?.id]);
-
   return (
-    <PageHeader p="1rem">
+    <Stack
-      <HeaderItems ref={cq.ref}>
+      ref={cq.ref}
+      spacing={0}
+    >
+      <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
-          align="center"
+          justify="space-between"
-          gap="md"
+          py="1rem"
-          justify="center"
-        >
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                px={0}
-                rightIcon={<RiArrowDownSLine size={15} />}
-                size="xl"
-                variant="subtle"
         >
+          <LibraryHeaderBar>
             <Group noWrap>
-                  <TextTitle
+              <LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
-                    order={2}
+            </Group>
-                    weight={700}
+            <Paper
-                  >
+              fw="600"
-                    Album Artists
-                  </TextTitle>
-                  <Badge
               px="1rem"
-                    radius="xl"
+              py="0.3rem"
-                    size="xl"
+              radius="sm"
             >
               {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-                  </Badge>
+            </Paper>
-                </Group>
+          </LibraryHeaderBar>
-              </Button>
+          <Group>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Label>Display type</DropdownMenu.Label>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.CARD}
-                value={ListDisplayType.CARD}
-                onClick={handleSetViewType}
-              >
-                Card
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.POSTER}
-                value={ListDisplayType.POSTER}
-                onClick={handleSetViewType}
-              >
-                Poster
-              </DropdownMenu.Item>
-              <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.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
-                      ? page.grid.size
-                      : 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={ALBUMARTIST_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>
-          {server?.type === ServerType.JELLYFIN && (
-            <DropdownMenu position="bottom-start">
-              <DropdownMenu.Target>
-                <Button
-                  compact
-                  fw="600"
-                  variant="subtle"
-                >
-                  {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
-                </Button>
-              </DropdownMenu.Target>
-              <DropdownMenu.Dropdown>
-                {musicFoldersQuery.data?.map((folder) => (
-                  <DropdownMenu.Item
-                    key={`musicFolder-${folder.id}`}
-                    $isActive={filters.musicFolderId === folder.id}
-                    value={folder.id}
-                    onClick={handleSetMusicFolder}
-                  >
-                    {folder.name}
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Dropdown>
-            </DropdownMenu>
-          )}
-          <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</DropdownMenu.Item>
-              <DropdownMenu.Divider />
-              <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-        <Flex gap="md">
             <SearchInput
               defaultValue={page.filter.searchTerm}
-            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
+              openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
               onChange={handleSearch}
             />
+          </Group>
         </Flex>
-      </HeaderItems>
       </PageHeader>
+      <Paper
+        p="1rem"
+        shadow="xl"
+        sx={{
+          boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
+          zIndex: 100,
+        }}
+      >
+        <AlbumArtistListHeaderFilters
+          gridRef={gridRef}
+          tableRef={tableRef}
+        />
+      </Paper>
+    </Stack>
   );
 };

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

@@ -30,16 +30,16 @@ import { AnimatePresence } from 'framer-motion';
 import debounce from 'lodash/debounce';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
 import { generatePath, useNavigate } from 'react-router';
 import { AppRoute } from '/@/renderer/router/routes';
 import { LibraryItem } from '/@/renderer/api/types';
 
 interface PlaylistListContentProps {
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistListContent = ({ tableRef }: PlaylistListContentProps) => {
+export const PlaylistListContent = ({ tableRef, itemCount }: PlaylistListContentProps) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const server = useCurrentServer();
@@ -51,12 +51,6 @@ export const PlaylistListContent = ({ tableRef }: PlaylistListContentProps) => {
 
   const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
 
-  const checkPlaylistList = usePlaylistList({
-    limit: 1,
-    startIndex: 0,
-    ...page.filter,
-  });
-
   const columnDefs: ColDef[] = useMemo(
     () => getColumnDefs(page.table.columns),
     [page.table.columns],
@@ -194,7 +188,7 @@ export const PlaylistListContent = ({ tableRef }: PlaylistListContentProps) => {
           defaultColDef={defaultColumnDefs}
           enableCellChangeFlash={false}
           getRowId={(data) => data.data.id}
-          infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
+          infiniteInitialRowCount={itemCount || 100}
           pagination={isPaginationEnabled}
           paginationAutoPageSize={isPaginationEnabled}
           paginationPageSize={page.table.pagination.itemsPerPage || 100}

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

@@ -0,0 +1,325 @@
+import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
+import { IDatasource } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Flex, Stack, Group } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { RiSortAsc, RiSortDesc, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { SortOrder, PlaylistListSort } from '/@/renderer/api/types';
+import {
+  DropdownMenu,
+  PLAYLIST_TABLE_COLUMNS,
+  Text,
+  Button,
+  Slider,
+  MultiSelect,
+  Switch,
+} from '/@/renderer/components';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+  PlaylistListFilter,
+  useCurrentServer,
+  usePlaylistListStore,
+  useSetPlaylistFilters,
+  useSetPlaylistStore,
+  useSetPlaylistTable,
+  useSetPlaylistTablePagination,
+} from '/@/renderer/store';
+import { ListDisplayType, TableColumn } from '/@/renderer/types';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: PlaylistListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: PlaylistListSort.NAME },
+    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: PlaylistListSort.SONG_COUNT },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: PlaylistListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: PlaylistListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Owner', value: PlaylistListSort.OWNER },
+    { defaultOrder: SortOrder.DESC, name: 'Public', value: PlaylistListSort.PUBLIC },
+    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: PlaylistListSort.SONG_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Updated At', value: PlaylistListSort.UPDATED_AT },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+interface PlaylistListHeaderFiltersProps {
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFiltersProps) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+  const page = usePlaylistListStore();
+  const setPage = useSetPlaylistStore();
+  const setFilter = useSetPlaylistFilters();
+  const setTable = useSetPlaylistTable();
+  const setPagination = useSetPlaylistTablePagination();
+  const cq = useContainerQuery();
+
+  const sortByLabel =
+    (server?.type &&
+      (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
+        (f) => f.value === page.filter.sortBy,
+      )?.name) ||
+    'Unknown';
+
+  const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
+
+  const handleFilterChange = useCallback(
+    async (filters?: PlaylistListFilter) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const pageFilters = filters || page.filter;
+
+          const queryKey = queryKeys.playlists.list(server?.id || '', {
+            limit,
+            startIndex,
+            ...pageFilters,
+          });
+
+          const playlistsRes = await queryClient.fetchQuery(
+            queryKey,
+            async ({ signal }) =>
+              api.controller.getPlaylistList({
+                query: {
+                  limit,
+                  startIndex,
+                  ...pageFilters,
+                },
+                server,
+                signal,
+              }),
+            { cacheTime: 1000 * 60 * 1 },
+          );
+
+          const playlists = api.normalize.playlistList(playlistsRes, server);
+          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
+        },
+        rowCount: undefined,
+      };
+      tableRef.current?.api.setDatasource(dataSource);
+      tableRef.current?.api.purgeInfiniteCache();
+      tableRef.current?.api.ensureIndexVisible(0, 'top');
+      setPagination({ currentPage: 0 });
+    },
+    [page.filter, queryClient, server, setPagination, tableRef],
+  );
+
+  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({
+        sortBy: e.currentTarget.value as PlaylistListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, server?.type, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [page.filter.sortOrder, handleFilterChange, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      const display = e.currentTarget.value as ListDisplayType;
+      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
+
+      if (display === ListDisplayType.TABLE) {
+        tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
+        setPagination({ currentPage: 0 });
+      } else if (display === ListDisplayType.TABLE_PAGINATED) {
+        setPagination({ currentPage: 0 });
+      }
+    },
+    [page, setPage, setPagination, tableRef],
+  );
+
+  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 };
+
+      return setTable({ columns: [...existingColumns, newColumn] });
+    }
+
+    // If removing a column
+    const removed = existingColumns.filter((column) => !values.includes(column.column));
+    const newColumns = existingColumns.filter((column) => !removed.includes(column));
+
+    return setTable({ columns: newColumns });
+  };
+
+  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
+    setTable({ autoFit: e.currentTarget.checked });
+
+    if (e.currentTarget.checked) {
+      tableRef.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handleRowHeight = (e: number) => {
+    setTable({ rowHeight: e });
+  };
+
+  return (
+    <Flex justify="space-between">
+      <Group
+        ref={cq.ref}
+        spacing="sm"
+        w="100%"
+      >
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              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 === page.filter.sortBy}
+                value={filter.value}
+                onClick={handleSetSortBy}
+              >
+                {filter.name}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+        <Button
+          compact
+          fw="600"
+          size="md"
+          variant="subtle"
+          onClick={handleToggleSortOrder}
+        >
+          {cq.isSm ? (
+            sortOrderLabel
+          ) : (
+            <>
+              {page.filter.sortOrder === SortOrder.ASC ? (
+                <RiSortAsc size="1.3rem" />
+              ) : (
+                <RiSortDesc size="1.3rem" />
+              )}
+            </>
+          )}
+        </Button>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              variant="subtle"
+            >
+              <RiMoreFill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item icon={<RiRefreshLine />}>Refresh</DropdownMenu.Item>
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+      <Group>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiSettings3Fill size="1.3rem" />
+            </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 || 0}
+                label={null}
+                max={100}
+                min={25}
+                onChangeEnd={handleRowHeight}
+              />
+            </DropdownMenu.Item>
+            <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
+            <DropdownMenu.Item
+              closeMenuOnClick={false}
+              component="div"
+              sx={{ cursor: 'default' }}
+            >
+              <Stack>
+                <MultiSelect
+                  clearable
+                  data={PLAYLIST_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>
+      </Group>
+    </Flex>
+  );
+};

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

@@ -1,337 +1,54 @@
-import type { 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 { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
+import { MutableRefObject } from 'react';
-import { RiArrowDownSLine, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
+import { PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
-import { api } from '/@/renderer/api';
+import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
-import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
-import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
-import {
-  Button,
-  DropdownMenu,
-  PageHeader,
-  Slider,
-  TextTitle,
-  Switch,
-  MultiSelect,
-  Text,
-  PLAYLIST_TABLE_COLUMNS,
-} from '/@/renderer/components';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { queryClient } from '/@/renderer/lib/react-query';
-import {
-  PlaylistListFilter,
-  useCurrentServer,
-  usePlaylistListStore,
-  useSetPlaylistFilters,
-  useSetPlaylistStore,
-  useSetPlaylistTable,
-  useSetPlaylistTablePagination,
-} from '/@/renderer/store';
-import { ListDisplayType, TableColumn } from '/@/renderer/types';
-
-const FILTERS = {
-  jellyfin: [
-    { defaultOrder: SortOrder.DESC, name: 'Duration', value: PlaylistListSort.DURATION },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: PlaylistListSort.NAME },
-    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: PlaylistListSort.SONG_COUNT },
-  ],
-  navidrome: [
-    { defaultOrder: SortOrder.DESC, name: 'Duration', value: PlaylistListSort.DURATION },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: PlaylistListSort.NAME },
-    { defaultOrder: SortOrder.ASC, name: 'Owner', value: PlaylistListSort.OWNER },
-    { defaultOrder: SortOrder.DESC, name: 'Public', value: PlaylistListSort.PUBLIC },
-    { defaultOrder: SortOrder.DESC, name: 'Song Count', value: PlaylistListSort.SONG_COUNT },
-    { defaultOrder: SortOrder.DESC, name: 'Updated At', value: PlaylistListSort.UPDATED_AT },
-  ],
-};
-
-const ORDER = [
-  { name: 'Ascending', value: SortOrder.ASC },
-  { name: 'Descending', value: SortOrder.DESC },
-];
 
 interface PlaylistListHeaderProps {
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistListHeader = ({ tableRef }: PlaylistListHeaderProps) => {
+export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderProps) => {
-  const server = useCurrentServer();
-  const page = usePlaylistListStore();
-  const setPage = useSetPlaylistStore();
-  const setFilter = useSetPlaylistFilters();
-  const setTable = useSetPlaylistTable();
-  const setPagination = useSetPlaylistTablePagination();
   const cq = useContainerQuery();
 
-  const sortByLabel =
-    (server?.type &&
-      (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
-        (f) => f.value === page.filter.sortBy,
-      )?.name) ||
-    'Unknown';
-
-  const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
-
-  const handleFilterChange = useCallback(
-    async (filters?: PlaylistListFilter) => {
-      const dataSource: IDatasource = {
-        getRows: async (params) => {
-          const limit = params.endRow - params.startRow;
-          const startIndex = params.startRow;
-
-          const pageFilters = filters || page.filter;
-
-          const queryKey = queryKeys.playlists.list(server?.id || '', {
-            limit,
-            startIndex,
-            ...pageFilters,
-          });
-
-          const playlistsRes = await queryClient.fetchQuery(
-            queryKey,
-            async ({ signal }) =>
-              api.controller.getPlaylistList({
-                query: {
-                  limit,
-                  startIndex,
-                  ...pageFilters,
-                },
-                server,
-                signal,
-              }),
-            { cacheTime: 1000 * 60 * 1 },
-          );
-
-          const playlists = api.normalize.playlistList(playlistsRes, server);
-          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
-        },
-        rowCount: undefined,
-      };
-      tableRef.current?.api.setDatasource(dataSource);
-      tableRef.current?.api.purgeInfiniteCache();
-      tableRef.current?.api.ensureIndexVisible(0, 'top');
-      setPagination({ currentPage: 0 });
-    },
-    [page.filter, server, setPagination, tableRef],
-  );
-
-  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({
-        sortBy: e.currentTarget.value as PlaylistListSort,
-        sortOrder: sortOrder || SortOrder.ASC,
-      });
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, server?.type, setFilter],
-  );
-
-  const handleToggleSortOrder = useCallback(() => {
-    const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-    const updatedFilters = setFilter({ sortOrder: newSortOrder });
-    handleFilterChange(updatedFilters);
-  }, [page.filter.sortOrder, handleFilterChange, setFilter]);
-
-  const handleSetViewType = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      const display = e.currentTarget.value as ListDisplayType;
-      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
-
-      if (display === ListDisplayType.TABLE) {
-        tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
-        setPagination({ currentPage: 0 });
-      } else if (display === ListDisplayType.TABLE_PAGINATED) {
-        setPagination({ currentPage: 0 });
-      }
-    },
-    [page, setPage, setPagination, tableRef],
-  );
-
-  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 };
-
-      return setTable({ columns: [...existingColumns, newColumn] });
-    }
-
-    // If removing a column
-    const removed = existingColumns.filter((column) => !values.includes(column.column));
-    const newColumns = existingColumns.filter((column) => !removed.includes(column));
-
-    return setTable({ columns: newColumns });
-  };
-
-  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
-    setTable({ autoFit: e.currentTarget.checked });
-
-    if (e.currentTarget.checked) {
-      tableRef.current?.api.sizeColumnsToFit();
-    }
-  };
-
-  const handleRowHeight = (e: number) => {
-    setTable({ rowHeight: e });
-  };
-
   return (
-    <PageHeader p="1rem">
+    <Stack
-      <Flex
       ref={cq.ref}
-        direction="row"
+      spacing={0}
-        justify="space-between"
     >
+      <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
-          align="center"
+          justify="space-between"
-          gap="md"
+          py="1rem"
-          justify="center"
         >
-          <DropdownMenu position="bottom-start">
+          <LibraryHeaderBar>
-            <DropdownMenu.Target>
+            <Group>
-              <Button
+              <LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
-                compact
-                rightIcon={<RiArrowDownSLine size={15} />}
-                size="xl"
-                sx={{ paddingLeft: 0, paddingRight: 0 }}
-                variant="subtle"
-              >
-                <TextTitle
-                  fw="bold"
-                  order={2}
-                >
-                  Playlists
-                </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 || 0}
-                  label={null}
-                  max={100}
-                  min={25}
-                  onChangeEnd={handleRowHeight}
-                />
-              </DropdownMenu.Item>
-              <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
-              <DropdownMenu.Item
-                closeMenuOnClick={false}
-                component="div"
-                sx={{ cursor: 'default' }}
-              >
-                <Stack>
-                  <MultiSelect
-                    clearable
-                    data={PLAYLIST_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>
+            <Paper
-              </DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
               fw="600"
-                variant="subtle"
+              px="1rem"
+              py="0.3rem"
+              radius="sm"
             >
-                {sortByLabel}
+              {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-              </Button>
+            </Paper>
-            </DropdownMenu.Target>
+          </LibraryHeaderBar>
-            <DropdownMenu.Dropdown>
-              {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
-                <DropdownMenu.Item
-                  key={`filter-${filter.name}`}
-                  $isActive={filter.value === page.filter.sortBy}
-                  value={filter.value}
-                  onClick={handleSetSortBy}
-                >
-                  {filter.name}
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <Button
-            compact
-            fw="600"
-            variant="subtle"
-            onClick={handleToggleSortOrder}
-          >
-            {cq.isMd ? (
-              sortOrderLabel
-            ) : (
-              <>
-                {page.filter.sortOrder === SortOrder.ASC ? (
-                  <RiSortAsc size={15} />
-                ) : (
-                  <RiSortDesc size={15} />
-                )}
-              </>
-            )}
-          </Button>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                fw="600"
-                variant="subtle"
-              >
-                <RiMoreFill size={15} />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Item disabled>Play</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue next</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
         </Flex>
       </PageHeader>
+      <Paper
+        p="1rem"
+        shadow="xl"
+        sx={{
+          boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
+          zIndex: 100,
+        }}
+      >
+        <PlaylistListHeaderFilters tableRef={tableRef} />
+      </Paper>
+    </Stack>
   );
 };

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

@@ -1,15 +1,38 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
+import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
 import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
 import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
+import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
 import { AnimatedPage } from '/@/renderer/features/shared';
 
 const PlaylistListRoute = () => {
   const tableRef = useRef<AgGridReactType | null>(null);
 
+  const itemCountCheck = usePlaylistList(
+    {
+      limit: 1,
+      sortBy: PlaylistListSort.NAME,
+      sortOrder: SortOrder.ASC,
+      startIndex: 0,
+    },
+    {
+      cacheTime: 1000 * 60 * 60 * 2,
+      staleTime: 1000 * 60 * 60 * 2,
+    },
+  );
+
+  const itemCount =
+    itemCountCheck.data?.totalRecordCount === null
+      ? undefined
+      : itemCountCheck.data?.totalRecordCount;
+
   return (
     <AnimatedPage>
-      <PlaylistListHeader tableRef={tableRef} />
+      <PlaylistListHeader
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
       <PlaylistListContent tableRef={tableRef} />
     </AnimatedPage>
   );

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -0,0 +1,452 @@
+import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
+import { IDatasource } from '@ag-grid-community/core';
+import { Flex, Group, Stack } from '@mantine/core';
+import { openModal } from '@mantine/modals';
+import {
+  RiSortAsc,
+  RiSortDesc,
+  RiFolder2Line,
+  RiFilter3Line,
+  RiMoreFill,
+  RiSettings3Fill,
+} from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
+import {
+  DropdownMenu,
+  SONG_TABLE_COLUMNS,
+  Button,
+  Slider,
+  MultiSelect,
+  Switch,
+  Text,
+} from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useMusicFolders } from '/@/renderer/features/shared';
+import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
+import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { queryClient } from '/@/renderer/lib/react-query';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import {
+  useCurrentServer,
+  useSongListStore,
+  useSetSongStore,
+  useSetSongFilters,
+  useSetSongTable,
+  useSetSongTablePagination,
+  SongListFilter,
+} from '/@/renderer/store';
+import { ListDisplayType, ServerType, Play, 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: '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 },
+];
+
+interface SongListHeaderFiltersProps {
+  customFilters?: Partial<SongListFilter>;
+  itemCount?: number;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const SongListHeaderFilters = ({
+  customFilters,
+  itemCount,
+  tableRef,
+}: SongListHeaderFiltersProps) => {
+  const server = useCurrentServer();
+  const page = useSongListStore();
+  const setPage = useSetSongStore();
+  const setFilter = useSetSongFilters();
+  const setTable = useSetSongTable();
+  const setPagination = useSetSongTablePagination();
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const cq = useContainerQuery();
+
+  const musicFoldersQuery = useMusicFolders();
+
+  const sortByLabel =
+    (server?.type &&
+      (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
+        (f) => f.value === page.filter.sortBy,
+      )?.name) ||
+    'Unknown';
+
+  const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
+
+  const handleFilterChange = useCallback(
+    async (filters?: SongListFilter) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const pageFilters = filters || page.filter;
+
+          const query: SongListQuery = {
+            limit,
+            startIndex,
+            ...pageFilters,
+            ...customFilters,
+          };
+
+          const queryKey = queryKeys.songs.list(server?.id || '', query);
+
+          const songsRes = await queryClient.fetchQuery(
+            queryKey,
+            async ({ signal }) =>
+              api.controller.getSongList({
+                query,
+                server,
+                signal,
+              }),
+            { cacheTime: 1000 * 60 * 1 },
+          );
+
+          const songs = api.normalize.songList(songsRes, server);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+        },
+        rowCount: undefined,
+      };
+      tableRef.current?.api.setDatasource(dataSource);
+      tableRef.current?.api.purgeInfiniteCache();
+      tableRef.current?.api.ensureIndexVisible(0, 'top');
+      setPagination({ currentPage: 0 });
+    },
+    [customFilters, page.filter, server, setPagination, tableRef],
+  );
+
+  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({
+        sortBy: e.currentTarget.value as SongListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, server?.type, setFilter],
+  );
+
+  const handleSetMusicFolder = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+
+      let updatedFilters = null;
+      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
+        updatedFilters = setFilter({ musicFolderId: undefined });
+      } else {
+        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
+      }
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, page.filter.musicFolderId, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [page.filter.sortOrder, handleFilterChange, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      const display = e.currentTarget.value as ListDisplayType;
+      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
+
+      if (display === ListDisplayType.TABLE) {
+        tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
+        setPagination({ currentPage: 0 });
+      } else if (display === ListDisplayType.TABLE_PAGINATED) {
+        setPagination({ currentPage: 0 });
+      }
+    },
+    [page, setPage, setPagination, tableRef],
+  );
+
+  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 };
+
+      return setTable({ columns: [...existingColumns, newColumn] });
+    }
+
+    // If removing a column
+    const removed = existingColumns.filter((column) => !values.includes(column.column));
+    const newColumns = existingColumns.filter((column) => !removed.includes(column));
+
+    return setTable({ columns: newColumns });
+  };
+
+  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
+    setTable({ autoFit: e.currentTarget.checked });
+
+    if (e.currentTarget.checked) {
+      tableRef.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handleRowHeight = (e: number) => {
+    setTable({ rowHeight: e });
+  };
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
+    handleFilterChange(page.filter);
+  };
+
+  const handlePlay = async (play: Play) => {
+    if (!itemCount || itemCount === 0) return;
+    const query: SongListQuery = { startIndex: 0, ...page.filter };
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: query,
+        type: LibraryItem.SONG,
+      },
+      play,
+    });
+  };
+
+  const handleOpenFiltersModal = () => {
+    openModal({
+      children: (
+        <>
+          {server?.type === ServerType.NAVIDROME ? (
+            <NavidromeSongFilters handleFilterChange={handleFilterChange} />
+          ) : (
+            <JellyfinSongFilters handleFilterChange={handleFilterChange} />
+          )}
+        </>
+      ),
+      title: 'Song Filters',
+    });
+  };
+
+  return (
+    <Flex justify="space-between">
+      <Group
+        ref={cq.ref}
+        spacing="sm"
+        w="100%"
+      >
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              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 === page.filter.sortBy}
+                value={filter.value}
+                onClick={handleSetSortBy}
+              >
+                {filter.name}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+        <Button
+          compact
+          fw="600"
+          size="md"
+          variant="subtle"
+          onClick={handleToggleSortOrder}
+        >
+          {cq.isSm ? (
+            sortOrderLabel
+          ) : (
+            <>
+              {page.filter.sortOrder === SortOrder.ASC ? (
+                <RiSortAsc size="1.3rem" />
+              ) : (
+                <RiSortDesc size="1.3rem" />
+              )}
+            </>
+          )}
+        </Button>
+        {server?.type === ServerType.JELLYFIN && (
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                size="md"
+                variant="subtle"
+              >
+                {cq.isSm ? 'Folder' : <RiFolder2Line size="1.3rem" />}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {musicFoldersQuery.data?.map((folder) => (
+                <DropdownMenu.Item
+                  key={`musicFolder-${folder.id}`}
+                  $isActive={page.filter.musicFolderId === folder.id}
+                  value={folder.id}
+                  onClick={handleSetMusicFolder}
+                >
+                  {folder.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        )}
+        <Button
+          compact
+          fw="600"
+          size="md"
+          variant="subtle"
+          onClick={handleOpenFiltersModal}
+        >
+          {cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
+        </Button>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              variant="subtle"
+            >
+              <RiMoreFill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
+            <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
+              Add to queue
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
+              Add to queue next
+            </DropdownMenu.Item>
+            <DropdownMenu.Divider />
+            <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+      <Group>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiSettings3Fill size="1.3rem" />
+            </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 || 0}
+                label={null}
+                max={100}
+                min={25}
+                onChangeEnd={handleRowHeight}
+              />
+            </DropdownMenu.Item>
+            <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>
+      </Group>
+    </Flex>
+  );
+};

src/renderer/features/songs/components/song-list-header.tsx

@@ -1,93 +1,26 @@
 import type { 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 { openModal } from '@mantine/modals';
 import debounce from 'lodash/debounce';
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
+import { ChangeEvent, MutableRefObject, useCallback } from 'react';
-import {
-  RiArrowDownSLine,
-  RiFilter3Line,
-  RiFolder2Line,
-  RiMoreFill,
-  RiSortAsc,
-  RiSortDesc,
-} from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
+import { LibraryItem, SongListQuery } from '/@/renderer/api/types';
-  LibraryItem,
+import { PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/components';
-  ServerType,
-  SongListQuery,
-  SongListSort,
-  SortOrder,
-} from '/@/renderer/api/types';
-import {
-  Button,
-  DropdownMenu,
-  PageHeader,
-  SearchInput,
-  Slider,
-  TextTitle,
-  Switch,
-  MultiSelect,
-  Text,
-  SONG_TABLE_COLUMNS,
-  Badge,
-  SpinnerIcon,
-} from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useMusicFolders } from '/@/renderer/features/shared';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
-import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
+import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
-import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { queryClient } from '/@/renderer/lib/react-query';
 import {
   SongListFilter,
   useCurrentServer,
   useSetSongFilters,
-  useSetSongStore,
-  useSetSongTable,
   useSetSongTablePagination,
   useSongListStore,
 } from '/@/renderer/store';
-import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-
+import { Play } 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: '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 },
-];
 
 interface SongListHeaderProps {
   customFilters?: Partial<SongListFilter>;
@@ -104,24 +37,11 @@ export const SongListHeader = ({
 }: SongListHeaderProps) => {
   const server = useCurrentServer();
   const page = useSongListStore();
-  const setPage = useSetSongStore();
   const setFilter = useSetSongFilters();
-  const setTable = useSetSongTable();
   const setPagination = useSetSongTablePagination();
   const handlePlayQueueAdd = usePlayQueueAdd();
   const cq = useContainerQuery();
 
-  const musicFoldersQuery = useMusicFolders();
-
-  const sortByLabel =
-    (server?.type &&
-      (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
-        (f) => f.value === page.filter.sortBy,
-      )?.name) ||
-    'Unknown';
-
-  const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
-
   const handleFilterChange = useCallback(
     async (filters?: SongListFilter) => {
       const dataSource: IDatasource = {
@@ -164,62 +84,6 @@ export const SongListHeader = ({
     [customFilters, page.filter, server, setPagination, tableRef],
   );
 
-  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({
-        sortBy: e.currentTarget.value as SongListSort,
-        sortOrder: sortOrder || SortOrder.ASC,
-      });
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, server?.type, setFilter],
-  );
-
-  const handleSetMusicFolder = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-
-      let updatedFilters = null;
-      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
-        updatedFilters = setFilter({ musicFolderId: undefined });
-      } else {
-        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
-      }
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, page.filter.musicFolderId, setFilter],
-  );
-
-  const handleToggleSortOrder = useCallback(() => {
-    const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-    const updatedFilters = setFilter({ sortOrder: newSortOrder });
-    handleFilterChange(updatedFilters);
-  }, [page.filter.sortOrder, handleFilterChange, setFilter]);
-
-  const handleSetViewType = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      const display = e.currentTarget.value as ListDisplayType;
-      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
-
-      if (display === ListDisplayType.TABLE) {
-        tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
-        setPagination({ currentPage: 0 });
-      } else if (display === ListDisplayType.TABLE_PAGINATED) {
-        setPagination({ currentPage: 0 });
-      }
-    },
-    [page, setPage, setPagination, tableRef],
-  );
-
   const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
     const previousSearchTerm = page.filter.searchTerm;
     const searchTerm = e.target.value === '' ? undefined : e.target.value;
@@ -227,45 +91,7 @@ export const SongListHeader = ({
     if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
   }, 500);
 
-  const handleTableColumns = (values: TableColumn[]) => {
+  const playButtonBehavior = usePlayButtonBehavior();
-    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 };
-
-      return setTable({ columns: [...existingColumns, newColumn] });
-    }
-
-    // If removing a column
-    const removed = existingColumns.filter((column) => !values.includes(column.column));
-    const newColumns = existingColumns.filter((column) => !removed.includes(column));
-
-    return setTable({ columns: newColumns });
-  };
-
-  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
-    setTable({ autoFit: e.currentTarget.checked });
-
-    if (e.currentTarget.checked) {
-      tableRef.current?.api.sizeColumnsToFit();
-    }
-  };
-
-  const handleRowHeight = (e: number) => {
-    setTable({ rowHeight: e });
-  };
-
-  const handleRefresh = () => {
-    queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
-    handleFilterChange(page.filter);
-  };
 
   const handlePlay = async (play: Play) => {
     if (!itemCount || itemCount === 0) return;
@@ -280,218 +106,53 @@ export const SongListHeader = ({
     });
   };
 
-  const handleOpenFiltersModal = () => {
-    openModal({
-      children: (
-        <>
-          {server?.type === ServerType.NAVIDROME ? (
-            <NavidromeSongFilters handleFilterChange={handleFilterChange} />
-          ) : (
-            <JellyfinSongFilters handleFilterChange={handleFilterChange} />
-          )}
-        </>
-      ),
-      title: 'Song Filters',
-    });
-  };
-
   return (
-    <PageHeader p="1rem">
+    <Stack
-      <Flex
       ref={cq.ref}
-        direction="row"
+      spacing={0}
-        justify="space-between"
     >
+      <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
-          align="center"
+          justify="space-between"
-          gap="md"
+          py="1rem"
-          justify="center"
         >
-          <DropdownMenu position="bottom-start">
+          <LibraryHeaderBar>
-            <DropdownMenu.Target>
+            <Group>
-              <Button
+              <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-                compact
+              <LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
-                rightIcon={<RiArrowDownSLine size={15} />}
+            </Group>
-                size="xl"
+            <Paper
-                sx={{ paddingLeft: 0, paddingRight: 0 }}
+              fw="600"
-                variant="subtle"
-              >
-                <Group noWrap>
-                  <TextTitle
-                    maw="20vw"
-                    order={2}
-                    overflow="hidden"
-                    weight={700}
-                  >
-                    {title || 'Tracks'}
-                  </TextTitle>
-                  <Badge
               px="1rem"
-                    radius="xl"
+              py="0.3rem"
-                    size="xl"
+              radius="sm"
             >
               {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-                  </Badge>
+            </Paper>
-                </Group>
+          </LibraryHeaderBar>
-              </Button>
+          <Group>
-            </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 || 0}
-                  label={null}
-                  max={100}
-                  min={25}
-                  onChangeEnd={handleRowHeight}
-                />
-              </DropdownMenu.Item>
-              <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 === page.filter.sortBy}
-                  value={filter.value}
-                  onClick={handleSetSortBy}
-                >
-                  {filter.name}
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <Button
-            compact
-            fw="600"
-            variant="subtle"
-            onClick={handleToggleSortOrder}
-          >
-            {cq.isMd ? (
-              sortOrderLabel
-            ) : (
-              <>
-                {page.filter.sortOrder === SortOrder.ASC ? (
-                  <RiSortAsc size={15} />
-                ) : (
-                  <RiSortDesc size={15} />
-                )}
-              </>
-            )}
-          </Button>
-          {server?.type === ServerType.JELLYFIN && (
-            <DropdownMenu position="bottom-start">
-              <DropdownMenu.Target>
-                <Button
-                  compact
-                  fw="600"
-                  variant="subtle"
-                >
-                  {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
-                </Button>
-              </DropdownMenu.Target>
-              <DropdownMenu.Dropdown>
-                {musicFoldersQuery.data?.map((folder) => (
-                  <DropdownMenu.Item
-                    key={`musicFolder-${folder.id}`}
-                    $isActive={page.filter.musicFolderId === folder.id}
-                    value={folder.id}
-                    onClick={handleSetMusicFolder}
-                  >
-                    {folder.name}
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Dropdown>
-            </DropdownMenu>
-          )}
-          <Button
-            compact
-            fw="600"
-            variant="subtle"
-            onClick={handleOpenFiltersModal}
-          >
-            {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
-          </Button>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                fw="600"
-                variant="subtle"
-              >
-                <RiMoreFill size={15} />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
-                Add to queue
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
-                Add to queue next
-              </DropdownMenu.Item>
-              <DropdownMenu.Divider />
-              <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-        <Flex gap="md">
             <SearchInput
               defaultValue={page.filter.searchTerm}
-            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
+              openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
               onChange={handleSearch}
             />
-        </Flex>
+          </Group>
         </Flex>
       </PageHeader>
+      <Paper
+        p="1rem"
+        shadow="xl"
+        sx={{
+          boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
+          zIndex: 100,
+        }}
+      >
+        <SongListHeaderFilters
+          customFilters={customFilters}
+          itemCount={itemCount}
+          tableRef={tableRef}
+        />
+      </Paper>
+    </Stack>
   );
 };