How the Date Is Computed
The pill shows the earlier of two dates: when the contact was created in SalesSheet, or the timestamp of the oldest synced email. This gives you the true start of the relationship.
const relationshipDate =
createdAt < oldestEmail
? createdAt
: oldestEmail
When It Appears
The pill only renders when all emails have been loaded (hasMoreEmails is false) and at least one email exists. It sits at the very bottom of the timeline, anchoring the conversation history.
if (!hasMoreEmails
&& emailsCount > 0
&& relationshipDate)
renderPill()
Bilingual Display
Dates are rendered in both Spanish and English using the Intl.DateTimeFormat API. This reflects SalesSheet's bilingual user base and adds a thoughtful, personal touch.
Visual Design
Teal dot (12px) with white border and shadow sits on the timeline axis. The pill uses a rounded-full border, subtle shadow, and the Users icon from Lucide to signal "relationship start."