Confirmation popup for clearing recent search

Fix displaying subscribe button
Filters fixes

src/components/appSearchSuper..ts

@@ -1035,20 +1035,24 @@ export default class AppSearchSuper {
             setResults(contacts.my_results, this.searchGroups.contacts, true);
             setResults(contacts.results/* .concat(contacts.results, contacts.results, contacts.results) */, this.searchGroups.globalContacts);
 
-            if(this.searchGroups.globalContacts.nameEl.lastElementChild) {
+            this.searchGroups.globalContacts.container.classList.add('is-short');
+
+            if(this.searchGroups.globalContacts.nameEl.lastElementChild !== this.searchGroups.globalContacts.nameEl.firstElementChild) {
               this.searchGroups.globalContacts.nameEl.lastElementChild.remove();
             }
             
-            this.searchGroups.globalContacts.container.classList.add('is-short');
-            
             if(this.searchGroups.globalContacts.list.childElementCount > 3) {
               const showMore = document.createElement('div');
               showMore.classList.add('search-group__show-more');
-              showMore.innerText = 'Show more';
+              const intlElement = new I18n.IntlElement({
+                key: 'Separator.ShowMore'
+              });
+              showMore.append(intlElement.element);
               this.searchGroups.globalContacts.nameEl.append(showMore);
               showMore.addEventListener('click', () => {
                 const isShort = this.searchGroups.globalContacts.container.classList.toggle('is-short');
-                showMore.innerText = isShort ? 'Show more' : 'Show less';
+                intlElement.key = isShort ? 'Separator.ShowMore' : 'Separator.ShowLess';
+                intlElement.update();
               });
             }
           }

src/components/chat/topbar.ts

@@ -657,11 +657,13 @@ export default class ChatTopbar {
 
     const isBroadcast = this.appPeersManager.isBroadcast(peerId);
     this.btnMute && this.btnMute.classList.toggle('hide', !isBroadcast);
-    if(this.appPeersManager.isAnyChat(peerId)) {
     if(this.btnJoin) {
+      if(this.appPeersManager.isAnyChat(peerId)) {
         const chatId = peerId.toChatId();
         replaceContent(this.btnJoin, i18n(this.appChatsManager.isChannel(chatId) ? 'Chat.Subscribe' : 'ChannelJoin'));
         this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(chatId)?.pFlags?.left);
+      } else {
+        this.btnJoin.classList.add('hide');
       }
     }
 

src/components/connectionStatus.ts

@@ -79,12 +79,13 @@ export default class ConnectionStatusComponent {
 
     /* let bool = true;
     document.addEventListener('dblclick', () => {
+      const dcId = 2;
       rootScope.dispatchEvent('connection_status_change', {
-        dcId: 2,
+        dcId: dcId,
         isFileDownload: false,
         isFileNetworker: false,
         isFileUpload: false,
-        name: "NET-2",
+        name: "NET-" + dcId,
         status: bool ? (bool = false, ConnectionStatus.Closed) : (bool = true, ConnectionStatus.Connected),
         _: "networkerStatus"
       });

src/components/scrollable.ts

@@ -121,9 +121,9 @@ export default class Scrollable extends ScrollableBase {
   public splitUp: HTMLElement;
   public padding: HTMLElement;
   
-  public onAdditionalScroll: () => void = null;
+  public onAdditionalScroll: () => void;
-  public onScrolledTop: () => void = null;
+  public onScrolledTop: () => void;
-  public onScrolledBottom: () => void = null;
+  public onScrolledBottom: () => void;
   
   public lastScrollTop: number = 0;
   public lastScrollDirection: number = 0;

src/components/sidebarLeft/index.ts

@@ -40,6 +40,8 @@ import sessionStorage from "../../lib/sessionStorage";
 import { CLICK_EVENT_NAME } from "../../helpers/dom/clickEvent";
 import { closeBtnMenu } from "../misc";
 import { indexOfAndSplice } from "../../helpers/array";
+import ButtonIcon from "../buttonIcon";
+import confirmationPopup from "../confirmationPopup";
 
 export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
@@ -286,9 +288,9 @@ export class AppSidebarLeft extends SidebarSlider {
     };
 
     this.searchGroups = {
-      contacts: new SearchGroup('Search.Chats', 'contacts', undefined, undefined, undefined, undefined, close),
+      contacts: new SearchGroup('SearchAllChatsShort', 'contacts', undefined, undefined, undefined, undefined, close),
-      globalContacts: new SearchGroup('Search.Global', 'contacts', undefined, undefined, undefined, undefined, close),
+      globalContacts: new SearchGroup('GlobalSearch', 'contacts', undefined, undefined, undefined, undefined, close),
-      messages: new SearchGroup('Search.Messages', 'messages'),
+      messages: new SearchGroup('SearchMessages', 'messages'),
       people: new SearchGroup(false, 'contacts', true, 'search-group-people', true, false, close),
       recent: new SearchGroup('Recent', 'contacts', true, 'search-group-recent', true, true, close)
     };
@@ -575,12 +577,27 @@ export class AppSidebarLeft extends SidebarSlider {
       transition(0);
     });
 
-    const clearRecentSearchBtn = document.createElement('button');
+    const clearRecentSearchBtn = ButtonIcon('close');
-    clearRecentSearchBtn.classList.add('btn-icon', 'tgico-close');
     this.searchGroups.recent.nameEl.append(clearRecentSearchBtn);
     clearRecentSearchBtn.addEventListener('click', () => {
+      confirmationPopup({
+        descriptionLangKey: 'Search.Confirm.ClearHistory',
+        button: {
+          langKey: 'ClearButton',
+          isDanger: true
+        }
+      }).then(() => {
+        appStateManager.getState().then(state => {
           this.searchGroups.recent.clear();
-      appStateManager.pushToState('recentSearch', []);
+          
+          const recentSearch = state.recentSearch || [];
+          for(const peerId of recentSearch) {
+            appStateManager.releaseSinglePeer(peerId, 'recentSearch');
+          }
+
+          appStateManager.pushToState('recentSearch', recentSearch);
+        });
+      });
     });
   }
 }

src/lang.ts

@@ -105,9 +105,6 @@ const lang = {
   "Link.Available": "Link is available",
   "Link.Taken": "Link is already taken",
   "Link.Invalid": "Link is invalid",
-  "Search.Chats": "Chats",
-  "Search.Global": "Global Search",
-  "Search.Messages": "Messages",
   "StickersTab.SearchPlaceholder": "Search Stickers",
   "ForwardedFrom": "Forwarded from %s",
   "Popup.Avatar.Title": "Drag to Reposition",
@@ -589,6 +586,12 @@ const lang = {
     "other_value": "%1$d online"
   },
   "EditedMessage": "edited",
+  "GlobalSearch": "Global search",
+  "SearchMessages": "Messages",
+  "SearchAllChatsShort": "Chats",
+  "ClearButton": "Clear",
+  "FilterAllChats": "All Chats",
+  "FilterAllChatsShort": "All",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",
@@ -716,7 +719,6 @@ const lang = {
   "ChatList.Filter.Include.AddChat": "Add Chats",
   "ChatList.Filter.Exclude.AddChat": "Add Chats",
   //"ChatList.Filter.All": "All",
-  "ChatList.Filter.AllChats": "All Chats",
   "ChatList.Filter.Contacts": "Contacts",
   "ChatList.Filter.NonContacts": "Non-Contacts",
   "ChatList.Filter.Groups": "Groups",
@@ -881,6 +883,9 @@ const lang = {
   "GeneralSettings.BigEmoji": "Large Emoji",
   "GeneralSettings.EmojiPrediction": "Suggest Emoji",
   "GroupPermission.Delete": "Delete Exception",
+  "Search.Confirm.ClearHistory": "Are you sure you want to clear your search history?",
+  "Separator.ShowMore": "show more",
+  "Separator.ShowLess": "show less",
   "ScheduleController.at": "at",
   "Schedule.SendToday": "Send today at %@",
   "Schedule.SendDate": "Send on %@ at %@",

src/lib/appManagers/appDialogsManager.ts

@@ -175,6 +175,7 @@ export class AppDialogsManager {
 
   private onListLengthChange: () => Promise<void>;
   private loadedDialogsAtLeastOnce = false;
+  private allChatsIntlElement: I18n.IntlElement;
 
   constructor() {
     this.chatsPreloader = putPreloader(null, true);
@@ -221,11 +222,14 @@ export class AppDialogsManager {
       });
     }
 
+    this.allChatsIntlElement = new I18n.IntlElement({
+      key: 'FilterAllChatsShort'
+    });
     this.setFilterId(0);
     this.addFilter({
       id: this.filterId,
       title: '',
-      titleEl: i18n('ChatList.Filter.AllChats'),
+      titleEl: this.allChatsIntlElement.element,
       orderIndex: 0
     });
 
@@ -492,9 +496,7 @@ export class AppDialogsManager {
       delete this.scrollables[filter.id];
       delete this.filtersRendered[filter.id];
 
-      if(Object.keys(this.filtersRendered).length <= 1) {
+      this.onFiltersLengthChange();
-        this.folders.menuScrollContainer.classList.add('hide');
-      }
     });
 
     rootScope.addEventListener('filter_order', (order) => {
@@ -774,18 +776,40 @@ export class AppDialogsManager {
       title: titleSpan
     };
 
-    if(!this.showFiltersPromise && Object.keys(this.filtersRendered).length > 1) {
+    this.onFiltersLengthChange();
+  }
+
+  private onFiltersLengthChange() {
+    if(!this.showFiltersPromise) {
       this.showFiltersPromise = new Promise<void>((resolve) => {
         window.setTimeout(() => {
-          this.showFiltersPromise = undefined;
+          const length = Object.keys(this.filtersRendered).length;
-          if(Object.keys(this.filtersRendered).length > 1) {
+          const show = length > 1;
-            this.folders.menuScrollContainer.classList.remove('hide');
+          const wasShowing = !this.folders.menuScrollContainer.classList.contains('hide');
+
+          if(show !== wasShowing) {
+            this.folders.menuScrollContainer.classList.toggle('hide', !show);
+            if(show && !wasShowing) {
               this.setFiltersUnreadCount();
             }
+
+            this.chatsContainer.classList.toggle('has-filters', show);
+          }
+
+          const scrollable = this.folders.menuScrollContainer.firstElementChild;
+          const key: LangPackKey = scrollable.scrollWidth > scrollable.clientWidth ? 'FilterAllChatsShort' : 'FilterAllChats';
+          if(this.allChatsIntlElement.key !== key) {
+            this.allChatsIntlElement.key = key;
+            this.allChatsIntlElement.update();
+          }
+
+          this.showFiltersPromise = undefined;
           resolve();
         }, 0);
       });
     }
+
+    return this.showFiltersPromise;
   }
 
   private loadDialogs(side: SliceSides) {
@@ -1247,7 +1271,7 @@ export class AppDialogsManager {
   }
 
   public onChatsScrollTop = () => {
-    this.onChatsScroll('top');
+    return this.onChatsScroll('top');
   };
   
   public onChatsScroll = (side: SliceSides = 'bottom') => {
@@ -1256,7 +1280,7 @@ export class AppDialogsManager {
         this.loadContacts();
       }
 
-      return;
+      return Promise.resolve();
     } else if(this.loadDialogsPromise) return this.loadDialogsPromise;
 
     this.log('onChatsScroll', side);

src/scss/partials/_emojiDropdown.scss

@@ -146,11 +146,10 @@
 		}
 	}
 	
-	.emoji-padding, .stickers-padding {
+	.emoji-padding, 
+  .stickers-padding {
 		.menu-horizontal-div {
-			height: 48px;
+			// padding: 2px;
-			padding: 2px;
-			width: 100%;
 			z-index: 4;
 			background-color: var(--surface-color);
 

src/scss/partials/_leftSidebar.scss

@@ -74,10 +74,11 @@
   }
 
   .item-main {
-    --menu-size: 3rem;
+    --menu-size: 3.1875rem;
   }
 
-  .menu-horizontal-scrollable {
+  .menu-horizontal {
+    &-scrollable {
       --scrollable-size: var(--menu-size);
       z-index: 1;
       background-color: var(--surface-color);
@@ -92,33 +93,6 @@
         position: relative;
       }
 
-    .menu-horizontal-div {
-      position: relative !important;
-      justify-content: flex-start;
-      z-index: 0;
-
-      &-item {
-        flex: 0 0 auto;
-        min-width: 3rem;
-        border-top-left-radius: 6px;
-        border-top-right-radius: 6px;
-
-        > span {
-          overflow: visible;
-
-          i {
-            bottom: calc(-.6875rem - 2px);
-            /* padding-right: 1rem !important;
-	          margin-left: -.5rem !important; */
-          }
-        }
-      }
-
-      &__stripe {
-        display: none;
-      }
-    }
-
       .badge {
         margin-left: 5px;
         //line-height: inherit !important;
@@ -138,7 +112,29 @@
       }
     }
 
-  .folders-tabs-scrollable {
+    &-div {
+      position: relative !important;
+      justify-content: flex-start;
+      z-index: 0;
+      padding: 0 0 5px; // 4px + 1px border
+      --padding-horizontal: .6875rem;
+
+      @include respond-to(handhelds) {
+        --padding-horizontal: .1875rem;
+      }
+
+      &-item {
+        flex: 0 0 auto;
+        min-width: 3rem;
+      }
+
+      &__stripe {
+        display: none;
+      }
+    }
+  }
+
+  /* .folders-tabs-scrollable {
     .menu-horizontal-div-item:first-child {
       margin-left: .6875rem;
   
@@ -146,7 +142,7 @@
         margin-left: .1875rem;
       }
     }
-  }
+  } */
 
   .item-main {
     .input-search {
@@ -236,9 +232,15 @@
 
   #chatlist-container {
     max-height: 100%;
-    overflow: hidden;
+    // overflow: hidden;
     position: relative;
     background-color: var(--surface-color);
+
+    &.has-filters {
+      .connection-status-bottom {
+        --offset-top: -3px;
+      }
+    }
   }
 
   #folders-container {
@@ -377,6 +379,8 @@
   }
 
   .item-main .sidebar-content {
+    overflow: visible;
+
     .btn-menu {
       bottom: calc(100% + 10px);
     }
@@ -430,7 +434,8 @@
 
     &.is-shown {
       &.animating {
-        .connection-status-button, & + .connection-status-bottom {
+        .connection-status-button, 
+        & + .connection-status-bottom {
           transition: transform var(--layer-transition);
         }
       }
@@ -441,13 +446,13 @@
         }
 
         & + .connection-status-bottom {
-          transform: translateY(64px);
+          transform: translateY(calc(64px + var(--offset-top)));
         }
       }
 
       &:not(.animating):not(.backwards) {
         & + .connection-status-bottom {
-          height: calc(100% - 64px);
+          height: calc(100% - 64px + var(--offset-top));
         }
       }
     }
@@ -481,6 +486,7 @@
     }
 
     &-bottom {
+      --offset-top: 0px;
       position: absolute;
       left: 0;
       top: 0;
@@ -489,7 +495,7 @@
       overflow: hidden;
       background-color: var(--surface-color);
 
-      transform: translateY(0);
+      transform: translateY(var(--offset-top));
       height: 100%;
 
       /* transform: translateY(64px);
@@ -513,6 +519,7 @@
 
 #search-container {
   display: flex;
+  top: -3px !important;
 
   .scrollable-y {
     position: relative;

src/scss/partials/_rightSidebar.scss

@@ -209,6 +209,8 @@
   &-tabs {
     width: auto;
     flex: 1 1 auto;
+    padding: .25rem 0;
+    --padding-horizontal: .25rem;
     
     //margin-top: 36px;
     /* i {

src/scss/partials/_scrollable.scss

@@ -66,7 +66,7 @@ html:not(.is-safari):not(.is-ios) {
   overflow-y: hidden;
   overflow-x: hidden;
   max-height: 100%;
-  transform: translateZ(0);
+  // transform: translateZ(0);
 
   //@include respond-to(not-handhelds) {
     position: absolute;
@@ -78,17 +78,18 @@ html:not(.is-safari):not(.is-ios) {
 
   -webkit-overflow-scrolling: touch;
 
-  &.scrollable-x {
+  &-x {
     overflow-x: auto;
     scrollbar-width: thin; // Firefox only
     -ms-overflow-style: none;
   }
 
-  &.scrollable-y {
+  &-y {
     overflow-y: auto;
     overflow-y: overlay;
     scrollbar-width: thin; // Firefox only
     -ms-overflow-style: none;
+    transform: translateZ(0);
 
     /* html.is-safari & {
       overflow-y: scroll;

src/scss/partials/_slider.scss

@@ -26,10 +26,11 @@
 
 .menu-horizontal-div {
   --size: var(--scrollable-size, 3.5rem);
+  --padding-horizontal: 0px;
   width: 100%;
+  height: var(--size);
   display: flex;
   justify-content: space-around;
-  align-items: center;
   flex-direction: row;
   position: relative;
   z-index: 2;
@@ -38,8 +39,21 @@
   color: var(--secondary-text-color);
   border-bottom: 1px solid var(--border-color);
 
+  &:not(.no-stripe) {
+    &:before,
+    &:after {
+      content: " ";
+      width: var(--padding-horizontal);
+      flex: 0 0 auto;
+    }
+
+    .menu-horizontal-div-item {
+      border-radius: $border-radius-medium;
+    }
+  }
+
   &-item {
-    height: var(--size);
+    height: 100%;
     padding: 0 1rem;
     cursor: pointer;
     text-align: center;
@@ -84,7 +98,7 @@
 
   i {
     position: absolute;
-    bottom: calc(-.625rem - 7px);
+    bottom: calc(-.6875rem - 6px);
     left: 0;
     opacity: 0;
     background-color: var(--primary-color);