a bit more work on delayed topic removal

src/views/messages-view.jsx

@@ -204,6 +204,7 @@ class MessagesView extends React.Component {
         isVerified: false,
         isStaff: false,
         isDangerous: false,
+        deleted: false,
         docPreview: null,
         imagePreview: null,
         imagePostview: null,
@@ -237,7 +238,8 @@ class MessagesView extends React.Component {
         scrollPosition: 0,
         fetchingMessages: false,
         reply: reply,
-        showGoToLastButton: false
+        showGoToLastButton: false,
+        deleted: topic._deleted
       };
 
       if (topic) {
@@ -1077,7 +1079,10 @@ class MessagesView extends React.Component {
           }
         }
         const avatar = this.state.avatar || true;
-        const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
+        const online = this.state.deleted ? null :
+          this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
+
+        const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
 
         component2 = (
           <>
@@ -1093,11 +1098,12 @@ class MessagesView extends React.Component {
                   tinode={this.props.tinode}
                   avatar={avatar}
                   topic={this.state.topic}
-                  title={this.state.title} />
+                  title={this.state.title}
+                  deleted={this.state.deleted} />
                 {!isChannel ? <span className={online} /> : null}
               </div>
               <div id="topic-title-group">
-                <div id="topic-title" className="panel-title">{
+                <div id="topic-title" className={titleClass}>{
                   this.state.title ||
                   <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
                     description="Title shown when the topic has no name" /></i>
@@ -1158,7 +1164,7 @@ class MessagesView extends React.Component {
               <SendMessage
                 tinode={this.props.tinode}
                 noInput={!!this.props.forwardMessage}
-                disabled={!this.state.isWriter || topic.deleted}
+                disabled={!this.state.isWriter || this.state.deleted}
                 onKeyPress={this.sendKeyPress}
                 onSendMessage={this.sendMessage}
                 onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile}

src/widgets/contact-list.jsx

@@ -115,7 +115,7 @@ class ContactList extends React.Component {
               isVerified={c.trusted && c.trusted.verified}
               isStaff={c.trusted && c.trusted.staff}
               isDangerous={c.trusted && c.trusted.danger}
-              deleted={c.deleted}
+              deleted={c._deleted}
               item={key}
               index={contactNodes.length}
               key={key} />

src/widgets/contact.jsx

@@ -86,6 +86,7 @@ class Contact extends React.Component {
     const icon = deliveryMarker(this.props.received);
     const marker = icon ? <i className={'material-icons small space-right' +
       (icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
+    const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
 
     return (
       <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
@@ -95,7 +96,7 @@ class Contact extends React.Component {
             avatar={avatar}
             title={this.props.title}
             topic={this.props.item}
-            disabled={this.props.deleted} />
+            deleted={this.props.deleted} />
           {this.props.deleted ? <i className="deleted material-icons">cancel</i> :
             this.props.showOnline ? <span className={online} /> :
             (this.props.showCheckmark && this.props.selected) ?
@@ -103,9 +104,10 @@ class Contact extends React.Component {
             : null}
         </div>
         <div className="text-box">
-          <div><span className="contact-title">{title}</span>
+          <div><span className={titleClass}>{title}</span>
             {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
-            <ContactBadges badges={icon_badges} /><UnreadBadge count={this.props.unread} />
+            <ContactBadges badges={icon_badges} />
+            {!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :

src/widgets/letter-tile.jsx

@@ -13,16 +13,16 @@ export default class LetterTile extends React.PureComponent {
       const iconColor = idToColorClass(this.props.topic, isGroup);
       if (this.props.topic && this.props.title && this.props.title.trim()) {
         const letter = this.props.title.trim().charAt(0);
-        const className = 'lettertile ' + iconColor + (this.props.disabled ? ' disabled' : '');
+        const className = 'lettertile ' + iconColor + (this.props.deleted ? ' disabled' : '');
         avatar = (<div className={className}><div>{letter}</div></div>)
       } else {
-        const className = 'material-icons ' + iconColor + (this.props.disabled ? ' disabled' : '');
+        const className = 'material-icons ' + iconColor + (this.props.deleted ? ' disabled' : '');
         avatar = isGroup ? <i className={className}>group</i> : <i className={className}>person</i>;
       }
     } else if (this.props.avatar) {
       const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
       // If avatar image is invalid, show a placeholder.
-      const className = 'avatar' + (this.props.disabled ? ' disabled' : '');
+      const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
       avatar = <img className={className} alt="avatar" src={url}
         onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
     } else {