Fix unpinning dialogs

Join left chat button

src/components/chat/pinnedMessageBorder.ts

@@ -1,5 +1,17 @@
 // https://github.com/evgeny-nadymov/telegram-react/blob/master/src/Components/ColumnMiddle/PinnedMessageBorder.js
 
+enum BAR_HEIGHTS {
+  ONE = 32,
+  TWO = 15,
+  THREE = 10,
+  FOUR = 8,
+  MORE = 8
+};
+
+const GAP = 1;
+const WIDTH = 2;
+const BASE_CLASS = 'pinned-message-border';
+
 export default class PinnedMessageBorder {
   private border: HTMLElement;
   private wrapper: HTMLElement;
@@ -20,13 +32,15 @@ export default class PinnedMessageBorder {
     const radius = 1;
 
     let d = '';
-    if(count === 3) {
+    /* if(count === 3) {
-      d = this.drawRect(0, 0, 2, barHeight, radius)
+      d = this.drawRect(0, 0, WIDTH, barHeight, radius)
-        + this.drawRect(0, 11, 2, barHeight + 1, radius)
+        + this.drawRect(0, barHeight + GAP, WIDTH, barHeight + 1, radius)
-        + this.drawRect(0, 23, 2, barHeight, radius);
+        + this.drawRect(0, barHeight * 2 + GAP * 2 + 1, WIDTH, barHeight, radius);
+    } */if(count === 2) {
+      d = this.drawRect(0, 0, WIDTH, barHeight, radius) + this.drawRect(0, barHeight + GAP * 2, WIDTH, barHeight, radius);
     } else {
-      for(let i = 0; i < count; i++) {
+      for(let i = 0; i < count; ++i) {
-        d += this.drawRect(0, (barHeight + 2) * i, 2, barHeight, radius);
+        d += this.drawRect(0, (barHeight + GAP) * i, WIDTH, barHeight, radius);
       }
     }
 
@@ -44,56 +58,56 @@ export default class PinnedMessageBorder {
   };
 
   private getBarHeight = (count: number, index: number) => {
-    let barHeight = 32;
+    let barHeight: number;
-    if(count === 1) {
+    if(count <= 1) {
-      barHeight = 32;
+      barHeight = BAR_HEIGHTS.ONE;
     } else if(count === 2) {
-      barHeight = 15;
+      barHeight = BAR_HEIGHTS.TWO;
     } else if(count === 3) {
-      barHeight = 9;
+      barHeight = BAR_HEIGHTS.THREE;
     } else if(count === 4) {
-      barHeight = 7;
+      barHeight = BAR_HEIGHTS.FOUR;
     } else if(count > 3) {
-      barHeight = 7;
+      barHeight = BAR_HEIGHTS.MORE;
     }
 
     return barHeight;
   };
 
   private getMarkHeight = (count: number, index: number) => {
-    let barHeight = 32;
+    let markHeight: number;
-    if(count === 1) {
+    if(count <= 1) {
-      barHeight = 32;
+      markHeight = BAR_HEIGHTS.ONE;
     } else if(count === 2) {
-      barHeight = 15;
+      markHeight = BAR_HEIGHTS.TWO;
     } else if(count === 3) {
-      barHeight = index === 1 ? 10 : 9;
+      markHeight = BAR_HEIGHTS.THREE;
     } else if(count === 4) {
-      barHeight = 7;
+      markHeight = BAR_HEIGHTS.FOUR;
     } else if(count > 3) {
-      barHeight = 7;
+      markHeight = BAR_HEIGHTS.MORE;
     }
 
-    return barHeight;
+    return markHeight;
   };
 
   private getMarkTranslateY = (index: number, barHeight: number, count: number) => {
     if(count === 1) {
       return 0;
     } else if(count === 2) {
-      return index === 0 ? 0 : barHeight + 2;
+      return !index ? 0 : barHeight + GAP;
     }
 
     if(count === 3) {
-      if(index === 0) {
+      if(!index) {
         return 0;
-      } else if (index === 1) {
+      } else if(index === 1) {
-        return 11;
+        return barHeight + GAP;
       }
 
-      return 23;
+      return barHeight * 2 + GAP * 2 + 1;
     } else {
-      return (barHeight + 2) * index;
+      return (barHeight + GAP) * index;
     }
   };
 
@@ -104,21 +118,22 @@ export default class PinnedMessageBorder {
 
     if(index <= 1) {
       return 0;
-    } else if(index >= count - 2) {
+    } else if(index >= (count - 2)) {
-      return trackHeight - 32;
+      return trackHeight - BAR_HEIGHTS.ONE - barHeight;
     }
 
-    return (barHeight + 4) / 2 + (index - 2) * (barHeight + 2);
+    // return (index + 1) * barHeight + index * GAP;
+    return (barHeight + GAP * 2) / 2 + (index - 2) * (barHeight + GAP);
   };
 
   private getTrackHeight = (count: number, barHeight: number) => {
-    return count <= 3 ? 32 : barHeight * count + 2 * (count - 1);
+    return count <= 3 ? BAR_HEIGHTS.ONE : barHeight * count + GAP * (count - 1);
   };
 
   public render(count: number, index: number) {
     if(!this.border) {
       this.border = document.createElement('div');
-      this.border.classList.add('pinned-message-border');
+      this.border.classList.add(BASE_CLASS);
 
       this.wrapper = document.createElement('div');
       this.border.append(this.wrapper);
@@ -126,8 +141,8 @@ export default class PinnedMessageBorder {
     
     if(count === 1) {
       if(this.count !== count) {
-        this.wrapper.className = 'pinned-message-border-wrapper-1';
+        this.wrapper.className = BASE_CLASS + '-wrapper-1';
-        this.border.classList.remove('pinned-message-border-mask');
+        this.border.classList.remove(BASE_CLASS + '-mask');
         this.wrapper.innerHTML = this.wrapper.style.cssText = '';
       }
 
@@ -144,9 +159,9 @@ export default class PinnedMessageBorder {
     const markTranslateY = this.getMarkTranslateY(index, barHeight, count);
     const trackTranslateY = this.getTrackTranslateY(index, count, barHeight, trackHeight);
 
-    this.border.classList.toggle('pinned-message-border-mask', count > 4);
+    this.border.classList.toggle(BASE_CLASS + '-mask', count > 4);
 
-    this.wrapper.className = 'pinned-message-border-wrapper';
+    this.wrapper.className = BASE_CLASS + '-wrapper';
     this.wrapper.style.cssText = `clip-path: url(#${clipPathId}); width: 2px; height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`;
     
     if(!this.svg) {
@@ -160,7 +175,7 @@ export default class PinnedMessageBorder {
       this.svg.append(this.defs);
 
       this.mark = document.createElement('div');
-      this.mark.classList.add('pinned-message-border-mark');
+      this.mark.classList.add(BASE_CLASS + '-mark');
     }
 
     if(!this.svg.parentElement) {

src/components/chat/topbar.ts

@@ -34,6 +34,7 @@ import { cancelEvent } from "../../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../../helpers/dom/clickEvent";
 import findUpTag from "../../helpers/dom/findUpTag";
 import { toast } from "../toast";
+import replaceContent from "../../helpers/dom/replaceContent";
 
 export default class ChatTopbar {
   public container: HTMLDivElement;
@@ -271,8 +272,6 @@ export default class ChatTopbar {
     this.pinnedMessage = new ChatPinnedMessage(this, this.chat, this.appMessagesManager, this.appPeersManager);
 
     this.btnJoin = Button('btn-primary btn-color-primary chat-join hide');
-    this.btnJoin.append(i18n('Chat.Subscribe'));
-
     this.btnPinned = ButtonIcon('pinlist');
     this.btnMute = ButtonIcon('mute');
 
@@ -292,11 +291,24 @@ export default class ChatTopbar {
       cancelEvent(e);
 
       blurActiveElement();
+      const middleware = this.chat.bubbles.getMiddleware();
       this.btnJoin.setAttribute('disabled', 'true');
-      this.appChatsManager.joinChannel(-this.peerId).finally(() => {
+
+      const chatId = -this.peerId;
+      let promise: Promise<any>;
+      if(this.appChatsManager.isChannel(chatId)) {
+        promise = this.appChatsManager.joinChannel(chatId);
+      } else {
+        promise = this.appChatsManager.addChatUser(chatId, rootScope.myId);
+      }
+
+      promise.finally(() => {
+        if(!middleware()) {
+          return;
+        }
+
         this.btnJoin.removeAttribute('disabled');
       });
-    //});
     }, {listenerSetter: this.listenerSetter});
 
     this.listenerSetter.add(rootScope)('chat_update', (e) => {
@@ -419,7 +431,10 @@ export default class ChatTopbar {
     const isBroadcast = this.appPeersManager.isBroadcast(peerId);
 
     this.btnMute && this.btnMute.classList.toggle('hide', !isBroadcast);
-    this.btnJoin && this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left);
+    if(this.btnJoin) {
+      replaceContent(this.btnJoin, i18n(this.appChatsManager.isChannel(-peerId) ? 'Chat.Subscribe' : 'ChannelJoin'));
+      this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left);
+    }
     this.setUtilsWidth();
 
     const middleware = this.chat.bubbles.getMiddleware();

src/lang.ts

@@ -533,6 +533,7 @@ const lang = {
   "OK": "OK",
   "PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.",
   "Send": "Send",
+  "ChannelJoin": "JOIN",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",

src/lib/appManagers/appDialogsManager.ts

@@ -661,7 +661,7 @@ export class AppDialogsManager {
     
     if(this.loadDialogsPromise/*  || 1 === 1 */) return this.loadDialogsPromise;
 
-    const promise = new Promise<void>(async(resolve, reject) => {
+    const promise = new Promise<void>(async(resolve) => {
       if(!this.chatList.childElementCount) {
         const container = this.chatList.parentElement;
         container.append(this.chatsPreloader);
@@ -697,7 +697,7 @@ export class AppDialogsManager {
   
         const result = await getConversationPromise;
   
-        if(this.filterId !== filterId) {
+        if(this.loadDialogsPromise !== promise) {
           return;
         }
   
@@ -747,11 +747,11 @@ export class AppDialogsManager {
       
       this.chatsPreloader.remove();
       resolve();
-    });
+    }).finally(() => {
-
-    return this.loadDialogsPromise = promise.finally(() => {
       this.loadDialogsPromise = undefined;
     });
+
+    return this.loadDialogsPromise = promise;
   }
 
   private generateEmptyPlaceholder(options: {

src/lib/appManagers/appMessagesManager.ts

@@ -2913,17 +2913,20 @@ export class AppMessagesManager {
   public toggleDialogPin(peerId: number, filterId?: number) {
     if(filterId > 1) {
       return this.filtersStorage.toggleDialogPin(peerId, filterId);
-    } else {
-      const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max;
-      if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) {
-        return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
-      }
     }
 
     const dialog = this.getDialogOnly(peerId);
     if(!dialog) return Promise.reject();
 
     const pinned = dialog.pFlags?.pinned ? undefined : true;
+
+    if(pinned) {
+      const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max;
+      if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) {
+        return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
+      }
+    }
+
     return apiManager.invokeApi('messages.toggleDialogPin', {
       peer: appPeersManager.getInputDialogPeerById(peerId),
       pinned

src/lib/langPack.ts

@@ -272,7 +272,6 @@ namespace I18n {
 				}
 
 				out.push(a);
-				console.log('p4', p4);
 			} else if(args) {
 				out.push(args[indexHolder.i++]);
 			}

src/lib/storages/filters.ts

@@ -182,12 +182,12 @@ export default class FiltersStorage {
   public toggleDialogPin(peerId: number, filterId: number) {
     const filter = this.filters[filterId];
 
+    const wasPinned = filter.pinned_peers.findAndSplice(p => p === peerId);
+    if(!wasPinned) {
       if(filter.pinned_peers.length >= this.rootScope.config.pinned_infolder_count_max) {
         return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
       }
       
-    const wasPinned = filter.pinned_peers.findAndSplice(p => p === peerId);
-    if(!wasPinned) {
       filter.pinned_peers.unshift(peerId);
     }
     

src/scss/mixins/_hover.scss

@@ -15,7 +15,8 @@
     }
   }
 
-  html.no-touch &:hover {
+  html.no-touch &:hover,
+  html.no-touch &:active {
     @if $property != null {
       @if $use-transition {
         transition: .2s #{$property};

src/scss/partials/_chatPinned.scss

@@ -7,21 +7,23 @@
 .pinned-message {
   &-border {
     position: relative;
-    height: 35px;
+    height: 2rem;
-    width: 2px;
+    width: .125rem;
-    padding: 1.5px 0;
+    // padding: .125rem 0;
-    //padding: 0 0 6px 6px;
-    //overflow: hidden;
 
     &-wrapper-1 {
-      height: 32px;
+      position: relative;
-      width: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 2rem;
+      width: .125rem;
       border-radius: 1px;
       background: var(--primary-color);
     }
 
     &-mask {
-      mask-image: linear-gradient(to bottom, transparent 0, black 6px, black 38px, transparent 44px);
+      height: 2.5rem;
+      mask-image: linear-gradient(to bottom, transparent 0, black 4px, black 36px, transparent 40px);
     }
 
     &-wrapper {
@@ -37,7 +39,7 @@
         bottom: 0;
         display: block;
         background: var(--primary-color);
-        opacity: .53;
+        opacity: .4;
       }
     }
 
@@ -60,10 +62,19 @@
     body:not(.animation-level-0) & {
       &-wrapper, &-mark {
         will-change: transform;
-        transition: transform 0.25s ease-in-out;
+        transition: transform .25s ease-in-out;
       }
     }
   }
+
+  &-content {
+    --height: 32px;
+    height: var(--height);
+  }
+
+  &-media {
+    border-radius: .1875rem;
+  }
 }
 
 .pinned-message, .reply {
@@ -86,16 +97,15 @@
   }
   
   &-content {
-    margin-left: 8px;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
     pointer-events: none;
     position: relative;
-    height: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    margin-left: .5rem;
   }
 
   &-title {
@@ -120,7 +130,6 @@
   &-media {
     height: 2rem;
     width: 2rem;
-    border-radius: .5rem;
     overflow: hidden;
     position: absolute;
     left: 0;
@@ -167,7 +176,7 @@
 .reply {
   &.is-media {
     .reply-content {
-      padding-left: 2.5rem;
+      padding-left: 2.25rem;
     }
   }
 
@@ -181,6 +190,14 @@
     min-width: 2px;
     background: var(--primary-color);
   }
+
+  &-content {
+    height: 2rem;
+  }
+
+  &-media {
+    border-radius: .25rem;
+  }
 }
 
 .pinned-container {
@@ -267,10 +284,10 @@
     width: 2rem;
     height: 2rem;
     position: absolute;
-    transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
+    margin-left: -.25rem;
 
-    body.animation-level-0 & {
+    @include animation-level(2) {
-      transition: none;
+      transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
     }
   }
 
@@ -285,13 +302,15 @@
   } */
   
   // * fix blink in safari, can't add translateX from nowhere...
-  &-title, &-subtitle {
+  &-title, 
+  &-subtitle {
     transform: translateX(0);
   }
 
   &.is-media {
-    .pinned-message-title, .pinned-message-subtitle {
+    .pinned-message-title, 
-      transform: translateX(2.5rem);
+    .pinned-message-subtitle {
+      transform: translateX(2.25rem);
       //overflow: hidden !important;
     }
   }
@@ -301,12 +320,16 @@
     //opacity: 0;
   }
 
+  .pinned-container-wrapper {
+    min-width: 16rem;
+  }
+
   &:not(.is-floating) {
     //width: 15.5rem;
 
-    .pinned-message-content {
+    /* .pinned-message-content {
-      margin-right: 2.5rem;
+      margin-right: 2.25rem;
-    }
+    } */
 
     .pinned-message-close {
       display: flex;
@@ -316,8 +339,9 @@
 
   &.is-floating {
     &.is-media {
-      .pinned-message-title, .pinned-message-subtitle {
+      .pinned-message-title, 
-        width: calc(100% - 2.5rem);    
+      .pinned-message-subtitle {
+        width: calc(100% - 2.25rem);    
       }
     }
 
@@ -329,21 +353,26 @@
   }
 
   &-content {
-    > .pinned-message-title, > .pinned-message-subtitle {
+    .pinned-message-title, 
+    .pinned-message-subtitle {
       position: relative;
-      height: 50%;
+      height: calc(var(--height) / 2);
       overflow: visible;
-      transition: transform var(--pm-transition);
 
-      body.animation-level-0 & {
+      @include animation-level(2) {
-        transition: none;
+        transition: transform var(--pm-transition);
       }
     }
   }
 
+  &-title {
+    margin-top: -.0625rem;
+    margin-bottom: .1875rem;
+  }
+
   &-subtitle {
     .animated-super-row {
-      font-size: 14px;
+      font-size: .875rem;
       line-height: 16px;
       overflow: hidden;
       white-space: nowrap;
@@ -403,7 +432,8 @@
   } */
  
 
-  &.hide ~ .tgico-pinlist, &:not(.is-many) ~ .tgico-pinlist {
+  &.hide ~ .tgico-pinlist, 
+  &:not(.is-many) ~ .tgico-pinlist {
     display: none; 
   }
 

src/scss/partials/_chatTopbar.scss

@@ -173,11 +173,11 @@
 
 	.chat-join {
 		width: auto;
-		width: 117px;
+		height: 2.25rem;
-		height: 36px;
 		font-weight: 400;
 		font-size: 0.875rem;
 		margin-right: .5rem;
+		padding: 0 1.375rem; // same as in new media popup
 
 		&:not(.hide) + .chat-mute-button {
 			display: none;