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/components/badge/index.tsx

@@ -10,7 +10,6 @@ const StyledBadge = styled(MantineBadge)<BadgeProps>`
   }
 
   .mantine-Badge-inner {
-    padding: 0 0.5rem;
     color: var(--badge-fg);
   }
 `;

src/renderer/components/button/index.tsx

@@ -92,7 +92,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     opacity: 0.6;
   }
 
-  &:hover {
+  &:not([data-disabled])&:hover {
     color: ${(props) => {
       switch (props.variant) {
         case 'default':
@@ -100,7 +100,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
         case 'filled':
           return 'var(--btn-primary-fg-hover)';
         case 'subtle':
-          return 'var(--btn-subtle-fg-hover)';
+          return 'var(--btn-subtle-fg-hover) !important';
         default:
           return '';
       }
@@ -134,7 +134,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }
   }
 
-  &:focus-visible {
+  &:not([data-disabled])&:focus-visible {
     color: ${(props) => {
       switch (props.variant) {
         case 'default':

src/renderer/components/dropdown-menu/index.tsx

@@ -63,7 +63,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   & .mantine-Menu-itemLabel {
     color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
     font-weight: 500;
-    font-size: 1em;
   }
 
   & .mantine-Menu-itemRightSection {

src/renderer/components/feature-carousel/index.tsx

@@ -27,8 +27,7 @@ const Grid = styled.div`
   grid-auto-columns: 1fr;
   grid-template-areas: 'image info';
   grid-template-rows: 1fr;
-  grid-template-columns: 225px 1fr;
-  gap: 0.5rem;
+  grid-template-columns: 200px 1fr;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -152,16 +151,27 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                 />
               </ImageColumn>
               <InfoColumn>
-                <Stack sx={{ width: '100%' }}>
+                <Stack
+                  spacing="md"
+                  sx={{ width: '100%' }}
+                >
                   <TitleWrapper>
-                    <TextTitle fw="bold">{currentItem?.name}</TextTitle>
+                    <TextTitle
+                      lh="4rem"
+                      lineClamp={2}
+                      order={1}
+                      sx={{ fontSize: '4rem' }}
+                      weight={900}
+                    >
+                      {currentItem?.name}
+                    </TextTitle>
                   </TitleWrapper>
                   <TitleWrapper>
                     {currentItem?.albumArtists.map((artist) => (
                       <TextTitle
                         key={`carousel-artist-${artist.id}`}
-                        fw="600"
-                        order={3}
+                        order={2}
+                        weight={600}
                       >
                         {artist.name}
                       </TextTitle>
@@ -169,10 +179,15 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                   </TitleWrapper>
                   <Group>
                     {currentItem?.genres?.map((genre) => (
-                      <Badge key={`carousel-genre-${genre.id}`}>{genre.name}</Badge>
+                      <Badge
+                        key={`carousel-genre-${genre.id}`}
+                        size="lg"
+                      >
+                        {genre.name}
+                      </Badge>
                     ))}
-                    <Badge>{currentItem?.releaseYear}</Badge>
-                    <Badge>{currentItem?.songCount} tracks</Badge>
+                    <Badge size="lg">{currentItem?.releaseYear}</Badge>
+                    <Badge size="lg">{currentItem?.songCount} tracks</Badge>
                   </Group>
                 </Stack>
               </InfoColumn>
@@ -187,25 +202,25 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
       </AnimatePresence>
       <Group
         spacing="xs"
-        sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }}
+        sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
       >
         <Button
           disabled={itemIndex === 0}
-          px="lg"
           radius={100}
-          variant="subtle"
+          size="md"
+          variant="default"
           onClick={handlePrevious}
         >
-          <RiArrowLeftSLine size={15} />
+          <RiArrowLeftSLine size="2rem" />
         </Button>
         <Button
           disabled={itemIndex === (data?.length || 1) - 1}
-          px="lg"
           radius={100}
-          variant="subtle"
+          size="md"
+          variant="default"
           onClick={handleNext}
         >
-          <RiArrowRightSLine size={15} />
+          <RiArrowRightSLine size="2rem" />
         </Button>
       </Group>
     </Wrapper>

src/renderer/components/grid-carousel/index.tsx

@@ -199,10 +199,11 @@ const Title = ({ children }: TitleProps) => {
     <Group position="apart">
       {children}
       {showPaginationButtons && (
-        <Group>
+        <Group spacing="sm">
           <Button
             compact
             disabled={!pagination?.hasPreviousPage}
+            size="md"
             variant="default"
             onClick={handlePreviousPage}
           >
@@ -210,6 +211,7 @@ const Title = ({ children }: TitleProps) => {
           </Button>
           <Button
             compact
+            size="md"
             variant="default"
             onClick={handleNextPage}
           >

src/renderer/components/modal/index.tsx

@@ -21,8 +21,6 @@ export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
 export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
   return (
     <MantineModal
-      overlayBlur={2}
-      overlayOpacity={0.2}
       {...rest}
       onClose={handlers.close}
     >

src/renderer/components/page-header/index.tsx

@@ -11,7 +11,7 @@ const Container = styled(motion(Flex))<{
   position: ${(props) => props.position || 'relative'};
   z-index: 2000;
   width: 100%;
-  height: ${(props) => props.height || '60px'};
+  height: ${(props) => props.height || '65px'};
 `;
 
 const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`

src/renderer/components/search-input/index.tsx

@@ -44,6 +44,7 @@ export const SearchInput = ({
       ref={mergedRef}
       {...props}
       icon={showIcon && <RiSearchLine size={15} />}
+      size="md"
       styles={{
         icon: { svg: { fill: 'var(--btn-default-fg)' } },
         input: {

src/renderer/components/text-title/index.tsx

@@ -28,6 +28,10 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
     color: ${(props) => props.$link && 'var(--main-fg)'};
     text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
   }
+
+  h1 {
+    font-size: 4rem;
+  }
 `;
 
 const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {

src/renderer/components/toast/index.tsx

@@ -34,7 +34,6 @@ const showToast = ({ type, ...props }: NotificationProps) => {
 
   return showNotification({
     autoClose: defaultDuration,
-    disallowClose: true,
     styles: () => ({
       closeButton: {},
       description: {

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -22,6 +22,7 @@ const CellContainer = styled(motion.div)<{ height: number }>`
   width: 100%;
   max-width: 100%;
   height: 100%;
+  letter-spacing: 0.5px;
 `;
 
 const ImageWrapper = styled.div`

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -25,6 +25,7 @@ export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' |
       : 'flex-start'};
   width: 100%;
   height: 100%;
+  letter-spacing: 0.5px;
 `;
 
 type Options = {

src/renderer/components/virtual-table/headers/generic-table-header.tsx

@@ -77,9 +77,9 @@ export const GenericTableHeader = (
 
   return (
     <TextHeaderWrapper
-      fw="500"
       overflow="hidden"
       position={position}
+      weight={500}
     >
       {children || displayName}
     </TextHeaderWrapper>

src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx

@@ -6,7 +6,7 @@ export const useFixedTableHeader = () => {
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
 
   const isNotPastTableIntersection = useInView(intersectRef, {
-    margin: '-63px 0px 0px 0px',
+    margin: '-68px 0px 0px 0px',
   });
 
   const tableInView = useInView(tableContainerRef, {