matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor Community component layout and improve UI elements

Browse Source
This commit is contained in:
Matthieu
2025-11-24 15:54:37 +01:00
parent ea287efdbf
commit 36482bc3d6
2 changed files with 306 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -80,7 +80,9 @@ function AppContent() {
return ( return (
<div className="min-h-screen bg-gray-900"> <div className="min-h-screen bg-gray-900">
<Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} /> <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
<main className="pt-0 pb-20 md:pt-16 md:pb-0">
{renderPage()} {renderPage()}
</main>
<PWAInstallPrompt /> <PWAInstallPrompt />
</div> </div>
); );

473
src/components/Community.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Search, Globe, Users, Eye, ArrowLeftRight, Loader2, Clock, History, UserPlus, UserMinus, Check, X, Send, Settings, Save } from 'lucide-react'; import { Search, Globe, Users, Eye, ArrowLeftRight, Loader2, Clock, History, UserPlus, UserMinus, Check, X, Send, Settings, Save, ChevronLeft } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
import { useToast } from '../contexts/ToastContext'; import { useToast } from '../contexts/ToastContext';
import { supabase } from '../lib/supabase'; import { supabase } from '../lib/supabase';
@@ -44,9 +44,9 @@ type FriendsSubTab = 'list' | 'requests' | 'search';
type TradesSubTab = 'pending' | 'history'; type TradesSubTab = 'pending' | 'history';
const VISIBILITY_OPTIONS = [ const VISIBILITY_OPTIONS = [
{ value: 'public', label: 'Public', description: 'Anyone can view your collection' }, { value: 'public', label: 'Public', description: 'Anyone can view' },
{ value: 'friends', label: 'Friends Only', description: 'Only friends can view' }, { value: 'friends', label: 'Friends', description: 'Friends only' },
{ value: 'private', label: 'Private', description: 'Only you can view' }, { value: 'private', label: 'Private', description: 'Only you' },
] as const; ] as const;
export default function Community() { export default function Community() {
@@ -214,7 +214,7 @@ export default function Community() {
setConfirmModal({ setConfirmModal({
isOpen: true, isOpen: true,
title: 'Remove Friend', title: 'Remove Friend',
message: `Are you sure you want to remove ${friendName} from your friends?`, message: `Remove ${friendName} from your friends?`,
variant: 'danger', variant: 'danger',
onConfirm: async () => { onConfirm: async () => {
try { try {
@@ -264,9 +264,9 @@ export default function Community() {
const success = await acceptTrade(tradeId); const success = await acceptTrade(tradeId);
if (success) { if (success) {
await loadTradesData(); await loadTradesData();
toast.success('Trade accepted! Cards have been exchanged.'); toast.success('Trade accepted! Cards exchanged.');
} else { } else {
toast.error('Failed to execute trade. Check your collection.'); toast.error('Failed. Check your collection.');
} }
} catch (error) { } catch (error) {
toast.error('Error accepting trade'); toast.error('Error accepting trade');
@@ -292,7 +292,7 @@ export default function Community() {
setConfirmModal({ setConfirmModal({
isOpen: true, isOpen: true,
title: 'Cancel Trade', title: 'Cancel Trade',
message: 'Are you sure you want to cancel this trade offer?', message: 'Cancel this trade offer?',
variant: 'warning', variant: 'warning',
onConfirm: async () => { onConfirm: async () => {
setProcessingTradeId(tradeId); setProcessingTradeId(tradeId);
@@ -350,21 +350,18 @@ export default function Community() {
const renderTradeItems = (items: TradeItem[] | undefined, ownerId: string, label: string) => { const renderTradeItems = (items: TradeItem[] | undefined, ownerId: string, label: string) => {
const ownerItems = items?.filter((i) => i.owner_id === ownerId) || []; const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
if (ownerItems.length === 0) { if (ownerItems.length === 0) {
return <div className="text-gray-500 text-sm italic">{label}: Nothing (gift)</div>; return <p className="text-gray-500 text-xs">{label}: Gift</p>;
} }
return ( return (
<div> <div>
<div className="text-gray-400 text-sm mb-1">{label}:</div> <p className="text-gray-400 text-xs mb-1">{label}:</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1">
{ownerItems.map((item) => { {ownerItems.map((item) => {
const card = tradeCardDetails.get(item.card_id); const card = tradeCardDetails.get(item.card_id);
return ( return (
<div key={item.id} className="flex items-center gap-2 bg-gray-700 px-2 py-1 rounded text-sm"> <div key={item.id} className="flex items-center gap-1 bg-gray-700 px-2 py-0.5 rounded text-xs">
{card?.image_uris?.small && ( <span className="truncate max-w-[100px]">{card?.name || 'Card'}</span>
<img src={card.image_uris.small} alt={card.name} className="w-8 h-11 rounded" />
)}
<span>{card?.name || item.card_id}</span>
{item.quantity > 1 && <span className="text-gray-400">x{item.quantity}</span>} {item.quantity > 1 && <span className="text-gray-400">x{item.quantity}</span>}
</div> </div>
); );
@@ -374,57 +371,65 @@ export default function Community() {
); );
}; };
// Loading state
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center"> <div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div> <Loader2 className="animate-spin text-blue-500" size={48} />
</div> </div>
); );
} }
// Viewing a user's collection // ============ USER COLLECTION VIEW ============
if (selectedUser) { if (selectedUser) {
return ( return (
<div className="min-h-screen bg-gray-900 text-white p-6"> <div className="bg-gray-900 text-white min-h-screen">
<div className="max-w-7xl mx-auto"> {/* Header */}
<div className="flex items-center justify-between mb-6"> <div className="sticky top-0 bg-gray-900/95 backdrop-blur border-b border-gray-800 p-3 z-10">
<div> <div className="flex items-center justify-between gap-2">
<button <button
onClick={() => { setSelectedUser(null); setSelectedUserCollection([]); }} onClick={() => { setSelectedUser(null); setSelectedUserCollection([]); }}
className="text-blue-400 hover:text-blue-300 mb-2" className="flex items-center gap-1 text-blue-400 text-sm min-w-0"
> >
← Back <ChevronLeft size={20} />
<span className="hidden sm:inline">Back</span>
</button> </button>
<h1 className="text-3xl font-bold">{selectedUser.username}'s Collection</h1> <h1 className="text-lg font-bold truncate flex-1 text-center">{selectedUser.username}</h1>
</div>
<button <button
onClick={() => setShowTradeCreator(true)} onClick={() => setShowTradeCreator(true)}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition" className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm whitespace-nowrap"
> >
<ArrowLeftRight size={20} /> <ArrowLeftRight size={16} />
Propose Trade <span className="hidden sm:inline">Trade</span>
</button> </button>
</div> </div>
</div>
{/* Collection Grid */}
<div className="p-3">
{loadingCollection ? ( {loadingCollection ? (
<div className="flex items-center justify-center py-12"> <div className="flex justify-center py-12">
<Loader2 className="animate-spin text-blue-500" size={48} /> <Loader2 className="animate-spin text-blue-500" size={32} />
</div> </div>
) : selectedUserCollection.length === 0 ? ( ) : selectedUserCollection.length === 0 ? (
<p className="text-gray-400 text-center py-12">This collection is empty</p> <p className="text-gray-400 text-center py-12">Empty collection</p>
) : ( ) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-9 gap-2 sm:gap-3"> <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
{selectedUserCollection.map(({ card, quantity }) => ( {selectedUserCollection.map(({ card, quantity }) => (
<div key={card.id} className="relative"> <div key={card.id} className="relative">
<div className="rounded-lg overflow-hidden shadow-lg"> <img
<img src={card.image_uris?.normal || card.image_uris?.small} alt={card.name} className="w-full h-auto" /> src={card.image_uris?.small || card.image_uris?.normal}
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full">x{quantity}</div> alt={card.name}
</div> className="w-full h-auto rounded-lg"
<div className="mt-1 text-xs text-center truncate px-1">{card.name}</div> />
<span className="absolute top-1 right-1 bg-blue-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full">
x{quantity}
</span>
</div> </div>
))} ))}
</div> </div>
)} )}
</div>
{showTradeCreator && ( {showTradeCreator && (
<TradeCreator <TradeCreator
@@ -439,7 +444,6 @@ export default function Community() {
/> />
)} )}
</div> </div>
</div>
); );
} }
@@ -447,81 +451,112 @@ export default function Community() {
(u) => !browseSearch || u.username?.toLowerCase().includes(browseSearch.toLowerCase()) (u) => !browseSearch || u.username?.toLowerCase().includes(browseSearch.toLowerCase())
); );
const friendProfiles: UserProfile[] = friends.map((f) => ({ // ============ MAIN VIEW ============
id: f.id,
username: f.username,
collection_visibility: 'friends',
}));
return ( return (
<div className="min-h-screen bg-gray-900 text-white p-6"> <div className="bg-gray-900 text-white min-h-screen">
<div className="max-w-4xl mx-auto"> {/* Header */}
<h1 className="text-3xl font-bold mb-6">Community</h1> <div className="sticky top-0 bg-gray-900/95 backdrop-blur border-b border-gray-800 p-3 z-10">
<h1 className="text-xl font-bold mb-3">Community</h1>
{/* Main Tabs */} {/* Tabs - Scrollable on mobile */}
<div className="flex flex-wrap gap-2 mb-6"> <div className="flex gap-1 overflow-x-auto pb-1 -mx-3 px-3 scrollbar-hide">
{[ {[
{ id: 'browse' as Tab, label: 'Browse', icon: Globe }, { id: 'browse' as Tab, label: 'Browse', icon: Globe },
{ id: 'friends' as Tab, label: `Friends (${friends.length})`, icon: Users }, { id: 'friends' as Tab, label: `Friends`, count: friends.length, icon: Users },
{ id: 'trades' as Tab, label: `Trades (${pendingTrades.length})`, icon: ArrowLeftRight }, { id: 'trades' as Tab, label: `Trades`, count: pendingTrades.length, icon: ArrowLeftRight },
{ id: 'profile' as Tab, label: 'Profile', icon: Settings }, { id: 'profile' as Tab, label: 'Profile', icon: Settings },
].map((tab) => ( ].map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${ className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition flex-shrink-0 ${
activeTab === tab.id ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' activeTab === tab.id
? 'bg-blue-600 text-white'
: 'bg-gray-800 text-gray-300 active:bg-gray-700'
}`} }`}
> >
<tab.icon size={18} /> <tab.icon size={16} />
{tab.label} <span>{tab.label}</span>
{tab.count !== undefined && tab.count > 0 && (
<span className={`text-xs px-1.5 py-0.5 rounded-full ${
activeTab === tab.id ? 'bg-blue-500' : 'bg-gray-700'
}`}>
{tab.count}
</span>
)}
</button> </button>
))} ))}
</div> </div>
</div>
{/* Content */}
<div className="p-3">
{/* ============ BROWSE TAB ============ */} {/* ============ BROWSE TAB ============ */}
{activeTab === 'browse' && ( {activeTab === 'browse' && (
<div className="space-y-4"> <div className="space-y-3">
{/* Search */}
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
<input <input
type="text" type="text"
value={browseSearch} value={browseSearch}
onChange={(e) => setBrowseSearch(e.target.value)} onChange={(e) => setBrowseSearch(e.target.value)}
placeholder="Search public collections..." placeholder="Search users..."
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" className="w-full pl-10 pr-4 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
<div className="flex gap-2 mb-4"> {/* Users List */}
<button className="px-3 py-1 bg-blue-600 rounded-lg text-sm">Public ({filteredPublicUsers.length})</button> {filteredPublicUsers.length === 0 ? (
<p className="text-gray-400 text-center py-8 text-sm">No public collections</p>
) : (
<div className="space-y-2">
{filteredPublicUsers.map((userProfile) => (
<button
key={userProfile.id}
onClick={() => { setSelectedUser(userProfile); loadUserCollection(userProfile.id); }}
className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
>
<div className="flex items-center gap-2 min-w-0">
<Globe size={18} className="text-green-400 flex-shrink-0" />
<span className="font-medium truncate">{userProfile.username || 'Unknown'}</span>
</div>
<Eye size={18} className="text-gray-400 flex-shrink-0" />
</button>
))}
</div>
)}
{/* Friends shortcut */}
{friends.length > 0 && (
<div className="pt-3 border-t border-gray-800">
<p className="text-xs text-gray-500 mb-2">Your friends</p>
<div className="space-y-2">
{friends.slice(0, 3).map((friend) => (
<button
key={friend.id}
onClick={() => {
setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
loadUserCollection(friend.id);
}}
className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
>
<div className="flex items-center gap-2 min-w-0">
<Users size={18} className="text-blue-400 flex-shrink-0" />
<span className="font-medium truncate">{friend.username || 'Unknown'}</span>
</div>
<Eye size={18} className="text-gray-400 flex-shrink-0" />
</button>
))}
{friends.length > 3 && (
<button <button
onClick={() => setActiveTab('friends')} onClick={() => setActiveTab('friends')}
className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm" className="w-full text-center text-blue-400 text-sm py-2"
> >
Friends ({friendProfiles.length}) View all {friends.length} friends
</button> </button>
)}
</div> </div>
{filteredPublicUsers.length === 0 ? (
<p className="text-gray-400 text-center py-8">No public collections found</p>
) : (
<div className="space-y-3">
{filteredPublicUsers.map((userProfile) => (
<div key={userProfile.id} className="flex items-center justify-between bg-gray-800 p-4 rounded-lg">
<div className="flex items-center gap-3">
<Globe size={20} className="text-green-400" />
<span className="font-medium">{userProfile.username || 'Unknown'}</span>
</div>
<button
onClick={() => { setSelectedUser(userProfile); loadUserCollection(userProfile.id); }}
className="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-sm"
>
<Eye size={16} />
View
</button>
</div>
))}
</div> </div>
)} )}
</div> </div>
@@ -529,121 +564,142 @@ export default function Community() {
{/* ============ FRIENDS TAB ============ */} {/* ============ FRIENDS TAB ============ */}
{activeTab === 'friends' && ( {activeTab === 'friends' && (
<div className="space-y-4"> <div className="space-y-3">
<div className="flex gap-2 mb-4"> {/* Sub tabs */}
{(['list', 'requests', 'search'] as FriendsSubTab[]).map((tab) => ( <div className="flex gap-1">
{[
{ id: 'list' as FriendsSubTab, label: 'List' },
{ id: 'requests' as FriendsSubTab, label: 'Requests', count: pendingRequests.length },
{ id: 'search' as FriendsSubTab, label: 'Add' },
].map((tab) => (
<button <button
key={tab} key={tab.id}
onClick={() => setFriendsSubTab(tab)} onClick={() => setFriendsSubTab(tab.id)}
className={`px-3 py-1 rounded-lg text-sm capitalize ${ className={`px-3 py-1.5 rounded-lg text-sm flex-1 ${
friendsSubTab === tab ? 'bg-blue-600' : 'bg-gray-700 hover:bg-gray-600' friendsSubTab === tab.id ? 'bg-blue-600' : 'bg-gray-800 active:bg-gray-700'
}`} }`}
> >
{tab === 'requests' ? `Requests (${pendingRequests.length})` : tab} {tab.label}
{tab.count !== undefined && tab.count > 0 && (
<span className="ml-1 text-xs">({tab.count})</span>
)}
</button> </button>
))} ))}
</div> </div>
{/* Friends List */}
{friendsSubTab === 'list' && ( {friendsSubTab === 'list' && (
<div className="space-y-3"> friends.length === 0 ? (
{friends.length === 0 ? ( <p className="text-gray-400 text-center py-8 text-sm">No friends yet</p>
<p className="text-gray-400 text-center py-8">No friends yet. Search for users to add them!</p>
) : ( ) : (
friends.map((friend) => ( <div className="space-y-2">
<div key={friend.id} className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"> {friends.map((friend) => (
<span className="font-medium">{friend.username || 'Unknown'}</span> <div key={friend.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
<div className="flex gap-2"> <span className="font-medium truncate">{friend.username || 'Unknown'}</span>
<div className="flex gap-1">
<button <button
onClick={() => { setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' }); loadUserCollection(friend.id); }} onClick={() => {
className="p-2 text-blue-400 hover:bg-blue-400/20 rounded-lg transition" setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
title="View collection" loadUserCollection(friend.id);
}}
className="p-2 text-blue-400 active:bg-blue-400/20 rounded-lg"
> >
<Eye size={20} /> <Eye size={18} />
</button> </button>
<button <button
onClick={() => handleRemoveFriend(friend.friendshipId, friend.username || 'this user')} onClick={() => handleRemoveFriend(friend.friendshipId, friend.username || 'user')}
className="p-2 text-red-400 hover:bg-red-400/20 rounded-lg transition" className="p-2 text-red-400 active:bg-red-400/20 rounded-lg"
title="Remove friend"
> >
<UserMinus size={20} /> <UserMinus size={18} />
</button> </button>
</div> </div>
</div> </div>
)) ))}
)}
</div> </div>
)
)} )}
{/* Requests */}
{friendsSubTab === 'requests' && ( {friendsSubTab === 'requests' && (
<div className="space-y-6"> <div className="space-y-4">
{pendingRequests.length > 0 && (
<div> <div>
<h3 className="text-lg font-semibold mb-3 text-gray-300">Received</h3> <p className="text-xs text-gray-500 mb-2">Received</p>
{pendingRequests.length === 0 ? ( <div className="space-y-2">
<p className="text-gray-500 text-sm">No pending requests</p>
) : (
<div className="space-y-3">
{pendingRequests.map((req) => ( {pendingRequests.map((req) => (
<div key={req.id} className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"> <div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
<span className="font-medium">{req.username || 'Unknown'}</span> <span className="font-medium truncate">{req.username || 'Unknown'}</span>
<div className="flex gap-2"> <div className="flex gap-1">
<button onClick={() => handleAcceptRequest(req.friendshipId)} className="p-2 text-green-400 hover:bg-green-400/20 rounded-lg"><Check size={20} /></button> <button onClick={() => handleAcceptRequest(req.friendshipId)} className="p-2 text-green-400 active:bg-green-400/20 rounded-lg">
<button onClick={() => handleDeclineRequest(req.friendshipId)} className="p-2 text-red-400 hover:bg-red-400/20 rounded-lg"><X size={20} /></button> <Check size={18} />
</button>
<button onClick={() => handleDeclineRequest(req.friendshipId)} className="p-2 text-red-400 active:bg-red-400/20 rounded-lg">
<X size={18} />
</button>
</div> </div>
</div> </div>
))} ))}
</div> </div>
)}
</div>
<div>
<h3 className="text-lg font-semibold mb-3 text-gray-300">Sent</h3>
{sentRequests.length === 0 ? (
<p className="text-gray-500 text-sm">No sent requests</p>
) : (
<div className="space-y-3">
{sentRequests.map((req) => (
<div key={req.id} className="flex items-center justify-between bg-gray-800 p-4 rounded-lg">
<div className="flex items-center gap-2">
<Send size={16} className="text-gray-500" />
<span className="font-medium">{req.username || 'Unknown'}</span>
</div>
<span className="text-sm text-yellow-500">Pending</span>
</div>
))}
</div>
)}
</div>
</div> </div>
)} )}
{sentRequests.length > 0 && (
<div>
<p className="text-xs text-gray-500 mb-2">Sent</p>
<div className="space-y-2">
{sentRequests.map((req) => (
<div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
<div className="flex items-center gap-2">
<Send size={14} className="text-gray-500" />
<span className="font-medium truncate">{req.username || 'Unknown'}</span>
</div>
<span className="text-xs text-yellow-500">Pending</span>
</div>
))}
</div>
</div>
)}
{pendingRequests.length === 0 && sentRequests.length === 0 && (
<p className="text-gray-400 text-center py-8 text-sm">No requests</p>
)}
</div>
)}
{/* Search/Add */}
{friendsSubTab === 'search' && ( {friendsSubTab === 'search' && (
<div className="space-y-4"> <div className="space-y-3">
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
type="text" type="text"
value={friendSearch} value={friendSearch}
onChange={(e) => setFriendSearch(e.target.value)} onChange={(e) => setFriendSearch(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearchFriends()} onKeyDown={(e) => e.key === 'Enter' && handleSearchFriends()}
placeholder="Search by username..." placeholder="Username..."
className="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" className="flex-1 px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
/> />
<button <button
onClick={handleSearchFriends} onClick={handleSearchFriends}
disabled={searchingFriends || friendSearch.trim().length < 2} disabled={searchingFriends || friendSearch.trim().length < 2}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg" className="px-4 py-2.5 bg-blue-600 disabled:bg-gray-600 rounded-lg"
> >
{searchingFriends ? <Loader2 className="animate-spin" size={20} /> : <Search size={20} />} {searchingFriends ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
</button> </button>
</div> </div>
{friendSearchResults.length > 0 && ( {friendSearchResults.length > 0 && (
<div className="space-y-3"> <div className="space-y-2">
{friendSearchResults.map((result) => ( {friendSearchResults.map((result) => (
<div key={result.id} className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"> <div key={result.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
<span className="font-medium">{result.username || 'Unknown'}</span> <span className="font-medium truncate">{result.username || 'Unknown'}</span>
{isAlreadyFriendOrPending(result.id) ? ( {isAlreadyFriendOrPending(result.id) ? (
<span className="text-sm text-gray-500">Already connected</span> <span className="text-xs text-gray-500">Connected</span>
) : ( ) : (
<button onClick={() => handleSendRequest(result.id)} className="flex items-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm"> <button
<UserPlus size={16} /> onClick={() => handleSendRequest(result.id)}
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 rounded-lg text-sm"
>
<UserPlus size={14} />
Add Add
</button> </button>
)} )}
@@ -658,75 +714,99 @@ export default function Community() {
{/* ============ TRADES TAB ============ */} {/* ============ TRADES TAB ============ */}
{activeTab === 'trades' && ( {activeTab === 'trades' && (
<div className="space-y-4"> <div className="space-y-3">
<div className="flex gap-2 mb-4"> {/* Sub tabs */}
<div className="flex gap-1">
<button <button
onClick={() => setTradesSubTab('pending')} onClick={() => setTradesSubTab('pending')}
className={`flex items-center gap-2 px-3 py-1 rounded-lg text-sm ${tradesSubTab === 'pending' ? 'bg-blue-600' : 'bg-gray-700 hover:bg-gray-600'}`} className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
tradesSubTab === 'pending' ? 'bg-blue-600' : 'bg-gray-800'
}`}
> >
<Clock size={16} /> <Clock size={14} />
Pending ({pendingTrades.length}) Pending ({pendingTrades.length})
</button> </button>
<button <button
onClick={() => setTradesSubTab('history')} onClick={() => setTradesSubTab('history')}
className={`flex items-center gap-2 px-3 py-1 rounded-lg text-sm ${tradesSubTab === 'history' ? 'bg-blue-600' : 'bg-gray-700 hover:bg-gray-600'}`} className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
tradesSubTab === 'history' ? 'bg-blue-600' : 'bg-gray-800'
}`}
> >
<History size={16} /> <History size={14} />
History History
</button> </button>
</div> </div>
{/* Trades List */}
{(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).length === 0 ? ( {(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).length === 0 ? (
<p className="text-gray-400 text-center py-8"> <p className="text-gray-400 text-center py-8 text-sm">
{tradesSubTab === 'pending' ? 'No pending trades' : 'No trade history'} {tradesSubTab === 'pending' ? 'No pending trades' : 'No history'}
</p> </p>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-3">
{(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).map((trade) => { {(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).map((trade) => {
const isSender = trade.sender_id === user?.id; const isSender = trade.sender_id === user?.id;
const otherUser = isSender ? trade.receiver : trade.sender; const otherUser = isSender ? trade.receiver : trade.sender;
const statusColor = trade.status === 'accepted' ? 'text-green-400' : trade.status === 'declined' ? 'text-red-400' : trade.status === 'cancelled' ? 'text-gray-400' : 'text-yellow-400'; const statusColors: Record<string, string> = {
accepted: 'text-green-400',
declined: 'text-red-400',
cancelled: 'text-gray-400',
pending: 'text-yellow-400',
};
return ( return (
<div key={trade.id} className="bg-gray-800 rounded-lg p-4 space-y-4"> <div key={trade.id} className="bg-gray-800 rounded-lg p-3 space-y-2">
{/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 min-w-0">
<ArrowLeftRight size={18} className="text-blue-400" /> <ArrowLeftRight size={16} className="text-blue-400 flex-shrink-0" />
<span className="font-medium">{isSender ? `To: ${otherUser?.username}` : `From: ${otherUser?.username}`}</span> <span className="text-sm truncate">
{isSender ? 'To' : 'From'}: <strong>{otherUser?.username}</strong>
</span>
</div> </div>
<span className={`text-sm capitalize ${statusColor}`}>{trade.status}</span> <span className={`text-xs capitalize ${statusColors[trade.status]}`}>
{trade.status}
</span>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {/* Items */}
{renderTradeItems(trade.items, trade.sender_id, isSender ? 'You give' : 'They give')} <div className="grid grid-cols-2 gap-2 text-sm">
{renderTradeItems(trade.items, trade.receiver_id, isSender ? 'You receive' : 'They receive')} {renderTradeItems(trade.items, trade.sender_id, isSender ? 'Give' : 'Receive')}
{renderTradeItems(trade.items, trade.receiver_id, isSender ? 'Get' : 'Send')}
</div> </div>
{trade.message && <div className="text-gray-400 text-sm"><span className="text-gray-500">Message:</span> {trade.message}</div>} {/* Actions */}
{tradesSubTab === 'pending' && ( {tradesSubTab === 'pending' && (
<div className="flex gap-2 pt-2 border-t border-gray-700"> <div className="flex gap-2 pt-2 border-t border-gray-700">
{isSender ? ( {isSender ? (
<button onClick={() => handleCancelTrade(trade.id)} disabled={processingTradeId === trade.id} className="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> <button
<X size={16} /> onClick={() => handleCancelTrade(trade.id)}
Cancel disabled={processingTradeId === trade.id}
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-gray-700 rounded-lg text-sm"
>
<X size={14} /> Cancel
</button> </button>
) : ( ) : (
<> <>
<button onClick={() => handleAcceptTrade(trade.id)} disabled={processingTradeId === trade.id} className="flex items-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm"> <button
{processingTradeId === trade.id ? <Loader2 className="animate-spin" size={16} /> : <Check size={16} />} onClick={() => handleAcceptTrade(trade.id)}
disabled={processingTradeId === trade.id}
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-green-600 rounded-lg text-sm"
>
{processingTradeId === trade.id ? <Loader2 className="animate-spin" size={14} /> : <Check size={14} />}
Accept Accept
</button> </button>
<button onClick={() => handleDeclineTrade(trade.id)} disabled={processingTradeId === trade.id} className="flex items-center gap-2 px-3 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm"> <button
<X size={16} /> onClick={() => handleDeclineTrade(trade.id)}
Decline disabled={processingTradeId === trade.id}
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-red-600 rounded-lg text-sm"
>
<X size={14} /> Decline
</button> </button>
</> </>
)} )}
</div> </div>
)} )}
<div className="text-gray-500 text-xs">{new Date(trade.created_at || '').toLocaleDateString()}</div>
</div> </div>
); );
})} })}
@@ -737,52 +817,53 @@ export default function Community() {
{/* ============ PROFILE TAB ============ */} {/* ============ PROFILE TAB ============ */}
{activeTab === 'profile' && ( {activeTab === 'profile' && (
<div className="max-w-md space-y-6"> <div className="space-y-4 max-w-md">
{/* Username */}
<div> <div>
<label className="block text-sm font-medium text-gray-300 mb-2">Username</label> <label className="block text-sm text-gray-400 mb-1.5">Username</label>
<input <input
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" className="w-full px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
placeholder="Enter your username" placeholder="Your username"
/> />
</div> </div>
{/* Visibility */}
<div> <div>
<label className="block text-sm font-medium text-gray-300 mb-2">Collection Visibility</label> <label className="block text-sm text-gray-400 mb-1.5">Collection Visibility</label>
<div className="space-y-2"> <div className="grid grid-cols-3 gap-2">
{VISIBILITY_OPTIONS.map((option) => ( {VISIBILITY_OPTIONS.map((option) => (
<button <button
key={option.value} key={option.value}
type="button"
onClick={() => setCollectionVisibility(option.value)} onClick={() => setCollectionVisibility(option.value)}
className={`w-full flex items-center gap-3 p-3 rounded-lg border-2 transition-all text-left ${ className={`p-3 rounded-lg border-2 transition text-center ${
collectionVisibility === option.value collectionVisibility === option.value
? 'border-blue-500 bg-blue-500/10' ? 'border-blue-500 bg-blue-500/10'
: 'border-gray-700 hover:border-gray-600 bg-gray-800' : 'border-gray-700 bg-gray-800 active:border-gray-600'
}`} }`}
> >
<div> <div className="font-medium text-sm">{option.label}</div>
<div className="font-medium">{option.label}</div> <div className="text-xs text-gray-400 mt-0.5">{option.description}</div>
<div className="text-sm text-gray-400">{option.description}</div>
</div>
</button> </button>
))} ))}
</div> </div>
</div> </div>
{/* Save */}
<button <button
onClick={handleSaveProfile} onClick={handleSaveProfile}
disabled={savingProfile} disabled={savingProfile}
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-semibold py-3 px-4 rounded-lg transition" className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 py-3 rounded-lg font-medium"
> >
{savingProfile ? <Loader2 className="animate-spin" size={20} /> : <><Save size={20} /> Save Changes</>} {savingProfile ? <Loader2 className="animate-spin" size={18} /> : <><Save size={18} /> Save</>}
</button> </button>
</div> </div>
)} )}
</div> </div>
{/* Confirm Modal */}
<ConfirmModal <ConfirmModal
isOpen={confirmModal.isOpen} isOpen={confirmModal.isOpen}
onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })} onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}