Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/spoiler/spoiler.module.css

@@ -0,0 +1,31 @@
+.control:hover {
+    color: var(--theme-btn-subtle-fg-hover);
+    text-decoration: none;
+}
+
+.spoiler {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    text-align: justify;
+}
+
+.spoiler:not(.is-expanded).can-expand::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    content: '';
+    background: linear-gradient(to top, var(--theme-colors-background) 10%, transparent 60%);
+}
+
+.spoiler.can-expand {
+    cursor: pointer;
+}
+
+.spoiler.is-expanded {
+    max-height: 2500px !important;
+}

src/shared/components/spoiler/spoiler.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import { HTMLAttributes, ReactNode, useRef, useState } from 'react';
+
+import styles from './spoiler.module.css';
+
+import { Text } from '/@/shared/components/text/text';
+import { useIsOverflow } from '/@/shared/hooks/use-is-overflow';
+
+interface SpoilerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    defaultOpened?: boolean;
+    maxHeight?: number;
+}
+
+export const Spoiler = ({ children, defaultOpened, maxHeight, ...props }: SpoilerProps) => {
+    const ref = useRef(null);
+    const isOverflow = useIsOverflow(ref);
+    const [isExpanded, setIsExpanded] = useState(!!defaultOpened);
+
+    const spoilerClassNames = clsx(styles.spoiler, {
+        [styles.canExpand]: isOverflow,
+        [styles.isExpanded]: isExpanded,
+    });
+
+    const handleToggleExpand = () => {
+        setIsExpanded((val) => !val);
+    };
+
+    return (
+        <Text
+            className={spoilerClassNames}
+            onClick={handleToggleExpand}
+            ref={ref}
+            role="button"
+            style={{ maxHeight: maxHeight ?? '100px', whiteSpace: 'pre-wrap' }}
+            tabIndex={-1}
+            {...props}
+        >
+            {children}
+        </Text>
+    );
+};