Fix contact duplicate in search

src/components/appSearch.ts

@@ -182,9 +182,8 @@ export default class AppSearch {
         //console.log('input search contacts result:', contacts);
 
         let setResults = (results: Peer[], group: SearchGroup, showMembersCount = false) => {
-          results.forEach((inputPeer) => {
+          // ! because contacts.search returns duplicates in my_results
-            let peerID = appPeersManager.getPeerID(inputPeer);
+          new Set(results.map(peer => appPeersManager.getPeerID(peer))).forEach((peerID) => {
-
             if(peerID == $rootScope.myID) {
               if(!renderedSaved) {
                 this.renderSaved();

src/lib/appManagers/appDialogsManager.ts

@@ -838,7 +838,7 @@ export class AppDialogsManager {
       dialog = _dialog;
     }
 
-    let peerID: number = dialog.peerID;
+    const peerID: number = dialog.peerID;
 
     if(!container) {
       if(this.doms[peerID]) return;
@@ -851,17 +851,17 @@ export class AppDialogsManager {
 
     let title = appPeersManager.getPeerTitle(peerID, false, onlyFirstName);
 
-    let avatarEl = new AvatarElement();
+    const avatarEl = new AvatarElement();
     avatarEl.setAttribute('dialog', meAsSaved ? '1' : '0');
     avatarEl.setAttribute('peer', '' + peerID);
     avatarEl.classList.add('dialog-avatar');
 
     if(drawStatus && peerID != $rootScope.myID && dialog.peer) {
-      let peer = dialog.peer;
+      const peer = dialog.peer;
       
       switch(peer._) {
         case 'peerUser':
-          let user = appUsersManager.getUser(peerID);
+          const user = appUsersManager.getUser(peerID);
           //console.log('found user', user);
   
           if(user.status && user.status._ == 'userStatusOnline') {
@@ -874,10 +874,10 @@ export class AppDialogsManager {
       }
     }
 
-    let captionDiv = document.createElement('div');
+    const captionDiv = document.createElement('div');
     captionDiv.classList.add('user-caption');
 
-    let titleSpan = document.createElement('span');
+    const titleSpan = document.createElement('span');
     titleSpan.classList.add('user-title');
 
     if(peerID == $rootScope.myID && meAsSaved) {
@@ -888,11 +888,11 @@ export class AppDialogsManager {
     //p.classList.add('')
 
     // в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
-    if(!container) {
+    //if(!container) {
       let peer: any;
 
       // for muted icon
-      titleSpan.classList.add('tgico');
+      titleSpan.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
 
       if(peerID < 0) {
         peer = appChatsManager.getChat(-peerID);
@@ -906,15 +906,15 @@ export class AppDialogsManager {
         i.classList.add('verified-icon');
         titleSpan.append(i);
       }
-    }
+    //}
     
-    let span = document.createElement('span');
+    const span = document.createElement('span');
     span.classList.add('user-last-message');
 
     //captionDiv.append(titleSpan);
     //captionDiv.append(span);
 
-    let paddingDiv = document.createElement('div');
+    const paddingDiv = document.createElement('div');
     paddingDiv.classList.add('rp');
     paddingDiv.append(avatarEl, captionDiv);
 
@@ -938,30 +938,34 @@ export class AppDialogsManager {
     }
     
 
-    let li = document.createElement('li');
+    const li = document.createElement('li');
     li.append(paddingDiv);
     li.setAttribute('data-peerID', '' + peerID);
 
-    let statusSpan = document.createElement('span');
+    const statusSpan = document.createElement('span');
     statusSpan.classList.add('message-status');
 
-    let lastTimeSpan = document.createElement('span');
+    const lastTimeSpan = document.createElement('span');
     lastTimeSpan.classList.add('message-time');
 
-    let unreadMessagesSpan = document.createElement('span');
+    const unreadMessagesSpan = document.createElement('span');
+    unreadMessagesSpan.classList.add('dialog-subtitle-badge');
 
-    let titleP = document.createElement('p');
+    const titleP = document.createElement('p');
+    titleP.classList.add('dialog-title');
 
-    let rightSpan = document.createElement('span');
+    const rightSpan = document.createElement('span');
+    rightSpan.classList.add('dialog-title-details');
     rightSpan.append(statusSpan, lastTimeSpan);
     titleP.append(titleSpan, rightSpan);
 
-    let messageP = document.createElement('p');
+    const messageP = document.createElement('p');
+    messageP.classList.add('dialog-subtitle');
     messageP.append(span, unreadMessagesSpan);
 
     captionDiv.append(titleP, messageP);
 
-    let dom: DialogDom = {
+    const dom: DialogDom = {
       avatarEl,
       captionDiv,
       titleSpan,

src/lib/appManagers/appUsersManager.ts

@@ -584,7 +584,7 @@ export class AppUsersManager {
       q: query,
       limit
     }).then((peers) => {
-      //console.log(peers);
+      //console.log('search contacts result:', peers);
       this.saveApiUsers(peers.users);
       appChatsManager.saveApiChats(peers.chats);
 

src/scss/partials/_chatlist.scss

@@ -194,18 +194,32 @@
     align-items: flex-start;
     //height: 1.7rem; // hot-fix
     height: 27px; // maybe new hot-fix
+  }
 
-    /* span:not(.tgico-pinnedchat):not(.emoji):last-child { */
+  .dialog {
-    .user-title + span {
+    &-title {
+      &-details {
         /* font-size: .9rem; */
         //font-size: .8rem;
         font-size: .75rem;
         padding: 1px 0px 0px 0px;
         flex: 0 0 auto;
       }
+    }
     
-    .user-last-message + span:not(.tgico-pinnedchat) {
+    &-subtitle {
+      &-badge {
         font-size: .9rem;
+
+        &.tgico-pinnedchat {
+          width: 24px;
+          font-size: 1.5rem;
+        }
+
+        &:not(:empty), &.tgico-pinnedchat {
+          margin-left: .5rem;
+        }
+      }
     }
   }
 
@@ -267,7 +281,6 @@
   }
 
   .user-last-message {
-    max-width: 86%;
     img.emoji {
       width: 20px;
       height: 20px;
@@ -317,16 +330,11 @@
 
   .unread {
     min-width: 24px;
-    padding: 0 8px;
+    padding: 0 7.75px; // ! fix initial width due to font-size: .9rem;
     font-weight: 500;
     transition: .2s background-color;
   }
 
-  .tgico-pinnedchat {
-    width: 24px;
-    font-size: 1.5rem;
-  }
-
   .unread:empty {
     visibility: hidden;
   }

src/scss/partials/_leftSidebar.scss

@@ -57,7 +57,7 @@
       border-bottom: none;
 
       ul {
-        justify-content: space-between;
+        justify-content: start;
         z-index: 0;
       }
 
@@ -86,16 +86,17 @@
       }
     }
 
-    span.unread-count {
+    .unread-count {
       margin-left: 5px;
       background: #50a2e9;
-      height: 20px;
+      height: 1.25rem;
-      border-radius: 12px;
+      border-radius: .75rem;
       font-weight: 500;
       color: white;
-      line-height: 22px;
+      line-height: 1.25rem;
-      min-width: 20px;
+      min-width: 1.25rem;
-      padding: 0 6px;
+      font-size: .9rem; // ! this will fix vertical center
+      padding: 0 5.75px;
 
       &:empty {
         display: none;
@@ -644,7 +645,7 @@
         margin-top: -2px;
       }
   
-      span.user-last-message {
+      .user-last-message {
         font-size: 15px;
         margin-top: 2px;
       }
@@ -726,8 +727,8 @@
       margin-top: -2px;
     }
 
-    p span.user-title {
+    .user-title {
-      font-weight: 500;
+      font-weight: 500 !important;
     }
 
     .dialog-avatar {