feat: replace ? button with hint type icons in ActorPopover

assets/react/controllers/ActorPopover.jsx

@@ -1,7 +1,13 @@
 import React, { useState } from 'react';
 import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';
 
-export default function ActorPopover({ actorName }) {
+const HINT_ICONS = {
+    film: 'fa-solid fa-film',
+    character: 'fa-solid fa-masks-theater',
+    award: 'fa-solid fa-trophy',
+};
+
+export default function ActorPopover({ hintType, hintText }) {
     const [isOpen, setIsOpen] = useState(false);
 
     const { refs, floatingStyles, context } = useFloating({
@@ -15,6 +21,8 @@ export default function ActorPopover({ actorName }) {
     const dismiss = useDismiss(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
+    const iconClass = HINT_ICONS[hintType] || 'fa-solid fa-circle-question';
+
     return (
         <>
             <button
@@ -23,7 +31,7 @@ export default function ActorPopover({ actorName }) {
                 className="popover-trigger"
                 type="button"
             >
-                ?
+                <i className={iconClass}></i>
             </button>
             {isOpen && (
                 <div
@@ -32,7 +40,7 @@ export default function ActorPopover({ actorName }) {
                     {...getFloatingProps()}
                     className="actor-popover"
                 >
-                    <strong>{actorName}</strong>
+                    {hintText}
                 </div>
             )}
         </>