Avatar fixes:

Emoji in profile name
Background color and fade-in remove after image mount

src/lib/appManagers/appChatsManager.ts

@@ -1,4 +1,4 @@
-import { $rootScope, isObject, safeReplaceObject, copy, numberWithCommas } from "../utils";
+import { $rootScope, isObject, safeReplaceObject, copy, numberWithCommas, getAbbreviation } from "../utils";
 import { RichTextProcessor } from "../richtextprocessor";
 import appUsersManager from "./appUsersManager";
 import apiManager from '../mtproto/mtprotoworker';
@@ -95,10 +95,7 @@ export class AppChatsManager {
 
     let oldChat = this.chats[apiChat.id];
 
-    let titleWords = searchIndexManager.cleanSearchText(apiChat.title || '', false).split(' ');
+    apiChat.initials = getAbbreviation(apiChat.title);
-    let firstWord = titleWords.shift();
-    let lastWord = titleWords.pop();
-    apiChat.initials = firstWord.charAt(0) + (lastWord ? lastWord.charAt(0) : '');
 
     if(apiChat.pFlags === undefined) {
       apiChat.pFlags = {};

src/lib/appManagers/appImManager.ts

@@ -2292,8 +2292,8 @@ export class AppImManager {
         let avatarElem = new AvatarElement();
         avatarElem.classList.add('user-avatar');
 
-        if(!message.fromID && message.fwd_from && message.fwd_from.from_name) {
+        if(!message.fwdFromID && message.fwd_from && message.fwd_from.from_name) {
-          avatarElem.setAttribute('peer-title', message.fwd_from.from_name);
+          avatarElem.setAttribute('peer-title', /* '🔥 FF 🔥' */message.fwd_from.from_name);
         }
 
         avatarElem.setAttribute('peer', '' + (((message.fwd_from && this.peerID == this.myID) || isForwardFromChannel ? message.fwdFromID : message.fromID) || 0));

src/lib/appManagers/appStateManager.ts

@@ -5,7 +5,7 @@ import appPeersManager from './appPeersManager';
 import appChatsManager from './appChatsManager';
 import appUsersManager from './appUsersManager';
 import apiUpdatesManager from './apiUpdatesManager';
-import { copy } from '../utils';
+import { $rootScope, copy } from '../utils';
 import { logger } from '../logger';
 import type { AppStickersManager } from './appStickersManager';
 import { App } from '../mtproto/mtproto_config';
@@ -41,12 +41,16 @@ export class AppStateManager {
 
   constructor() {
     this.loadSavedState();
+
+    $rootScope.$on('user_auth', (e) => {
+      apiUpdatesManager.attach(null);
+    });
   }
 
   public loadSavedState() {
     if(this.loaded) return this.loaded;
     return this.loaded = new Promise((resolve) => {
-      AppStorage.get<State>('state').then((state) => {
+      AppStorage.get<[State, {id: number}]>('state', 'user_auth').then(([state, auth]) => {
         const time = Date.now();
         if(state) {
           if(state?.version != STATE_VERSION) {
@@ -128,7 +132,9 @@ export class AppStateManager {
           });
         }
 
+        if(auth?.id) {
           apiUpdatesManager.attach(updates ?? null);
+        }
   
         resolve(state);
       }).catch(resolve).finally(() => {
@@ -224,6 +230,8 @@ export class AppStateManager {
   }
 }
 
+//console.trace('appStateManager include');
+
 const appStateManager = new AppStateManager();
 // @ts-ignore
 if(process.env.NODE_ENV != 'production') {

src/lib/appManagers/appUsersManager.ts

@@ -1,4 +1,4 @@
-import { safeReplaceObject, isObject, tsNow, copy, $rootScope } from "../utils";
+import { safeReplaceObject, isObject, tsNow, copy, $rootScope, getAbbreviation } from "../utils";
 import { RichTextProcessor } from "../richtextprocessor";
 import appChatsManager from "./appChatsManager";
 //import apiManager from '../mtproto/apiManager';
@@ -237,9 +237,10 @@ export class AppUsersManager {
       apiUser.rPhone = '+' + formatPhoneNumber(apiUser.phone).formatted;
     }
 
+    const fullName = apiUser.first_name + ' ' + (apiUser.last_name || '');
     if(apiUser.first_name) {
       apiUser.rFirstName = RichTextProcessor.wrapRichText(apiUser.first_name, {noLinks: true, noLinebreaks: true})
-      apiUser.rFullName = apiUser.last_name ? RichTextProcessor.wrapRichText(apiUser.first_name + ' ' + (apiUser.last_name || ''), {noLinks: true, noLinebreaks: true}) : apiUser.rFirstName;
+      apiUser.rFullName = apiUser.last_name ? RichTextProcessor.wrapRichText(fullName, {noLinks: true, noLinebreaks: true}) : apiUser.rFirstName;
     } else {
       apiUser.rFirstName = RichTextProcessor.wrapRichText(apiUser.last_name, {noLinks: true, noLinebreaks: true}) || apiUser.rPhone || 'user_first_name_deleted';
       apiUser.rFullName = RichTextProcessor.wrapRichText(apiUser.last_name, {noLinks: true, noLinebreaks: true}) || apiUser.rPhone || 'user_name_deleted';
@@ -250,12 +251,9 @@ export class AppUsersManager {
       this.usernames[searchUsername] = userID;
     }
 
-    apiUser.sortName = apiUser.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(apiUser.first_name + ' ' + (apiUser.last_name || ''), false);
+    apiUser.sortName = apiUser.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(fullName, false);
 
-    var nameWords = apiUser.sortName.split(' ');
+    apiUser.initials = getAbbreviation(fullName);
-    var firstWord = nameWords.shift();
-    var lastWord = nameWords.pop();
-    apiUser.initials = firstWord.charAt(0) + (lastWord ? lastWord.charAt(0) : '');
 
     if(apiUser.status) {
       if(apiUser.status.expires) {

src/lib/utils.ts

@@ -10,6 +10,7 @@ import type { AppMessagesManager, Dialog, MyDialogFilter } from "./appManagers/a
  */
 
 import type { DownloadOptions } from "./mtproto/apiFileManager";
+import { RichTextProcessor } from "./richtextprocessor";
 
 var _logTimer = Date.now();
 export function dT () {
@@ -329,6 +330,28 @@ export function tsNow(seconds?: boolean) {
   return seconds ? Math.floor(t / 1000) : t;
 }
 
+const el = document.createElement('span');
+export function getAbbreviation(str: string) {
+  const wrapped = RichTextProcessor.wrapEmojiText(str);
+  el.innerHTML = wrapped;
+
+  const childNodes = el.childNodes;
+  let first = '', last = '';
+
+  const firstNode = childNodes[0];
+  if('length' in firstNode) first = (firstNode as any).textContent.charAt(0).toUpperCase(); 
+  else first = (firstNode as HTMLElement).outerHTML;
+
+  if(str.indexOf(' ') !== -1) {
+    const lastNode = childNodes[childNodes.length - 1];
+    if(lastNode == firstNode) last = lastNode.textContent.split(' ').pop().charAt(0).toUpperCase();
+    else if('length' in lastNode) last = (lastNode as any).textContent.charAt(0).toUpperCase(); 
+    else last = (lastNode as HTMLElement).outerHTML;
+  }
+
+  return first + last;
+}
+
 export function safeReplaceObject(wasObject: any, newObject: any) {
   for(var key in wasObject) {
     if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') {