Add album artist list route

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

@@ -0,0 +1,371 @@
+import {
+  ALBUMARTIST_CARD_ROWS,
+  getColumnDefs,
+  TablePagination,
+  VirtualGridAutoSizerContainer,
+  VirtualInfiniteGrid,
+  VirtualInfiniteGridRef,
+  VirtualTable,
+} from '/@/renderer/components';
+import { AppRoute } from '/@/renderer/router/routes';
+import { ListDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { MutableRefObject, useCallback, useMemo } from 'react';
+import { ListOnScrollProps } from 'react-window';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AlbumArtist, AlbumArtistListSort } from '/@/renderer/api/types';
+import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  useCurrentServer,
+  useAlbumArtistListStore,
+  useAlbumArtistTablePagination,
+  useSetAlbumArtistStore,
+  useSetAlbumArtistTable,
+  useSetAlbumArtistTablePagination,
+} from '/@/renderer/store';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import {
+  BodyScrollEvent,
+  CellContextMenuEvent,
+  ColDef,
+  GridReadyEvent,
+  IDatasource,
+  PaginationChangedEvent,
+  RowDoubleClickedEvent,
+} from '@ag-grid-community/core';
+import { AnimatePresence } from 'framer-motion';
+import debounce from 'lodash/debounce';
+import { openContextMenu } from '/@/renderer/features/context-menu';
+import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import sortBy from 'lodash/sortBy';
+import { generatePath, useNavigate } from 'react-router';
+import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
+
+interface AlbumArtistListContentProps {
+  gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListContentProps) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const server = useCurrentServer();
+  const page = useAlbumArtistListStore();
+  const setPage = useSetAlbumArtistStore();
+  const handlePlayQueueAdd = useHandlePlayQueueAdd();
+
+  const pagination = useAlbumArtistTablePagination();
+  const setPagination = useSetAlbumArtistTablePagination();
+  const setTable = useSetAlbumArtistTable();
+
+  const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
+
+  const checkAlbumArtistList = useAlbumArtistList(
+    {
+      limit: 1,
+      startIndex: 0,
+      ...page.filter,
+    },
+    {
+      cacheTime: Infinity,
+      staleTime: 60 * 1000 * 5,
+    },
+  );
+
+  const columnDefs: ColDef[] = useMemo(
+    () => getColumnDefs(page.table.columns),
+    [page.table.columns],
+  );
+
+  const defaultColumnDefs: ColDef = useMemo(() => {
+    return {
+      lockPinned: true,
+      lockVisible: true,
+      resizable: true,
+    };
+  }, []);
+
+  const onTableReady = useCallback(
+    (params: GridReadyEvent) => {
+      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,
+            ...page.filter,
+          });
+
+          const albumArtistsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+            api.controller.getAlbumArtistList({
+              query: {
+                limit,
+                startIndex,
+                ...page.filter,
+              },
+              server,
+              signal,
+            }),
+          );
+
+          const albums = api.normalize.albumArtistList(albumArtistsRes, server);
+          params.successCallback(
+            albums?.items || [],
+            albumArtistsRes?.totalRecordCount || undefined,
+          );
+        },
+        rowCount: undefined,
+      };
+      params.api.setDatasource(dataSource);
+      // params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
+    },
+    [page.filter, queryClient, server],
+  );
+
+  const onTablePaginationChanged = useCallback(
+    (event: PaginationChangedEvent) => {
+      if (!isPaginationEnabled || !event.api) return;
+
+      // Scroll to top of page on pagination change
+      const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+      event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+
+      setPagination({
+        itemsPerPage: event.api.paginationGetPageSize(),
+        totalItems: event.api.paginationGetRowCount(),
+        totalPages: event.api.paginationGetTotalPages() + 1,
+      });
+    },
+    [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
+  );
+
+  const handleTableSizeChange = () => {
+    if (page.table.autoFit) {
+      tableRef?.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handleTableColumnChange = useCallback(() => {
+    const { columnApi } = tableRef?.current || {};
+    const columnsOrder = columnApi?.getAllGridColumns();
+
+    if (!columnsOrder) return;
+
+    const columnsInSettings = page.table.columns;
+    const updatedColumns = [];
+    for (const column of columnsOrder) {
+      const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
+
+      if (columnInSettings) {
+        updatedColumns.push({
+          ...columnInSettings,
+          ...(!page.table.autoFit && {
+            width: column.getColDef().width,
+          }),
+        });
+      }
+    }
+
+    setTable({ columns: updatedColumns });
+  }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
+
+  const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
+
+  const handleTableScroll = (e: BodyScrollEvent) => {
+    const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
+    setTable({ scrollOffset });
+  };
+
+  const fetch = useCallback(
+    async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
+      const queryKey = queryKeys.albumArtists.list(server?.id || '', {
+        limit,
+        startIndex,
+        ...page.filter,
+      });
+
+      const albumArtistsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+        api.controller.getAlbumArtistList({
+          query: {
+            limit,
+            startIndex,
+            ...page.filter,
+          },
+          server,
+          signal,
+        }),
+      );
+
+      return api.normalize.albumArtistList(albumArtistsRes, server);
+    },
+    [page.filter, queryClient, server],
+  );
+
+  const handleGridScroll = useCallback(
+    (e: ListOnScrollProps) => {
+      setPage({
+        list: {
+          ...page,
+          grid: {
+            ...page.grid,
+            scrollOffset: e.scrollOffset,
+          },
+        },
+      });
+    },
+    [page, setPage],
+  );
+
+  const cardRows = useMemo(() => {
+    const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
+
+    switch (page.filter.sortBy) {
+      case AlbumArtistListSort.DURATION:
+        rows.push(ALBUMARTIST_CARD_ROWS.duration);
+        break;
+      case AlbumArtistListSort.FAVORITED:
+        break;
+      case AlbumArtistListSort.NAME:
+        break;
+      case AlbumArtistListSort.ALBUM_COUNT:
+        rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
+        break;
+      case AlbumArtistListSort.PLAY_COUNT:
+        rows.push(ALBUMARTIST_CARD_ROWS.playCount);
+        break;
+      case AlbumArtistListSort.RANDOM:
+        break;
+      case AlbumArtistListSort.RATING:
+        rows.push(ALBUMARTIST_CARD_ROWS.rating);
+        break;
+      case AlbumArtistListSort.RECENTLY_ADDED:
+        break;
+      case AlbumArtistListSort.SONG_COUNT:
+        rows.push(ALBUMARTIST_CARD_ROWS.songCount);
+        break;
+      case AlbumArtistListSort.RELEASE_DATE:
+        break;
+    }
+
+    return rows;
+  }, [page.filter.sortBy]);
+
+  const handleContextMenu = (e: CellContextMenuEvent) => {
+    if (!e.event) return;
+    const clickEvent = e.event as MouseEvent;
+    clickEvent.preventDefault();
+
+    const selectedNodes = e.api.getSelectedNodes();
+    const selectedIds = selectedNodes.map((node) => node.data.id);
+    let selectedRows = sortBy(selectedNodes, ['rowIndex']).map((node) => node.data);
+
+    if (!selectedIds.includes(e.data.id)) {
+      e.api.deselectAll();
+      e.node.setSelected(true);
+      selectedRows = [e.data];
+    }
+
+    openContextMenu({
+      data: selectedRows,
+      menuItems: ALBUM_CONTEXT_MENU_ITEMS,
+      type: LibraryItem.ALBUM,
+      xPos: clickEvent.clientX,
+      yPos: clickEvent.clientY,
+    });
+  };
+
+  const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
+    navigate(generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, { albumArtistId: e.data.id }));
+  };
+
+  return (
+    <>
+      <VirtualGridAutoSizerContainer>
+        {page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
+          <AutoSizer>
+            {({ height, width }) => (
+              <VirtualInfiniteGrid
+                key={`albumartist-list-${server?.id}-${page.display}`}
+                ref={gridRef}
+                cardRows={cardRows}
+                display={page.display || ListDisplayType.CARD}
+                fetchFn={fetch}
+                handlePlayQueueAdd={handlePlayQueueAdd}
+                height={height}
+                initialScrollOffset={page?.grid.scrollOffset || 0}
+                itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
+                itemGap={20}
+                itemSize={150 + page.grid?.size}
+                itemType={LibraryItem.ALBUM_ARTIST}
+                minimumBatchSize={40}
+                route={{
+                  route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+                  slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+                }}
+                width={width}
+                onScroll={handleGridScroll}
+              />
+            )}
+          </AutoSizer>
+        ) : (
+          <VirtualTable
+            // https://github.com/ag-grid/ag-grid/issues/5284
+            // Key is used to force remount of table when display, rowHeight, or server changes
+            key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
+            ref={tableRef}
+            alwaysShowHorizontalScroll
+            animateRows
+            maintainColumnOrder
+            suppressCopyRowsToClipboard
+            suppressMoveWhenRowDragging
+            suppressPaginationPanel
+            suppressRowDrag
+            suppressScrollOnNewData
+            blockLoadDebounceMillis={200}
+            cacheBlockSize={500}
+            cacheOverflowSize={1}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColumnDefs}
+            enableCellChangeFlash={false}
+            getRowId={(data) => data.data.id}
+            infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 100}
+            pagination={isPaginationEnabled}
+            paginationAutoPageSize={isPaginationEnabled}
+            paginationPageSize={page.table.pagination.itemsPerPage || 100}
+            rowBuffer={20}
+            rowHeight={page.table.rowHeight || 40}
+            rowModelType="infinite"
+            rowSelection="multiple"
+            onBodyScrollEnd={handleTableScroll}
+            onCellContextMenu={handleContextMenu}
+            onColumnMoved={handleTableColumnChange}
+            onColumnResized={debouncedTableColumnChange}
+            onGridReady={onTableReady}
+            onGridSizeChanged={handleTableSizeChange}
+            onPaginationChanged={onTablePaginationChanged}
+            onRowDoubleClicked={handleRowDoubleClick}
+          />
+        )}
+      </VirtualGridAutoSizerContainer>
+      {isPaginationEnabled && (
+        <AnimatePresence
+          presenceAffectsLayout
+          initial={false}
+          mode="wait"
+        >
+          {page.display === ListDisplayType.TABLE_PAGINATED && (
+            <TablePagination
+              pagination={pagination}
+              setPagination={setPagination}
+              tableRef={tableRef}
+            />
+          )}
+        </AnimatePresence>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,502 @@
+import type { ChangeEvent, MouseEvent, 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,
+  RiFilter3Line,
+  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,
+  Button,
+  DropdownMenu,
+  MultiSelect,
+  PageHeader,
+  Popover,
+  SearchInput,
+  Slider,
+  Switch,
+  Text,
+  TextTitle,
+  VirtualInfiniteGridRef,
+} from '/@/renderer/components';
+import { useMusicFolders } 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';
+
+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>;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistListHeader = ({ gridRef, tableRef }: 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) => {
+      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,
+        }),
+      );
+
+      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,
+              }),
+            );
+
+            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 handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
+    const previousSearchTerm = page.filter.searchTerm;
+    const searchTerm = e.target.value === '' ? undefined : e.target.value;
+    const updatedFilters = setFilter({ searchTerm });
+    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();
+    }
+  };
+
+  return (
+    <PageHeader>
+      <HeaderItems ref={cq.ref}>
+        <Flex
+          align="center"
+          gap="md"
+          justify="center"
+        >
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                px={0}
+                rightIcon={<RiArrowDownSLine size={15} />}
+                size="xl"
+                variant="subtle"
+              >
+                <TextTitle
+                  fw="bold"
+                  order={3}
+                >
+                  Album Artists
+                </TextTitle>
+              </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>
+          <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>
+          )}
+          <Popover position="bottom-start">
+            <Popover.Target>
+              <Button
+                compact
+                fw="600"
+                variant="subtle"
+              >
+                {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
+              </Button>
+            </Popover.Target>
+            <Popover.Dropdown>
+              {/* {server?.type === ServerType.NAVIDROME ? (
+                <NavidromeAlbumFilters handleFilterChange={handleFilterChange} />
+              ) : (
+                <JellyfinAlbumFilters handleFilterChange={handleFilterChange} />
+              )} */}
+            </Popover.Dropdown>
+          </Popover>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                variant="subtle"
+              >
+                <RiMoreFill size={15} />
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Item disabled>Play</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Flex>
+        <Flex gap="md">
+          <SearchInput
+            defaultValue={page.filter.searchTerm}
+            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
+            onChange={handleSearch}
+          />
+        </Flex>
+      </HeaderItems>
+    </PageHeader>
+  );
+};