friend management QOL improvements

frontend/src/pages/ChallengeDetail.jsx

@@ -23,6 +23,8 @@ export default function ChallengeDetail() {
   const [submitting, setSubmitting] = useState(false);
   const [validating, setValidating] = useState(null);
   const [deleting, setDeleting] = useState(false);
+  const [friends, setFriends] = useState([]);
+  const [inviting, setInviting] = useState(null);
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setSearchResults([]));
@@ -56,11 +58,23 @@ export default function ChallengeDetail() {
     }
   }, [id]);
 
+  const loadFriends = useCallback(async () => {
+    try {
+      const data = await api.getFriends();
+      // Combine regular friends and challenge friends
+      const allFriends = [...(data.friends || []), ...(data.challenge_friends || [])];
+      setFriends(allFriends);
+    } catch (err) {
+      console.error('Failed to load friends:', err);
+    }
+  }, []);
+
   useEffect(() => {
     loadChallenge();
     loadPredictions();
     loadLeaderboard();
-  }, [loadChallenge, loadPredictions, loadLeaderboard]);
+    loadFriends();
+  }, [loadChallenge, loadPredictions, loadLeaderboard, loadFriends]);
 
   // Join challenge room for real-time updates
   useEffect(() => {
@@ -190,14 +204,18 @@ export default function ChallengeDetail() {
     setSearchTimeout(timeout);
   };
 
-  const handleInvite = async (userId) => {
+  const handleInvite = async (userId, userName) => {
+    setInviting(userId);
     try {
       await api.inviteToChallenge(id, { user_ids: [userId] });
-      toast.success('Invitation sent!');
+      toast.success(`Invitation sent to ${userName || 'user'}!`);
       setInviteQuery('');
       setSearchResults([]);
+      await loadChallenge(); // Refresh to update participant list
     } catch (err) {
       toast.error('Failed to send invite: ' + err.message);
+    } finally {
+      setInviting(null);
     }
   };
 
@@ -270,19 +288,64 @@ export default function ChallengeDetail() {
         {showInvite && (
           <div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
             <h3 style={{ marginBottom: '1rem' }}>Invite Someone</h3>
-            <input
+            
-              type="text"
+            {/* Friends List */}
-              className="input"
+            {friends.length > 0 && (
-              placeholder="Search by username or email..."
+              <div style={{ marginBottom: '1.5rem' }}>
-              value={inviteQuery}
+                <h4 style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>Your Friends</h4>
-              onChange={(e) => handleSearchUsers(e.target.value)}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-            />
+                  {friends.filter(friend => {
+                    // Filter out friends who are already participants
+                    const isParticipant = challenge.participants?.some(p => p.id === friend.id);
+                    const isCreator = challenge.challenge.created_by === friend.id;
+                    return !isParticipant && !isCreator;
+                  }).map(friend => (
+                    <div
+                      key={friend.id}
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        padding: '0.75rem',
+                        border: '1px solid var(--border)',
+                        borderRadius: '0.5rem'
+                      }}
+                    >
+                      <div>
+                        <div style={{ fontWeight: 500 }}>{friend.username}</div>
+                        <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
+                      </div>
+                      <button
+                        className="btn btn-primary btn-sm"
+                        onClick={() => handleInvite(friend.id, friend.username)}
+                        disabled={inviting === friend.id}
+                      >
+                        {inviting === friend.id ? 'Inviting...' : 'Invite'}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {/* Search for others */}
+            <div>
+              <h4 style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>Search for Others</h4>
+              <input
+                type="text"
+                className="input"
+                placeholder="Search by username or email..."
+                value={inviteQuery}
+                onChange={(e) => handleSearchUsers(e.target.value)}
+              />
+            </div>
             {searchResults.length > 0 && (
               <div style={{
                 position: 'absolute',
-                top: '100%',
+                bottom: 0,
                 left: 0,
                 right: 0,
+                transform: 'translateY(100%)',
                 background: 'var(--bg)',
                 border: '1px solid var(--border)',
                 borderRadius: '0.5rem',
@@ -294,15 +357,25 @@ export default function ChallengeDetail() {
                 {searchResults.map(user => (
                   <div
                     key={user.id}
-                    onClick={() => handleInvite(user.id)}
                     style={{
                       padding: '1rem',
                       borderBottom: '1px solid var(--border)',
-                      cursor: 'pointer'
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center'
                     }}
                   >
-                    <div style={{ fontWeight: 500 }}>{user.username}</div>
+                    <div>
-                    <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{user.email}</div>
+                      <div style={{ fontWeight: 500 }}>{user.username}</div>
+                      <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{user.email}</div>
+                    </div>
+                    <button
+                      className="btn btn-primary btn-sm"
+                      onClick={() => handleInvite(user.id, user.username)}
+                      disabled={inviting === user.id}
+                    >
+                      {inviting === user.id ? 'Inviting...' : 'Invite'}
+                    </button>
                   </div>
                 ))}
               </div>

frontend/src/pages/Friends.jsx

@@ -276,8 +276,15 @@ export default function Friends() {
                         <div style={{ fontWeight: 500 }}>{friend.username}</div>
                         <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
                       </div>
-                      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                         <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
+                        <button
+                          className="btn btn-primary btn-sm"
+                          onClick={() => handleSendRequest(friend.id)}
+                          disabled={sending === friend.id}
+                        >
+                          {sending === friend.id ? 'Sending...' : 'Add Friend'}
+                        </button>
                         <button
                           className="btn btn-danger btn-sm"
                           onClick={() => handleRemoveFriend(friend.id, friend.username)}