Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -1,18 +1,21 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { type ChangeEvent, type MutableRefObject, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { PageHeader, SearchInput } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 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 { AlbumListFilter, useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
 import { titleCase } from '/@/renderer/utils';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Group } from '/@/shared/components/group/group';
+import { Stack } from '/@/shared/components/stack/stack';
 import { AlbumListQuery, LibraryItem } from '/@/shared/types/domain-types';
 
 interface AlbumListHeaderProps {
@@ -59,10 +62,10 @@ export const AlbumListHeader = ({
 
     return (
         <Stack
+            gap={0}
             ref={cq.ref}
-            spacing={0}
         >
-            <PageHeader backgroundColor="var(--titlebar-bg)">
+            <PageHeader backgroundColor="var(--theme-colors-background)">
                 <Flex
                     justify="space-between"
                     w="100%"
@@ -85,7 +88,6 @@ export const AlbumListHeader = ({
                         <SearchInput
                             defaultValue={filter.searchTerm}
                             onChange={handleSearch}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>