Reply fixes

src/components/chat/replyContainer.ts

@@ -9,6 +9,7 @@ import { getMiddleware } from "../../helpers/middleware";
 import { limitSymbols } from "../../helpers/string";
 import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager";
 import appMessagesManager from "../../lib/appManagers/appMessagesManager";
+import appPhotosManager from "../../lib/appManagers/appPhotosManager";
 import { RichTextProcessor } from "../../lib/richtextprocessor";
 import DivAndCaption from "../divAndCaption";
 import { wrapPhoto, wrapSticker } from "../wrappers";
@@ -80,6 +81,7 @@ export function wrapReplyDivAndCaption(options: {
             container: mediaEl,
             boxWidth: MEDIA_SIZE,
             boxHeight: MEDIA_SIZE,
+            size: appPhotosManager.choosePhotoSize(photo, MEDIA_SIZE, MEDIA_SIZE),
             middleware,
             lazyLoadQueue,
             noBlur: true,

src/lib/appManagers/appMessagesManager.ts

@@ -2574,8 +2574,8 @@ export class AppMessagesManager {
             addPart(undefined, plain ? prefix + media.game.title : RichTextProcessor.wrapEmojiText(prefix + media.game.title));
             break;
           }
-          case 'messageMediaDocument':
+          case 'messageMediaDocument': {
-            let document = media.document;
+            const document = media.document;
   
             if(document.type === 'video') {
               addPart('AttachVideo', undefined, message.message);
@@ -2586,13 +2586,15 @@ export class AppMessagesManager {
             } else if(document.type === 'round') {
               addPart('AttachRound', undefined, message.message);
             } else if(document.type === 'sticker') {
-              addPart(undefined, ((plain ? document.stickerEmojiRaw : document.stickerEmoji) || '') + 'Sticker');
+              addPart(undefined, ((plain ? document.stickerEmojiRaw : document.stickerEmoji) || ''));
+              addPart('AttachSticker');
               text = '';
             } else {
               addPart(undefined, plain ? document.file_name : RichTextProcessor.wrapEmojiText(document.file_name), message.message);
             }
   
             break;
+          }
   
           default:
             //messageText += media._;

src/lib/langPack.ts

@@ -418,8 +418,8 @@ export {i18n_};
 const _i18n = I18n._i18n;
 export {_i18n};
 
-export function join(elements: HTMLElement[], useLast = true) {
+export function join(elements: (Node | string)[], useLast = true) {
-	const arr: HTMLElement[] = elements.slice(0, 1);
+	const arr = elements.slice(0, 1);
   for(let i = 1; i < elements.length; ++i) {
     const isLast = (elements.length - 1) === i;
     const delimiterKey: LangPackKey = isLast && useLast ? 'WordDelimiterLast' : 'WordDelimiter';

src/scss/partials/_chat.scss

@@ -5,7 +5,7 @@
  */
 
 $btn-send-margin: .5rem;
-$chat-helper-size: 39px;
+$chat-helper-size: 36px;
 
 /* #bubble-contextmenu > div {
 	padding: 0 5.25 0 1rem;
@@ -136,7 +136,7 @@ $chat-helper-size: 39px;
 		}
 
 		@media only screen and (max-height: 30rem) {
-			max-height: unquote('max(39px, calc(100vh - 10rem))');
+			max-height: unquote('max(36px, calc(100vh - 10rem))');
 		}
 
 		@include respond-to(handhelds) {
@@ -861,9 +861,9 @@ $chat-helper-size: 39px;
 		align-items: center;
 		width: 100%;
 		position: relative;
-		z-index: 2;
+		// z-index: 2;
 		background-color: inherit;
-		border-radius: 12px;
+		border-radius: .75rem;
 		padding: var(--padding);
 	}
 	
@@ -879,16 +879,22 @@ $chat-helper-size: 39px;
 		height: 0;
 		width: calc(100% - var(--padding-horizontal) * 2);
 		padding: 0;
-		margin-top: .3125rem;//var(--padding-vertical);
+		margin-top: .5625rem;//var(--padding-vertical);
-		margin-bottom: -.3125rem;
+		margin-bottom: -.5625rem;
-		transition: height var(--layer-transition);
 		//height: calc(#{$chat-helper-size} + .3125rem);
-		align-items: flex-start;
+		align-items: center;
 		user-select: none;
 		z-index: 2;
+		opacity: 0;
+		pointer-events: none;
 
-		@include animation-level(0) {
+		@include animation-level(2) {
-			transition: none;
+			transition: height var(--layer-transition), opacity var(--layer-transition);
+		}
+
+		@include respond-to(esg-bottom-new) {
+			margin-top: .3125rem;
+			margin-bottom: -.3125rem;
 		}
 
 		/* @include respond-to(handhelds) {
@@ -902,7 +908,9 @@ $chat-helper-size: 39px;
 		} */
 
 		.chat.is-helper-active & {
-			height: 39px;
+			pointer-events: unset;
+			height: #{$chat-helper-size};
+			opacity: 1;
 		}
 		
 		/* &.active {
@@ -911,13 +919,18 @@ $chat-helper-size: 39px;
 		
 		.reply {
 			width: 100%;
-			margin-left: .5rem;
+			margin: 0 .625rem;
-			min-height: 35px;
+			// min-height: 35px;
+
+			&-title {
+				margin-top: -1px;
+				margin-bottom: 1px;
+			}
 		}
 
-		span.emoji {
+		/* span.emoji {
 			font-size: .8rem;
-		}
+		} */
 	}
 
 	.new-message-wrapper {

src/scss/partials/_chatPinned.scss

@@ -128,7 +128,7 @@
   overflow: hidden;
   box-sizing: border-box;
   margin-right: 1rem;
-  max-height: 35px;
+  // max-height: 35px;
   position: relative;
   user-select: none;
   /* padding: .25rem; */
@@ -145,9 +145,6 @@
     overflow: hidden;
     pointer-events: none;
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     margin-left: .5rem;
   }
 
@@ -169,7 +166,7 @@
     overflow: hidden;
     position: absolute;
     left: 0;
-    top: 0;
+    top: .125rem;
 
     &.is-round {
       border-radius: 50%;
@@ -224,13 +221,17 @@
     background: var(--primary-color);
   }
 
-  &-content {
+  /* &-content {
     height: 2rem;
-  }
+  } */
 
   &-media {
     border-radius: .25rem;
   }
+
+  &-cancel {
+    margin-bottom: 0 !important;
+  }
 }
 
 .pinned-container {
@@ -299,7 +300,7 @@
     overflow: hidden;
     align-items: center;
     padding: .25rem;
-    border-radius: 4px;
+    border-radius: .25rem;
 
     /* html.no-touch &:hover {
       background-color: var(--light-secondary-text-color);

tweb-design

@@ -0,0 +1 @@
+Subproject commit d7664548de0373baa27e006bbe1f62467f566277