Initial Commit

frontend/src/components/UserProfilePopup.jsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'react';
+import Avatar from './Avatar.jsx';
+
+export default function UserProfilePopup({ user, anchorEl, onClose }) {
+  const popupRef = useRef(null);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (popupRef.current && !popupRef.current.contains(e.target) &&
+          anchorEl && !anchorEl.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [anchorEl, onClose]);
+
+  // Position near the anchor element
+  useEffect(() => {
+    if (!popupRef.current || !anchorEl) return;
+    const anchor = anchorEl.getBoundingClientRect();
+    const popup = popupRef.current;
+    const viewportH = window.innerHeight;
+    const viewportW = window.innerWidth;
+
+    // Default: below and to the right of avatar
+    let top = anchor.bottom + 8;
+    let left = anchor.left;
+
+    // Flip up if not enough space below
+    if (top + 220 > viewportH) top = anchor.top - 228;
+    // Clamp right edge
+    if (left + 220 > viewportW) left = viewportW - 228;
+
+    popup.style.top = `${top}px`;
+    popup.style.left = `${left}px`;
+  }, [anchorEl]);
+
+  if (!user) return null;
+
+  return (
+    <div
+      ref={popupRef}
+      style={{
+        position: 'fixed',
+        zIndex: 1000,
+        background: 'white',
+        border: '1px solid var(--border)',
+        borderRadius: 16,
+        boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
+        width: 220,
+        padding: '20px 16px 16px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 8,
+      }}
+    >
+      <Avatar user={user} size="xl" />
+      <div style={{ textAlign: 'center' }}>
+        <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)', marginBottom: 2 }}>
+          {user.display_name || user.name}
+        </div>
+        {user.role === 'admin' && !user.hide_admin_tag && (
+          <span className="role-badge role-admin" style={{ fontSize: 11 }}>Admin</span>
+        )}
+      </div>
+      {user.about_me && (
+        <p style={{
+          fontSize: 13, color: 'var(--text-secondary)',
+          textAlign: 'center', lineHeight: 1.5,
+          marginTop: 4, wordBreak: 'break-word',
+          borderTop: '1px solid var(--border)',
+          paddingTop: 10, width: '100%'
+        }}>
+          {user.about_me}
+        </p>
+      )}
+    </div>
+  );
+}