Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -1,4 +1,3 @@
-import { Group, Stack } from '@mantine/core';
 import throttle from 'lodash/throttle';
 import {
     isValidElement,
@@ -11,19 +10,20 @@ import {
     useRef,
     useState,
 } from 'react';
-import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
-import styled from 'styled-components';
 import { SwiperOptions, Virtual } from 'swiper';
 import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Swiper as SwiperCore } from 'swiper/types';
 
-import { Button } from '/@/renderer/components/button';
 import { PosterCard } from '/@/renderer/components/card/poster-card';
-import { TextTitle } from '/@/renderer/components/text-title';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { usePlayButtonBehavior } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { TextTitle } from '/@/shared/components/text-title/text-title';
 import {
     Album,
     AlbumArtist,
@@ -44,10 +44,6 @@ const getSlidesPerView = (windowWidth: number) => {
     return 10;
 };
 
-const CarouselContainer = styled(Stack)`
-    container-type: inline-size;
-`;
-
 interface TitleProps {
     handleNext?: () => void;
     handlePrev?: () => void;
@@ -60,36 +56,34 @@ interface TitleProps {
 
 const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
     return (
-        <Group position="apart">
+        <Group justify="space-between">
             {isValidElement(label) ? (
                 label
             ) : (
                 <TextTitle
-                    order={2}
+                    order={3}
                     weight={700}
                 >
                     {label}
                 </TextTitle>
             )}
 
-            <Group spacing="sm">
+            <Group gap="sm">
                 <Button
-                    compact
                     disabled={!pagination.hasPreviousPage}
                     onClick={handlePrev}
-                    size="lg"
-                    variant="default"
+                    size="compact-md"
+                    variant="subtle"
                 >
-                    <RiArrowLeftSLine />
+                    <Icon icon="arrowLeftS" />
                 </Button>
                 <Button
-                    compact
                     disabled={!pagination.hasNextPage}
                     onClick={handleNext}
-                    size="lg"
-                    variant="default"
+                    size="compact-md"
+                    variant="subtle"
                 >
-                    <RiArrowRightSLine />
+                    <Icon icon="arrowRightS" />
                 </Button>
             </Group>
         </Group>
@@ -286,10 +280,10 @@ export const SwiperGridCarousel = ({
     }, []);
 
     return (
-        <CarouselContainer
+        <Stack
             className="grid-carousel"
-            ref={containerRef}
-            spacing="md"
+            gap="md"
+            ref={containerRef as any}
         >
             {title ? (
                 <Title
@@ -326,7 +320,7 @@ export const SwiperGridCarousel = ({
                     );
                 })}
             </Swiper>
-        </CarouselContainer>
+        </Stack>
     );
 };