Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/shared/components/resize-handle.tsx

@@ -1,33 +1,25 @@
-import styled from 'styled-components';
+import clsx from 'clsx';
+import { forwardRef, HTMLAttributes } from 'react';
 
-export const ResizeHandle = styled.div<{
-    $isResizing: boolean;
-    $placement: 'bottom' | 'left' | 'right' | 'top';
-}>`
-    position: absolute;
-    top: ${(props) => props.$placement === 'top' && 0};
-    right: ${(props) => props.$placement === 'right' && 0};
-    bottom: ${(props) => props.$placement === 'bottom' && 0};
-    left: ${(props) => props.$placement === 'left' && 0};
-    z-index: 90;
-    width: 4px;
-    height: 100%;
-    cursor: ew-resize;
-    opacity: ${(props) => (props.$isResizing ? 1 : 0)};
+import styles from './resize-handle.module.css';
 
-    &:hover {
-        opacity: 0.7;
-    }
+interface ResizeHandleProps extends HTMLAttributes<HTMLDivElement> {
+    isResizing: boolean;
+    placement: 'bottom' | 'left' | 'right' | 'top';
+}
 
-    &::before {
-        position: absolute;
-        top: ${(props) => props.$placement === 'top' && 0};
-        right: ${(props) => props.$placement === 'right' && 0};
-        bottom: ${(props) => props.$placement === 'bottom' && 0};
-        left: ${(props) => props.$placement === 'left' && 0};
-        width: 1px;
-        height: 100%;
-        content: '';
-        background-color: var(--sidebar-handle-bg);
-    }
-`;
+export const ResizeHandle = forwardRef<HTMLDivElement, ResizeHandleProps>(
+    ({ isResizing, placement, ...props }: ResizeHandleProps, ref) => {
+        return (
+            <div
+                className={clsx({
+                    [styles.handle]: true,
+                    [styles.resizing]: isResizing,
+                    [styles[`handle-${placement}`]]: true,
+                })}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);