Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration * various design changes and improvements
2026-05-13 20:10:07 +02:00 · 2025-06-24 00:04:36 -07:00
parent bea55d48a8
commit c1330d92b2
473 changed files with 12469 additions and 11607 deletions
@@ -0,0 +1,91 @@
+import { motion, Variants } from 'motion/react';
+import { ComponentPropsWithoutRef, forwardRef, ReactNode, Ref } from 'react';
+
+import styles from './context-menu.module.css';
+
+import { Group } from '/@/shared/components/group/group';
+
+interface ContextMenuProps {
+    children: ReactNode;
+    maxWidth?: number;
+    minWidth?: number;
+    xPos: number;
+    yPos: number;
+}
+
+export const ContextMenuButton = forwardRef(
+    (
+        {
+            children,
+            leftIcon,
+            rightIcon,
+            ...props
+        }: ComponentPropsWithoutRef<'button'> & {
+            leftIcon?: ReactNode;
+            rightIcon?: ReactNode;
+        },
+        ref: any,
+    ) => {
+        return (
+            <button
+                {...props}
+                className={styles.contextMenuButton}
+                disabled={props.disabled}
+                key={props.key}
+                onClick={props.onClick}
+                ref={ref}
+            >
+                <Group
+                    justify="space-between"
+                    w="100%"
+                >
+                    <Group
+                        className={styles.left}
+                        gap="md"
+                    >
+                        {leftIcon}
+                        {children}
+                    </Group>
+                    {rightIcon}
+                </Group>
+            </button>
+        );
+    },
+);
+
+const variants: Variants = {
+    closed: {
+        opacity: 0,
+        transition: {
+            duration: 0.1,
+        },
+    },
+    open: {
+        opacity: 1,
+        transition: {
+            duration: 0.1,
+        },
+    },
+};
+
+export const ContextMenu = forwardRef(
+    ({ children, maxWidth, minWidth, xPos, yPos }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+        return (
+            <motion.div
+                animate="open"
+                className={styles.container}
+                initial="closed"
+                ref={ref}
+                style={{
+                    left: xPos,
+                    maxWidth,
+                    minWidth,
+                    top: yPos,
+                }}
+                variants={variants}
+            >
+                {children}
+            </motion.div>
+        );
+    },
+);