Added verified badge to topbar and profile

src/components/chat/topbar.ts

@@ -40,6 +40,7 @@ import replaceContent from "../../helpers/dom/replaceContent";
 import { ChatFull } from "../../layer";
 import PopupPickUser from "../popups/pickUser";
 import PopupPeer from "../popups/peer";
+import generateVerifiedIcon from "../generateVerifiedIcon";
 
 export default class ChatTopbar {
   public container: HTMLDivElement;
@@ -600,8 +601,14 @@ export default class ChatTopbar {
       }).element;
     }
     
-    this.title.textContent = '';
+    replaceContent(this.title, titleEl);
-    this.title.append(titleEl);
+
+    if(this.chat.type === 'chat') {
+      const peer = this.appPeersManager.getPeer(this.peerId);
+      if(peer?.pFlags?.verified) {
+        this.title.append(generateVerifiedIcon());
+      }
+    }
   }
 
   public setMutedState() {

src/components/generateVerifiedIcon.ts

@@ -0,0 +1,19 @@
+export default function generateVerifiedIcon() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+  svg.setAttributeNS(null, 'width', '24');
+  svg.setAttributeNS(null, 'height', '24');
+  svg.classList.add('verified-icon');
+
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttributeNS(null, 'href', '#verified-background');
+  use.classList.add('verified-background');
+
+  const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use2.setAttributeNS(null, 'href', '#verified-check');
+  use2.classList.add('verified-check');
+
+  svg.append(use, use2);
+
+  return svg;
+}

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -49,6 +49,7 @@ import { cancelEvent } from "../../../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../../../helpers/dom/clickEvent";
 import replaceContent from "../../../helpers/dom/replaceContent";
 import appAvatarsManager from "../../../lib/appManagers/appAvatarsManager";
+import generateVerifiedIcon from "../../generateVerifiedIcon";
 
 let setText = (text: string, row: Row) => {
   //fastRaf(() => {
@@ -722,9 +723,14 @@ class PeerProfile {
 
     replaceContent(this.name, new PeerTitle({
       peerId,
-      dialog: true
+      dialog: true,
     }).element);
 
+    const peer = appPeersManager.getPeer(peerId);
+    if(peer?.pFlags?.verified) {
+      this.name.append(generateVerifiedIcon());
+    }
+
     this.setPeerStatus(true);
   }
 

src/lib/appManagers/appDialogsManager.ts

@@ -54,6 +54,7 @@ import { MyDocument } from "./appDocsManager";
 import { setSendingStatus } from "../../components/sendingStatus";
 import SortedList, { SortedElementBase } from "../../helpers/sortedList";
 import debounce from "../../helpers/schedulers/debounce";
+import generateVerifiedIcon from "../../components/generateVerifiedIcon";
 
 export type DialogDom = {
   avatarEl: AvatarElement,
@@ -1608,13 +1609,12 @@ export class AppDialogsManager {
 
     // в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
     //if(!container) {
-      const peer = appPeersManager.getPeer(peerId);
       
       // for muted icon
       titleSpanContainer.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
       
+      const peer = appPeersManager.getPeer(peerId);
       if(peer?.pFlags?.verified) {
-        titleSpanContainer.classList.add('is-verified');
         titleSpanContainer.append(generateVerifiedIcon());
       }
     //}
@@ -1717,26 +1717,6 @@ export class AppDialogsManager {
   }
 }
 
-export function generateVerifiedIcon() {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
-  svg.setAttributeNS(null, 'width', '24');
-  svg.setAttributeNS(null, 'height', '24');
-  svg.classList.add('verified-icon');
-
-  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use.setAttributeNS(null, 'href', '#verified-background');
-  use.classList.add('verified-background');
-
-  const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use2.setAttributeNS(null, 'href', '#verified-check');
-  use2.classList.add('verified-check');
-
-  svg.append(use, use2);
-
-  return svg;
-}
-
 const appDialogsManager = new AppDialogsManager();
 MOUNT_CLASS_TO.appDialogsManager = appDialogsManager;
 export default appDialogsManager;

src/scss/partials/_chatTopbar.scss

@@ -82,24 +82,18 @@
 	.user-title {
 		cursor: pointer;
 		font-size: 1rem;
-		line-height: 24px;
+		line-height: 1.5rem;
 		max-width: calc(100% - 1.5rem);
-	
+		display: flex;
-		/* @include respond-to(handhelds) {
+		align-items: center;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		} */
 	
 		span.emoji {
 			vertical-align: inherit;
 		}
 	}
 	
-	.user-title, .info {
+	.peer-title, .info {
-		white-space: nowrap;
+		@include text-overflow();
-		text-overflow: ellipsis;
-		overflow: hidden;
 		line-height: var(--line-height);
 	}
 

src/scss/partials/_chatlist.scss

@@ -373,13 +373,6 @@ ul.chatlist {
         margin-left: .125rem;
       }
     } */
-
-    .verified-icon {
-      flex: 0 0 auto;
-      width: 20px;
-      height: 20px;
-      margin-left: .125rem;
-    }
   }
 
   .user-last-message {

src/scss/partials/_profile.scss

@@ -258,26 +258,34 @@
 
   &-name {
     text-align: center;
-    font-size: 20px;
+    font-size: 1.25rem;
-    line-height: 1.3125;
+    line-height: var(--line-height);
     font-weight: 500;
-    text-overflow: ellipsis;
 	  overflow: hidden;
-    word-break: break-word;
+    max-width: 21.25rem;
-    max-width: 340px;
     margin: 0 auto;
     color: var(--primary-text-color);
+    display: flex;
+    align-items: flex-end;
 
     span.emoji {
       vertical-align: inherit;
       min-width: min-content;
     }
+
+    .peer-title {
+      @include text-overflow(false);
+    }
+
+    .verified-icon {
+      margin-bottom: 3px;
+    }
   }
 
   &-subtitle {
     text-align: center;
     color: var(--secondary-text-color);
-    font-size: 14px;
+    font-size: .875rem;
     margin-bottom: .875rem;
     margin-top: 1px;
 

src/scss/style.scss

@@ -1410,3 +1410,10 @@ middle-ellipsis-element {
     line-height: 1 !important;
   }
 }
+
+.verified-icon {
+  flex: 0 0 auto;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: .125rem;
+}