Loading chats...

\n );\n }\n\n if (chats.length === 0) {\n return (\n

💬

\n No chats yet\n

\n Start a conversation with your contacts or create a group chat\n

\n \n {contacts.length > 0 && (\n

\n Start chatting with:\n

\n {contacts.slice(0, 3).map((contact) => (\n onNewChat(contact.contactId)}\n className=\"w-full flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\n >\n

\n \n {contact.contact.avatar || '👤'}\n \n

\n {contact.contactName || contact.contact.username}\n

\n {contact.contact.email}\n

\n \n \n ))}\n

\n )}\n

\n );\n }\n\n return (\n

\n {chats.map((chat) => (\n onChatSelect(chat)}\n className=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors\"\n >\n {/* Avatar */}\n

\n \n {getChatAvatar(chat)}\n \n

\n \n {/* Chat Info */}\n

\n {getChatName(chat)}\n

\n {chat.lastMessage && (\n \n {formatTime(chat.lastMessage.timestamp)}\n \n )}\n

\n \n

\n {chat.lastMessage ? (\n <>\n {chat.lastMessage.sender.username}: {chat.lastMessage.content}\n \n ) : (\n No messages yet\n )}\n

\n \n {chat.unreadCount > 0 && (\n \n {chat.unreadCount > 99 ? '99+' : chat.unreadCount}\n \n )}\n

\n ))}\n

\n \n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Remna/R/code/frontend/components/ChatList.tsx","extension","actionData","errors"]