Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -1,21 +1,23 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { Flex, Group, Stack } from '@mantine/core';
-import { closeAllModals, openModal } from '@mantine/modals';
 import debounce from 'lodash/debounce';
 import { ChangeEvent, MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiFileAddFill } from 'react-icons/ri';
 
-import { Button, PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
-import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { SearchInput } from '/@/renderer/features/shared/components/search-input';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 import { PlaylistListFilter, useCurrentServer } from '/@/renderer/store';
-import { LibraryItem, PlaylistListQuery, ServerType } from '/@/shared/types/domain-types';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Group } from '/@/shared/components/group/group';
+import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
+import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem, PlaylistListQuery } from '/@/shared/types/domain-types';
 
 interface PlaylistListHeaderProps {
     gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
@@ -28,17 +30,6 @@ export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistLis
     const cq = useContainerQuery();
     const server = useCurrentServer();
 
-    const handleCreatePlaylistModal = () => {
-        openModal({
-            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
-            onClose: () => {
-                tableRef?.current?.api?.purgeInfiniteCache();
-            },
-            size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
-            title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }),
-        });
-    };
-
     const { filter, refresh, search } = useDisplayRefresh<PlaylistListQuery>({
         gridRef,
         itemCount,
@@ -54,10 +45,10 @@ export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistLis
 
     return (
         <Stack
+            gap={0}
             ref={cq.ref}
-            spacing={0}
         >
-            <PageHeader backgroundColor="var(--titlebar-bg)">
+            <PageHeader>
                 <Flex
                     align="center"
                     justify="space-between"
@@ -67,44 +58,28 @@ export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistLis
                         <LibraryHeaderBar.Title>
                             {t('page.playlistList.title', { postProcess: 'titleCase' })}
                         </LibraryHeaderBar.Title>
-                        <Paper
-                            fw="600"
-                            px="1rem"
-                            py="0.3rem"
-                            radius="sm"
-                        >
+                        <Badge>
                             {itemCount === null || itemCount === undefined ? (
                                 <SpinnerIcon />
                             ) : (
                                 itemCount
                             )}
-                        </Paper>
-                        <Button
-                            onClick={handleCreatePlaylistModal}
-                            tooltip={{
-                                label: t('action.createPlaylist', { postProcess: 'sentenceCase' }),
-                                openDelay: 500,
-                            }}
-                            variant="filled"
-                        >
-                            <RiFileAddFill />
-                        </Button>
+                        </Badge>
                     </LibraryHeaderBar>
                     <Group>
                         <SearchInput
                             defaultValue={filter.searchTerm}
                             onChange={handleSearch}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>
             </PageHeader>
-            <Paper p="1rem">
+            <FilterBar>
                 <PlaylistListHeaderFilters
                     gridRef={gridRef}
                     tableRef={tableRef}
                 />
-            </Paper>
+            </FilterBar>
         </Stack>
     );
 };