\n {/* Add New Friend */}\n

Add a Friend

\n \n

\n setFriendEmail(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && addFriend(friendEmail)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"friend@example.com\"\n />\n addFriend(friendEmail)}\n disabled={loading || !friendEmail.trim()}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {loading ? 'Adding...' : 'Add Friend'}\n \n

\n\n {error && (\n

{error}

\n )}\n\n {/* Social Circles */}\n

\n {(Object.keys(circleInfo) as SocialCircle[]).map(circle => {\n const info = circleInfo[circle];\n const friends = friendsData[circle];\n const isDragOver = dragOverZone === circle;\n\n return (\n handleDragOver(e, circle)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, circle)}\n >\n

\n {info.title} ({friends.length})\n

{info.description}

\n\n

\n {friends.map(friend => (\n handleDragStart(e, friend)}\n className={`bg-white p-3 rounded-md shadow-sm cursor-move ${info.hoverColor} transition-colors`}\n >\n

{friend.name}

{friend.email}

\n ))}\n \n {friends.length === 0 && (\n

\n {isDragOver ? 'Drop here to add to this circle' : 'No friends in this circle'}\n

\n )}\n

\n );\n })}\n \n\n {/* Remove Zone */}\n handleDragOver(e, 'remove')}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, 'remove')}\n >\n

🗑️

Remove from all circles

\n {dragOverZone === 'remove' \n ? 'Drop here to remove friend' \n : 'Drag friends here to stop sharing activities with them'\n }\n

\n \n\n {/* Info Box */}\n

💡 How to Use

• Add friends: Enter their email address above
• Drag & drop: Move friends between circles by dragging their cards
• Remove friends: Drag to the trash zone to stop sharing activities
• Activity visibility: Friends only see activities targeted to their circle or higher
• Mutual connections: Both people need to add each other to see activities

\n \n );\n}","deleted","label",[171,172,153],"frontend","components","permalink","https://www.val.town/x/jessicaocean/OUT-app/code/frontend/components/FriendsManager.tsx","extension","actionData","errors"]