Fix scrolling to last bubble in outer chats

Avoid opening the same profile
Show write menu on touch devices

src/components/chat/bubbles.ts

@@ -423,12 +423,14 @@ export default class ChatBubbles {
   public constructPeerHelpers() {
     // will call when message is sent (only 1)
     this.listenerSetter.add(rootScope, 'history_append', (e) => {
-      let details = e;
+      const {peerId, storage, mid} = e;
+
+      if(peerId !== this.peerId || storage !== this.chat.getMessagesStorage()) return;
 
       if(!this.scrollable.loadedAll.bottom) {
         this.chat.setMessageId();
       } else {
-        this.renderNewMessagesByIds([details.messageId], true);
+        this.renderNewMessagesByIds([mid], true);
       }
     });
 
@@ -1180,6 +1182,11 @@ export default class ChatBubbles {
     }
 
     mids = mids.filter(mid => !this.bubbles[mid]);
+    // ! should scroll even without new messages
+    /* if(!mids.length) {
+      return;
+    } */
+
     const promise = this.performHistoryResult(mids, false, true);
     if(scrolledDown) {
       promise.then(() => {
@@ -1540,9 +1547,9 @@ export default class ChatBubbles {
       animationIntersector.unlockGroup(CHAT_ANIMATION_GROUP);
       animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP/* , true */);
 
-      fastRaf(() => {
+      //fastRaf(() => {
         this.lazyLoadQueue.unlock();
-      });
+      //});
 
       //if(dialog && lastMsgID && lastMsgID !== topMessage && (this.bubbles[lastMsgID] || this.firstUnreadBubble)) {
       if(savedPosition) {

src/components/chat/chat.ts

@@ -322,4 +322,4 @@ export default class Chat extends EventListenerBase<{
   public isAnyGroup() {
     return this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || this.appPeersManager.isAnyGroup(this.peerId);
   }
-}
+}

src/components/chat/input.ts

@@ -158,7 +158,7 @@ export default class ChatInput {
 
     this.goDownBtn = Button('bubbles-go-down btn-corner btn-circle z-depth-1 hide', {icon: 'arrow_down'});
     this.goDownUnreadBadge = document.createElement('span');
-    this.goDownUnreadBadge.classList.add('badge', 'badge-24', 'badge-green');
+    this.goDownUnreadBadge.classList.add('badge', 'badge-24', 'badge-primary');
     this.goDownBtn.append(this.goDownUnreadBadge);
     this.inputContainer.append(this.goDownBtn);
 

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -335,7 +335,7 @@ class PeerProfileAvatars {
         } else {
           const promises: [Promise<ChatFull>, ReturnType<AppMessagesManager['getSearch']>] = [] as any;
           if(!listLoader.current) {
-            promises.push(appProfileManager.getChatFull(peerId));
+            promises.push(appProfileManager.getChatFull(-peerId));
           }
           
           promises.push(appMessagesManager.getSearch({
@@ -767,6 +767,7 @@ export default class AppSharedMediaTab extends SliderSuperTab {
   private searchSuper: AppSearchSuper;
 
   private profile: PeerProfile;
+  peerChanged: boolean;
 
   constructor(slider: SidebarSlider) {
     super(slider, false);
@@ -1054,10 +1055,11 @@ export default class AppSharedMediaTab extends SliderSuperTab {
   }
 
   public setPeer(peerId: number, threadId = 0) {
-    if(this.peerId === peerId && this.threadId === peerId) return;
+    if(this.peerId === peerId && this.threadId === threadId) return false;
 
     this.peerId = peerId;
     this.threadId = threadId;
+    this.peerChanged = true;
 
     if(this.init) {
       this.init();
@@ -1071,9 +1073,17 @@ export default class AppSharedMediaTab extends SliderSuperTab {
     });
 
     this.profile.setPeer(peerId, threadId);
+    
+    return true;
   }
 
   public fillProfileElements() {
+    if(!this.peerChanged) {
+      return;
+    }
+
+    this.peerChanged = false;
+
     this.cleanupHTML();
 
     this.profile.fillProfileElements();

src/index.hbs

@@ -7,13 +7,14 @@
   <meta name="description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <!-- do not paste other icons here, only change these. 'icon' type must be single -->
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png?v=jw3mK7G9Ry">
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png?v=jw3mK7G9Ry">
   <!--<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/android-chrome-192x192.png?v=jw3mK7G9Ry">
   <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png?v=jw3mK7G9Ry">-->
   <link rel="manifest" href="/assets/img/site.webmanifest?v=jw3mK7G9Ry">
   <link rel="mask-icon" href="/assets/img/safari-pinned-tab.svg?v=jw3mK7G9Ry" color="#3390ec">
-  <link rel="shortcut icon" href="/assets/img/favicon.ico?v=jw3mK7G9Ry">
+  <!--<link rel="shortcut icon" href="/assets/img/favicon.ico?v=jw3mK7G9Ry">-->
   <meta name="apple-mobile-web-app-title" content="Telegram WebK">
   <meta name="application-name" content="Telegram WebK">
   <meta name="msapplication-TileColor" content="#2d89ef">

src/lib/appManagers/appImManager.ts

@@ -695,9 +695,11 @@ export class AppImManager {
         searchTab.close();
       }
   
-      appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId);
-      appSidebarRight.sharedMediaTab.loadSidebarMedia(true);
-      appSidebarRight.sharedMediaTab.fillProfileElements();
+      const isSet = appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId);
+      if(isSet) {
+        appSidebarRight.sharedMediaTab.loadSidebarMedia(true);
+        appSidebarRight.sharedMediaTab.fillProfileElements();
+      }
       
       /* setTimeout(() => {
         appSidebarRight.sharedMediaTab.loadSidebarMedia(false);
@@ -837,9 +839,7 @@ export class AppImManager {
     if(!peerId) return '';
 
     if(peerId < 0) { // not human
-      const chat = appPeersManager.getPeer(peerId);
-
-      const chatInfo = await appProfileManager.getChatFull(chat.id) as any;
+      const chatInfo = await appProfileManager.getChatFull(-peerId) as any;
       this.chat.log('chatInfo res:', chatInfo);
 
       const participants_count = chatInfo.participants_count || (chatInfo.participants && chatInfo.participants.participants && chatInfo.participants.participants.length) || 1;

src/lib/appManagers/appMessagesManager.ts

@@ -1401,7 +1401,7 @@ export class AppMessagesManager {
       this.saveMessages([message], {storage, isOutgoing: true});
       setTimeout(() => {
         this.setDialogTopMessage(message);
-        rootScope.broadcast('history_append', {peerId, messageId, my: true});
+        rootScope.broadcast('history_append', {storage, peerId, mid: messageId});
       }, 0);
     }
 

src/lib/appManagers/appNotificationsManager.ts

@@ -237,7 +237,7 @@ export class AppNotificationsManager {
             const ctx = canvas.getContext('2d');
             ctx.beginPath();
             ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI, false);
-            ctx.fillStyle = '#5b8af1';
+            ctx.fillStyle = '#3390ec';
             ctx.fill();
 
             let fontSize = 24;

src/lib/rootScope.ts

@@ -44,7 +44,7 @@ export type BroadcastEvents = {
   'dialogs_multiupdate': {[peerId: string]: Dialog},
   'dialogs_archived_unread': {count: number},
   
-  'history_append': {peerId: number, messageId: number, my?: boolean},
+  'history_append': {storage: MessagesStorage, peerId: number, mid: number},
   'history_update': {storage: MessagesStorage, peerId: number, mid: number},
   'history_reply_markup': {peerId: number},
   'history_multiappend': AppMessagesManager['newMessagesToHandle'],

src/pages/pageSignIn.ts

@@ -31,7 +31,7 @@ type Country = _Country & {
 };
 
 //import _countries from '../countries_pretty.json';
-let btnNext: HTMLButtonElement = null;
+let btnNext: HTMLButtonElement = null, btnQr: HTMLButtonElement;
 
 let onFirstMount = () => {
   if(Modes.test) {
@@ -362,7 +362,7 @@ let onFirstMount = () => {
 
   attachClickEvent(btnNext, onSubmit);
 
-  const btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'});
+  btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'});
 
   let qrMounted = false;
   btnQr.addEventListener('click', () => {
@@ -494,6 +494,10 @@ const page = new Page('page-sign', true, onFirstMount, () => {
     btnNext.removeAttribute('disabled');
   }
 
+  if(btnQr) {
+    btnQr.removeAttribute('disabled');
+  }
+
   appStateManager.pushToState('authState', {_: 'authStateSignIn'});
   appStateManager.saveState();
 });

src/scss/partials/_badge.scss

@@ -45,10 +45,6 @@
     padding: 0;
   } */
 
-  &-green {
-    background-color: $color-green;
-  }
-
   &-primary {
     background-color: var(--primary-color);
   }

src/scss/partials/_chatBubble.scss

@@ -2094,9 +2094,9 @@ $bubble-margin: .25rem;
   width: 100%;
 
   &-row {
-    margin-top: 5px;
+    margin-top: .3125rem;
     overflow: hidden;
-    height: 40px;
+    min-height: 2.5rem;
     display: flex;
 
     &:last-child {
@@ -2106,44 +2106,61 @@ $bubble-margin: .25rem;
   }
 
   &-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    padding: .5625rem 0;
     border-radius: 6px;
-    //background-color: rgba(0, 0, 0, .23);
-    background: var(--message-highlightning-color);
     z-index: 2;
-    font-size: 14px;
+    font-size: .875rem;
     user-select: none;
     text-align: center;
-    color: white !important;
+    color: #fff !important;
     outline: none;
     border: none;
     width: 100%;
     cursor: pointer;
     position: relative;
-    transition: background-color .35s ease;
     overflow: hidden;
+    //line-height: var(--line-height);
+    background: var(--message-highlightning-color);
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      opacity: 0;
+      z-index: -1;
+      background-color: #fff;
+
+      @include animation-level(2) {
+        transition: opacity .35s ease;
+      }
+    }
 
     @include hover() {
-      background-color: rgba(0, 0, 0, .06);
+      &:before {
+        opacity: var(--hover-alpha);
+      }
     }
 
     & + & {
-      margin-left: 5px;
+      margin-left: .3125rem;
     }
 
     &.is-link:before {
       content: $tgico-arrow-next;
       position: absolute;
-      right: 2px;
-      top: 2px;
+      right: .125rem;
+      top: .125rem;
       display: block;
       transform: rotate(-45deg);
     }
 
-    /* img.emoji {
-      vertical-align: middle !important;
-    } */
+    img.emoji {
+      margin: 0 .125rem;
+    }
   }
 }

src/scss/partials/_leftSidebar.scss

@@ -364,17 +364,15 @@
 
         position: fixed !important;
         z-index: 1;
+      }
 
-        &:not(.is-hidden) {
-          transform: translateZ(0);
-        }
+      html:not(.no-touch) & {
+        transform: translateZ(0);
       }
     }
 
-    @include respond-to(not-handhelds) {
-      html.no-touch &:hover .btn-corner:not(.is-hidden) {
-        transform: translateZ(0);
-      }
+    html.no-touch &:hover .btn-corner:not(.is-hidden) {
+      transform: translateZ(0);
     }
   }
 

src/scss/style.scss

@@ -9,7 +9,6 @@ $border-radius: 8px;
 $border-radius-medium: 10px;
 $border-radius-big: 12px;
 
-$color-green: #4DCD5E;
 $hover-alpha: .08;
 
 //$small-screen: 720px;