Use Motion for animations

frontend/src/core/components/animations/AnimatedHeight.tsx

@@ -1,71 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-import type { AnimatedPropertyProps } from "./types";
-
-export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
-    const [height, setHeight] = useState("0px");
-    const [shouldRender, setShouldRender] = useState(!!visible);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const measureRef = useRef<HTMLDivElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (visible) {
-            setShouldRender(true);
-            setIsAnimating(true);
-            // Wait for content to render, then measure
-            setTimeout(() => {
-                if (measureRef.current) {
-                    const contentHeight = measureRef.current.scrollHeight;
-                    setHeight(`${contentHeight}px`);
-                }
-                // Animation complete
-                setTimeout(() => {
-                    setHeight("auto");
-                    setIsAnimating(false);
-                }, duration * 1000);
-            }, 0);
-        } else if (shouldRender) {
-            setIsAnimating(true);
-            if (measureRef.current) {
-                const contentHeight = measureRef.current.scrollHeight;
-                setHeight(`${contentHeight}px`);
-                // Force a reflow before animating to 0
-                requestAnimationFrame(() => {
-                    // Read layout to ensure the previous height assignment is flushed
-                    if (containerRef.current) {
-                        containerRef.current.offsetHeight;
-                    }
-                    // Use a second frame to ensure the measured pixel height is applied before collapsing
-                    requestAnimationFrame(() => {
-                        setHeight("0px");
-                    });
-                });
-            }
-            // Hide content after animation completes
-            setTimeout(() => {
-                setShouldRender(false);
-                setIsAnimating(false);
-                if (onFinish) {
-                    onFinish();
-                }
-            }, duration * 1000);
-        }
-    }, [visible, shouldRender]);
-
-    return (visible || shouldRender || isAnimating) && (
-        <div
-            {...props}
-            ref={containerRef}
-            style={{
-                height,
-                transition: `height ${duration}s ease`,
-                overflow: "hidden",
-                ...props.style
-            }}
-        >
-            <div ref={measureRef} style={{ height: "auto" }}>
-                {shouldRender && children}
-            </div>
-        </div>
-    );
-}

frontend/src/core/components/animations/AnimatedOpacity.tsx

@@ -1,41 +0,0 @@
-import { useEffect, useState } from "react";
-import type { AnimatedPropertyProps } from "./types";
-
-export default function AnimatedOpacity({ visible, duration = 0.5, onFinish, children, ...props }: AnimatedPropertyProps) {
-    const [opacity, setOpacity] = useState(visible ? 1 : 0);
-    const [shouldRender, setShouldRender] = useState(visible);
-
-    useEffect(() => {
-        if (visible) {
-            setShouldRender(true);
-            setOpacity(0);
-
-            // Wait for content to render, then animate in
-            const id = setTimeout(() => {
-                setOpacity(1);
-            }, 10);
-            return () => clearTimeout(id);
-        } else {
-            setOpacity(0);
-
-            const id = setTimeout(() => {
-                setShouldRender(false);
-                if (onFinish) {
-                    onFinish();
-                }
-            }, duration * 1000);
-            return () => clearTimeout(id);
-        }
-    }, [visible, duration, onFinish]);
-
-    return shouldRender && (
-        <div
-            {...props}
-            style={{
-                opacity,
-                transition: `opacity ${duration}s ease`,
-                ...props.style
-            }}
-        >{children}</div>
-    );
-}

frontend/src/core/components/animations/types.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface BaseAnimatedPropertyProps {
-    visible: any;
-    duration?: number;
-    onFinish?: () => void
-    children?: ReactNode;
-}
-
-export type AnimatedPropertyProps = BaseAnimatedPropertyProps & React.ComponentPropsWithRef<"div">