Fix right sidebar opening after wrong closing

src/components/appMediaViewer.ts

@@ -1139,7 +1139,13 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
   onAuthorClick = (e: MouseEvent) => {
     if(this.currentMessageID && this.currentMessageID != Number.MAX_SAFE_INTEGER) {
       const mid = this.currentMessageID;
-      this.close(e).then(() => {
+      this.close(e)
+      //.then(() => mediaSizes.isMobile ? appSidebarRight.sharedMediaTab.closeBtn.click() : Promise.resolve())
+      .then(() => {
+        if(mediaSizes.isMobile) {
+          appSidebarRight.sharedMediaTab.closeBtn.click();
+        }
+
         const message = appMessagesManager.getMessage(mid);
         appImManager.setPeer(message.peerID, mid);
       });

src/components/popupNewMedia.ts

@@ -6,6 +6,7 @@ import { Layouter, RectPart } from "./groupedLayout";
 import InputField from "./inputField";
 import { PopupElement } from "./popup";
 import { ripple } from "./ripple";
+import Scrollable from "./scrollable";
 import { toast } from "./toast";
 import { wrapDocument } from "./wrappers";
 
@@ -19,6 +20,8 @@ type SendFileParams = Partial<{
 
 const MAX_LENGTH_CAPTION = 1024;
 
+// TODO: .gif upload as video
+
 export default class PopupNewMedia extends PopupElement {
   private btnSend: HTMLElement;
   private input: HTMLInputElement;
@@ -44,13 +47,15 @@ export default class PopupNewMedia extends PopupElement {
     this.btnSend.addEventListener('click', this.send);
   
     this.header.append(this.btnSend);
-    
+
     this.mediaContainer = document.createElement('div');
     this.mediaContainer.classList.add('popup-photo');
-
+    const scrollable = new Scrollable(null);
+    scrollable.container.append(this.mediaContainer);
+    
     const inputField = InputField('Add a caption...', 'Caption', 'photo-caption', MAX_LENGTH_CAPTION, 80);
     this.input = inputField.firstElementChild as HTMLInputElement;
-    this.container.append(this.mediaContainer, inputField);
+    this.container.append(scrollable.container, inputField);
 
     this.attachFiles(files);
   }

src/components/scrollable.ts

@@ -518,7 +518,7 @@ export default class Scrollable extends ScrollableBase {
 }
 
 export class ScrollableX extends ScrollableBase {
-  constructor(public el: HTMLElement, logPrefix = '', public appendTo = el, public onScrollOffset = 300, public splitCount = 15, public container: HTMLElement = document.createElement('div')) {
+  constructor(el: HTMLElement, logPrefix = '', public appendTo = el, public onScrollOffset = 300, public splitCount = 15, public container: HTMLElement = document.createElement('div')) {
     super(el, logPrefix, appendTo, container);
 
     this.container.classList.add('scrollable-x');

src/components/sidebarRight/index.ts

@@ -109,7 +109,8 @@ export class AppSidebarRight extends SidebarSlider {
     document.body.classList.toggle(RIGHT_COLUMN_ACTIVE_CLASSNAME, enable);
     //console.log('sidebar selectTab', enable, willChange);
     if(mediaSizes.isMobile) {
-      appImManager._selectTab(active ? 1 : 2);
+      //appImManager._selectTab(active ? 1 : 2);
+      appImManager.selectTab(active ? 1 : 2);
       return new Promise(resolve => {
         setTimeout(resolve, 250); // delay of slider animation
       });    

src/components/sidebarRight/tabs/pollResults.ts

@@ -10,6 +10,7 @@ import { ripple } from "../../ripple";
 export default class AppPollResultsTab implements SliderTab {
   private container = document.getElementById('poll-results-container') as HTMLDivElement;
   private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement;
+  private closeBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement;
   private resultsDiv = this.contentDiv.firstElementChild as HTMLDivElement;
   private scrollable: Scrollable;
 
@@ -72,7 +73,9 @@ export default class AppPollResultsTab implements SliderTab {
       const list = document.createElement('ul');
       list.classList.add('poll-results-voters');
 
-      appDialogsManager.setListClickListener(list);
+      appDialogsManager.setListClickListener(list, () => {
+        this.closeBtn.click();
+      });
 
       list.style.minHeight = Math.min(result.voters, 4) * 50 + 'px';
 

src/lib/appManagers/appImManager.ts

@@ -147,6 +147,7 @@ export class AppImManager {
 
   private mainColumns: HTMLElement;
   public _selectTab: ReturnType<typeof horizontalMenu>;
+  public tabID = -1;
   private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement;
   public hideRightSidebar = false;
 
@@ -718,7 +719,15 @@ export class AppImManager {
   public selectTab(id: number) {
     document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0);
 
+    const prevTabID = this.tabID;
+    this.tabID = id;
+    if(mediaSizes.isMobile && prevTabID == 2 && id == 1) {
+      //appSidebarRight.toggleSidebar(false);
+      document.body.classList.remove(RIGHT_COLUMN_ACTIVE_CLASSNAME);
+    }
+    
     this._selectTab(id, mediaSizes.isMobile);
+    //document.body.classList.toggle(RIGHT_COLUMN_ACTIVE_CLASSNAME, id == 2);
   }
 
   onDatePick = (timestamp: number) => {

src/scss/partials/popups/_mediaAttacher.scss

@@ -7,6 +7,8 @@
       max-width: 420px;
       /* padding: 12px 20px 50px; */
       padding: 12px 20px 32.5px;
+      //max-height: unquote('min(640px, 100%)');
+      max-height: 100%;
 
       &.is-media:not(.is-album) {
         /* max-height: 425px; */
@@ -45,6 +47,7 @@
     }
 
     &-header {
+      flex: 0 0 auto;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
@@ -120,9 +123,14 @@
     }
   }
 
+  .scrollable {
+    position: relative;
+  }
+
   .input-field {
     width: 100%;
     margin-top: 25px;
+    flex: 0 0 auto;
 
     &::placeholder {
       color: #a2acb4;