Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/scroll-area/scroll-area.css

@@ -0,0 +1,11 @@
+.feishin-os-scrollbar {
+    --os-size: var(--theme-scrollbar-size);
+    --os-track-bg: var(--theme-scrollbar-track-background);
+    --os-track-bg-hover: var(--theme-scrollbar-track-hover-background);
+    --os-track-border-radius: var(--theme-scrollbar-track-border-radius);
+    --os-handle-bg: var(--theme-scrollbar-handle-background);
+    --os-handle-bg-hover: var(--theme-scrollbar-handle-hover-background);
+    --os-handle-bg-active: var(--theme-scrollbar-handle-active-background);
+    --os-handle-border-radius: var(--theme-scrollbar-handle-border-radius);
+    --os-handle-max-size: 200px;
+}

src/shared/components/scroll-area/scroll-area.module.css

@@ -0,0 +1,35 @@
+/* .thumb {
+    background: var(--theme-scrollbar-handle-background);
+    border-radius: var(--theme-scrollbar-handle-border-radius);
+
+    &:hover {
+        background: var(--theme-scrollbar-handle-hover-background);
+    }
+
+    &[data-state='visible'] {
+        animation: fade-in 0.3s forwards;
+    }
+
+    &[data-state='hidden'] {
+        animation: fade-out 0.2s forwards;
+    }
+}
+
+.scrollbar {
+    padding: 0;
+    background: var(--theme-scrollbar-track-background);
+    border-radius: var(--theme-scrollbar-track-border-radius);
+
+    &:hover {
+        background: var(--theme-scrollbar-track-hover-background);
+    }
+}
+
+.viewport > div {
+    display: block !important;
+} */
+
+.scroll-area {
+    width: 100%;
+    height: 100%;
+}

src/shared/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,78 @@
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { useMergedRef } from '@mantine/hooks';
+import clsx from 'clsx';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
+
+import styles from './scroll-area.module.css';
+import './scroll-area.css';
+
+import { DragData, DragTarget } from '/@/shared/types/drag-and-drop';
+
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+    allowDragScroll?: boolean;
+    debugScrollPosition?: boolean;
+    scrollHideDelay?: number;
+}
+
+export const ScrollArea = forwardRef((props: ScrollAreaProps, ref: Ref<HTMLDivElement>) => {
+    const { allowDragScroll, children, className, scrollHideDelay, ...htmlProps } = props;
+
+    const containerRef = useRef(null);
+    const [scroller, setScroller] = useState<HTMLElement | null | Window>(null);
+
+    const [initialize, osInstance] = useOverlayScrollbars({
+        defer: false,
+        options: {
+            overflow: { x: 'hidden', y: 'scroll' },
+            scrollbars: {
+                autoHide: 'leave',
+                autoHideDelay: scrollHideDelay || 500,
+                pointers: ['mouse', 'pen', 'touch'],
+                theme: 'feishin-os-scrollbar',
+                visibility: 'visible',
+            },
+        },
+    });
+
+    useEffect(() => {
+        const { current: root } = containerRef;
+
+        if (scroller && root) {
+            initialize({
+                elements: { viewport: scroller as HTMLElement },
+                target: root,
+            });
+
+            if (allowDragScroll) {
+                autoScrollForElements({
+                    canScroll: (args) => {
+                        const data = args.source.data as unknown as DragData<unknown>;
+                        if (data.type === DragTarget.TABLE_COLUMN) return false;
+                        return true;
+                    },
+                    element: scroller as HTMLElement,
+                    getAllowedAxis: () => 'vertical',
+                    getConfiguration: () => ({ maxScrollSpeed: 'standard' }),
+                });
+            }
+        }
+
+        return () => osInstance()?.destroy();
+    }, [allowDragScroll, initialize, osInstance, scroller]);
+
+    const mergedRef = useMergedRef(ref, containerRef);
+
+    return (
+        <div
+            className={clsx(styles.scrollArea, className)}
+            ref={(el) => {
+                setScroller(el);
+                mergedRef(el);
+            }}
+            {...htmlProps}
+        >
+            {children}
+        </div>
+    );
+});