v0.3.0

frontend/src/components/UserProfilePopup.jsx

@@ -1,8 +1,14 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Avatar from './Avatar.jsx';
+import { api } from '../utils/api.js';
+import { useAuth } from '../contexts/AuthContext.jsx';
 
-export default function UserProfilePopup({ user, anchorEl, onClose }) {
+export default function UserProfilePopup({ user: profileUser, anchorEl, onClose, onDirectMessage }) {
+  const { user: currentUser } = useAuth();
   const popupRef = useRef(null);
+  const [starting, setStarting] = useState(false);
+
+  const isSelf = currentUser?.id === profileUser?.id;
 
   useEffect(() => {
     const handler = (e) => {
@@ -15,7 +21,6 @@ export default function UserProfilePopup({ user, anchorEl, onClose }) {
     return () => document.removeEventListener('mousedown', handler);
   }, [anchorEl, onClose]);
 
-  // Position near the anchor element
   useEffect(() => {
     if (!popupRef.current || !anchorEl) return;
     const anchor = anchorEl.getBoundingClientRect();
@@ -23,20 +28,35 @@ export default function UserProfilePopup({ user, anchorEl, onClose }) {
     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 (top + 260 > viewportH) top = anchor.top - 268;
     if (left + 220 > viewportW) left = viewportW - 228;
 
     popup.style.top = `${top}px`;
     popup.style.left = `${left}px`;
   }, [anchorEl]);
 
-  if (!user) return null;
+  const handleDM = async () => {
+    if (!onDirectMessage) return;
+    setStarting(true);
+    try {
+      const { group } = await api.createGroup({
+        type: 'private',
+        memberIds: [profileUser.id],
+        isDirect: true,
+      });
+      onClose();
+      onDirectMessage(group);
+    } catch (e) {
+      console.error('DM error', e);
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  if (!profileUser) return null;
 
   return (
     <div
@@ -44,7 +64,7 @@ export default function UserProfilePopup({ user, anchorEl, onClose }) {
       style={{
         position: 'fixed',
         zIndex: 1000,
-        background: 'white',
+        background: 'var(--surface)',
         border: '1px solid var(--border)',
         borderRadius: 16,
         boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
@@ -56,26 +76,56 @@ export default function UserProfilePopup({ user, anchorEl, onClose }) {
         gap: 8,
       }}
     >
-      <Avatar user={user} size="xl" />
+      <Avatar user={profileUser} size="xl" />
       <div style={{ textAlign: 'center' }}>
         <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)', marginBottom: 2 }}>
-          {user.display_name || user.name}
+          {profileUser.name}
         </div>
-        {user.role === 'admin' && !user.hide_admin_tag && (
+        {profileUser.role === 'admin' && !profileUser.hide_admin_tag && (
           <span className="role-badge role-admin" style={{ fontSize: 11 }}>Admin</span>
         )}
       </div>
-      {user.about_me && (
+      {profileUser.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%'
+          paddingTop: 10, width: '100%',
         }}>
-          {user.about_me}
+          {profileUser.about_me}
         </p>
       )}
+      {!isSelf && onDirectMessage && (
+        <button
+          onClick={handleDM}
+          disabled={starting}
+          style={{
+            marginTop: 6,
+            width: '100%',
+            padding: '8px 0',
+            borderRadius: 'var(--radius)',
+            border: '1px solid var(--primary)',
+            background: 'transparent',
+            color: 'var(--primary)',
+            fontSize: 13,
+            fontWeight: 600,
+            cursor: starting ? 'default' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 6,
+            transition: 'background var(--transition), color var(--transition)',
+          }}
+          onMouseEnter={e => { e.currentTarget.style.background = 'var(--primary)'; e.currentTarget.style.color = 'white'; }}
+          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--primary)'; }}
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+          </svg>
+          {starting ? 'Opening...' : 'Direct Message'}
+        </button>
+      )}
     </div>
   );
 }