Refactor several tabs

src/components/button.ts

@@ -1,10 +1,25 @@
 import { ripple } from "./ripple";
 
-const Button = (className: string, options: Partial<{noRipple: true, onlyMobile: true, icon: string}> = {}) => {
+const Button = (className: string, options: Partial<{noRipple: true, onlyMobile: true, icon: string, rippleSquare: true, text: string}> = {}) => {
   const button = document.createElement('button');
   button.className = className + (options.icon ? ' tgico-' + options.icon : '');
-  if(!options.noRipple) ripple(button);
+
-  if(options.onlyMobile) button.classList.add('only-handhelds');
+  if(!options.noRipple) {
+    if(options.rippleSquare) {
+      button.classList.add('rp-square');
+    }
+
+    ripple(button);
+  }
+
+  if(options.onlyMobile) {
+    button.classList.add('only-handhelds');
+  }
+
+  if(options.text) {
+    button.append(options.text);
+  }
+
   return button;
 };
 

src/components/sidebarLeft/index.ts

@@ -7,7 +7,7 @@ import appUsersManager from "../../lib/appManagers/appUsersManager";
 import { MOUNT_CLASS_TO } from "../../lib/mtproto/mtproto_config";
 import rootScope from "../../lib/rootScope";
 import { attachClickEvent, findUpClassName, findUpTag } from "../../helpers/dom";
-import AppSearch, { SearchGroup } from "../appSearch";
+import { SearchGroup } from "../appSearch";
 import "../avatar";
 import { parseMenuButtonsTo } from "../misc";
 import Scrollable, { ScrollableX } from "../scrollable";
@@ -33,9 +33,6 @@ const newChannelTab = new AppNewChannelTab();
 const addMembersTab = new AppAddMembersTab();
 const contactsTab = new AppContactsTab();
 const newGroupTab = new AppNewGroupTab();
-const settingsTab = new AppSettingsTab();
-const editFolderTab = new AppEditFolderTab();
-const includedChatsTab = new AppIncludedChatsTab();
 const archivedTab = new AppArchivedTab();
 
 export class AppSidebarLeft extends SidebarSlider {
@@ -44,11 +41,7 @@ export class AppSidebarLeft extends SidebarSlider {
     contacts: 2,
     newChannel: 3,
     addMembers: 4,
-    newGroup: 5,
+    newGroup: 5
-    settings: 6,
-    chatFolders: 7,
-    editFolder: 8,
-    includedChats: 9,
   };
 
   private toolsBtn: HTMLButtonElement;
@@ -98,11 +91,7 @@ export class AppSidebarLeft extends SidebarSlider {
       [AppSidebarLeft.SLIDERITEMSIDS.newChannel]: newChannelTab,
       [AppSidebarLeft.SLIDERITEMSIDS.contacts]: contactsTab,
       [AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab,
-      [AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab,
+      [AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab
-      [AppSidebarLeft.SLIDERITEMSIDS.settings]: settingsTab,
-      [AppSidebarLeft.SLIDERITEMSIDS.chatFolders]: this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope),
-      [AppSidebarLeft.SLIDERITEMSIDS.editFolder]: editFolderTab,
-      [AppSidebarLeft.SLIDERITEMSIDS.includedChats]: includedChatsTab,
     });
 
     //this._selectTab(0); // make first tab as default
@@ -119,9 +108,10 @@ export class AppSidebarLeft extends SidebarSlider {
     this.addMembersTab = addMembersTab;
     this.contactsTab = contactsTab;
     this.newGroupTab = newGroupTab;
-    this.settingsTab = settingsTab;
+    this.settingsTab = new AppSettingsTab(this);
-    this.editFolderTab = editFolderTab;
+    this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope);
-    this.includedChatsTab = includedChatsTab;
+    this.editFolderTab = new AppEditFolderTab(this);
+    this.includedChatsTab = new AppIncludedChatsTab(this);
     this.editProfileTab = new AppEditProfileTab(this);
 
     this.menuEl = this.toolsBtn.querySelector('.btn-menu');
@@ -150,8 +140,7 @@ export class AppSidebarLeft extends SidebarSlider {
     });
 
     attachClickEvent(this.buttons.settings, (e) => {
-      this.settingsTab.fillElements();
+      this.settingsTab.open();
-      this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.settings);
     });
 
     attachClickEvent(this.newButtons.channel, (e) => {

src/components/sidebarLeft/tabs/chatFolders.ts

@@ -1,4 +1,4 @@
-import { SliderTab } from "../../slider";
+import { SliderTab, SliderSuperTab } from "../../slider";
 import lottieLoader, { RLottiePlayer } from "../../../lib/lottieLoader";
 import { RichTextProcessor } from "../../../lib/richtextprocessor";
 import { cancelEvent, positionElementByIndex } from "../../../helpers/dom";
@@ -11,9 +11,9 @@ import type { AppPeersManager } from "../../../lib/appManagers/appPeersManager";
 import type { AppSidebarLeft } from "..";
 import type { DialogFilterSuggested, DialogFilter } from "../../../layer";
 import type _rootScope from "../../../lib/rootScope";
+import Button from "../../button";
 
-export default class AppChatFoldersTab implements SliderTab {
+export default class AppChatFoldersTab extends SliderSuperTab {
-  public container: HTMLElement;
   public createFolderBtn: HTMLElement;
   private foldersContainer: HTMLElement;
   private suggestedContainer: HTMLElement;
@@ -23,7 +23,7 @@ export default class AppChatFoldersTab implements SliderTab {
   private filtersRendered: {[filterId: number]: HTMLElement} = {};
 
   constructor(private appMessagesManager: AppMessagesManager, private appPeersManager: AppPeersManager, private appSidebarLeft: AppSidebarLeft, private apiManager: ApiManagerProxy, private rootScope: typeof _rootScope) {
-
+    super(appSidebarLeft);
   }
 
   private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter | MyDialogFilter, container?: HTMLElement, div: HTMLElement = document.createElement('div')) {
@@ -97,11 +97,43 @@ export default class AppChatFoldersTab implements SliderTab {
   }
 
   init() {
-    this.container = document.querySelector('.chat-folders-container');
+    this.container.classList.add('chat-folders-container');
-    this.stickerContainer = this.container.querySelector('.sticker-container');
+    this.title.innerText = 'Chat Folders';
-    this.foldersContainer = this.container.querySelector('.folders-my');
+
-    this.suggestedContainer = this.container.querySelector('.folders-suggested');
+    this.scrollable.container.classList.add('chat-folders');
-    this.createFolderBtn = this.container.querySelector('.btn-create-folder');
+
+    this.stickerContainer = document.createElement('div');
+    this.stickerContainer.classList.add('sticker-container');
+    
+    const caption = document.createElement('div');
+    caption.classList.add('caption');
+    caption.innerHTML = `Create folders for different groups of chats<br>and quickly switch between them.`;
+    
+    this.createFolderBtn = Button('btn-primary btn-create-folder', {
+      text: 'Create Folder',
+      icon: 'add'
+    });
+
+    this.foldersContainer = document.createElement('div');
+    this.foldersContainer.classList.add('folders-my');
+
+    const foldersH2 = document.createElement('div');
+    foldersH2.classList.add('sidebar-left-h2');
+    foldersH2.innerText = 'Folders';
+
+    this.foldersContainer.append(foldersH2);
+
+    this.suggestedContainer = document.createElement('div');
+    this.suggestedContainer.classList.add('folders-suggested');
+    this.suggestedContainer.style.display = 'none';
+
+    const suggestedH2 = document.createElement('div');
+    suggestedH2.classList.add('sidebar-left-h2');
+    suggestedH2.innerText = 'Recommended folders';
+
+    this.suggestedContainer.append(suggestedH2);
+
+    this.scrollable.append(this.stickerContainer, caption, this.createFolderBtn, document.createElement('hr'), this.foldersContainer, document.createElement('hr'), this.suggestedContainer);
 
     this.createFolderBtn.addEventListener('click', () => {
       if(Object.keys(this.filtersRendered).length >= 10) {

src/components/sidebarLeft/tabs/editFolder.ts

@@ -5,25 +5,25 @@ import { MyDialogFilter as DialogFilter } from "../../../lib/storages/filters";
 import lottieLoader, { RLottiePlayer } from "../../../lib/lottieLoader";
 import { parseMenuButtonsTo } from "../../misc";
 import { ripple } from "../../ripple";
-import { SliderTab } from "../../slider";
+import { SliderTab, SliderSuperTab } from "../../slider";
 import { toast } from "../../toast";
 import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
 import { attachClickEvent } from "../../../helpers/dom";
 import InputField from "../../inputField";
 import RichTextProcessor from "../../../lib/richtextprocessor";
+import ButtonIcon from "../../buttonIcon";
+import ButtonMenuToggle from "../../buttonMenuToggle";
+import { ButtonMenuItemOptions } from "../../buttonMenu";
+import Button from "../../button";
 
 const MAX_FOLDER_NAME_LENGTH = 12;
 
-export default class AppEditFolderTab implements SliderTab {
+export default class AppEditFolderTab extends SliderSuperTab {
-  public container: HTMLElement;
-  private closeBtn: HTMLElement;
-  private title: HTMLElement;
   private caption: HTMLElement;
   private stickerContainer: HTMLElement;
 
   private confirmBtn: HTMLElement;
   private menuBtn: HTMLElement;
-  private deleteFolderBtn: HTMLElement;
   private nameInput: HTMLElement;
   private nameInputField: InputField;
 
@@ -37,16 +37,37 @@ export default class AppEditFolderTab implements SliderTab {
 
   private type: 'edit' | 'create';
 
-  init() {
+  constructor(appSidebarLeft: AppSidebarLeft) {
-    this.container = document.querySelector('.edit-folder-container');
+    super(appSidebarLeft);
-    this.closeBtn = this.container.querySelector('.sidebar-close-button');
+  }
-    this.title = this.container.querySelector('.sidebar-header__title');
-    this.caption = this.container.querySelector('.caption');
-    this.stickerContainer = this.container.querySelector('.sticker-container');
 
-    this.confirmBtn = this.container.querySelector('.btn-confirm');
+  init() {
-    this.menuBtn = this.container.querySelector('.btn-menu-toggle');
+    this.container.classList.add('edit-folder-container');
-    this.deleteFolderBtn = this.menuBtn.querySelector('.menu-delete');
+    this.caption = document.createElement('div');
+    this.caption.classList.add('caption');
+    this.caption.innerHTML = `Choose chats and types of chats that will<br>appear and never appear in this folder.`;
+    this.stickerContainer = document.createElement('div');
+    this.stickerContainer.classList.add('sticker-container');
+
+    this.confirmBtn = ButtonIcon('check1 btn-confirm hide');
+    const deleteFolderButton: ButtonMenuItemOptions = {
+      icon: 'delete danger',
+      text: 'Delete Folder',
+      onClick: () => {
+        deleteFolderButton.element.setAttribute('disabled', 'true');
+        appMessagesManager.filtersStorage.updateDialogFilter(this.filter, true).then(bool => {
+          if(bool) {
+            this.close();
+          }
+        }).finally(() => {
+          deleteFolderButton.element.removeAttribute('disabled');
+        });
+      }
+    };
+    this.menuBtn = ButtonMenuToggle({}, 'bottom-left', [deleteFolderButton]);
+    this.menuBtn.classList.add('hide');
+
+    this.header.append(this.confirmBtn, this.menuBtn);
 
     const inputWrapper = document.createElement('div');
     inputWrapper.classList.add('input-wrapper');
@@ -59,15 +80,85 @@ export default class AppEditFolderTab implements SliderTab {
 
     inputWrapper.append(this.nameInputField.container);
 
-    this.caption.parentElement.insertBefore(inputWrapper, this.caption.nextSibling);
+    const generateList = (className: string, h2Text: string, buttons: {icon: string, name?: string, withRipple?: true, text: string}[], to: any) => {
+      const container = document.createElement('div');
+      container.classList.add('folder-list', className);
 
-    this.include_peers = this.container.querySelector('.folder-list-included');
+      const h2 = document.createElement('div');
-    this.exclude_peers = this.container.querySelector('.folder-list-excluded');
+      h2.classList.add('sidebar-left-h2');
+      h2.innerHTML = h2Text;
+
+      const categories = document.createElement('div');
+      categories.classList.add('folder-categories');
+
+      buttons.forEach(o => {
+        const button = Button('folder-category-button btn-primary btn-transparent', {
+          icon: o.icon,
+          text: o.text,
+          noRipple: o.withRipple ? undefined : true,
+          rippleSquare: true
+        });
+
+        if(o.name) {
+          to[o.name] = button;
+        }
+
+        categories.append(button);
+      });
+
+      container.append(h2, categories);
+
+      return container;
+    };
+
+    this.include_peers = generateList('folder-list-included', 'Included chats', [{
+      icon: 'add blue',
+      text: 'Add Chats',
+      withRipple: true
+    }, {
+      text: 'Contacts',
+      icon: 'newprivate',
+      name: 'contacts'
+    }, {
+      text: 'Non-Contacts',
+      icon: 'noncontacts',
+      name: 'non_contacts'
+    }, {
+      text: 'Groups',
+      icon: 'group',
+      name: 'groups'
+    }, {
+      text: 'Channels',
+      icon: 'channel',
+      name: 'broadcasts'
+    }, {
+      text: 'Bots',
+      icon: 'bots',
+      name: 'bots'
+    }], this.flags);
+
+    this.exclude_peers = generateList('folder-list-excluded', 'Excluded chats', [{
+      icon: 'minus blue',
+      text: 'Remove Chats',
+      withRipple: true
+    }, {
+      text: 'Muted',
+      icon: 'mute',
+      name: 'exclude_muted'
+    }, {
+      text: 'Archived',
+      icon: 'archive',
+      name: 'exclude_archived'
+    }, {
+      text: 'Read',
+      icon: 'readchats',
+      name: 'exclude_read'
+    }], this.flags);
+
+    this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers, this.exclude_peers);
 
     const includedFlagsContainer = this.include_peers.querySelector('.folder-categories');
     const excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories');
-    parseMenuButtonsTo(this.flags, includedFlagsContainer.children);
-    parseMenuButtonsTo(this.flags, excludedFlagsContainer.children);
 
     includedFlagsContainer.firstElementChild.addEventListener('click', () => {
       appSidebarLeft.includedChatsTab.open(this.filter, 'included');
@@ -87,17 +178,6 @@ export default class AppEditFolderTab implements SliderTab {
       this.animation = player;
     });
 
-    attachClickEvent(this.deleteFolderBtn, () => {
-      this.deleteFolderBtn.setAttribute('disabled', 'true');
-      appMessagesManager.filtersStorage.updateDialogFilter(this.filter, true).then(bool => {
-        if(bool) {
-          appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder);
-        }
-      }).finally(() => {
-        this.deleteFolderBtn.removeAttribute('disabled');
-      });
-    });
-
     this.confirmBtn.addEventListener('click', () => {
       if(this.nameInputField.input.classList.contains('error')) {
         return;
@@ -127,7 +207,7 @@ export default class AppEditFolderTab implements SliderTab {
 
       promise.then(bool => {
         if(bool) {
-          appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder);
+          this.close();
         }
       }).catch(err => {
         if(err.type == 'DIALOG_FILTERS_TOO_MUCH') {
@@ -176,9 +256,9 @@ export default class AppEditFolderTab implements SliderTab {
 
   private onEditOpen() {
     this.caption.style.display = 'none';
-    this.title.innerText = this.type == 'create' ? 'New Folder' : 'Edit Folder';
+    this.title.innerText = this.type === 'create' ? 'New Folder' : 'Edit Folder';
 
-    if(this.type == 'edit') {
+    if(this.type === 'edit') {
       this.menuBtn.classList.remove('hide');
       this.confirmBtn.classList.add('hide');
     }
@@ -187,8 +267,7 @@ export default class AppEditFolderTab implements SliderTab {
     this.nameInputField.value = RichTextProcessor.wrapDraftText(filter.title);
 
     for(const flag in this.flags) {
-      // @ts-ignore
+      this.flags[flag as keyof AppEditFolderTab['flags']].style.display = !!filter.pFlags[flag as keyof AppEditFolderTab['flags']] ? '' : 'none';
-      this.flags[flag].style.display = !!filter.pFlags[flag] ? '' : 'none';
     }
 
     (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
@@ -237,7 +316,7 @@ export default class AppEditFolderTab implements SliderTab {
   }
 
   editCheckForChange() {
-    if(this.type == 'edit') {
+    if(this.type === 'edit') {
       const changed = !deepEqual(this.originalFilter, this.filter);
       this.confirmBtn.classList.toggle('hide', !changed);
       this.menuBtn.classList.toggle('hide', changed);
@@ -258,8 +337,8 @@ export default class AppEditFolderTab implements SliderTab {
     }
   }
 
-  open(filter?: DialogFilter) {
+  public open(filter?: DialogFilter) {
-    appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder);
+    const ret = super.open();
     
     if(filter === undefined) {
       this.setFilter({
@@ -278,5 +357,7 @@ export default class AppEditFolderTab implements SliderTab {
       this.type = 'edit';
       this.onEditOpen();
     }
+
+    return ret;
   }
 }

src/components/sidebarLeft/tabs/includedChats.ts

@@ -1,4 +1,4 @@
-import { SliderTab } from "../../slider";
+import { SliderTab, SliderSuperTab } from "../../slider";
 import AppSelectPeers from "../../appSelectPeers";
 import appSidebarLeft, { AppSidebarLeft } from "..";
 import appDialogsManager from "../../../lib/appManagers/appDialogsManager";
@@ -7,23 +7,27 @@ import appUsersManager from "../../../lib/appManagers/appUsersManager";
 import { MyDialogFilter as DialogFilter } from "../../../lib/storages/filters";
 import rootScope from "../../../lib/rootScope";
 import { copy } from "../../../helpers/object";
+import ButtonIcon from "../../buttonIcon";
 
-export default class AppIncludedChatsTab implements SliderTab {
+export default class AppIncludedChatsTab extends SliderSuperTab {
-  public container: HTMLElement;
-  private closeBtn: HTMLElement;
   private confirmBtn: HTMLElement;
-  private title: HTMLElement;
 
   private selector: AppSelectPeers;
   private type: 'included' | 'excluded';
   private filter: DialogFilter;
   private originalFilter: DialogFilter;
 
+  constructor(appSidebarLeft: AppSidebarLeft) {
+    super(appSidebarLeft);
+  }
+
   init() {
-    this.container = document.querySelector('.included-chatlist-container');
+    this.content.remove();
-    this.closeBtn = this.container.querySelector('.sidebar-close-button');
+    this.container.classList.add('included-chatlist-container');
-    this.confirmBtn = this.container.querySelector('.btn-confirm');
+    this.confirmBtn = ButtonIcon('check1 btn-confirm', {noRipple: true});
-    this.title = this.container.querySelector('.sidebar-header__title');
+    this.confirmBtn.style.display = 'none';
+
+    this.header.append(this.confirmBtn);
 
     this.confirmBtn.addEventListener('click', () => {
       const selected = this.selector.getSelected();
@@ -86,7 +90,7 @@ export default class AppIncludedChatsTab implements SliderTab {
       //this.filter.pinned_peers = this.filter.pinned_peers.filter(peerId => this.filter.include_peers.includes(peerId));
 
       appSidebarLeft.editFolderTab.setFilter(this.filter, false);
-      appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.includedChats);
+      this.close();
     });
   }
 
@@ -150,26 +154,26 @@ export default class AppIncludedChatsTab implements SliderTab {
     const categories = document.createElement('div');
     categories.classList.add('folder-categories');
 
-    let details: any;
+    let details: {[flag: string]: {ico: string, text: string}};
     if(this.type == 'excluded') {
       details = {
-        exclude_muted: {ico: 'tgico-mute', text: 'Muted'},
+        exclude_muted: {ico: 'mute', text: 'Muted'},
-        exclude_archived: {ico: 'tgico-archive', text: 'Archived'},
+        exclude_archived: {ico: 'archive', text: 'Archived'},
-        exclude_read: {ico: 'tgico-readchats', text: 'Read'}
+        exclude_read: {ico: 'readchats', text: 'Read'}
       };
     } else {
       details = {
-        contacts: {ico: 'tgico-newprivate', text: 'Contacts'},
+        contacts: {ico: 'newprivate', text: 'Contacts'},
-        non_contacts: {ico: 'tgico-noncontacts', text: 'Non-Contacts'},
+        non_contacts: {ico: 'noncontacts', text: 'Non-Contacts'},
-        groups: {ico: 'tgico-group', text: 'Groups'},
+        groups: {ico: 'group', text: 'Groups'},
-        broadcasts: {ico: 'tgico-newchannel', text: 'Channels'},
+        broadcasts: {ico: 'newchannel', text: 'Channels'},
-        bots: {ico: 'tgico-bots', text: 'Bots'}
+        bots: {ico: 'bots', text: 'Bots'}
       };
     }
 
     let html = '';
     for(const key in details) {
-      html += `<div class="folder-category-button ${details[key].ico}" data-peerId="${key}"><p>${details[key].text}</p>${this.checkbox()}</div>`;
+      html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peerId="${key}">${details[key].text}${this.checkbox()}</button>`;
     }
     categories.innerHTML = html;
 
@@ -184,7 +188,7 @@ export default class AppIncludedChatsTab implements SliderTab {
 
     /////////////////
 
-    const selectedPeers = (this.type == 'included' ? filter.include_peers : filter.exclude_peers).slice();
+    const selectedPeers = (this.type === 'included' ? filter.include_peers : filter.exclude_peers).slice();
 
     this.selector = new AppSelectPeers(this.container, this.onSelectChange, ['dialogs'], null, this.renderResults);
     this.selector.selected = new Set(selectedPeers);
@@ -194,7 +198,7 @@ export default class AppIncludedChatsTab implements SliderTab {
     this.selector.add = (peerId, title) => {
       const div = _add(peerId, details[peerId]?.text);
       if(details[peerId]) {
-        div.querySelector('avatar-element').classList.add(details[peerId].ico);
+        div.querySelector('avatar-element').classList.add('tgico-' + details[peerId].ico);
       }
       return div;
     };
@@ -232,11 +236,14 @@ export default class AppIncludedChatsTab implements SliderTab {
     }
   }
 
-  open(filter: DialogFilter, type: 'included' | 'excluded') {
+  /**
+   * Do not ignore arguments!
+   */
+  public open(filter?: DialogFilter, type?: 'included' | 'excluded') {
     this.originalFilter = filter;
     this.filter = copy(this.originalFilter);
     this.type = type;
     
-    appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.includedChats);
+    return super.open();
   }
 }

src/components/sidebarLeft/tabs/settings.ts

@@ -1,19 +1,15 @@
-import { SliderTab } from "../../slider";
+import SidebarSlider, { SliderSuperTab } from "../../slider";
 import AvatarElement from "../../avatar";
-import { parseMenuButtonsTo } from "../../misc";
-//import rootScope from "../../lib/rootScope";
 import apiManager from "../../../lib/mtproto/mtprotoworker";
 import appSidebarLeft, { AppSidebarLeft } from "..";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
-import { attachClickEvent } from "../../../helpers/dom";
+import ButtonMenuToggle from "../../buttonMenuToggle";
+import Button from "../../button";
 
-export default class AppSettingsTab implements SliderTab {
+export default class AppSettingsTab extends SliderSuperTab {
-  private container = document.querySelector('.settings-container') as HTMLDivElement;
+  private avatarElem: AvatarElement;
-  private avatarElem = this.container.querySelector('.profile-avatar') as AvatarElement;
+  private nameDiv: HTMLElement;
-  private nameDiv = this.container.querySelector('.profile-name') as HTMLDivElement;
+  private phoneDiv: HTMLElement;
-  private phoneDiv = this.container.querySelector('.profile-subtitle') as HTMLDivElement;
-
-  private logOutBtn = this.container.querySelector('.menu-logout') as HTMLButtonElement;
 
   private buttons: {
     edit: HTMLButtonElement,
@@ -24,24 +20,59 @@ export default class AppSettingsTab implements SliderTab {
     language: HTMLButtonElement
   } = {} as any;
 
-  constructor() {
+  constructor(slider: SidebarSlider) {
-    parseMenuButtonsTo(this.buttons, this.container.querySelector('.profile-buttons').children);
+    super(slider);
+  }
+
+  init() {
+    this.container.classList.add('settings-container');
+    this.title.innerText = 'Settings';
+    
+    const btnMenu = ButtonMenuToggle({}, 'bottom-left', [{
+      icon: 'logout',
+      text: 'Log Out',
+      onClick: () => {
+        apiManager.logOut();
+      }
+    }]);
+
+    this.header.append(btnMenu);
+
+    this.avatarElem = new AvatarElement();
+    this.avatarElem.setAttribute('clickable', '');
+    this.avatarElem.classList.add('profile-avatar', 'avatar-120');
+    
+    this.nameDiv = document.createElement('div');
+    this.nameDiv.classList.add('profile-name');
+
+    this.phoneDiv = document.createElement('div');
+    this.phoneDiv.classList.add('profile-subtitle');
+
+    const buttonsDiv = document.createElement('div');
+    buttonsDiv.classList.add('profile-buttons');
+
+    const className = 'profile-button btn-primary btn-transparent';
+    buttonsDiv.append(this.buttons.edit = Button(className, {icon: 'edit', rippleSquare: true, text: 'Edit Profile'}));
+    buttonsDiv.append(this.buttons.folders = Button(className, {icon: 'folder', rippleSquare: true, text: 'Chat Folders'}));
+    buttonsDiv.append(this.buttons.general = Button(className + ' btn-disabled', {icon: 'settings', rippleSquare: true, text: 'General Settings'}));
+    buttonsDiv.append(this.buttons.notifications = Button(className + ' btn-disabled', {icon: 'unmute', rippleSquare: true, text: 'Notifications'}));
+    buttonsDiv.append(this.buttons.privacy = Button(className + ' btn-disabled', {icon: 'lock', rippleSquare: true, text: 'Privacy and Security'}));
+    buttonsDiv.append(this.buttons.language = Button(className + ' btn-disabled', {icon: 'language', rippleSquare: true, text: 'Language'}));
+    
+    this.scrollable.append(this.avatarElem, this.nameDiv, this.phoneDiv, buttonsDiv);
+    this.scrollable.container.classList.add('profile-content-wrapper');
 
     /* rootScope.$on('user_auth', (e) => {
       this.fillElements();
     }); */
 
-    attachClickEvent(this.logOutBtn, (e) => {
-      apiManager.logOut();
-    });
-
     this.buttons.edit.addEventListener('click', () => {
       appSidebarLeft.editProfileTab.fillElements();
       appSidebarLeft.editProfileTab.open();
     });
 
     this.buttons.folders.addEventListener('click', () => {
-      appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.chatFolders);
+      appSidebarLeft.chatFoldersTab.open();
     });
   }
 
@@ -53,6 +84,15 @@ export default class AppSettingsTab implements SliderTab {
     this.phoneDiv.innerHTML = user.rPhone || '';
   }
 
+  public onOpen() {
+    if(this.init) {
+      this.init();
+      this.init = null;
+    }
+
+    this.fillElements();
+  }
+
   onClose() {
 
   }

src/components/slider.ts

@@ -23,9 +23,6 @@ export class SliderSuperTab implements SliderTab {
 
   public id: number;
 
-  // fix incompability
-  public onOpen: SliderTab['onOpen'];
-
   constructor(protected slider: SidebarSlider) {
     this.container = document.createElement('div');
     this.container.classList.add('sidebar-slider-item');
@@ -57,6 +54,11 @@ export class SliderSuperTab implements SliderTab {
   public open() {
     return this.slider.selectTab(this);
   }
+
+  // * fix incompability
+  public onOpen() {
+
+  }
 }
 
 const TRANSITION_TIME = 250;

src/index.hbs

@@ -220,101 +220,6 @@
               </div>
             </div>
           </div>
-          <div class="sidebar-slider-item settings-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
-              <div class="sidebar-header__title">Settings</div>
-              <div class="btn-icon tgico-more rp btn-menu-toggle">
-                <div class="btn-menu bottom-left">
-                  <div class="btn-menu-item menu-logout tgico-logout rp">Log Out</div>
-                </div>
-              </div>
-            </div>
-            <div class="sidebar-content">
-              <div class="profile-content-wrapper scrollable scrollable-y">
-                <avatar-element class="profile-avatar avatar-120" clickable></avatar-element>
-                <div class="profile-name"></div>
-                <div class="profile-subtitle"></div>
-                <div class="profile-buttons">
-                  <div class="profile-button menu-edit tgico-edit rp rp-square"><p>Edit Profile</p></div>
-                  <div class="profile-button menu-folders tgico-folder rp rp-square"><p>Chat Folders</p></div>
-                  <div class="profile-button menu-general tgico-settings rp rp-square btn-disabled"><p>General Settings</p></div>
-                  <div class="profile-button menu-notifications tgico-unmute rp rp-square btn-disabled"><p>Notifications</p></div>
-                  <div class="profile-button menu-privacy tgico-lock rp rp-square btn-disabled"><p>Privacy and Security</p></div>
-                  <div class="profile-button menu-language tgico-language rp rp-square btn-disabled"><p>Language</p></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="sidebar-slider-item chat-folders-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
-              <div class="sidebar-header__title">Chat Folders</div>
-            </div>
-            <div class="sidebar-content">
-              <div class="chat-folders scrollable scrollable-y">
-                <div class="sticker-container"></div>
-                <div class="caption">Create folders for different groups of chats<br>and quickly switch between them.</div>
-                <button class="btn-primary btn-create-folder rp">
-                  <div class="tgico-add"></div>
-                  Create Folder
-                </button>
-                <hr/>
-                <div class="folders-container folders-my">
-                  <div class="sidebar-left-h2">Folders</div>
-                </div>
-                <hr/>
-                <div class="folders-container folders-suggested" style="display: none;">
-                  <div class="sidebar-left-h2">Recommended folders</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="sidebar-slider-item edit-folder-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
-              <div class="sidebar-header__title"></div>
-              <div class="btn-icon tgico-check1 btn-confirm rp hide"></div>
-              <div class="btn-icon btn-menu-toggle rp tgico-more hide">
-                <div class="btn-menu bottom-left">
-                  <div class="btn-menu-item menu-delete tgico-delete danger rp">Delete Folder</div>
-                </div>
-              </div>
-            </div>
-            <div class="sidebar-content">
-              <div class="edit-folder scrollable scrollable-y">
-                <div class="sticker-container"></div>
-                <div class="caption">Choose chats and types of chats that will<br>appear and never appear in this folder.</div>
-                <div class="folder-list folder-list-included">
-                  <div class="sidebar-left-h2">Included chats</div>
-                  <div class="folder-categories">
-                    <div class="folder-category-button blue tgico-add rp rp-square"><p>Add Chats</p></div>
-                    <div class="folder-category-button menu-contacts tgico-group"><p>Contacts</p></div>
-                    <div class="folder-category-button menu-non_contacts tgico-noncontacts"><p>Non-Contacts</p></div>
-                    <div class="folder-category-button menu-groups tgico-group"><p>Groups</p></div>
-                    <div class="folder-category-button menu-broadcasts tgico-channel"><p>Channels</p></div>
-                    <div class="folder-category-button menu-bots tgico-bots"><p>Bots</p></div>
-                  </div>
-                </div>
-                <div class="folder-list folder-list-excluded">
-                  <div class="sidebar-left-h2">Excluded chats</div>
-                  <div class="folder-categories">
-                    <div class="folder-category-button blue tgico-minus rp rp-square"><p>Remove Chats</p></div>
-                    <div class="folder-category-button menu-exclude_muted tgico-mute"><p>Muted</p></div>
-                    <div class="folder-category-button menu-exclude_archived tgico-archive"><p>Archived</p></div>
-                    <div class="folder-category-button menu-exclude_read tgico-readchats"><p>Read</p></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="sidebar-slider-item included-chatlist-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
-              <div class="sidebar-header__title"></div>
-              <div class="btn-icon tgico-check1 btn-confirm rp" style="display: none;"></div>
-            </div>
-          </div>
         </div>
       </div>
       <div class="main-column" id="column-center"></div>

src/scss/partials/_input.scss

@@ -38,9 +38,9 @@
     left: 1rem;
     right: auto;
     z-index: 2;
-    top: 0;
+    top: 50%;
     height: 1.5rem;
-    transform: translateY(calc((54px - 1.5rem) / 2));
+    transform: translateY(-50%);
     background-color: #fff;
     transition: .2s transform, .2s padding, .1s opacity;
     transform-origin: left center;
@@ -125,7 +125,7 @@
     }
     
     &:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
-      transform: translate(-.215rem, -.675rem) scale(0.75);
+      transform: translate(-.215rem, -2.375rem) scale(0.75);
       padding: 0 6px;
       opacity: 1;
     }

src/scss/partials/_leftSidebar.scss

@@ -421,6 +421,19 @@
       height: calc(100% - 64px); */
     }
   }
+
+  .input-wrapper {
+    width: 420px;
+    margin: 0 auto;
+    flex: 0 0 auto;
+    padding: 0 1.25rem;
+    max-width: 100%;
+
+    @include respond-to(handhelds) {
+      width: 100%;
+      padding: 0 1rem;
+    }
+  }
 }
 
 #search-container {
@@ -439,19 +452,6 @@
     flex: 0 0 auto;
   }
 
-  .input-wrapper {
-    width: 420px;
-    margin: 0 auto;
-    flex: 0 0 auto;
-    padding: 0 1.25rem;
-    max-width: 100%;
-
-    @include respond-to(handhelds) {
-      width: 100%;
-      padding: 0 16px;
-    }
-  }
-
   .chatlist-container {
     flex: 1 1 auto;
   }
@@ -471,6 +471,10 @@
     margin: 0 auto;
     flex: 0 0 auto;
   }
+
+  .folder-category-button:nth-child(n+2) {
+    pointer-events: none;
+  }
 }
 
 .new-group-members {
@@ -485,30 +489,26 @@
   .profile {
     &-button {
       display: flex;
-      padding: 1.125rem 0.625rem;
+      padding: 1.125rem .625rem;
       height: 3.5rem;
       line-height: 1.4;
-      border-radius: 0.625rem;
+      border-radius: .625rem;
-      margin: 0px 0.5rem 0px 0.4375rem;
       overflow: hidden;
+      font-weight: normal;
+      text-transform: unset;
 
       @include respond-to(handhelds) {
-        padding: 0.75rem 0.625rem;
+        padding: .75rem .625rem;
         height: 48px;
         margin: 0 0 2px 0;
         border-radius: 0;
       }
 
-      html.no-touch &:hover {
-        background: var(--color-gray-hover);
-        cursor: pointer;
-      }
-
       &:before {
         font-size: 24px;
         color: #707579;
-        margin-left: 0.375rem;
+        margin-left: .375rem;
-        margin-top: -0.0625rem;
+        margin-right: 2rem;
       }
 
       p {
@@ -518,8 +518,9 @@
     }
 
     &-buttons {
-      margin-top: .9375rem;
+      margin-top: 1.125rem;
       width: 100%;
+      padding: 0 .4375rem;
 
       @include respond-to(handhelds) {
         margin-top: 0.6875rem;
@@ -665,7 +666,7 @@
   }
 
   .input-wrapper {
-    margin-bottom: 10px;
+    margin-bottom: 10px !important;
   }
 }
 
@@ -696,9 +697,9 @@
   width: 100%;
 
   .checkbox {
-    margin-top: -9px !important;
+    margin-top: 0 !important;
-    right: 0;
     position: absolute;
+    right: 0;
 
     [type="checkbox"] + span {
       padding-left: 46px;
@@ -717,12 +718,14 @@
 
 .folder-category-button {
   display: flex;
-  font-size: 1.5rem;
+  padding: 0 1.5rem;
-  padding: 13px 24px 10px 24px;
   overflow: hidden;
+  font-weight: normal;
+  height: 50px;
+  border-radius: 0;
 
   @include respond-to(handhelds) {
-    padding: 13px 16px 10px 16px;
+    padding: 0 1rem;
   }
 
   p {
@@ -742,6 +745,7 @@
 
   &:before {
     color: #797d82;
+    margin-right: 2rem;
   }
 }