Migrate to mantine v6 (#15)

* Add letter spacing to cell text

* Set window control height in px

* Add temp unused routes

* Migrate text title font weights

* Bump mantine to v6 alpha

* Migrate modals / notifications

* Increase header bar to 65px

* Adjust play button props

* Migrate various components

* Migrate various pages and root styles

* Adjust default badge padding

* Fix sidebar spacing

* Fix list header badges

* Adjust default theme

src/renderer/features/albums/components/album-detail-content.tsx

@@ -126,8 +126,8 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           More from this artist
         </TextTitle>
@@ -189,7 +189,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
           ref={showGenres ? null : intersectRef}
           className="test"
           py="1rem"
-          spacing="lg"
+          spacing="md"
         >
           <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
           <Group spacing="xs">

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

@@ -47,7 +47,7 @@ export const AlbumDetailHeader = forwardRef(
           item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
           title={detailQuery?.data?.name || ''}
         >
-          <Stack mt="1rem">
+          <Stack spacing="sm">
             <Group>
               {metadataItems.map((item, index) => (
                 <Fragment key={`item-${item.id}-${index}`}>
@@ -79,10 +79,10 @@ export const AlbumDetailHeader = forwardRef(
                   <Text
                     $link
                     component={Link}
-                    fw="600"
                     to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                       albumArtistId: artist.id,
                     })}
+                    weight={600}
                   >
                     {artist.name}
                   </Text>

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

@@ -415,16 +415,17 @@ export const AlbumListHeader = ({
               >
                 <Group noWrap>
                   <TextTitle
-                    fw="bold"
                     maw="20vw"
-                    order={3}
+                    order={2}
                     overflow="hidden"
+                    weight={700}
                   >
                     {title || 'Albums'}
                   </TextTitle>
                   <Badge
+                    px="1rem"
                     radius="xl"
-                    size="lg"
+                    size="xl"
                   >
                     {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
                   </Badge>
@@ -510,7 +511,7 @@ export const AlbumListHeader = ({
             <DropdownMenu.Target>
               <Button
                 compact
-                fw="600"
+                fw={600}
                 variant="subtle"
               >
                 {sortByLabel}
@@ -531,7 +532,7 @@ export const AlbumListHeader = ({
           </DropdownMenu>
           <Button
             compact
-            fw="600"
+            fw={600}
             variant="subtle"
             onClick={handleToggleSortOrder}
           >
@@ -552,7 +553,7 @@ export const AlbumListHeader = ({
               <DropdownMenu.Target>
                 <Button
                   compact
-                  fw="600"
+                  fw={600}
                   variant="subtle"
                 >
                   {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
@@ -574,7 +575,7 @@ export const AlbumListHeader = ({
           )}
           <Button
             compact
-            fw="600"
+            fw={600}
             variant="subtle"
             onClick={handleOpenFiltersModal}
           >

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -1,5 +1,5 @@
 import { NativeScrollArea } from '/@/renderer/components';
-import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { AnimatedPage, LibraryHeaderBar, PlayButton } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
@@ -42,7 +42,7 @@ const AlbumDetailRoute = () => {
           backgroundColor: background,
           children: (
             <LibraryHeaderBar>
-              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+              <PlayButton onClick={handlePlay} />
               <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
             </LibraryHeaderBar>
           ),