signal-desktop/ts/components/ConversationListItem.md

With name and profile

<ConversationListItem
  name="Someone 🔥 Somewhere"
  phoneNumber="(202) 555-0011"
  avatarPath={util.gifObjectUrl}
  lastUpdated={Date.now() - 5 * 60 * 1000}
  lastMessage={{
    text: "What's going on?",
    status: 'sent',
  }}
  onClick={() => console.log('onClick')}
  i18n={util.i18n}
/>

Profile, with name, no avatar

<ConversationListItem
  phoneNumber="(202) 555-0011"
  name="Mr. Fire🔥"
  color="green"
  lastMessage={{
    text: 'Just a second',
    status: 'read',
  }}
  onClick={() => console.log('onClick')}
  i18n={util.i18n}
/>

With unread

<ConversationListItem
  phoneNumber="(202) 555-0011"
  hasUnread={true}
  lastMessage={{
    text: 'Hey there!',
    status: 'sending',
  }}
  onClick={() => console.log('onClick')}
  i18n={util.i18n}
/>

Selected

<ConversationListItem
  phoneNumber="(202) 555-0011"
  isSelected={true}
  lastMessage={{
    text: 'Hey there!',
  }}
  onClick={() => console.log('onClick')}
  i18n={util.i18n}
/>

With emoji/links in message, no status

We don't want Jumbomoji or links.

<div>
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text: 'Download at http://signal.org',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text: '🔥',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
</div>

Long content

We only show one line.

<div>
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    name="Long contact name. Esquire. The third. And stuff. And more! And more!"
    lastMessage={{
      text: 'Normal message',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text:
        "Long line. This is a really really really long line. Really really long. Because that's just how it is",
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text:
        "Long line. This is a really really really long line. Really really long. Because that's just how it is",
      status: 'read',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />

  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text:
        "Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastMessage={{
      text:
        "Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
      status: 'delivered',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
</div>

With various ages

<div>
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastUpdated={Date.now() - 5 * 60 * 60 * 1000}
    lastMessage={{
      text: 'Five hours ago',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastUpdated={Date.now() - 24 * 60 * 60 * 1000}
    lastMessage={{
      text: 'One day ago',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastUpdated={Date.now() - 7 * 24 * 60 * 60 * 1000}
    lastMessage={{
      text: 'One week ago',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <ConversationListItem
    phoneNumber="(202) 555-0011"
    lastUpdated={Date.now() - 365 * 24 * 60 * 60 * 1000}
    lastMessage={{
      text: 'One year ago',
    }}
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
</div>