From 638ee3bd0aafa28ef5f4586ad0a1a8d6f2c23c41 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 4 Mar 2026 19:29:23 -0600
Subject: [PATCH] replace react-transition-group with framer-motion in Chip

Replace CSSTransition with framer-motion AnimatePresence + motion.div
for React 19 compatibility (react-transition-group uses findDOMNode).
framer-motion is already a project dependency.
---
 web/src/components/indicators/Chip.tsx | 58 +++++++++++---------------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/web/src/components/indicators/Chip.tsx b/web/src/components/indicators/Chip.tsx
index 06e905c83..e6de10057 100644
--- a/web/src/components/indicators/Chip.tsx
+++ b/web/src/components/indicators/Chip.tsx
@@ -1,8 +1,8 @@
 import { cn } from "@/lib/utils";
 import { LogSeverity } from "@/types/log";
-import { ReactNode, useMemo, useRef } from "react";
+import { ReactNode, useMemo } from "react";
 import { isIOS } from "react-device-detect";
-import { CSSTransition } from "react-transition-group";
+import { AnimatePresence, motion } from "framer-motion";
 
 type ChipProps = {
   className?: string;
@@ -17,39 +17,31 @@ export default function Chip({
   in: inProp = true,
   onClick,
 }: ChipProps) {
-  const nodeRef = useRef(null);
-
   return (
-    <CSSTransition
-      in={inProp}
-      nodeRef={nodeRef}
-      timeout={500}
-      classNames={{
-        enter: "opacity-0",
-        enterActive: "opacity-100 transition-opacity duration-500 ease-in-out",
-        exit: "opacity-100",
-        exitActive: "opacity-0 transition-opacity duration-500 ease-in-out",
-      }}
-      unmountOnExit
-    >
-      <div
-        ref={nodeRef}
-        className={cn(
-          "flex items-center rounded-2xl px-2 py-1.5",
-          className,
-          !isIOS && "z-10",
-        )}
-        onClick={(e) => {
-          e.stopPropagation();
+    <AnimatePresence>
+      {inProp && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+          className={cn(
+            "flex items-center rounded-2xl px-2 py-1.5",
+            className,
+            !isIOS && "z-10",
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
 
-          if (onClick) {
-            onClick();
-          }
-        }}
-      >
-        {children}
-      </div>
-    </CSSTransition>
+            if (onClick) {
+              onClick();
+            }
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }