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/shared/components/library-header-bar.tsx

@@ -14,7 +14,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
       align="center"
       h="100%"
       px="1rem"
-      spacing="xl"
+      spacing="md"
     >
       {children}
     </Group>
@@ -28,9 +28,9 @@ interface TitleProps {
 const Title = ({ children }: TitleProps) => {
   return (
     <TextTitle
-      fw="bold"
       order={2}
       overflow="hidden"
+      weight={700}
     >
       {children}
     </TextTitle>
@@ -39,14 +39,13 @@ const Title = ({ children }: TitleProps) => {
 
 interface PlayButtonProps {
   onClick: () => void;
-  size?: number;
 }
 
-const PlayButton = ({ size, onClick }: PlayButtonProps) => {
+const PlayButton = ({ onClick }: PlayButtonProps) => {
   return (
     <PlayBtn
-      h={size || 45}
-      w={size || 45}
+      h="50px"
+      w="50px"
       onClick={onClick}
     />
   );

src/renderer/features/shared/components/library-header.tsx

@@ -134,20 +134,19 @@ export const LibraryHeader = forwardRef(
             <Text
               $link
               component={Link}
-              fw="600"
-              sx={{ textTransform: 'uppercase' }}
               to={item.route}
+              tt="uppercase"
+              weight={600}
             >
               {item.type}
             </Text>
           </Group>
           <TextTitle
-            fw="900"
-            lh="1.12"
+            lh="5rem"
             lineClamp={2}
             overflow="hidden"
-            pb=".06em"
             sx={{ fontSize: titleSize, overflow: 'hidden' }}
+            weight={900}
           >
             {title}
           </TextTitle>

src/renderer/features/shared/components/play-button.tsx

@@ -17,9 +17,9 @@ const MotionButton = styled(motion(_Button))`
 export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
   return (
     <MotionButton
-      h={50}
+      h="50px"
       variant="filled"
-      w={50}
+      w="50px"
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.95 }}
       {...props}