Added online indicator to conversation header.

js/models/conversations.js

@@ -162,6 +162,10 @@
       this.set({ isOnline: lokiP2pAPI.isOnline(this.id) });
     },
 
+    isOnline() {
+      return this.isMe() || this.get('isOnline');
+    },
+
     isMe() {
       return this.id === this.ourNumber;
     },
@@ -391,7 +395,7 @@
           status: this.lastMessageStatus,
           text: this.lastMessage,
         },
-        isOnline: this.get('isOnline'),
+        isOnline: this.isOnline(),
 
         onClick: () => this.trigger('select', this),
       };

js/views/conversation_view.js

@@ -185,6 +185,7 @@
           isMe: this.model.isMe(),
           isBlocked: this.model.isBlocked(),
           isGroup: !this.model.isPrivate(),
+          isOnline: this.model.isOnline(),
           expirationSettingName,
           showBackButton: Boolean(this.panels && this.panels.length),
           timerOptions: Whisper.ExpirationTimerOptions.map(item => ({

ts/components/Avatar.tsx

@@ -14,6 +14,7 @@ interface Props {
   profileName?: string;
   size: number;
   borderColor?: string;
+  borderWidth?: number;
 }
 
 interface State {
@@ -49,6 +50,7 @@ export class Avatar extends React.Component<Props, State> {
       phoneNumber,
       profileName,
       borderColor,
+      borderWidth,
     } = this.props;
     const { imageBroken } = this.state;
     const hasImage = avatarPath && !imageBroken;
@@ -61,12 +63,7 @@ export class Avatar extends React.Component<Props, State> {
       !name && profileName ? ` ~${profileName}` : ''
     }`;
 
-    const borderStyle = borderColor
+    const borderStyle = this.getBorderStyle(borderColor, borderWidth);
-      ? {
-          borderColor: borderColor,
-          borderStyle: 'solid',
-        }
-      : undefined;
 
     return (
       <img
@@ -79,17 +76,18 @@ export class Avatar extends React.Component<Props, State> {
   }
 
   public renderNoImage() {
-    const { conversationType, name, size, borderColor } = this.props;
+    const {
+      conversationType,
+      name,
+      size,
+      borderColor,
+      borderWidth,
+    } = this.props;
 
     const initials = getInitials(name);
     const isGroup = conversationType === 'group';
 
-    const borderStyle = borderColor
+    const borderStyle = this.getBorderStyle(borderColor, borderWidth);
-      ? {
-          borderColor: borderColor,
-          borderStyle: 'solid',
-        }
-      : undefined;
 
     if (!isGroup && initials) {
       return (
@@ -140,4 +138,16 @@ export class Avatar extends React.Component<Props, State> {
       </div>
     );
   }
+
+  private getBorderStyle(color?: string, width?: number) {
+    const borderWidth = typeof width === 'number' ? width : 3;
+
+    return color
+      ? {
+          borderColor: color,
+          borderStyle: 'solid',
+          borderWidth: borderWidth,
+        }
+      : undefined;
+  }
 }

ts/components/ConversationListItem.tsx

@@ -7,7 +7,7 @@ import { Timestamp } from './conversation/Timestamp';
 import { ContactName } from './conversation/ContactName';
 import { TypingAnimation } from './conversation/TypingAnimation';
 
-import { Localizer } from '../types/Util';
+import { Colors, Localizer } from '../types/Util';
 
 interface Props {
   phoneNumber: string;
@@ -47,6 +47,8 @@ export class ConversationListItem extends React.Component<Props> {
       isOnline,
     } = this.props;
 
+    const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
+
     return (
       <div className="module-conversation-list-item__avatar-container">
         <Avatar
@@ -58,7 +60,7 @@ export class ConversationListItem extends React.Component<Props> {
           phoneNumber={phoneNumber}
           profileName={profileName}
           size={48}
-          borderColor={isOnline ? '#1c8260' : '#3d3e44'}
+          borderColor={borderColor}
         />
         {this.renderUnread()}
       </div>

ts/components/conversation/ConversationHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ContactName } from './ContactName';
 import { Avatar } from '../Avatar';
-import { Localizer } from '../../types/Util';
+import { Colors, Localizer } from '../../types/Util';
 import {
   ContextMenu,
   ContextMenuTrigger,
@@ -33,6 +33,7 @@ interface Props {
   isBlocked: boolean;
   isMe: boolean;
   isGroup: boolean;
+  isOnline?: boolean;
   expirationSettingName?: string;
   showBackButton: boolean;
   timerOptions: Array<TimerOption>;
@@ -118,8 +119,11 @@ export class ConversationHeader extends React.Component<Props> {
       name,
       phoneNumber,
       profileName,
+      isOnline,
     } = this.props;
 
+    const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE_LIGHT;
+
     return (
       <span className="module-conversation-header__avatar">
         <Avatar
@@ -131,6 +135,8 @@ export class ConversationHeader extends React.Component<Props> {
           phoneNumber={phoneNumber}
           profileName={profileName}
           size={28}
+          borderColor={borderColor}
+          borderWidth={2}
         />
       </span>
     );

ts/types/Util.ts

@@ -18,3 +18,9 @@ export type Color =
   | 'purple'
   | 'red'
   | 'teal';
+
+export enum Colors {
+  OFFLINE = '#3d3e44',
+  OFFLINE_LIGHT = '#cccece',
+  ONLINE = '#1c8260',
+}