Update playlist headers

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

@@ -1,12 +1,10 @@
 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 { Flex, Group, Stack } from '@mantine/core';
+import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
 import {
-    RiSortAsc,
-    RiSortDesc,
     RiMoreFill,
     RiSettings3Fill,
     RiPlayFill,
@@ -47,6 +45,7 @@ import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
 import { openUpdatePlaylistModal } from '/@/renderer/features/playlists/components/update-playlist-form';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
 import { AppRoute } from '/@/renderer/router/routes';
+import { OrderToggleButton } from '/@/renderer/features/shared';
 
 const FILTERS = {
     jellyfin: [
@@ -93,11 +92,6 @@ const FILTERS = {
     ],
 };
 
-const ORDER = [
-    { name: 'Ascending', value: SortOrder.ASC },
-    { name: 'Descending', value: SortOrder.DESC },
-];
-
 interface PlaylistDetailSongListHeaderFiltersProps {
     handleToggleShowQueryBuilder: () => void;
     tableRef: MutableRefObject<AgGridReactType | null>;
@@ -135,8 +129,6 @@ export const PlaylistDetailSongListHeaderFilters = ({
                 ?.name) ||
         'Unknown';
 
-    const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
-
     const handleItemSize = (e: number) => {
         setTable({ rowHeight: e });
     };
@@ -331,25 +323,12 @@ export const PlaylistDetailSongListHeaderFilters = ({
                         ))}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
-                <Button
+                <Divider orientation="vertical" />
-                    compact
+                <OrderToggleButton
-                    fw="600"
+                    sortOrder={filters.sortOrder || SortOrder.ASC}
-                    size="md"
+                    onToggle={handleToggleSortOrder}
-                    variant="subtle"
+                />
-                    onClick={handleToggleSortOrder}
+                <Divider orientation="vertical" />
-                >
-                    {cq.isSm ? (
-                        sortOrderLabel
-                    ) : (
-                        <>
-                            {filters.sortOrder === SortOrder.ASC ? (
-                                <RiSortAsc size="1.3rem" />
-                            ) : (
-                                <RiSortDesc size="1.3rem" />
-                            )}
-                        </>
-                    )}
-                </Button>
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button

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

@@ -107,7 +107,6 @@ export const PlaylistListHeaderFilters = ({
     const handleFilterChange = useCallback(
         async (filters?: PlaylistListFilter) => {
             if (isGrid) {
-                console.log('filter change', filters);
                 gridRef.current?.scrollTo(0);
                 gridRef.current?.resetLoadMoreItemsCache();
                 const data = await fetch(0, 200, filters || page.filter);

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

@@ -1,7 +1,7 @@
+import { MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Flex, Stack } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import { MutableRefObject } from 'react';
 import { PageHeader, SpinnerIcon, Paper, Button } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
@@ -10,6 +10,7 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useCurrentServer } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/types';
+import { RiFileAddFill } from 'react-icons/ri';
 
 interface PlaylistListHeaderProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -57,13 +58,14 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
                                 itemCount
                             )}
                         </Paper>
-                    </LibraryHeaderBar>
                         <Button
+                            tooltip={{ label: 'Create playlist', openDelay: 500 }}
                             variant="filled"
                             onClick={handleCreatePlaylistModal}
                         >
-                        Create
+                            <RiFileAddFill />
                         </Button>
+                    </LibraryHeaderBar>
                 </Flex>
             </PageHeader>
             <Paper p="1rem">