Show about info from contact profiles

ts/components/ContactListItem.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { About } from './conversation/About';
 import { Avatar } from './Avatar';
 import { Emojify } from './conversation/Emojify';
 import { InContactsIcon } from './InContactsIcon';
@@ -12,12 +13,12 @@ import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
 
 type Props = {
+  about?: string;
   avatarPath?: string;
   color?: ColorType;
   i18n: LocalizerType;
   isAdmin?: boolean;
   isMe?: boolean;
-  isVerified?: boolean;
   name?: string;
   onClick?: () => void;
   phoneNumber?: string;
@@ -53,24 +54,11 @@ export class ContactListItem extends React.Component<Props> {
   }
 
   public render(): JSX.Element {
-    const {
-      i18n,
-      isAdmin,
-      isMe,
-      isVerified,
-      name,
-      onClick,
-      phoneNumber,
-      profileName,
-      title,
-    } = this.props;
+    const { about, i18n, isAdmin, isMe, name, onClick, title } = this.props;
 
     const displayName = isMe ? i18n('you') : title;
     const shouldShowIcon = Boolean(name);
 
-    const showNumber = Boolean(isMe || name || profileName);
-    const showVerified = !isMe && isVerified;
-
     return (
       <button
         onClick={onClick}
@@ -93,12 +81,7 @@ export class ContactListItem extends React.Component<Props> {
               ) : null}
             </div>
             <div className="module-contact-list-item__text__additional-data">
-              {showVerified ? (
-                <div className="module-contact-list-item__text__verified-icon" />
-              ) : null}
-              {showVerified ? ` ${i18n('verified')}` : null}
-              {showVerified && showNumber ? ' ∙ ' : null}
-              {showNumber ? phoneNumber : null}
+              <About text={about} />
             </div>
           </div>
           {isAdmin ? (