Search multiselect

Fix keyboard inputs on iOS
Alt+ArrowUp/ArrowDown shortcut

src/components/appMediaViewer.ts

@@ -1684,7 +1684,9 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
   onForwardClick = () => {
     if(this.currentMessageId) {
       //appSidebarRight.forwardTab.open([this.currentMessageId]);
-      new PopupForward(this.currentPeerId, [this.currentMessageId], () => {
+      new PopupForward({
+        [this.currentPeerId]: [this.currentMessageId]
+      }, () => {
         return this.close();
       });
     }

src/components/appSearchSuper..ts

@@ -21,7 +21,7 @@ import AppMediaViewer from "./appMediaViewer";
 import { SearchGroup, SearchGroupType } from "./appSearch";
 import { horizontalMenu } from "./horizontalMenu";
 import LazyLoadQueue from "./lazyLoadQueue";
-import { putPreloader } from "./misc";
+import { attachContextMenuListener, openBtnMenu, positionMenu, putPreloader } from "./misc";
 import { ripple } from "./ripple";
 import Scrollable, { ScrollableX } from "./scrollable";
 import { wrapDocument, wrapPhoto, wrapVideo } from "./wrappers";
@@ -42,6 +42,14 @@ import { isTouchSupported } from "../helpers/touchSupport";
 import handleTabSwipe from "../helpers/dom/handleTabSwipe";
 import windowSize from "../helpers/windowSize";
 import { formatPhoneNumber } from "../helpers/formatPhoneNumber";
+import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
+import PopupForward from "./popups/forward";
+import PopupDeleteMessages from "./popups/deleteMessages";
+import Row from "./row";
+import htmlToDocumentFragment from "../helpers/dom/htmlToDocumentFragment";
+import { SearchSelection } from "./chat/selection";
+import { cancelEvent } from "../helpers/dom/cancelEvent";
+import { attachClickEvent, simulateClickEvent } from "../helpers/dom/clickEvent";
 
 //const testScroll = false;
 
@@ -69,6 +77,149 @@ export type SearchSuperMediaTab = {
   scroll?: {scrollTop: number, scrollHeight: number}
 };
 
+class SearchContextMenu {
+  private buttons: (ButtonMenuItemOptions & {verify?: () => boolean, withSelection?: true})[];
+  private element: HTMLElement;
+  private target: HTMLElement;
+  private peerId: number;
+  private mid: number;
+  private isSelected: boolean;
+
+  constructor(
+    private attachTo: HTMLElement,
+    private searchSuper: AppSearchSuper
+  ) {
+    const onContextMenu = (e: MouseEvent) => {
+      if(this.init) {
+        this.init();
+        this.init = null;
+      }
+
+      let item: HTMLElement;
+      try {
+        item = findUpClassName(e.target, 'search-super-item');
+      } catch(e) {}
+
+      if(!item) return;
+
+      if(e instanceof MouseEvent) e.preventDefault();
+      if(this.element.classList.contains('active')) {
+        return false;
+      }
+      if(e instanceof MouseEvent) e.cancelBubble = true;
+
+      this.target = item;
+      this.peerId = +item.dataset.peerId;
+      this.mid = +item.dataset.mid;
+      this.isSelected = searchSuper.selection.isMidSelected(this.peerId, this.mid);
+
+      this.buttons.forEach(button => {
+        let good: boolean;
+
+        if(this.isSelected && !button.withSelection) {
+          good = false;
+        } else {
+          good = button.verify ? button.verify() : true;
+        }
+
+        button.element.classList.toggle('hide', !good);
+      });
+
+      item.classList.add('menu-open');
+
+      positionMenu(e, this.element);
+      openBtnMenu(this.element, () => {
+        item.classList.remove('menu-open');
+      });
+    };
+
+    if(isTouchSupported) {
+
+    } else {
+      attachContextMenuListener(attachTo, onContextMenu as any);
+    }
+  }
+
+  private init() {
+    this.buttons = [{
+      icon: 'forward',
+      text: 'Forward',
+      onClick: this.onForwardClick
+    }, {
+      icon: 'forward',
+      text: 'Message.Context.Selection.Forward',
+      onClick: this.onForwardClick,
+      verify: () => this.isSelected && 
+        !this.searchSuper.selection.selectionForwardBtn.classList.contains('hide'),
+      withSelection: true
+    }, {
+      icon: 'message',
+      text: 'Message.Context.Goto',
+      onClick: this.onGotoClick,
+      withSelection: true
+    }, {
+      icon: 'select',
+      text: 'Message.Context.Select',
+      onClick: this.onSelectClick
+    }, {
+      icon: 'select',
+      text: 'Message.Context.Selection.Clear',
+      onClick: this.onClearSelectionClick,
+      verify: () => this.isSelected,
+      withSelection: true
+    }, {
+      icon: 'delete danger',
+      text: 'Delete',
+      onClick: this.onDeleteClick,
+      verify: () => appMessagesManager.canDeleteMessage(appMessagesManager.getMessageByPeer(this.peerId, this.mid))
+    }, {
+      icon: 'delete danger',
+      text: 'Message.Context.Selection.Delete',
+      onClick: this.onDeleteClick,
+      verify: () => this.isSelected && !this.searchSuper.selection.selectionDeleteBtn.classList.contains('hide'),
+      withSelection: true
+    }];
+
+    this.element = ButtonMenu(this.buttons);
+    this.element.classList.add('search-contextmenu', 'contextmenu');
+    document.getElementById('page-chats').append(this.element);
+  }
+
+  private onGotoClick = () => {
+    rootScope.dispatchEvent('history_focus', {
+      peerId: this.peerId,
+      mid: this.mid,
+      threadId: this.searchSuper.searchContext.threadId
+    });
+  };
+
+  private onForwardClick = () => {
+    if(this.searchSuper.selection.isSelecting) {
+      simulateClickEvent(this.searchSuper.selection.selectionForwardBtn);
+    } else {
+      new PopupForward({
+        [this.peerId]: [this.mid]
+      });
+    }
+  };
+
+  private onSelectClick = () => {
+    this.searchSuper.selection.toggleByElement(this.target);
+  };
+
+  private onClearSelectionClick = () => {
+    this.searchSuper.selection.cancelSelection();
+  };
+
+  private onDeleteClick = () => {
+    if(this.searchSuper.selection.isSelecting) {
+      simulateClickEvent(this.searchSuper.selection.selectionDeleteBtn);
+    } else {
+      new PopupDeleteMessages(this.peerId, [this.mid], 'chat');
+    }
+  };
+}
+
 export default class AppSearchSuper {
   public tabs: {[t in SearchSuperType]: HTMLDivElement} = {} as any;
 
@@ -76,8 +227,9 @@ export default class AppSearchSuper {
 
   public container: HTMLElement;
   public nav: HTMLElement;
-  private navScrollableContainer: HTMLDivElement;
-  private tabsContainer: HTMLElement;
+  public navScrollableContainer: HTMLDivElement;
+  public tabsContainer: HTMLElement;
+  public navScrollable: ScrollableX;
   private tabsMenu: HTMLElement;
   private prevTabId = -1;
   
@@ -88,7 +240,7 @@ export default class AppSearchSuper {
   public usedFromHistory: Partial<{[type in SearchSuperType]: number}> = {};
   public urlsToRevoke: string[] = [];
 
-  private searchContext: SearchSuperContext;
+  public searchContext: SearchSuperContext;
   public loadMutex: Promise<any> = Promise.resolve();
 
   private nextRates: Partial<{[type in SearchSuperType]: number}> = {};
@@ -127,16 +279,23 @@ export default class AppSearchSuper {
   public onChangeTab?: (mediaTab: SearchSuperMediaTab) => void;
   public showSender? = false;
 
+  private searchContextMenu: SearchContextMenu;
+  public selection: SearchSelection;
+
   constructor(options: Pick<AppSearchSuper, 'mediaTabs' | 'scrollable' | 'searchGroups' | 'asChatList' | 'groupByMonth' | 'hideEmptyTabs' | 'onChangeTab' | 'showSender'>) {
     safeAssign(this, options);
 
     this.container = document.createElement('div');
     this.container.classList.add('search-super');
 
+    this.searchContextMenu = new SearchContextMenu(this.container, this);
+    this.selection = new SearchSelection(this, appMessagesManager);
+
     const navScrollableContainer = this.navScrollableContainer = document.createElement('div');
     navScrollableContainer.classList.add('search-super-tabs-scrollable', 'menu-horizontal-scrollable', 'sticky');
 
-    const navScrollable = new ScrollableX(navScrollableContainer);
+    const navScrollable = this.navScrollable = new ScrollableX(navScrollableContainer);
+    navScrollable.container.classList.add('search-super-nav-scrollable');
 
     const nav = this.nav = document.createElement('nav');
     nav.classList.add('search-super-tabs', 'menu-horizontal-div');
@@ -284,6 +443,13 @@ export default class AppSearchSuper {
 
       this.onTransitionEnd();
     }, undefined, navScrollable);
+
+    attachClickEvent(this.tabsContainer, (e) => {
+      if(this.selection.isSelecting) {
+        cancelEvent(e);
+        this.selection.toggleByElement(findUpClassName(e.target, 'search-super-item'));
+      }
+    }, {capture: true, passive: false});
     
     const onMediaClick = (className: string, targetClassName: string, inputFilter: MyInputMessagesFilter, e: MouseEvent) => {
       const target = findUpClassName(e.target as HTMLDivElement, className);
@@ -314,8 +480,20 @@ export default class AppSearchSuper {
       .openMedia(message, targets[idx].element, 0, false, targets.slice(0, idx), targets.slice(idx + 1));
     };
 
-    this.tabs.inputMessagesFilterPhotoVideo.addEventListener('click', onMediaClick.bind(null, 'grid-item', 'grid-item', 'inputMessagesFilterPhotoVideo'));
-    this.tabs.inputMessagesFilterDocument.addEventListener('click', onMediaClick.bind(null, 'document-with-thumb', 'media-container', 'inputMessagesFilterDocument'));
+    attachClickEvent(this.tabs.inputMessagesFilterPhotoVideo, onMediaClick.bind(null, 'grid-item', 'grid-item', 'inputMessagesFilterPhotoVideo'));
+    attachClickEvent(this.tabs.inputMessagesFilterDocument, onMediaClick.bind(null, 'document-with-thumb', 'media-container', 'inputMessagesFilterDocument'));
+
+    attachClickEvent(this.tabs.inputMessagesFilterUrl, (e) => {
+      const target = e.target as HTMLElement;
+      if(target.tagName === 'A') {
+        return;
+      }
+
+      try {
+        const a = findUpClassName(target, 'row').querySelector('.anchor-url:last-child') as HTMLAnchorElement;
+        a.click();
+      } catch(err) {}
+    });
 
     this.mediaTab = this.mediaTabs[0];
 
@@ -593,7 +771,7 @@ export default class AppSearchSuper {
           let div = document.createElement('div');
           
           let previewDiv = document.createElement('div');
-          previewDiv.classList.add('preview');
+          previewDiv.classList.add('preview', 'row-media');
           
           //this.log('wrapping webpage', webpage);
           
@@ -618,7 +796,19 @@ export default class AppSearchSuper {
           
           let title = webpage.rTitle || '';
           let subtitle = webpage.rDescription || '';
-          let url = RichTextProcessor.wrapRichText(webpage.url || '');
+
+          const subtitleFragment = htmlToDocumentFragment(subtitle);
+          const aFragment = htmlToDocumentFragment(RichTextProcessor.wrapRichText(webpage.url || ''));
+          const a = aFragment.firstElementChild;
+          if(a instanceof HTMLAnchorElement) {
+            a.innerText = decodeURIComponent(a.href);
+          }
+
+          if(subtitleFragment.firstChild) {
+            subtitleFragment.append('\n');
+          }
+
+          subtitleFragment.append(a);
           
           if(!title) {
             //title = new URL(webpage.url).hostname;
@@ -632,18 +822,32 @@ export default class AppSearchSuper {
             titleAdditionHTML = `<div class="sent-time">${formatDateAccordingToToday(new Date(message.date * 1000))}</div>`;
           }
 
+          const row = new Row({
+            title,
+            titleRight: titleAdditionHTML,
+            subtitle: subtitleFragment,
+            havePadding: true,
+            clickable: true,
+            noRipple: true
+          });
+
+          /* const mediaDiv = document.createElement('div');
+          mediaDiv.classList.add('row-media'); */
+
+          row.container.append(previewDiv);
+          
+          /* ripple(div);
           div.append(previewDiv);
           div.insertAdjacentHTML('beforeend', `
           <div class="title">${title}${titleAdditionHTML}</div>
           <div class="subtitle">${subtitle}</div>
           <div class="url">${url}</div>
           ${sender}
-          `);
+          `); */
           
-          if(div.innerText.trim().length) {
-            elemsToAppend.push({element: div, message});
+          if(row.container.innerText.trim().length) {
+            elemsToAppend.push({element: row.container, message});
           }
-          
         }
         
         break;
@@ -675,6 +879,10 @@ export default class AppSearchSuper {
         element.dataset.mid = '' + message.mid;
         element.dataset.peerId = '' + message.peerId;
         monthContainer.items[method](element);
+
+        if(this.selection.isSelecting) {
+          this.selection.toggleElementCheckbox(element, true);
+        }
       });
     }
     
@@ -1245,6 +1453,10 @@ export default class AppSearchSuper {
       this.usedFromHistory[mediaTab.inputFilter] = -1;
     });
 
+    if(this.selection.isSelecting) {
+      this.selection.cancelSelection();
+    }
+
     // * must go to first tab (это костыль)
     /* const membersTab = this.mediaTabsMap.get('members');
     if(membersTab) {

src/components/chat/bubbles.ts

@@ -439,6 +439,7 @@ export default class ChatBubbles {
       });
     });
 
+    // attachClickEvent(this.bubblesContainer, this.onBubblesClick, {listenerSetter: this.listenerSetter});
     this.listenerSetter.add(this.bubblesContainer)('click', this.onBubblesClick/* , {capture: true, passive: false} */);
 
     if(DEBUG) {
@@ -865,7 +866,7 @@ export default class ChatBubbles {
     }
 
     if(!isTouchSupported && findUpClassName(target, 'time')) {
-      this.chat.selection.toggleByBubble(bubble);
+      this.chat.selection.toggleByElement(bubble);
       return;
     }
 
@@ -884,7 +885,7 @@ export default class ChatBubbles {
       }
 
       //this.chatSelection.toggleByBubble(bubble);
-      this.chat.selection.toggleByBubble(findUpClassName(target, 'grouped-item') || bubble);
+      this.chat.selection.toggleByElement(findUpClassName(target, 'grouped-item') || bubble);
       return;
     }
 
@@ -1076,7 +1077,9 @@ export default class ChatBubbles {
       } else if(target.classList.contains('forward')) {
         const mid = +bubble.dataset.mid;
         const message = this.appMessagesManager.getMessageByPeer(this.peerId, mid);
-        new PopupForward(this.peerId, this.appMessagesManager.getMidsByMessage(message));
+        new PopupForward({
+          [this.peerId]: this.appMessagesManager.getMidsByMessage(message)
+        });
         //appSidebarRight.forwardTab.open([mid]);
         return;
       }
@@ -1390,7 +1393,7 @@ export default class ChatBubbles {
     });
 
     if(permanent && this.chat.selection.isSelecting) {
-      this.chat.selection.deleteSelectedMids(mids);
+      this.chat.selection.deleteSelectedMids(this.peerId, mids);
     }
     
     animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP);
@@ -2213,6 +2216,7 @@ export default class ChatBubbles {
     // ! reset due to album edit or delete item
     this.bubbles[+message.mid] = bubble;
     bubble.dataset.mid = message.mid;
+    bubble.dataset.peerId = '' + message.peerId;
     bubble.dataset.timestamp = message.date;
 
     const loadPromises: Promise<any>[] = [];
@@ -2281,7 +2285,7 @@ export default class ChatBubbles {
     });
 
     let canHaveTail = true;
-    
+    let isStandaloneMedia = false;
     let needToSetHTML = true;
     if(totalEntities && !messageMedia) {
       let emojiEntities = totalEntities.filter((e) => e._ === 'messageEntityEmoji');
@@ -2308,6 +2312,7 @@ export default class ChatBubbles {
           }
 
           bubble.classList.add('is-message-empty', 'emoji-big');
+          isStandaloneMedia = true;
           canHaveTail = false;
           needToSetHTML = false;
         }
@@ -2391,7 +2396,9 @@ export default class ChatBubbles {
                   }
                   
                   return new Promise<number>((resolve, reject) => {
-                    new PopupForward(this.peerId, [], (peerId) => {
+                    new PopupForward({
+                      [this.peerId]: []
+                    }, (peerId) => {
                       resolve(peerId);
                     }, () => {
                       reject();
@@ -2468,8 +2475,6 @@ export default class ChatBubbles {
     const isOut = our && (!message.fwd_from || this.peerId !== rootScope.myId);
     let nameContainer: HTMLElement = bubbleContainer;
 
-    let isStandaloneMedia = false;
-
     // media
     if(messageMedia/*  && messageMedia._ === 'messageMediaPhoto' */) {
       let attachmentDiv = document.createElement('div');
@@ -2856,7 +2861,7 @@ export default class ChatBubbles {
     }
 
     if(this.chat.selection.isSelecting) {
-      this.chat.selection.toggleBubbleCheckbox(bubble, true);
+      this.chat.selection.toggleElementCheckbox(bubble, true);
     }
 
     let savedFrom = '';

src/components/chat/contextMenu.ts

@@ -19,11 +19,10 @@ import PopupPinMessage from "../popups/unpinMessage";
 import { copyTextToClipboard } from "../../helpers/clipboard";
 import PopupSendNow from "../popups/sendNow";
 import { toast } from "../toast";
-import I18n, { i18n, LangPackKey } from "../../lib/langPack";
+import I18n, { LangPackKey } from "../../lib/langPack";
 import findUpClassName from "../../helpers/dom/findUpClassName";
 import { cancelEvent } from "../../helpers/dom/cancelEvent";
-import cancelSelection from "../../helpers/dom/cancelSelection";
-import { attachClickEvent } from "../../helpers/dom/clickEvent";
+import { attachClickEvent, simulateClickEvent } from "../../helpers/dom/clickEvent";
 import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty";
 import { Message } from "../../layer";
 import PopupReportMessages from "../popups/reportMessages";
@@ -33,6 +32,7 @@ export default class ChatContextMenu {
   private element: HTMLElement;
 
   private isSelectable: boolean;
+  private isSelected: boolean;
   private target: HTMLElement;
   private isTargetAGroupedItem: boolean;
   private isTextSelected: boolean;
@@ -75,17 +75,6 @@ export default class ChatContextMenu {
       let mid = +bubble.dataset.mid;
       if(!mid) return;
 
-      // * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты
-      if(chat.selection.isSelecting && !contentWrapper) {
-        const mids = this.chat.getMidsByMid(mid);
-        if(mids.length > 1) {
-          const selectedMid = chat.selection.selectedMids.has(mid) ? mid : mids.find(mid => chat.selection.selectedMids.has(mid));
-          if(selectedMid) {
-            mid = selectedMid;
-          }
-        }
-      }
-
       this.isSelectable = this.chat.selection.canSelectBubble(bubble);
       this.peerId = this.chat.peerId;
       //this.msgID = msgID;
@@ -97,6 +86,19 @@ export default class ChatContextMenu {
       );
       this.isUsernameTarget = this.target.tagName === 'A' && this.target.classList.contains('mention');
 
+      // * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты
+      if(chat.selection.isSelecting && !contentWrapper) {
+        const mids = this.chat.getMidsByMid(mid);
+        if(mids.length > 1) {
+          const selectedMid = this.chat.selection.isMidSelected(this.peerId, mid) ? 
+            mid : 
+            mids.find(mid => this.chat.selection.isMidSelected(this.peerId, mid));
+          if(selectedMid) {
+            mid = selectedMid;
+          }
+        }
+      }
+
       const groupedItem = findUpClassName(this.target, 'grouped-item');
       this.isTargetAGroupedItem = !!groupedItem;
       if(groupedItem) {
@@ -105,6 +107,7 @@ export default class ChatContextMenu {
         this.mid = mid;
       }
 
+      this.isSelected = this.chat.selection.isMidSelected(this.peerId, this.mid);
       this.message = this.chat.getMessage(this.mid);
 
       this.buttons.forEach(button => {
@@ -147,29 +150,10 @@ export default class ChatContextMenu {
         if(good) {
           cancelEvent(e);
           //onContextMenu((e as TouchEvent).changedTouches[0]);
-          onContextMenu((e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0] : e as MouseEvent);
+          // onContextMenu((e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0] : e as MouseEvent);
+          onContextMenu(e);
         }
       }, {listenerSetter: this.chat.bubbles.listenerSetter});
-
-      attachContextMenuListener(attachTo, (e) => {
-        if(chat.selection.isSelecting) return;
-
-        // * these two lines will fix instant text selection on iOS Safari
-        document.body.classList.add('no-select'); // * need no-select on body because chat-input transforms in channels
-        attachTo.addEventListener('touchend', (e) => {
-          cancelEvent(e); // ! this one will fix propagation to document loader button, etc
-          document.body.classList.remove('no-select');
-
-          //this.chat.bubbles.onBubblesClick(e);
-        }, {once: true, capture: true});
-
-        cancelSelection();
-        //cancelEvent(e as any);
-        const bubble = findUpClassName(e.target, 'grouped-item') || findUpClassName(e.target, 'bubble');
-        if(bubble) {
-          chat.selection.toggleByBubble(bubble);
-        }
-      }, this.chat.bubbles.listenerSetter);
     } else attachContextMenuListener(attachTo, onContextMenu, this.chat.bubbles.listenerSetter);
   }
 
@@ -183,7 +167,7 @@ export default class ChatContextMenu {
       icon: 'send2',
       text: 'Message.Context.Selection.SendNow',
       onClick: this.onSendScheduledClick,
-      verify: () => this.chat.type === 'scheduled' && this.chat.selection.selectedMids.has(this.mid) && !this.chat.selection.selectionSendNowBtn.hasAttribute('disabled'),
+      verify: () => this.chat.type === 'scheduled' && this.isSelected && !this.chat.selection.selectionSendNowBtn.hasAttribute('disabled'),
       notDirect: () => true,
       withSelection: true
     }, {
@@ -228,7 +212,21 @@ export default class ChatContextMenu {
       icon: 'copy',
       text: 'Message.Context.Selection.Copy',
       onClick: this.onCopyClick,
-      verify: () => this.chat.selection.selectedMids.has(this.mid) && !![...this.chat.selection.selectedMids].find(mid => !!this.chat.getMessage(mid).message),
+      verify: () => {
+        if(!this.isSelected) {
+          return false;
+        }
+
+        for(const [peerId, mids] of this.chat.selection.selectedMids) {
+          for(const mid of mids) {
+            if(!!this.appMessagesManager.getMessageByPeer(peerId, mid).message) {
+              return true;
+            }
+          }
+        }
+
+        return false;
+      },
       notDirect: () => true,
       withSelection: true
     }, {
@@ -319,7 +317,7 @@ export default class ChatContextMenu {
       text: 'Message.Context.Selection.Forward',
       onClick: this.onForwardClick,
       verify: () => this.chat.selection.selectionForwardBtn && 
-        this.chat.selection.selectedMids.has(this.mid) && 
+        this.isSelected && 
         !this.chat.selection.selectionForwardBtn.hasAttribute('disabled'),
       notDirect: () => true,
       withSelection: true
@@ -336,14 +334,14 @@ export default class ChatContextMenu {
       icon: 'select',
       text: 'Message.Context.Select',
       onClick: this.onSelectClick,
-      verify: () => !this.message.action && !this.chat.selection.selectedMids.has(this.mid) && this.isSelectable,
+      verify: () => !this.message.action && !this.isSelected && this.isSelectable,
       notDirect: () => true,
       withSelection: true
     }, {
       icon: 'select',
       text: 'Message.Context.Selection.Clear',
       onClick: this.onClearSelectionClick,
-      verify: () => this.chat.selection.selectedMids.has(this.mid),
+      verify: () => this.isSelected,
       notDirect: () => true,
       withSelection: true
     }, {
@@ -355,7 +353,7 @@ export default class ChatContextMenu {
       icon: 'delete danger',
       text: 'Message.Context.Selection.Delete',
       onClick: this.onDeleteClick,
-      verify: () => this.chat.selection.selectedMids.has(this.mid) && !this.chat.selection.selectionDeleteBtn.hasAttribute('disabled'),
+      verify: () => this.isSelected && !this.chat.selection.selectionDeleteBtn.hasAttribute('disabled'),
       notDirect: () => true,
       withSelection: true
     }];
@@ -364,11 +362,11 @@ export default class ChatContextMenu {
     this.element.id = 'bubble-contextmenu';
     this.element.classList.add('contextmenu');
     this.chat.container.append(this.element);
-  };
+  }
 
   private onSendScheduledClick = () => {
     if(this.chat.selection.isSelecting) {
-      this.chat.selection.selectionSendNowBtn.click();
+      simulateClickEvent(this.chat.selection.selectionSendNowBtn);
     } else {
       new PopupSendNow(this.peerId, this.chat.getMidsByMid(this.mid));
     }
@@ -384,11 +382,15 @@ export default class ChatContextMenu {
 
   private onCopyClick = () => {
     if(isSelectionEmpty()) {
-      const mids = this.chat.selection.isSelecting ? [...this.chat.selection.selectedMids].sort((a, b) => a - b) : [this.mid];
+      const mids = this.chat.selection.isSelecting ? 
+        [...this.chat.selection.selectedMids.get(this.peerId)].sort((a, b) => a - b) : 
+        [this.mid];
+
       const str = mids.reduce((acc, mid) => {
         const message = this.chat.getMessage(mid);
         return acc + (message?.message ? message.message + '\n' : '');
       }, '').trim();
+
       copyTextToClipboard(str);
     } else {
       document.execCommand('copy');
@@ -443,14 +445,17 @@ export default class ChatContextMenu {
 
   private onForwardClick = () => {
     if(this.chat.selection.isSelecting) {
-      this.chat.selection.selectionForwardBtn.click();
+      simulateClickEvent(this.chat.selection.selectionForwardBtn);
     } else {
-      new PopupForward(this.peerId, this.isTargetAGroupedItem ? [this.mid] : this.chat.getMidsByMid(this.mid));
+      const mids = this.isTargetAGroupedItem ? [this.mid] : this.chat.getMidsByMid(this.mid);
+      new PopupForward({
+        [this.peerId]: mids
+      });
     }
   };
 
   private onSelectClick = () => {
-    this.chat.selection.toggleByBubble(findUpClassName(this.target, 'grouped-item') || findUpClassName(this.target, 'bubble'));
+    this.chat.selection.toggleByElement(findUpClassName(this.target, 'grouped-item') || findUpClassName(this.target, 'bubble'));
   };
 
   private onClearSelectionClick = () => {
@@ -459,7 +464,7 @@ export default class ChatContextMenu {
 
   private onDeleteClick = () => {
     if(this.chat.selection.isSelecting) {
-      this.chat.selection.selectionDeleteBtn.click();
+      simulateClickEvent(this.chat.selection.selectionDeleteBtn);
     } else {
       new PopupDeleteMessages(this.peerId, this.isTargetAGroupedItem ? [this.mid] : this.chat.getMidsByMid(this.mid), this.chat.type);
     }

src/components/chat/input.ts

@@ -77,6 +77,7 @@ import PeerTitle from '../peerTitle';
 import { fastRaf } from '../../helpers/schedulers';
 import PopupDeleteMessages from '../popups/deleteMessages';
 import fixSafariStickyInputFocusing, { IS_STICKY_INPUT_BUGGED } from '../../helpers/dom/fixSafariStickyInputFocusing';
+import { copy } from '../../helpers/object';
 
 const RECORD_MIN_TIME = 500;
 const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -117,8 +118,7 @@ export default class ChatInput {
 
   private getWebPagePromise: Promise<void>;
   private willSendWebPage: WebPage = null;
-  private forwardingMids: number[] = [];
-  private forwardingFromPeerId: number = 0;
+  private forwarding: {[fromPeerId: number]: number[]};
   public replyToMsgId: number;
   public editMsgId: number;
   private noWebPage: true;
@@ -1402,7 +1402,7 @@ export default class ChatInput {
   private onBtnSendClick = (e: Event) => {
     cancelEvent(e);
 
-    if(!this.recorder || this.recording || !this.isInputEmpty() || this.forwardingMids.length || this.editMsgId) {
+    if(!this.recorder || this.recording || !this.isInputEmpty() || this.forwarding || this.editMsgId) {
       if(this.recording) {
         if((Date.now() - this.recordStartTime) < RECORD_MIN_TIME) {
           this.onCancelRecordClick();
@@ -1526,13 +1526,11 @@ export default class ChatInput {
       if(this.helperWaitingForward) return;
       this.helperWaitingForward = true;
 
-      const fromId = this.forwardingFromPeerId;
-      const mids = this.forwardingMids.slice();
       const helperFunc = this.helperFunc;
       this.clearHelper();
       this.updateSendBtn();
       let selected = false;
-      new PopupForward(fromId, mids, () => {
+      new PopupForward(copy(this.forwarding), () => {
         selected = true;
       }, () => {
         this.helperWaitingForward = false;
@@ -1593,7 +1591,7 @@ export default class ChatInput {
     const isInputEmpty = this.isInputEmpty();
 
     if(this.editMsgId) icon = 'edit';
-    else if(!this.recorder || this.recording || !isInputEmpty || this.forwardingMids.length) icon = this.chat.type === 'scheduled' ? 'schedule' : 'send';
+    else if(!this.recorder || this.recording || !isInputEmpty || this.forwarding) icon = this.chat.type === 'scheduled' ? 'schedule' : 'send';
     else icon = 'record';
 
     ['send', 'record', 'edit', 'schedule'].forEach(i => {
@@ -1673,17 +1671,18 @@ export default class ChatInput {
     }
 
     // * wait for sendText set messageId for invokeAfterMsg
-    if(this.forwardingMids.length) {
-      const mids = this.forwardingMids.slice();
-      const fromPeerId = this.forwardingFromPeerId;
+    if(this.forwarding) {
+      const forwarding = copy(this.forwarding);
       const peerId = this.chat.peerId;
       const silent = this.sendSilent;
       const scheduleDate = this.scheduleDate;
       setTimeout(() => {
-        this.appMessagesManager.forwardMessages(peerId, fromPeerId, mids, {
-          silent,
-          scheduleDate: scheduleDate
-        });
+        for(const fromPeerId in forwarding) {
+          this.appMessagesManager.forwardMessages(peerId, +fromPeerId, forwarding[fromPeerId], {
+            silent,
+            scheduleDate: scheduleDate
+          });
+        }
       }, 0);
     }
 
@@ -1751,17 +1750,26 @@ export default class ChatInput {
     f();
   }
 
-  public initMessagesForward(fromPeerId: number, mids: number[]) {
+  public initMessagesForward(fromPeerIdsMids: {[fromPeerId: number]: number[]}) {
     const f = () => {
       //const peerTitles: string[]
-      const smth: Set<string | number> = new Set(mids.map(mid => {
-        const message = this.appMessagesManager.getMessageByPeer(fromPeerId, mid);
-        if(message.fwd_from && message.fwd_from.from_name && !message.fromId && !message.fwdFromId) {
-          return message.fwd_from.from_name;
-        } else {
-          return message.fromId;
-        }
-      }));
+      const fromPeerIds = Object.keys(fromPeerIdsMids).map(str => +str);
+      const smth: Set<string | number> = new Set();
+      let length = 0;
+
+      fromPeerIds.forEach(fromPeerId => {
+        const mids = fromPeerIdsMids[fromPeerId];
+        mids.forEach(mid => {
+          const message = this.appMessagesManager.getMessageByPeer(fromPeerId, mid);
+          if(message.fwd_from?.from_name && !message.fromId && !message.fwdFromId) {
+            smth.add(message.fwd_from.from_name);
+          } else {
+            smth.add(message.fromId);
+          }
+        });
+
+        length += mids.length;
+      });
 
       const onlyFirstName = smth.size > 2;
       const peerTitles = [...smth].map(smth => {
@@ -1776,26 +1784,31 @@ export default class ChatInput {
       } else {
         title.append(peerTitles[0], i18n('AndOther', [peerTitles.length - 1]));
       }
-
-      const firstMessage = this.appMessagesManager.getMessageByPeer(fromPeerId, mids[0]);
-
-      let usingFullAlbum = !!firstMessage.grouped_id;
-      if(firstMessage.grouped_id) {
-        const albumMids = this.appMessagesManager.getMidsByMessage(firstMessage);
-        if(albumMids.length !== mids.length || albumMids.find(mid => !mids.includes(mid))) {
-          usingFullAlbum = false;
+      
+      let firstMessage: any, usingFullAlbum: boolean;
+      if(fromPeerIds.length === 1) {
+        const fromPeerId = fromPeerIds[0];
+        const mids = fromPeerIdsMids[fromPeerId];
+        firstMessage = this.appMessagesManager.getMessageByPeer(fromPeerId, mids[0]);
+  
+        usingFullAlbum = !!firstMessage.grouped_id;
+        if(usingFullAlbum) {
+          const albumMids = this.appMessagesManager.getMidsByMessage(firstMessage);
+          if(albumMids.length !== length || albumMids.find(mid => !mids.includes(mid))) {
+            usingFullAlbum = false;
+          }
         }
       }
-
-      const replyFragment = this.appMessagesManager.wrapMessageForReply(firstMessage, undefined, mids);
-      if(usingFullAlbum || mids.length === 1) {
+  
+      if(usingFullAlbum || length === 1) {
+        const mids = fromPeerIdsMids[fromPeerIds[0]];
+        const replyFragment = this.appMessagesManager.wrapMessageForReply(firstMessage, undefined, mids);
         this.setTopInfo('forward', f, title, replyFragment);
       } else {
-        this.setTopInfo('forward', f, title, i18n('ForwardedMessageCount', [mids.length]));
+        this.setTopInfo('forward', f, title, i18n('ForwardedMessageCount', [length]));
       }
 
-      this.forwardingMids = mids.slice();
-      this.forwardingFromPeerId = fromPeerId;
+      this.forwarding = fromPeerIdsMids;
     };
     
     f();
@@ -1845,8 +1858,7 @@ export default class ChatInput {
     }
     
     this.replyToMsgId = undefined;
-    this.forwardingMids.length = 0;
-    this.forwardingFromPeerId = 0;
+    this.forwarding = undefined;
     this.editMsgId = undefined;
     this.helperType = this.helperFunc = undefined;
 

src/components/chat/replyContainer.ts

@@ -52,7 +52,7 @@ export function wrapReplyDivAndCaption(options: {
       media = media.webpage;
     }
     
-    if(media.photo || (media.document && ['video', 'sticker', 'gif', 'round'].indexOf(media.document.type) !== -1)) {
+    if(media.photo || (media.document && ['video', 'sticker', 'gif', 'round', 'photo'].indexOf(media.document.type) !== -1)) {
       middleware = appImManager.chat.bubbles.getMiddleware();
       const lazyLoadQueue = appImManager.chat.bubbles.lazyLoadQueue;
 

src/components/chat/topbar.ts

@@ -249,13 +249,13 @@ export default class ChatTopbar {
             return;
           }
 
-          const original = selection.toggleByBubble.bind(selection);
-          selection.toggleByBubble = (bubble) => {
+          const original = selection.toggleByElement.bind(selection);
+          selection.toggleByElement = (bubble) => {
             appStateManager.pushToState('chatContextMenuHintWasShown', true);
             toast(i18n('Chat.Menu.Hint'));
 
-            selection.toggleByBubble = original;
-            selection.toggleByBubble(bubble);
+            selection.toggleByElement = original;
+            selection.toggleByElement(bubble);
           };
         });
       },

src/components/popups/forward.ts

@@ -8,7 +8,12 @@ import appImManager from "../../lib/appManagers/appImManager";
 import PopupPickUser from "./pickUser";
 
 export default class PopupForward extends PopupPickUser {
-  constructor(fromPeerId: number, mids: number[], onSelect?: (peerId: number) => Promise<void> | void, onClose?: () => void, overrideOnSelect = false) {
+  constructor(
+    peerIdMids: {[fromPeerId: number]: number[]}, 
+    onSelect?: (peerId: number) => Promise<void> | void, 
+    onClose?: () => void, 
+    overrideOnSelect = false
+  ) {
     super({
       peerTypes: ['dialogs', 'contacts'],
       onSelect: overrideOnSelect ? onSelect : async(peerId) => {
@@ -20,7 +25,7 @@ export default class PopupForward extends PopupPickUser {
         }
 
         appImManager.setInnerPeer(peerId);
-        appImManager.chat.input.initMessagesForward(fromPeerId, mids.slice());
+        appImManager.chat.input.initMessagesForward(peerIdMids);
       },
       onClose,
       placeholder: 'ShareModal.Search.ForwardPlaceholder',

src/components/rangeSelector.ts

@@ -73,11 +73,13 @@ export default class RangeSelector {
     this.rect = this.container.getBoundingClientRect();
     this.mousedown = true;
     this.scrub(event);
+    this.container.classList.add('is-focused');
     this.events?.onMouseDown && this.events.onMouseDown(event);
   };
 
   protected onMouseUp = (event: GrabEvent) => {
     this.mousedown = false;
+    this.container.classList.remove('is-focused');
     this.events?.onMouseUp && this.events.onMouseUp(event);
   };
 

src/components/row.ts

@@ -11,6 +11,7 @@ import { SliderSuperTab } from "./slider";
 import RadioForm from "./radioForm";
 import { i18n, LangPackKey } from "../lib/langPack";
 import replaceContent from "../helpers/dom/replaceContent";
+import setInnerHTML from "../helpers/dom/setInnerHTML";
 
 export default class Row {
   public container: HTMLElement;
@@ -24,7 +25,7 @@ export default class Row {
 
   constructor(options: Partial<{
     icon: string,
-    subtitle: string,
+    subtitle: string | HTMLElement | DocumentFragment,
     subtitleLangKey: LangPackKey,
     subtitleLangArgs: any[],
     radioField: Row['radioField'],
@@ -35,7 +36,8 @@ export default class Row {
     titleRight: string | HTMLElement,
     clickable: boolean | ((e: Event) => void),
     navigationTab: SliderSuperTab,
-    havePadding: boolean
+    havePadding: boolean,
+    noRipple: boolean
   }> = {}) {
     this.container = document.createElement(options.radioField || options.checkboxField ? 'label' : 'div');
     this.container.classList.add('row');
@@ -44,7 +46,11 @@ export default class Row {
     this.subtitle.classList.add('row-subtitle');
     this.subtitle.setAttribute('dir', 'auto');
     if(options.subtitle) {
-      this.subtitle.innerHTML = options.subtitle;
+      if(typeof(options.subtitle) === 'string') {
+        setInnerHTML(this.subtitle, options.subtitle);
+      } else {
+        this.subtitle.append(options.subtitle);
+      }
     } else if(options.subtitleLangKey) {
       this.subtitle.append(i18n(options.subtitleLangKey, options.subtitleLangArgs));
     }
@@ -137,7 +143,10 @@ export default class Row {
       }
 
       this.container.classList.add('row-clickable', 'hover-effect');
-      ripple(this.container, undefined, undefined, true);
+
+      if(!options.noRipple) {
+        ripple(this.container, undefined, undefined, true);
+      }
 
       /* if(options.radioField || options.checkboxField) {
         this.container.prepend(this.container.lastElementChild);

src/components/sendingStatus.ts

@@ -0,0 +1,86 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+import { Message } from "../layer";
+/* import findUpClassName from "../helpers/dom/findUpClassName";
+import rootScope from "../lib/rootScope";
+import Transition from "./transition"; */
+
+export enum SENDING_STATUS {
+  Error = -1,
+  Pending,
+  Sent,
+  Read
+}
+
+export function getSendingStatus(message: Message.message | Message.messageService) {
+  return message.pFlags.is_outgoing ? 
+    SENDING_STATUS.Pending : (
+      message.pFlags.unread ? 
+      SENDING_STATUS.Sent : 
+      SENDING_STATUS.Read
+    );
+}
+
+export function setSendingStatus(
+  container: HTMLElement, 
+  message?: Message.message | Message.messageService, 
+  disableAnimationIfRippleFound?: boolean
+) {
+  let className: 'check' | 'checks' | 'sending';
+  if(message?.pFlags.out) {
+    if(message.pFlags.is_outgoing) {
+      className = 'sending';
+    } else if(message.pFlags.unread) {
+      className = 'check';
+    } else {
+      className = 'checks';
+    }
+  }
+
+  if(!className) {
+    container.textContent = '';
+    return;
+  }
+  
+  const iconClassName = 'tgico-' + className;
+  const lastElement = container.lastElementChild as HTMLElement;
+  if(lastElement && lastElement.classList.contains(iconClassName)) {
+    return;
+  }
+  
+  const element = document.createElement('i');
+  element.classList.add('sending-status-icon', /* 'transition-item', */ iconClassName);
+  container.append(element);
+
+  if(lastElement) {
+    lastElement.remove();
+  }
+
+  /* if(!lastElement) {
+    element.classList.add('active');
+    return;
+  }
+
+  const select = Transition(container, undefined, 350, () => {
+    lastElement.remove();
+  }, false, true, false);
+
+  let animate = rootScope.settings.animationsEnabled && className !== 'sending' && !lastElement.classList.contains('tgico-sending');
+  if(disableAnimationIfRippleFound && animate) {
+    const parent = findUpClassName(container, 'rp');
+    if(parent.querySelector('.c-ripple__circle') || parent.matches(':hover')) {
+      animate = false;
+    }
+  }
+
+  select(element, animate, lastElement); */
+
+  /* SetTransition(lastElement, 'is-visible', false, 350, () => {
+    // lastElement.remove();
+  }, 2);
+  SetTransition(element, 'is-visible', true, 350, undefined, 2); */
+}

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -245,7 +245,8 @@ class PeerProfileAvatars {
 
       const rect = this.container.getBoundingClientRect();
 
-      const e = (_e as TouchEvent).touches ? (_e as TouchEvent).touches[0] : _e as MouseEvent;
+      // const e = (_e as TouchEvent).touches ? (_e as TouchEvent).touches[0] : _e as MouseEvent;
+      const e = _e;
       const x = e.pageX;
 
       const clickX = x - rect.left;
@@ -1055,16 +1056,15 @@ export default class AppSharedMediaTab extends SliderSuperTab {
       const inputFilter = mediaTab.inputFilter;
       const filtered = this.searchSuper.filterMessagesByType(mids.map(mid => appMessagesManager.getMessageByPeer(peerId, mid)), inputFilter);
       if(filtered.length) {
-        if(this.historiesStorage[peerId][inputFilter]) {
-          this.historiesStorage[peerId][inputFilter].unshift(...filtered.map(message => ({mid: message.mid, peerId: message.peerId})));
+        const history = this.historiesStorage[peerId][inputFilter];
+        if(history) {
+          history.unshift(...filtered.map(message => ({mid: message.mid, peerId: message.peerId})));
         }
 
         if(this.peerId === peerId && this.searchSuper.usedFromHistory[inputFilter] !== -1) {
           this.searchSuper.usedFromHistory[inputFilter] += filtered.length;
           this.searchSuper.performSearchResult(filtered, mediaTab, false);
         }
-
-        break;
       }
     }
   }
@@ -1078,17 +1078,21 @@ export default class AppSharedMediaTab extends SliderSuperTab {
       for(const type of this.searchSuper.mediaTabs) {
         const inputFilter = type.inputFilter;
 
-        if(!this.historiesStorage[peerId][inputFilter]) continue;
-
         const history = this.historiesStorage[peerId][inputFilter];
+        if(!history) continue;
+
         const idx = history.findIndex(m => m.mid === mid);
         if(idx !== -1) {
           history.splice(idx, 1);
 
           if(this.peerId === peerId) {
             const container = this.searchSuper.tabs[inputFilter];
-            const div = container.querySelector(`div[data-mid="${mid}"][data-peer-id="${peerId}"]`);
+            const div = container.querySelector(`div[data-mid="${mid}"][data-peer-id="${peerId}"]`) as HTMLElement;
             if(div) {
+              if(this.searchSuper.selection.isSelecting) {
+                this.searchSuper.selection.toggleByElement(div);
+              }
+
               div.remove();
             }
   

src/components/singleTransition.ts

@@ -26,6 +26,10 @@ const SetTransition = (
     }
   }
 
+  // if(forwards && className && element.classList.contains(className) && !element.classList.contains('animating')) {
+  //   return;
+  // }
+
   if(useRafs && rootScope.settings.animationsEnabled && duration) {
     element.dataset.raf = '' + window.requestAnimationFrame(() => {
       delete element.dataset.raf;

src/components/transition.ts

@@ -10,6 +10,7 @@ import { dispatchHeavyAnimationEvent } from "../hooks/useHeavyAnimationCheck";
 import whichChild from "../helpers/dom/whichChild";
 import findUpClassName from "../helpers/dom/findUpClassName";
 import { isSafari } from "../helpers/userAgent";
+import { cancelEvent } from "../helpers/dom/cancelEvent";
 
 function slideNavigation(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) {
   const width = prevTabContent.getBoundingClientRect().width;
@@ -80,7 +81,13 @@ function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight
   };
 }
 
-export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigation' | 'zoom-fade' | 'slide-fade' | 'none'/*  | 'counter' */, transitionTime: number, onTransitionEnd?: (id: number) => void, isHeavy = true) => {
+export const TransitionSlider = (
+  content: HTMLElement, 
+  type: 'tabs' | 'navigation' | 'zoom-fade' | 'slide-fade' | 'none'/*  | 'counter' */, 
+  transitionTime: number, 
+  onTransitionEnd?: (id: number) => void, 
+  isHeavy = true
+) => {
   let animationFunction: TransitionFunction = null;
 
   switch(type) {
@@ -101,62 +108,94 @@ export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigatio
 
 type TransitionFunction = (tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) => void | (() => void);
 
-const Transition = (content: HTMLElement, animationFunction: TransitionFunction, transitionTime: number, onTransitionEnd?: (id: number) => void, isHeavy = true) => {
+const Transition = (
+  content: HTMLElement, 
+  animationFunction: TransitionFunction, 
+  transitionTime: number, 
+  onTransitionEnd?: (id: number) => void, 
+  isHeavy = true,
+  once = false,
+  withAnimationListener = true
+) => {
   const onTransitionEndCallbacks: Map<HTMLElement, Function> = new Map();
   let animationDeferred: CancellablePromise<void>;
-  let animationStarted = 0;
+  // let animationStarted = 0;
   let from: HTMLElement = null;
 
-  // TODO: check for transition type (transform, etc) using by animationFunction
-  content.addEventListener(animationFunction ? 'transitionend' : 'animationend', (e) => {
-    if((e.target as HTMLElement).parentElement !== content) {
-      return;
-    }
-    
-    //console.log('Transition: transitionend', /* content, */ e, selectTab.prevId, performance.now() - animationStarted);
+  if(withAnimationListener) {
+    const listenerName = animationFunction ? 'transitionend' : 'animationend';
 
-    const callback = onTransitionEndCallbacks.get(e.target as HTMLElement);
-    if(callback) callback();
-
-    if(e.target !== from) {
-      return;
-    }
-
-    if(!animationDeferred && isHeavy) return;
-
-    if(animationDeferred) {
-      animationDeferred.resolve();
-      animationDeferred = undefined;
-    }
+    const onEndEvent = (e: TransitionEvent | AnimationEvent) => {
+      cancelEvent(e);
+  
+      if((e.target as HTMLElement).parentElement !== content) {
+        return;
+      }
+      
+      //console.log('Transition: transitionend', /* content, */ e, selectTab.prevId, performance.now() - animationStarted);
+  
+      const callback = onTransitionEndCallbacks.get(e.target as HTMLElement);
+      if(callback) callback();
+  
+      if(e.target !== from) {
+        return;
+      }
+  
+      if(!animationDeferred && isHeavy) return;
+  
+      if(animationDeferred) {
+        animationDeferred.resolve();
+        animationDeferred = undefined;
+      }
+  
+      if(onTransitionEnd) {
+        onTransitionEnd(selectTab.prevId());
+      }
+  
+      content.classList.remove('animating', 'backwards', 'disable-hover');
+  
+      if(once) {
+        content.removeEventListener(listenerName, onEndEvent/* , {capture: false} */);
+        from = animationDeferred = undefined;
+        onTransitionEndCallbacks.clear();
+      }
+    };
+  
+    // TODO: check for transition type (transform, etc) using by animationFunction
+    content.addEventListener(listenerName, onEndEvent/* , {passive: true, capture: false} */);
+  }
 
-    if(onTransitionEnd) {
-      onTransitionEnd(selectTab.prevId());
+  function selectTab(id: number | HTMLElement, animate = true, overrideFrom?: typeof from) {
+    if(overrideFrom) {
+      from = overrideFrom;
     }
 
-    content.classList.remove('animating', 'backwards', 'disable-hover');
-  });
-
-  function selectTab(id: number | HTMLElement, animate = true) {
-    const self = selectTab;
-
     if(id instanceof HTMLElement) {
       id = whichChild(id);
     }
     
-    const prevId = self.prevId();
+    const prevId = selectTab.prevId();
     if(id === prevId) return false;
 
     //console.log('selectTab id:', id);
 
-    const _from = from;
     const to = content.children[id] as HTMLElement;
 
     if(!rootScope.settings.animationsEnabled || prevId === -1) {
       animate = false;
     }
 
+    if(!withAnimationListener) {
+      const timeout = content.dataset.timeout;
+      if(timeout !== undefined) {
+        clearTimeout(+timeout);
+      }
+
+      delete content.dataset.timeout;
+    }
+
     if(!animate) {
-      if(_from) _from.classList.remove('active', 'to', 'from');  
+      if(from) from.classList.remove('active', 'to', 'from');  
       if(to) {
         to.classList.remove('to', 'from');
         to.classList.add('active');
@@ -170,12 +209,21 @@ const Transition = (content: HTMLElement, animationFunction: TransitionFunction,
       return;
     }
 
+    if(!withAnimationListener) {
+      content.dataset.timeout = '' + window.setTimeout(() => {
+        to.classList.remove('to');
+        from && from.classList.remove('from');
+        content.classList.remove('animating', 'backwards', 'disable-hover');
+        delete content.dataset.timeout;
+      }, transitionTime);
+    }
+
     if(from) {
       from.classList.remove('to');
       from.classList.add('from');
     }
 
-    content.classList.add('animating', 'disable-hover');
+    content.classList.add('animating'/* , 'disable-hover' */);
     const toRight = prevId < id;
     content.classList.toggle('backwards', !toRight);
 
@@ -200,7 +248,8 @@ const Transition = (content: HTMLElement, animationFunction: TransitionFunction,
       });
     }
 
-    if(_from/*  && false */) {
+    if(from/*  && false */) {
+      const _from = from;
       const callback = () => {
         _from.classList.remove('active', 'from');
 
@@ -223,7 +272,7 @@ const Transition = (content: HTMLElement, animationFunction: TransitionFunction,
       if(isHeavy) {
         if(!animationDeferred) {
           animationDeferred = deferredPromise<void>();
-          animationStarted = performance.now();
+          // animationStarted = performance.now();
         }
   
         dispatchHeavyAnimationEvent(animationDeferred, transitionTime * 2);

src/components/wrappers.ts

@@ -550,7 +550,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
   icoDiv.classList.add('document-ico');
 
   const cacheContext = appDownloadManager.getCacheContext(doc);
-  if(doc.thumbs?.length || (message.pFlags.is_outgoing && cacheContext.url && doc.type === 'photo')) {
+  if((doc.thumbs?.length || (message.pFlags.is_outgoing && cacheContext.url && doc.type === 'photo')) && doc.mime_type !== 'image/gif') {
     docDiv.classList.add('document-with-thumb');
 
     let imgs: HTMLImageElement[] = [];
@@ -1564,6 +1564,7 @@ export function wrapGroupedDocuments({albumMustBeRenderedFull, message, bubble,
     const container = document.createElement('div');
     container.classList.add('document-container');
     container.dataset.mid = '' + mid;
+    container.dataset.peerId = '' + message.peerId;
 
     const wrapper = document.createElement('div');
     wrapper.classList.add('document-wrapper');

src/config/app.ts

@@ -16,7 +16,7 @@ export const MAIN_DOMAIN = 'web.telegram.org';
 const App = {
   id: 1025907,
   hash: '452b0359b988148995f22ff0f4229750',
-  version: '0.8.2',
+  version: '0.8.3',
   langPackVersion: '0.3.3',
   langPack: 'macos',
   langPackCode: 'en',

src/helpers/dom/clickEvent.ts

@@ -8,9 +8,9 @@ import type ListenerSetter from "../listenerSetter";
 import { isTouchSupported } from "../touchSupport";
 import simulateEvent from "./dispatchEvent";
 
-export const CLICK_EVENT_NAME: 'mousedown' | 'touchend' | 'click' = (isTouchSupported ? 'mousedown' : 'click') as any;
+export const CLICK_EVENT_NAME: 'mousedown' /* | 'touchend' */ | 'click' = (isTouchSupported ? 'mousedown' : 'click') as any;
 export type AttachClickOptions = AddEventListenerOptions & Partial<{listenerSetter: ListenerSetter, touchMouseDown: true}>;
-export function attachClickEvent(elem: HTMLElement, callback: (e: TouchEvent | MouseEvent) => void, options: AttachClickOptions = {}) {
+export function attachClickEvent(elem: HTMLElement | Window, callback: (e: /* TouchEvent |  */MouseEvent) => void, options: AttachClickOptions = {}) {
   const add = options.listenerSetter ? options.listenerSetter.add(elem) : elem.addEventListener.bind(elem);
   // const remove = options.listenerSetter ? options.listenerSetter.removeManual.bind(options.listenerSetter, elem) : elem.removeEventListener.bind(elem);
 
@@ -46,11 +46,11 @@ export function attachClickEvent(elem: HTMLElement, callback: (e: TouchEvent | M
 }
 
 export function detachClickEvent(elem: HTMLElement, callback: (e: TouchEvent | MouseEvent) => void, options?: AddEventListenerOptions) {
-  if(CLICK_EVENT_NAME === 'touchend') {
-    elem.removeEventListener('touchstart', callback, options);
-  } else {
+  // if(CLICK_EVENT_NAME === 'touchend') {
+  //   elem.removeEventListener('touchstart', callback, options);
+  // } else {
     elem.removeEventListener(CLICK_EVENT_NAME, callback, options);
-  }
+  // }
 }
 
 export function simulateClickEvent(elem: HTMLElement) {

src/helpers/dom/fixSafariStickyInputFocusing.ts

@@ -56,7 +56,7 @@ if(IS_STICKY_INPUT_BUGGED) {
   // let hasFocus = false;
   let lastFocusOutTimeStamp = 0;
   document.addEventListener('focusin', (e) => {
-    if((e.timeStamp - lastFocusOutTimeStamp) < 50/*  && document.activeElement === input */) {
+    if(!(e.target as HTMLElement).classList.contains('is-sticky-input-bugged') || (e.timeStamp - lastFocusOutTimeStamp) < 50/*  && document.activeElement === input */) {
       return;
     }
 

src/lang.ts

@@ -793,6 +793,7 @@ const lang = {
   "Message.Context.Select": "Select",
   "Message.Context.Pin": "Pin",
   "Message.Context.Unpin": "Unpin",
+  "Message.Context.Goto": "Show Message",
   "MessageContext.CopyMessageLink1": "Copy Message Link",
   "NewPoll.Anonymous": "Anonymous Voting",
   "NewPoll.Explanation.Placeholder": "Add a Comment (Optional)",

src/lib/appManagers/appDialogsManager.ts

@@ -22,7 +22,7 @@ import rootScope from "../rootScope";
 import apiUpdatesManager from "./apiUpdatesManager";
 import appPeersManager from './appPeersManager';
 import appImManager from "./appImManager";
-import appMessagesManager, { Dialog } from "./appMessagesManager";
+import appMessagesManager, { Dialog, MyMessage } from "./appMessagesManager";
 import appStateManager, { State } from "./appStateManager";
 import appUsersManager from "./appUsersManager";
 import Button from "../../components/button";
@@ -51,6 +51,7 @@ import windowSize from "../../helpers/windowSize";
 import isInDOM from "../../helpers/dom/isInDOM";
 import appPhotosManager, { MyPhoto } from "./appPhotosManager";
 import { MyDocument } from "./appDocsManager";
+import { setSendingStatus } from "../../components/sendingStatus";
 
 export type DialogDom = {
   avatarEl: AvatarElement,
@@ -440,6 +441,7 @@ export class AppDialogsManager {
   public setFilterId(filterId: number) {
     this.filterId = filterId;
     this.indexKey = appMessagesManager.dialogsStorage ? appMessagesManager.dialogsStorage.getDialogIndexKey(this.filterId) : 'index';
+    rootScope.filterId = filterId;
   }
 
   private async onStateLoaded(state: State) {
@@ -1433,22 +1435,15 @@ export class AppDialogsManager {
       }
     }
 
-    const lastMessage = dialog.draft?._ === 'draftMessage' ? 
-      dialog.draft : 
-      appMessagesManager.getMessageByPeer(dialog.peerId, dialog.top_message);
-    if(!lastMessage.deleted && lastMessage.pFlags.out && lastMessage.peerId !== rootScope.myId/*  && 
-      dialog.read_outbox_max_id */) { // maybe comment, 06.20.2020
-      const isUnread = !!lastMessage.pFlags?.unread
-        /*  && dialog.read_outbox_max_id !== 0 */; // maybe uncomment, 31.01.2020
-
-      if(isUnread) {
-        dom.statusSpan.classList.remove('tgico-checks');
-        dom.statusSpan.classList.add('tgico-check');
-      } else {
-        dom.statusSpan.classList.remove('tgico-check');
-        dom.statusSpan.classList.add('tgico-checks');
+    let setStatusMessage: MyMessage;
+    if(dialog.draft?._ !== 'draftMessage') {
+      const lastMessage: MyMessage = appMessagesManager.getMessageByPeer(dialog.peerId, dialog.top_message);
+      if(!lastMessage.deleted && lastMessage.pFlags.out && lastMessage.peerId !== rootScope.myId) {
+        setStatusMessage = lastMessage;
       }
-    } else dom.statusSpan.classList.remove('tgico-check', 'tgico-checks');
+    }
+
+    setSendingStatus(dom.statusSpan, setStatusMessage, true);
 
     const filter = appMessagesManager.filtersStorage.getFilter(this.filterId);
     let isPinned: boolean;
@@ -1672,7 +1667,7 @@ export class AppDialogsManager {
     li.dataset.peerId = '' + peerId;
 
     const statusSpan = document.createElement('span');
-    statusSpan.classList.add('message-status');
+    statusSpan.classList.add('message-status', 'sending-status'/* , 'transition', 'reveal' */);
 
     const lastTimeSpan = document.createElement('span');
     lastTimeSpan.classList.add('message-time');

src/lib/appManagers/appImManager.ts

@@ -806,6 +806,16 @@ export class AppImManager {
 
       if(e.code === 'KeyC' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
         return;
+      } else if(e.altKey && (e.code === 'ArrowUp' || e.code === 'ArrowDown') && rootScope.peerId) {
+        const folder = appMessagesManager.dialogsStorage.getFolder(rootScope.filterId, true);
+        const idx = folder.findIndex(dialog => dialog.peerId === rootScope.peerId);
+        if(idx !== -1) {
+          const nextIndex = e.code === 'ArrowUp' ? idx - 1 : idx + 1;
+          const nextDialog = folder[nextIndex];
+          if(nextDialog) {
+            this.setPeer(nextDialog.peerId);
+          }
+        }
       } else if(e.code === 'ArrowUp') {
         if(!chat.input.editMsgId && chat.input.isInputEmpty()) {
           const historyStorage = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId);
@@ -854,23 +864,18 @@ export class AppImManager {
     
     document.body.addEventListener('keydown', onKeyDown);
 
-    rootScope.addEventListener('history_multiappend', (e) => {
-      const msgIdsByPeer = e;
-
+    rootScope.addEventListener('history_multiappend', (msgIdsByPeer) => {
       for(const peerId in msgIdsByPeer) {
         appSidebarRight.sharedMediaTab.renderNewMessages(+peerId, Array.from(msgIdsByPeer[peerId]));
       }
     });
     
-    rootScope.addEventListener('history_delete', (e) => {
-      const {peerId, msgs} = e;
-
+    rootScope.addEventListener('history_delete', ({peerId, msgs}) => {
       appSidebarRight.sharedMediaTab.deleteDeletedMessages(peerId, Array.from(msgs));
     });
 
     // Calls when message successfully sent and we have an id
-    rootScope.addEventListener('message_sent', (e) => {
-      const {storage, tempId, mid} = e;
+    rootScope.addEventListener('message_sent', ({storage, tempId, mid}) => {
       const message = appMessagesManager.getMessageFromStorage(storage, mid);
       appSidebarRight.sharedMediaTab.renderNewMessages(message.peerId, [mid]);
     });

src/lib/appManagers/appMessagesManager.ts

@@ -2171,7 +2171,7 @@ export class AppMessagesManager {
     //return Object.keys(this.groupedMessagesStorage[grouped_id]).map(id => +id).sort((a, b) => a - b);
   }
 
-  public getMidsByMessage(message: any) {
+  public getMidsByMessage(message: Message.message) {
     if(message?.grouped_id) return this.getMidsByAlbum(message.grouped_id);
     else return [message.mid];
   }

src/lib/rootScope.ts

@@ -147,6 +147,7 @@ export class RootScope extends EventListenerBase<{
   public connectionStatus: {[name: string]: ConnectionStatusChange} = {};
   public settings: State['settings'];
   public peerId = 0;
+  public filterId = 0;
   public systemTheme: Theme['name'];
   public config: Partial<Config.config> = {
     forwarded_count_max: 100,

src/scss/components/_global.scss

@@ -155,6 +155,11 @@ Utility Classes
   border-radius: 0 !important;
 }
 
+.disable-hover/* ,
+.disable-hover * */ {
+  pointer-events: none !important;
+}
+
 /* .flex-grow {
   flex-grow: 1;
 }

src/scss/partials/_button.scss

@@ -212,7 +212,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: 1;
+    z-index: 3;
     cursor: default;
     user-select: none;
     //background-color: rgba(0, 0, 0, .2);

src/scss/partials/_chat.scss

@@ -1147,11 +1147,6 @@ $chat-helper-size: 36px;
 
 	@include respond-to(handhelds) {
     padding: 0 $chat-padding-handhelds;
-
-    html.is-ios & {
-      -webkit-user-select: none;
-      -webkit-touch-callout: none;
-    }
 	}
 
 	&.is-chat {

src/scss/partials/_chatBubble.scss

@@ -221,7 +221,8 @@ $bubble-margin: .25rem;
   // ! hide context menu for media on android
   .bubbles.is-selecting & {
     img, 
-    video {
+    video,
+    a {
       pointer-events: none;
     }
   }
@@ -1031,7 +1032,7 @@ $bubble-margin: .25rem;
       &-title,
       &-subtitle, 
       i {
-        color: #fff;
+        color: #fff !important;
       }
 
       &-border {
@@ -1412,31 +1413,31 @@ $bubble-margin: .25rem;
       position: absolute;
       /* position: relative;
       width: max-content; */
-      bottom: .1rem;
-      right: .2rem;
-      border-radius: 12px;
+      bottom: .1875rem;
+      right: .1875rem;
+      border-radius: .75rem;
       background-color: var(--message-time-background);
-      padding: 0 .2rem;
+      padding: 0 .3125rem;
       z-index: 2;
       
       .time {
         margin-left: 0;
-        color: #fff;
-        visibility: visible;
         display: flex;
         align-items: center;
-        padding: 0 2.5px;
-        line-height: 18px;
-        pointer-events: all; // show title
+        padding: 0;
+        margin: 0;
         white-space: nowrap;
         height: 18px;
 
-        &:after {
+        .inner {
+          right: unset;
+          bottom: unset;
           color: #fff;
-        }
+          margin: inherit;
 
-        .inner {
-          display: none;
+          &:after {
+            color: #fff;
+          }
         }
       }
     }
@@ -2102,6 +2103,10 @@ $bubble-margin: .25rem;
     .reply, .name {
       right: calc(100% + 10px);
     }
+
+    .message {
+      right: 0;
+    }
   }
 
   &:not(.just-media) {
@@ -2117,14 +2122,6 @@ $bubble-margin: .25rem;
     }
   }
 
-  &.sticker, 
-  &.round, 
-  &.emoji-big {
-    .message {
-      right: 0;
-    }
-  }
-
   .quote:before {
     background-color: var(--message-out-primary-color);
   }
@@ -2152,10 +2149,6 @@ $bubble-margin: .25rem;
     }
   }
 
-  &.is-message-empty .time .inner {
-    color: var(--message-out-primary-color);
-  }
-
   /* &.is-message-empty .time:after {
     margin-bottom: 1px;
   } */

src/scss/partials/_chatlist.scss

@@ -109,6 +109,7 @@ ul.chatlist {
   } */
 
   li {
+    --background: unset;
     //height: var(--height);
     height: 72px;
     //max-height: var(--height);
@@ -124,12 +125,14 @@ ul.chatlist {
     padding-right: 8.5px;
     padding-left: 8.5px; */
     overflow: hidden;
+    background: var(--background);
 
     @include respond-to(handhelds) {
       border-radius: 0;
     }
 
-    @include hover-background-effect();
+    //@include hover-background-effect();
+    @include hover(gray, --background, false);
 
     &.is-muted {
       .user-title {
@@ -183,13 +186,13 @@ ul.chatlist {
     } */
 
     &.menu-open {
-      background: var(--light-secondary-text-color);
+      --background: var(--light-secondary-text-color);
     }
 
     @include respond-to(not-handhelds) {
       &.active {
+        --background: var(--primary-color) !important;
         //background: var(--light-secondary-text-color);
-        background: var(--primary-color) !important;
 
         .user-caption,
         .tgico-chatspinned:before,
@@ -405,25 +408,25 @@ ul.chatlist {
   }
 
   .message-status {
-    margin-right: .1rem;
-    //margin-top: .3rem;
-    margin-top: -.3rem;
+    margin-right: 0.125rem;
     display: inline-block;
     vertical-align: middle;
-
-    &[class*=" tgico-"] {
-      color: var(--chatlist-status-color);
-      font-size: 1.25rem;
-    }
+    color: var(--chatlist-status-color);
+    line-height: 1;
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+    position: relative;
+    margin-top: -.0625rem;
 
     &:before {
       vertical-align: middle;
     }
   }
 
-  .message-time {
+  /* .message-time {
     vertical-align: middle;
-  }
+  } */
 
   .tgico-chatspinned {
     background: transparent;

src/scss/partials/_checkbox.scss

@@ -56,10 +56,12 @@
     }
 
     &-background {
-      top: -15%;
+      // it is needed for circle scale animation
+      top: -15%; 
       right: -15%;
       bottom: -15%;
       left: -15%;
+      
       background-color: var(--primary-color);
       transform: scale(1);
       border-radius: 50%;
@@ -138,6 +140,14 @@
 
   .checkbox-box {
     border-radius: 50%;
+    overflow: auto;
+
+    &-background {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
 
     &-border {
       border: 2px solid var(--secondary-color);
@@ -147,6 +157,10 @@
     &-check {
       --offset: calc(var(--size) - (var(--size) / 2 + .125rem));
     }
+
+    html.is-safari & {
+      -webkit-mask-image: none;
+    }
   }
 }
 

src/scss/partials/_ckin.scss

@@ -287,6 +287,9 @@ video::-webkit-media-controls-enclosure {
     margin: 0;
     outline: none;
     caret-color: var(--color);
+    position: absolute;
+    top: -.5rem;
+    bottom: -.5rem;
 
     &:focus {
       outline: none;
@@ -348,17 +351,24 @@ video::-webkit-media-controls-enclosure {
         position: absolute;
         right: 0;
         top: 50%;
-        transform: translate(calc(var(--thumb-size) / 2), -50%);
+        transform: translate(calc(var(--thumb-size) / 2), -50%) scale(1);
+
+        @include animation-level(2) {
+          transition: transform .125s ease-in-out;
+        }
       }
     }
   }
 
+  &.is-focused .progress-line__filled:not(.progress-line__loaded):after {
+    transform: translate(calc(var(--thumb-size) / 2), -50%) scale(1.25);
+  }
+
   &__loaded, &:before {
     opacity: .3;
     background-color: var(--secondary-color);
   }
 
-  &__seek, 
   &__filled, 
   &__loaded {
     border-radius: var(--border-radius);

src/scss/partials/_document.scss

@@ -10,6 +10,10 @@
   padding-left: 4.25rem;
   height: 70px;
 
+  .media-photo {
+    border-radius: inherit;
+  }
+
   &-ico {
     background-color: var(--background-color);
     border-radius: $border-radius;

src/scss/partials/_profile.scss

@@ -194,7 +194,7 @@
     position: relative;
     width: 100%;
 
-    .checkbox-field {
+    /* .checkbox-field {
       margin: 0;
       padding: 0;
       margin-left: -54px;
@@ -202,7 +202,7 @@
 
     .checkbox-caption {
       padding-left: 54px;
-    }
+    } */
 
     &-wrapper {
       flex: 1 1 auto;

src/scss/partials/_rightSidebar.scss

@@ -310,7 +310,9 @@
     display: none;
   }
 
-  .document-name, .audio-title, .title {
+  .document-name, 
+  .audio-title, 
+  .title {
     display: flex;
     justify-content: space-between;
   }
@@ -347,6 +349,11 @@
       overflow: hidden;
     }
 
+    .checkbox-field {
+      right: .25rem;
+      top: .25rem;
+    }
+
     /* span.video-play {
       background-color: var(--message-time-background);
       color: #fff;
@@ -357,6 +364,37 @@
     } */
   }
 
+  .checkbox {
+    &-box {
+      box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 40%);
+
+      &-border {
+        border-color: var(--message-checkbox-border-color);
+      }
+
+      &-background {
+        background-color: var(--message-checkbox-color);
+      }
+    }
+
+    &-field {
+      position: absolute;
+      z-index: 2;
+      margin: 0;
+    }
+  }
+
+  .document, 
+  .audio {
+    .checkbox-field {
+      top: 50%;
+      left: 0;
+      margin-left: 2rem;
+      margin-top: 1rem;
+      transform: translateY(-50%);
+    }
+  }
+
   &-content-media &-month {
     &-items {
       width: 100%;
@@ -385,7 +423,8 @@
       //height: 54px;
       height: calc(48px + 1.5rem);
 
-      &-ico, &-download {
+      &-ico, 
+      &-download {
         width: 48px;
         height: 48px;
         border-radius: 5px !important;
@@ -412,73 +451,87 @@
     .search-super-item {
       display: flex;
       flex-direction: column;
-      margin-top: 20px;
-      margin-left: 5px;
-      padding-bottom: 2px;
-      //padding-bottom: 10px;
+      padding-left: 4.4375rem;
       position: relative;
-      padding-left: 60px;
       overflow: hidden;
-      //min-height: 48px;
-      min-height: 58px;
-
-      .preview {
-        height: 3rem;
-        width: 3rem;
-        border-radius: .375rem;
-        overflow: hidden;
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        &.empty {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 2rem;
-          color: #fff;
-          text-transform: uppercase;
-          background-color: var(--primary-color);
-        }
+      min-height: 4.375rem;
+      cursor: pointer;
+      justify-content: flex-start;
+    }
 
-        .media-photo {
-          object-fit: cover;
-          width: 100%;
-          height: 100%;
-        }
+    .row-media {
+      height: 3rem;
+      width: 3rem;
+      border-radius: .375rem;
+      overflow: hidden;
+      position: absolute;
+      left: .6875rem;
+
+      &.empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        color: #fff;
+        text-transform: uppercase;
+        background-color: var(--primary-color);
       }
+    }
 
-      .url {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        font-size: 14px;
-        margin-top: -1px;
+    /* .anchor-url {
+      &:before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        content: " ";
+        cursor: pointer;
       }
+    } */
+
+    .media-photo {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
     }
 
-    .title {
-      font-size: 16px;
-      margin-top: 2px;
+    .row-title {
+      margin-top: .1875rem;
     }
 
-    .subtitle {
-      font-size: 14px;
-      max-width: 310px;
+    .row-subtitle {
+      overflow: hidden;
+      white-space: pre-wrap;
+      text-overflow: ellipsis;
+      word-break: break-word;
 
       &.sender {
-        margin-top: 2px;
+        margin-top: .125rem;
       }
     }
 
-    .search-super-month-items {
-      padding: 0 24px 15px 15px;
-    
-      @include respond-to(handhelds) {
-        padding: 0 16px 15px 7px;
+    .sent-time {
+      margin: 1px 0 0;
+    }
+
+    .checkbox-field {
+      padding: 0 !important;
+      margin: 2rem 0 0 -1.75rem !important;
+    }
+
+    @include respond-to(not-handhelds) {
+      .search-super-month-items {
+        margin: .5625rem;
       }
     }
 
+    @include respond-to(handhelds) {
+      .search-super-month-name {
+        padding: .875rem 1rem;
+      }
+    }
   }
 
   &-content-music, &-content-voice {
@@ -528,6 +581,76 @@
       }
     }
   }
+
+  &-tabs-scrollable {
+    .search-super-nav-scrollable {
+      opacity: 1;
+    }
+
+    .search-super-nav-scrollable,
+    .search-super-selection-container {
+      @include animation-level(2) {
+        transition: opacity .2s ease-in-out;
+      }
+    }
+
+    &.is-selecting {
+      &:not(.backwards) {
+        .search-super-nav-scrollable {
+          opacity: 0;
+        }
+  
+        .search-super-selection-container {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &.is-selecting {
+    a {
+      pointer-events: none;
+    }
+
+    .row {
+      &:not(.menu-open) {
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  &-selection {
+    &-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem;
+      opacity: 0;
+
+      .btn-icon + .btn-icon {
+        margin-left: .5rem;
+      }
+
+      @include respond-to(handhelds) {
+        padding: 0 .5rem;
+      }
+    }
+
+    &-count {
+      flex-grow: 1;
+      font-weight: 500;
+      color: var(--primary-text-color);
+      white-space: nowrap;
+      text-transform: capitalize;
+      margin-left: 1.5rem;
+    }
+  }
 }
 
 #search-container {

src/scss/partials/_row.scss

@@ -115,4 +115,8 @@
     margin: 0 !important;
     left: .5rem;
   }
+
+  &.menu-open {
+    background-color: var(--light-secondary-text-color);
+  }
 }

src/scss/partials/_transition.scss

@@ -1,14 +1,7 @@
-/*
- * https://github.com/morethanwords/tweb
- * Copyright (C) 2019-2021 Eduard Kuzmenko
- * https://github.com/morethanwords/tweb/blob/master/LICENSE
- */
+// * Jolly Cobra's transition
 
 .transition {
-  --easeOutSine: cubic-bezier(.39, .575, .565, 1);
-  --easeInSine: cubic-bezier(.47, 0, .745, .715);
-
-  .transition-item {
+  > .transition-item {
     position: absolute;
     top: 0;
     left: 0;
@@ -71,6 +64,8 @@
    * slide-fade
    */
   &.slide-fade {
+    --easeOutSine: cubic-bezier(.39, .575, .565, 1);
+    --easeInSine: cubic-bezier(.47, 0, .745, .715);
     position: relative;
 
     > .from {
@@ -117,6 +112,18 @@
       }
     }
   }
+
+  /* &.reveal {
+    > .to {
+      clip-path: inset(0 100% 0 0);
+    }
+
+    &.animating {
+      > .to {
+        animation: reveal-in 350ms ease-in;
+      }
+    }
+  } */
 }
 
 /*
@@ -188,6 +195,15 @@
   }
 }
 
+ /* @keyframes reveal-in {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+  100% {
+    clip-path: inset(0 0 0 0);
+  }
+} */
+
 /* .zoom-fade {
   transition: .15s ease-in-out opacity, .15s ease-in-out transform;
   transform: scale3d(1.1, 1.1, 1);

src/scss/style.scss

@@ -406,6 +406,10 @@ html.is-ios {
   //&, body {
     position: fixed; // fix iOS fullscreen scroll
   //}
+
+  // disable image longtapping
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 @supports(padding: unquote('max(0px)')) {
@@ -490,11 +494,6 @@ input, textarea, button, select, a, div {
   //}
 }
 
-.disable-hover/* ,
-.disable-hover * */ {
-  pointer-events: none !important;
-}
-
 @include respond-to(not-handhelds) {
   .only-handhelds {
     display: none !important;
@@ -1359,3 +1358,20 @@ middle-ellipsis-element {
     content: "W";
   }
 }
+
+.sending-status {
+  &:empty {
+    display: none;
+  }
+
+  /* &.animating {
+    .sending-status-icon {
+      background: var(--background);
+    }
+  } */
+
+  &-icon {
+    position: absolute;
+    line-height: 1 !important;
+  }
+}