From ac5bd3895455ad429c8006f55279e2599d4714d4 Mon Sep 17 00:00:00 2001
From: thibaud-leclere <thibaud.leclere@gmail.com>
Date: Sat, 28 Mar 2026 13:19:29 +0100
Subject: [PATCH] feat: add ActorPopover component with floating-ui

---
 assets/react/controllers/ActorPopover.jsx | 40 +++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 assets/react/controllers/ActorPopover.jsx

diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx
new file mode 100644
index 0000000..61e3022
--- /dev/null
+++ b/assets/react/controllers/ActorPopover.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';
+
+export default function ActorPopover({ actorName }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [offset(8), flip(), shift()],
+        placement: 'top',
+    });
+
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+    return (
+        <>
+            <button
+                ref={refs.setReference}
+                {...getReferenceProps()}
+                className="popover-trigger"
+                type="button"
+            >
+                ?
+            </button>
+            {isOpen && (
+                <div
+                    ref={refs.setFloating}
+                    style={floatingStyles}
+                    {...getFloatingProps()}
+                    className="actor-popover"
+                >
+                    <strong>{actorName}</strong>
+                </div>
+            )}
+        </>
+    );
+}