Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -1,7 +1,8 @@
-import { AnimatePresence, motion, Variants } from 'framer-motion';
+import { AnimatePresence, motion, Variants } from 'motion/react';
 import { forwardRef, Ref } from 'react';
 import { useLocation } from 'react-router';
-import styled from 'styled-components';
+
+import styles from './right-sidebar.module.css';
 
 import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
 import { ResizeHandle } from '/@/renderer/features/shared';
@@ -9,18 +10,6 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/renderer/store';
 import { Platform } from '/@/shared/types/types';
 
-const RightSidebarContainer = styled(motion.aside)`
-    position: relative;
-    grid-area: right-sidebar;
-    height: 100%;
-    background: var(--sidebar-bg);
-    border-left: var(--sidebar-border);
-
-    .current-song-cell:not(.current-playlist-song-cell) svg {
-        display: none;
-    }
-`;
-
 const queueSidebarVariants: Variants = {
     closed: (rightWidth) => ({
         transition: { duration: 0.5 },
@@ -39,12 +28,6 @@ const queueSidebarVariants: Variants = {
     }),
 };
 
-const QueueDrawer = styled(motion.div)`
-    background: var(--main-bg);
-    border: 3px solid var(--generic-border-color);
-    border-radius: 10px;
-`;
-
 const queueDrawerVariants: Variants = {
     closed: (windowBarStyle) => ({
         height:
@@ -109,8 +92,9 @@ export const RightSidebar = forwardRef(
                 {showSideQueue && (
                     <>
                         {sideQueueType === 'sideQueue' ? (
-                            <RightSidebarContainer
+                            <motion.aside
                                 animate="open"
+                                className={styles.rightSidebarContainer}
                                 custom={rightWidth}
                                 exit="closed"
                                 id="sidebar-queue"
@@ -119,19 +103,20 @@ export const RightSidebar = forwardRef(
                                 variants={queueSidebarVariants}
                             >
                                 <ResizeHandle
-                                    $isResizing={isResizingRight}
-                                    $placement="left"
+                                    isResizing={isResizingRight}
                                     onMouseDown={(e) => {
                                         e.preventDefault();
                                         startResizing('right');
                                     }}
+                                    placement="left"
                                     ref={ref}
                                 />
                                 <SidebarPlayQueue />
-                            </RightSidebarContainer>
+                            </motion.aside>
                         ) : (
-                            <QueueDrawer
+                            <motion.div
                                 animate="open"
+                                className={styles.queueDrawer}
                                 custom={windowBarStyle}
                                 exit="closed"
                                 id="drawer-queue"
@@ -140,7 +125,7 @@ export const RightSidebar = forwardRef(
                                 variants={queueDrawerVariants}
                             >
                                 <DrawerPlayQueue />
-                            </QueueDrawer>
+                            </motion.div>
                         )}
                     </>
                 )}