Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -1,17 +1,19 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { Stack } from '@mantine/core';
 import { MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
-import { Badge, PageHeader, Paper, SpinnerIcon } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
-import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useCurrentServer } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { Badge } from '/@/shared/components/badge/badge';
+import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
+import { Stack } from '/@/shared/components/stack/stack';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
@@ -45,32 +47,27 @@ export const PlaylistDetailSongListHeader = ({
     const isSmartPlaylist = detailQuery?.data?.rules;
 
     return (
-        <Stack spacing={0}>
-            <PageHeader backgroundColor="var(--titlebar-bg)">
+        <Stack gap={0}>
+            <PageHeader>
                 <LibraryHeaderBar>
                     <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
                     <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
-                    <Paper
-                        fw="600"
-                        px="1rem"
-                        py="0.3rem"
-                        radius="sm"
-                    >
+                    <Badge>
                         {itemCount === null || itemCount === undefined ? (
                             <SpinnerIcon />
                         ) : (
                             itemCount
                         )}
-                    </Paper>
+                    </Badge>
                     {isSmartPlaylist && <Badge size="lg">{t('entity.smartPlaylist')}</Badge>}
                 </LibraryHeaderBar>
             </PageHeader>
-            <Paper p="1rem">
+            <FilterBar>
                 <PlaylistDetailSongListHeaderFilters
                     handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
                     tableRef={tableRef}
                 />
-            </Paper>
+            </FilterBar>
         </Stack>
     );
 };