47 lines
1.7 KiB
React
47 lines
1.7 KiB
React
import { useApp } from '../context/AppContext'
|
|
import { colorToCss } from '../utils/color'
|
|
|
|
export default function ConnectionItem({ conn }) {
|
|
const { state, selectConnection, userId } = useApp()
|
|
const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
|
|
const other = state.userMap[otherId]
|
|
const unread = state.unread[conn.id] || 0
|
|
const isSelected = state.selectedId === conn.id
|
|
const isFriend = conn.state === 1
|
|
|
|
return (
|
|
<button
|
|
onClick={() => selectConnection(conn.id)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors
|
|
${isSelected ? 'bg-gray-700' : 'hover:bg-gray-700/50'}`}
|
|
>
|
|
<div
|
|
className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
|
|
style={{ backgroundColor: colorToCss(other?.color) }}
|
|
>
|
|
{other?.name?.[0]?.toUpperCase() ?? '?'}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1 min-w-0">
|
|
<span className="text-sm font-medium text-gray-100 truncate min-w-0">
|
|
{other?.name ?? otherId.slice(0, 8)}
|
|
</span>
|
|
{isFriend && (
|
|
<span className="text-[10px] text-green-400 shrink-0">● friend</span>
|
|
)}
|
|
</div>
|
|
{other?.pronouns && (
|
|
<span className="text-xs text-gray-500 truncate block">{other.pronouns}</span>
|
|
)}
|
|
</div>
|
|
|
|
{unread > 0 && (
|
|
<span className="shrink-0 bg-red-500 text-white text-xs font-bold rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1">
|
|
{unread > 99 ? '99+' : unread}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|