\n {/* Header */}\n

Select Contact

\n \n ✕\n \n

\n \n {/* Search */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full pl-8 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"\n />\n

\n 🔍\n

\n\n {/* Contact List */}\n

\n {filteredContacts.length === 0 ? (\n

\n {contacts.length === 0 ? (\n

📞

No contacts saved yet

\n Contacts will be saved automatically when you schedule messages\n

\n ) : (\n

🔍

No contacts found

\n Try a different search term\n

\n )}\n

\n ) : (\n filteredContacts.map((contact) => (\n onContactSelect(contact)}\n className=\"w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0 transition-colors\"\n >\n

\n \n {contact.name.charAt(0).toUpperCase()}\n \n

\n {contact.name}\n

\n {formatPhoneDisplay(contact.phoneNumber)}\n

\n {contact.lastUsed && (\n

\n Last used: {new Date(contact.lastUsed).toLocaleDateString()}\n

\n )}\n

\n →\n

\n \n ))\n )}\n

\n\n {/* Footer */}\n {contacts.length > 0 && (\n

\n {contacts.length} contact{contacts.length !== 1 ? 's' : ''} saved\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/w_ache/whatsapp/code/frontend/components/ContactPicker.tsx","extension","actionData","errors"]