Temp commit

src/components/sidebarLeft/tabs/chatFolders.ts

@@ -1,29 +1,32 @@
 import { SliderSuperTab } from "../../slider";
 import lottieLoader, { RLottiePlayer } from "../../../lib/lottieLoader";
 import { RichTextProcessor } from "../../../lib/richtextprocessor";
-import { cancelEvent, positionElementByIndex } from "../../../helpers/dom";
+import { attachClickEvent, cancelEvent, positionElementByIndex } from "../../../helpers/dom";
 import { ripple } from "../../ripple";
 import { toast } from "../../toast";
 import type { MyDialogFilter } from "../../../lib/storages/filters";
 import type { DialogFilterSuggested, DialogFilter } from "../../../layer";
 import type _rootScope from "../../../lib/rootScope";
+import type { BroadcastEvents } from "../../../lib/rootScope";
 import Button from "../../button";
 import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
 import appPeersManager from "../../../lib/appManagers/appPeersManager";
 import apiManager from "../../../lib/mtproto/mtprotoworker";
 import rootScope from "../../../lib/rootScope";
 import AppEditFolderTab from "./editFolder";
+import Row from "../../row";
+import { SettingSection } from "..";
 
 export default class AppChatFoldersTab extends SliderSuperTab {
-  public createFolderBtn: HTMLElement;
+  private createFolderBtn: HTMLElement;
   private foldersContainer: HTMLElement;
-  private suggestedContainer: HTMLElement;
+  private suggestedSection: SettingSection;
   private stickerContainer: HTMLElement;
   private animation: RLottiePlayer;
 
   private filtersRendered: {[filterId: number]: HTMLElement} = {};
 
-  private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter | MyDialogFilter, container?: HTMLElement, div: HTMLElement = document.createElement('div')) {
+  private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter | MyDialogFilter, container?: HTMLElement, div?: HTMLElement) {
     let filter: DialogFilter | MyDialogFilter;
     let description = '';
     let d: string[] = [];
@@ -34,15 +37,6 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       filter = dialogFilter;
       description = '';
 
-      const filterId = filter.id;
-      if(!this.filtersRendered.hasOwnProperty(filter.id)) {
-        div.addEventListener('click', () => {
-          new AppEditFolderTab(this.slider).open(appMessagesManager.filtersStorage.filters[filterId]);
-        });
-      }
-
-      this.filtersRendered[filter.id] = div;
-
       let enabledFilters = Object.keys(filter.pFlags).length;
       /* (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
         enabledFilters += +!!filter[key].length;
@@ -76,14 +70,26 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       }
     }
 
-    div.classList.add('category');
+    if(!div) {
-    div.innerHTML = `
+      const row = new Row({
-      <div>
+        title: RichTextProcessor.wrapEmojiText(filter.title),
-        <p>${RichTextProcessor.wrapEmojiText(filter.title)}</p>
+        subtitle: d.length ? d.join(', ') : description,
-        <p>${d.length ? d.join(', ') : description}</p>
+        clickable: true
-      </div>
+      });
-    `;
+  
-    ripple(div);
+      div = row.container;
+
+      if(dialogFilter._ === 'dialogFilter') {
+        const filterId = filter.id;
+        if(!this.filtersRendered.hasOwnProperty(filter.id)) {
+          attachClickEvent(div, () => {
+            new AppEditFolderTab(this.slider).open(appMessagesManager.filtersStorage.filters[filterId]);
+          }, {listenerSetter: this.listenerSetter});
+        }
+
+        this.filtersRendered[filter.id] = div;
+      }
+    }
 
     if((filter as MyDialogFilter).hasOwnProperty('orderIndex')) {
        // ! header will be at 0 index
@@ -111,34 +117,28 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       icon: 'add'
     });
 
-    this.foldersContainer = document.createElement('div');
+    const sec1 = new SettingSection({
-    this.foldersContainer.classList.add('folders-my');
+      name: 'Folders'
-
+    });
-    const foldersH2 = document.createElement('div');
-    foldersH2.classList.add('sidebar-left-h2');
-    foldersH2.innerText = 'Folders';
-
-    this.foldersContainer.append(foldersH2);
 
-    this.suggestedContainer = document.createElement('div');
+    this.foldersContainer = sec1.content;
-    this.suggestedContainer.classList.add('folders-suggested');
-    this.suggestedContainer.style.display = 'none';
 
-    const suggestedH2 = document.createElement('div');
+    const sec2 = new SettingSection({
-    suggestedH2.classList.add('sidebar-left-h2');
+      name: 'Recommended folders'
-    suggestedH2.innerText = 'Recommended folders';
+    });
 
-    this.suggestedContainer.append(suggestedH2);
+    this.suggestedSection = sec2;
+    this.suggestedSection.container.style.display = 'none';
 
-    this.scrollable.append(this.stickerContainer, caption, this.createFolderBtn, document.createElement('hr'), this.foldersContainer, document.createElement('hr'), this.suggestedContainer);
+    this.scrollable.append(this.stickerContainer, caption, this.createFolderBtn, sec1.container, sec2.container);
 
-    this.createFolderBtn.addEventListener('click', () => {
+    attachClickEvent(this.createFolderBtn, () => {
       if(Object.keys(this.filtersRendered).length >= 10) {
         toast('Sorry, you can\'t create more folders.');
       } else {
         new AppEditFolderTab(this.slider).open();
       }
-    });
+    }, {listenerSetter: this.listenerSetter});
 
     lottieLoader.loadAnimationFromURL({
       container: this.stickerContainer,
@@ -156,7 +156,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       }
     });
 
-    rootScope.on('filter_update', (e) => {
+    this.listenerSetter.add(rootScope, 'filter_update', (e) => {
       const filter = e;
       if(this.filtersRendered.hasOwnProperty(filter.id)) {
         this.renderFolder(filter, null, this.filtersRendered[filter.id]);
@@ -167,7 +167,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       this.getSuggestedFilters();
     });
 
-    rootScope.on('filter_delete', (e) => {
+    this.listenerSetter.add(rootScope, 'filter_delete', (e) => {
       const filter = e;
       if(this.filtersRendered.hasOwnProperty(filter.id)) {
         /* for(const suggested of this.suggestedFilters) {
@@ -182,7 +182,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
       }
     });
 
-    rootScope.on('filter_order', (e) => {
+    this.listenerSetter.add(rootScope, 'filter_order', (e: BroadcastEvents['filter_order']) => {
       const order = e;
       order.forEach((filterId, idx) => {
         const div = this.filtersRendered[filterId];
@@ -195,8 +195,8 @@ export default class AppChatFoldersTab extends SliderSuperTab {
 
   private getSuggestedFilters() {
     apiManager.invokeApi('messages.getSuggestedDialogFilters').then(suggestedFilters => {
-      this.suggestedContainer.style.display = suggestedFilters.length ? '' : 'none';
+      this.suggestedSection.container.style.display = suggestedFilters.length ? '' : 'none';
-      Array.from(this.suggestedContainer.children).slice(1).forEach(el => el.remove());
+      Array.from(this.suggestedSection.content.children).slice(1).forEach(el => el.remove());
 
       suggestedFilters.forEach(filter => {
         const div = this.renderFolder(filter);
@@ -204,9 +204,9 @@ export default class AppChatFoldersTab extends SliderSuperTab {
         button.classList.add('btn-primary', 'btn-color-primary');
         button.innerText = 'Add';
         div.append(button);
-        this.suggestedContainer.append(div);
+        this.suggestedSection.content.append(div);
 
-        button.addEventListener('click', (e) => {
+        attachClickEvent(button, (e) => {
           cancelEvent(e);
 
           if(Object.keys(this.filtersRendered).length >= 10) {
@@ -223,7 +223,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
           }).finally(() => {
             button.removeAttribute('disabled');
           });
-        });
+        }, {listenerSetter: this.listenerSetter});
       });
     });
   }

src/lib/rootScope.ts

@@ -12,7 +12,7 @@ import EventListenerBase from "../helpers/eventListenerBase";
 import { MyDraftMessage } from "./appManagers/appDraftsManager";
 import { MOUNT_CLASS_TO } from "../config/debug";
 
-type BroadcastEvents = {
+export type BroadcastEvents = {
   'user_update': number,
   'user_auth': UserAuth,
   'peer_changed': number,

src/scss/partials/_leftSidebar.scss

@@ -520,7 +520,7 @@
   }
 
   hr {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
   }
 
   .scroll-wrapper {
@@ -545,7 +545,9 @@
     font-size: 14px;
     line-height: 1.3;
   }
+}
 
+.edit-folder-container {
   .sidebar-left-h2 {
     padding: 7px 24px 15px 24px;
 
@@ -556,11 +558,22 @@
 }
 
 .chat-folders-container {
+  .sidebar-left-section {
+    &:not(:last-child) {
+      padding-bottom: 0;
+    }
+
+    /* &-name {
+      padding-top: .5rem;
+      padding-bottom: .5rem;
+    } */
+  }
+
   .btn-primary {
     width: 160px;
     height: 40px;
     align-items: center;
-    margin: 15px auto 24px;
+    margin: 15px auto 1rem;
     border-radius: 30px;
     padding: 0 12px;
     display: flex;
@@ -571,42 +584,17 @@
     margin-right: 6px;
   }
 
-  // .folders-container {
+  .row {
-  //   padding: 0 16px;
-  // }
-
-  .category {
-    padding: 7px 24px 11px 24px;
-    display: flex;
-    //padding-bottom: 11px;
-    justify-content: space-between;
-    cursor: pointer;
-    position: relative;
-    margin-bottom: 10px;
-    overflow: hidden;
-
-    @include respond-to(handhelds) {
-     padding: 7px 16px 11px 16px;
-    }
-
-    p {
-      height: unset;
-      justify-content: flex-start;
-      margin: 0;
-    }
-
-    p:last-child {
-      color: #707579;
-      font-size: 14px;
-      line-height: 20px;
-    }
-
     .btn-primary {
       height: 30px;
       font-size: 15px;
       width: 52px;
       transition: width 0.2s;
-      margin: 5px 0 0 0;
+      margin: 0;
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
 
       body.animation-level-0 & {
         transition: none;
@@ -656,7 +644,7 @@
   }
 
   .user-caption {
-    padding: 6px 28px;
+    padding: 3px 28px 6px;
   }  
 
   p span {
@@ -699,8 +687,8 @@
       li > .rp {
         margin: 0 .5rem;
         padding: 7px .75rem !important;
-        height: 3.875rem;
+        height: 3.75rem;
-        max-height: 3.875rem;
+        max-height: 3.75rem;
 
         @include respond-to(handhelds) {
           margin: 0;
@@ -720,6 +708,13 @@
   }
 }
 
+.popup-forward {
+  li > .rp {
+    height: 3.875rem !important;
+    max-height: 3.875rem !important;
+  }
+}
+
 .included-chatlist-container {
   .sidebar-left-h2 {
     padding: 6px 24px 8px 24px;
@@ -844,14 +839,24 @@
   
     &-name {
       padding: 1rem;
+
+      @include respond-to(handhelds) {
+        padding: .5rem 1rem;
+        font-size: .875rem;
+      }
     }
 
     &-caption {
       margin-top: 1rem;
       font-size: .875rem;
       color: #707579;
-      line-height: 1.2;
+      line-height: 1.3125;
       padding: 0 1rem;
+
+      @include respond-to(handhelds) {
+        margin: .5rem;
+        font-size: .875rem;
+      }
     }
 
     .checkbox-field, .radio-field {
@@ -1052,6 +1057,11 @@
     margin-top: -.375rem;
     font-size: .875rem;
   }
+
+  ul {
+    margin-top: .3125rem;
+    padding: 0 3px;
+  }
 }
 
 .notifications-container {