pinning topics work as expected

css/base.css

@@ -1319,8 +1319,8 @@ i.search {
 .contact-box > li.selected {
   background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
 }
-.contact-box > li.pinned {
+.contact-box > li.tpinned {
-  background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
+  background-color: var(--clr-background-blue-gray-75); /* blue-gray 75 highlight */
 }
 .contact-box > li.action {
   min-height: 2.5rem;

src/views/acc-general-view.jsx

@@ -32,7 +32,6 @@ export default class AccGeneralView extends React.PureComponent {
   }
 
   handleSendOnEnterSelected(e) {
-    console.log('handleSendOnEnterSelected', e.currentTarget.value);
     this.setState({sendOnEnter: e.currentTarget.value});
     this.props.onSendOnEnterChanged(e.currentTarget.value);
   }

src/views/tinode-web.jsx

@@ -843,13 +843,17 @@ class TinodeWeb extends React.Component {
   }
 
   tnMeMetaDesc(desc) {
-    if (desc) {
+    if (!desc) {
+      return;
+    }
+
     if (desc.public) {
       this.setState({
         sidePanelTitle: desc.public.fn,
         sidePanelAvatar: makeImageUrl(desc.public.photo)
       });
     }
+
     if (desc.trusted) {
       const badges = [];
       for (const [key, val] of Object.entries(desc.trusted)) {
@@ -861,11 +865,15 @@ class TinodeWeb extends React.Component {
         myTrustedBadges: badges,
       });
     }
+
     if (desc.acs) {
       this.setState({
         incognitoMode: !desc.acs.isPresencer()
       });
     }
+
+    if (TinodeWeb.checkIfPinsUpdated(desc, this.state.chatList)) {
+      this.resetContactList();
     }
   }
 
@@ -985,15 +993,21 @@ class TinodeWeb extends React.Component {
       return pins != 0 ? pins : (b.touched || past).getTime() - (a.touched || past).getTime();
     });
 
-    newState.chatList.forEach(c => {
-      console.log("sorted:", c.topic, me.pinnedTopicRank(c.topic));
-    });
-
     // Merge search results and chat list.
     newState.searchableContacts = TinodeWeb.prepareSearchableContacts(newState.chatList, this.state.searchResults);
     this.setState(newState);
   }
 
+  static checkIfPinsUpdated(me, chatList) {
+    for (let i = 0; i < chatList.length; i++) {
+      const c = chatList[i];
+      if (!!me.pinnedTopicRank(c.topic) != c.pinned) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   /* Fnd topic: find contacts by tokens */
   tnInitFind() {
     const fnd = this.tinode.getFndTopic();
@@ -1690,7 +1704,7 @@ class TinodeWeb extends React.Component {
       subscribed && deleter && !self ? 'messages_clear_hard' : null,
       self ? null : (muted ? (blocked ? null : 'topic_unmute') : 'topic_mute'),
       self ? null : (self_blocked ? 'topic_unblock' : 'topic_block'),
-      subscribed ? (pinned ? 'topic_unpin' : 'topic_pin') : null,
+      pinned ? 'topic_unpin' : 'topic_pin',
       archived ? 'topic_restore' : 'topic_archive',
       'topic_delete'
     ];

src/widgets/contact-list.jsx

@@ -132,6 +132,7 @@ class ContactList extends React.Component {
               badges={badges}
               showCheckmark={showCheckmark}
               selected={selected}
+              pinned={c.pinned}
               showOnline={this.props.showOnline && !isChannel}
               isChannel={isChannel}
               isGroup={isGroup}

src/widgets/contact.jsx

@@ -117,7 +117,7 @@ class Contact extends React.Component {
     const comment = preview || this.props.comment ||
       (self ? this.props.intl.formatMessage(messages.self_topic_comment) : '\u00A0');
     const bgColor = this.props.showCheckmark ? null :
-      (this.props.selected ? 'selected' : (this.props.pinned ? 'pinned' : null));
+      (this.props.selected ? 'selected' : (this.props.pinned ? 'tpinned' : null));
     return (
       <li className={bgColor} onClick={this.handleClick}>
         <div className="avatar-box">

umd/index.dev.js

@@ -8714,7 +8714,6 @@ class AccGeneralView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     this.props.onTextSizeChanged(e.currentTarget.value / 10 | 0);
   }
   handleSendOnEnterSelected(e) {
-    console.log('handleSendOnEnterSelected', e.currentTarget.value);
     this.setState({
       sendOnEnter: e.currentTarget.value
     });
@@ -12580,7 +12579,9 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_17__["default"].navigateTo(urlHash);
   }
   tnMeMetaDesc(desc) {
-    if (desc) {
+    if (!desc) {
+      return;
+    }
     if (desc.public) {
       this.setState({
         sidePanelTitle: desc.public.fn,
@@ -12603,6 +12604,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         incognitoMode: !desc.acs.isPresencer()
       });
     }
+    if (TinodeWeb.checkIfPinsUpdated(desc, this.state.chatList)) {
+      this.resetContactList();
     }
   }
   tnMeContactUpdate(what, cont) {
@@ -12685,12 +12688,18 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       const pins = me.pinnedTopicRank(b.topic) - me.pinnedTopicRank(a.topic);
       return pins != 0 ? pins : (b.touched || past).getTime() - (a.touched || past).getTime();
     });
-    newState.chatList.forEach(c => {
-      console.log("sorted:", c.topic, me.pinnedTopicRank(c.topic));
-    });
     newState.searchableContacts = TinodeWeb.prepareSearchableContacts(newState.chatList, this.state.searchResults);
     this.setState(newState);
   }
+  static checkIfPinsUpdated(me, chatList) {
+    for (let i = 0; i < chatList.length; i++) {
+      const c = chatList[i];
+      if (!!me.pinnedTopicRank(c.topic) != c.pinned) {
+        return true;
+      }
+    }
+    return false;
+  }
   tnInitFind() {
     const fnd = this.tinode.getFndTopic();
     fnd.onSubsUpdated = this.tnFndSubsUpdated;
@@ -13330,7 +13339,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     } : null, subscribed && p2p && webrtc ? {
       title: this.props.intl.formatMessage(messages.menu_item_video_call),
       handler: this.handleStartVideoCall
-    } : null, subscribed ? 'messages_clear' : null, subscribed && deleter && !self ? 'messages_clear_hard' : null, self ? null : muted ? blocked ? null : 'topic_unmute' : 'topic_mute', self ? null : self_blocked ? 'topic_unblock' : 'topic_block', subscribed ? pinned ? 'topic_unpin' : 'topic_pin' : null, archived ? 'topic_restore' : 'topic_archive', 'topic_delete'];
+    } : null, subscribed ? 'messages_clear' : null, subscribed && deleter && !self ? 'messages_clear_hard' : null, self ? null : muted ? blocked ? null : 'topic_unmute' : 'topic_mute', self ? null : self_blocked ? 'topic_unblock' : 'topic_block', pinned ? 'topic_unpin' : 'topic_pin', archived ? 'topic_restore' : 'topic_archive', 'topic_delete'];
   }
   handleHideContextMenu() {
     this.setState({
@@ -16413,6 +16422,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
             badges: badges,
             showCheckmark: showCheckmark,
             selected: selected,
+            pinned: c.pinned,
             showOnline: this.props.showOnline && !isChannel,
             isChannel: isChannel,
             isGroup: isGroup,
@@ -16600,7 +16610,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
     }, icon.name) : null;
     const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
     const comment = preview || this.props.comment || (self ? this.props.intl.formatMessage(messages.self_topic_comment) : '\u00A0');
-    const bgColor = this.props.showCheckmark ? null : this.props.selected ? 'selected' : this.props.pinned ? 'pinned' : null;
+    const bgColor = this.props.showCheckmark ? null : this.props.selected ? 'selected' : this.props.pinned ? 'tpinned' : null;
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: bgColor,
       onClick: this.handleClick

umd/tinode.dev.js

@@ -3496,6 +3496,7 @@ class TopicMe extends _topic_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     }
   }
   _processMetaDesc(desc) {
+    console.log("_processMetaDesc", desc);
     const turnOff = desc.acs && !desc.acs.isPresencer() && this.acs && this.acs.isPresencer();
     (0,_utils_js__WEBPACK_IMPORTED_MODULE_3__.mergeObj)(this, desc);
     this._tinode._db.updTopic(this);
@@ -5242,7 +5243,7 @@ function rfc3339DateString(d) {
   const millis = d.getUTCMilliseconds();
   return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate()) + 'T' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds()) + (millis ? '.' + pad(millis, 3) : '') + 'Z';
 }
-function mergeObj(dst, src, ignore) {
+function mergeObj(dst, src) {
   if (typeof src != 'object') {
     if (src === undefined) {
       return dst;
@@ -5253,7 +5254,7 @@ function mergeObj(dst, src, ignore) {
     return src;
   }
   if (src === null) {
-    return src;
+    return dst;
   }
   if (src instanceof Date && !isNaN(src)) {
     return !dst || !(dst instanceof Date) || isNaN(dst) || dst < src ? src : dst;
@@ -5268,16 +5269,18 @@ function mergeObj(dst, src, ignore) {
     dst = src.constructor();
   }
   for (let prop in src) {
-    if (src.hasOwnProperty(prop) && (!ignore || !ignore[prop]) && prop != '_noForwarding') {
+    if (src.hasOwnProperty(prop) && prop != '_noForwarding') {
       try {
         dst[prop] = mergeObj(dst[prop], src[prop]);
-      } catch (err) {}
+      } catch (err) {
+        console.warn("Error merging property:", prop, err);
+      }
     }
   }
   return dst;
 }
-function mergeToCache(cache, key, newval, ignore) {
+function mergeToCache(cache, key, newval) {
-  cache[key] = mergeObj(cache[key], newval, ignore);
+  cache[key] = mergeObj(cache[key], newval);
   return cache[key];
 }
 function simplify(obj) {