File size: 5,708 Bytes
57da3ff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import { useState, useEffect } from 'react';
import { useStore } from '../store';
import { motion, AnimatePresence } from 'framer-motion';
import { X, MessageSquare, User } from 'lucide-react';
export function InboxOverlay() {
const { currentUser, showInbox, toggleInbox, startChat } = useStore();
const [inbox, setInbox] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (!showInbox || !currentUser) return;
const fetchInbox = async () => {
setLoading(true);
try {
const res = await fetch(`/api/messages/inbox/${currentUser.id}`);
const data = await res.json();
setInbox(data || []);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
fetchInbox();
}, [showInbox, currentUser]);
if (!showInbox) return null;
return (
<AnimatePresence>
<div
style={{
position: 'fixed', bottom: 0, right: 0, left: 0, top: 0,
background: 'rgba(0,0,0,0.5)', zIndex: 9998,
display: 'flex', justifyContent: 'center'
}}
onClick={toggleInbox}
>
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }}
style={{
width: '100%', maxWidth: '480px', height: '80%', marginTop: 'auto',
background: 'var(--bg-main)', borderTopLeftRadius: '24px', borderTopRightRadius: '24px',
position: 'relative', display: 'flex', flexDirection: 'column',
boxShadow: '0 -10px 40px rgba(0,0,0,0.6)'
}}
onClick={e => e.stopPropagation()}
>
{/* Header */}
<div style={{ padding: '24px', borderBottom: '1px solid var(--border-color)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<MessageSquare size={24} color="var(--primary-color)" />
<h2 style={{ margin: 0, fontSize: '20px' }}>Your Messages</h2>
</div>
<button onClick={toggleInbox} style={{ background: 'var(--surface-light)', border: 'none', color: 'var(--text-main)', width: '36px', height: '36px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
<X size={20} />
</button>
</div>
{/* List */}
<div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
{loading ? (
<p style={{ textAlign: 'center', color: 'var(--text-muted)' }}>Loading messages...</p>
) : inbox.length === 0 ? (
<div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-muted)' }}>
<MessageSquare size={48} opacity={0.3} style={{ marginBottom: '16px' }} />
<p>No messages yet.</p>
<p style={{ fontSize: '14px' }}>Conversations with buyers or sellers will appear here.</p>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{inbox.map(chat => (
<button
key={chat.id}
onClick={() => startChat(chat.contactId, chat.contactName, chat.contactSelfie)}
className="glass-panel"
style={{
display: 'flex', alignItems: 'center', gap: '16px', padding: '16px',
border: 'none', width: '100%', textAlign: 'left', cursor: 'pointer',
background: 'var(--surface-color)', transition: '0.2s'
}}
onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-light)'}
onMouseLeave={e => e.currentTarget.style.background = 'var(--surface-color)'}
>
<div style={{ width: '50px', height: '50px', borderRadius: '50%', overflow: 'hidden', background: 'var(--surface-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
{chat.contactSelfie ? (
<img src={chat.contactSelfie} alt={chat.contactName} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
) : (
<User size={24} color="var(--text-muted)" />
)}
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
<h4 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: 'white', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{chat.contactName}</h4>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', flexShrink: 0 }}>
{new Date(chat.timestamp).toLocaleDateString([], { month: 'short', day: 'numeric' })}
</span>
</div>
<p style={{ margin: 0, fontSize: '14px', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: chat.senderId !== currentUser.id ? 500 : 400 }}>
{chat.senderId === currentUser.id ? 'You: ' : ''}{chat.message}
</p>
</div>
</button>
))}
</div>
)}
</div>
</motion.div>
</div>
</AnimatePresence>
);
}
|