Webpage fixes

Reply fixes

src/components/chat/bubbles.ts

@@ -2472,13 +2472,14 @@ export default class ChatBubbles {
             }
           }
           
-          if(previewResizer) {
-            quote.append(previewResizer);
-          }
-          
           let quoteTextDiv = document.createElement('div');
           quoteTextDiv.classList.add('quote-text');
 
+          if(previewResizer) {
+            quoteTextDiv.append(previewResizer);
+          }
+
+          let t: HTMLElement;
           if(webpage.site_name) {
             let nameEl = document.createElement('a');
             nameEl.classList.add('webpage-name');
@@ -2486,6 +2487,7 @@ export default class ChatBubbles {
             nameEl.href = webpage.url || '#';
             setInnerHTML(nameEl, RichTextProcessor.wrapEmojiText(webpage.site_name));
             quoteTextDiv.append(nameEl);
+            t = nameEl;
           }
 
           if(webpage.rTitle) {
@@ -2493,6 +2495,7 @@ export default class ChatBubbles {
             titleDiv.classList.add('title');
             setInnerHTML(titleDiv, webpage.rTitle);
             quoteTextDiv.append(titleDiv);
+            t = titleDiv;
           }
 
           if(webpage.rDescription) {
@@ -2500,6 +2503,13 @@ export default class ChatBubbles {
             textDiv.classList.add('text');
             setInnerHTML(textDiv, webpage.rDescription);
             quoteTextDiv.append(textDiv);
+            t = textDiv;
+          }
+
+          if(t) {
+            t.append(timeSpan);
+          } else {
+            box.classList.add('no-text');
           }
 
           quote.append(quoteTextDiv);
@@ -2512,7 +2522,7 @@ export default class ChatBubbles {
             if(size.w === size.h && quoteTextDiv.childElementCount) {
               bubble.classList.add('is-square-photo');
               isSquare = true;
-              this.appPhotosManager.setAttachmentSize(webpage.photo, preview, 80, 80, false);
+              this.appPhotosManager.setAttachmentSize(webpage.photo, preview, 32, 32, false);
             } else if(size.h > size.w) {
               bubble.classList.add('is-vertical-photo');
             }
@@ -2535,7 +2545,8 @@ export default class ChatBubbles {
           box.append(quote);
           
           //bubble.prepend(box);
-          messageDiv.insertBefore(box, messageDiv.lastElementChild);
+          messageDiv.append(box);
+          // messageDiv.insertBefore(box, messageDiv.lastElementChild);
           
           //this.log('night running', bubble.scrollHeight);
           

src/components/chat/replyContainer.ts

@@ -5,7 +5,6 @@
  */
 
 import replaceContent from "../../helpers/dom/replaceContent";
-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";
@@ -17,9 +16,9 @@ import { wrapPhoto, wrapSticker } from "../wrappers";
 const MEDIA_SIZE = 32;
 
 export function wrapReplyDivAndCaption(options: {
-  title: string | HTMLElement,
+  title: string | HTMLElement | DocumentFragment,
   titleEl: HTMLElement,
-  subtitle: string | HTMLElement,
+  subtitle: string | HTMLElement | DocumentFragment,
   subtitleEl: HTMLElement,
   message: any,
   mediaEl: HTMLElement,
@@ -98,10 +97,13 @@ export function wrapReplyDivAndCaption(options: {
     if(message) {
       subtitleEl.textContent = '';
       subtitleEl.append(appMessagesManager.wrapMessageForReply(message, message.message && limitSymbols(message.message, 140)));
-    } else if(typeof(subtitle) === 'string') {
+    } else {
-      subtitle = limitSymbols(subtitle, 140);
+      if(typeof(subtitle) === 'string') {
-      subtitle = RichTextProcessor.wrapEmojiText(subtitle);
+        subtitle = limitSymbols(subtitle, 140);
-      replaceContent(subtitleEl, subtitle);
+        subtitle = RichTextProcessor.wrapEmojiText(subtitle);
+      }
+
+      replaceContent(subtitleEl, subtitle || '');
     }
   }
 
@@ -117,11 +119,11 @@ export function wrapReplyDivAndCaption(options: {
   return setMedia;
 }
 
-export default class ReplyContainer extends DivAndCaption<(title: string | HTMLElement, subtitle: string | HTMLElement, message?: any) => void> {
+export default class ReplyContainer extends DivAndCaption<(title: string | HTMLElement | DocumentFragment, subtitle: string | HTMLElement | DocumentFragment, message?: any) => void> {
   private mediaEl: HTMLElement;
 
   constructor(protected className: string) {
-    super(className, (title: string | HTMLElement, subtitle: string | HTMLElement = '', message?: any) => {
+    super(className, (title, subtitle = '', message?) => {
       if(!this.mediaEl) {
         this.mediaEl = document.createElement('div');
         this.mediaEl.classList.add(this.className + '-media');

src/lang.ts

@@ -143,6 +143,7 @@ const lang = {
 	//"PushNotification.Action.Mute1d.Success": "Notification settings were successfully saved.",
 
   // * android
+  "AccDescrEditing": "Editing",
   "ActionCreateChannel": "Channel created",
   "ActionCreateGroup": "un1 created the group",
   "ActionChangedTitle": "un1 changed the group name to un2",
@@ -162,6 +163,10 @@ const lang = {
   "ActionUserScored": "un1 scored %1$s",
   "ActionYouScoredInGame": "You scored %1$s in un2",
   "ActionUserScoredInGame": "un1 scored %1$s in un2",
+  "AndOther": {
+    "one_value": "and %1$d other",
+    "other_value": "and %1$d others"
+  },
   "AttachPhoto": "Photo",
   "AttachVideo": "Video",
   "AttachGif": "GIF",
@@ -192,6 +197,10 @@ const lang = {
     "one_value": "Show %1$d More Chat",
     "other_value": "Show %1$d More Chats"
   },
+  "ForwardedMessageCount": {
+    "one_value": "Forwarded message",
+    "other_value": "%1$d forwarded messages"
+  },
   "FromYou": "You",
   "Add": "Add",
   "Chats": {
@@ -534,6 +543,7 @@ const lang = {
   "PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.",
   "Send": "Send",
   "ChannelJoin": "JOIN",
+  "Yesterday": "yesterday",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",

src/layer.d.ts

@@ -859,7 +859,8 @@ export namespace Message {
 		clear_history?: boolean,
 		pending?: boolean,
 		error?: any,
-		send?: () => Promise<any>
+		send?: () => Promise<any>,
+		totalEntities?: MessageEntity[]
 	};
 
 	export type messageService = {

src/scss/partials/_chat.scss

@@ -922,20 +922,15 @@ $chat-helper-size: 36px;
 			margin: 0 .625rem;
 			// min-height: 35px;
 
-			&-title {
+			/* &-content {
-				margin-top: -1px;
+				margin-left: .5rem;
-				margin-bottom: 1px;
+			} */
-
-			}
 		}
 
-		.peer-title {
+		span.emoji {
-			font-weight: 500;
+			margin: 0 .125rem;
+			// font-size: .8rem;
 		}
-
-		/* span.emoji {
-			font-size: .8rem;
-		} */
 	}
 
 	.new-message-wrapper {

src/scss/partials/_chatBubble.scss

@@ -814,39 +814,46 @@ $bubble-margin: .25rem;
   }
 
   .web {
-    padding-top: 1px;
+    margin: .125rem 0;
-    margin: 4px 0 -5px 1px;
-    // margin-bottom: 5px;
     max-width: 100%;
     overflow: hidden;
+    line-height: var(--line-height);
     
     .preview {
       max-width: unquote('min(420px, 100%)');
       max-height: unquote('min(340px, 100%)');
       border-radius: 4px;
-      margin-bottom: 3px;
       overflow: hidden;
       user-select: none;
       cursor: pointer;
       position: relative;
-
       width: max-content;
       
       img, video {
         max-width: 100%;
       }
+
+      &-resizer {
+        &:first-child {
+          margin: 3px 0;
+        }
+      }
+    }
+
+    &.no-text {
+      margin-bottom: .625rem;
     }
     
     .title {
-      letter-spacing: -.2px;
-      line-height: 1.2;
       font-weight: 500 !important;
+      
+      &:not(:first-child) {
+        margin-top: 1px;
+      }
     }
     
     .webpage-name {
-      letter-spacing: -.3px;
+      font-size: var(--messages-secondary-text-size);
-      display: block;
-      font-size: calc(1rem - 1px);
       font-weight: 500 !important;
       
       @include hover() {
@@ -857,18 +864,31 @@ $bubble-margin: .25rem;
     .text {
       overflow: hidden;
       text-overflow: ellipsis;
-      line-height: 1.2;
+      margin-top: 1px;
-      letter-spacing: -.3px;
-      margin-top: 2px;
       font-size: var(--messages-secondary-text-size);
     }
 
     .quote {
-      // padding-left: .5rem;
-      padding-left: .55rem;
       max-width: 100%;
       overflow: hidden;
       width: 100%;
+      display: flex;
+
+      &-text {
+        // max-width: calc(100% - .625rem); // left border
+        max-width: 100%;
+        padding-left: .625rem;
+        margin-left: -.625rem;
+      }
+
+      &:before {
+        flex: 0 0 auto;
+        width: .125rem;
+        border-radius: .125rem;
+        background-color: var(--primary-color);
+        margin: .1875rem .5rem .125rem 0;
+        content: " ";
+      }
     }
   }
   
@@ -876,37 +896,23 @@ $bubble-margin: .25rem;
     font-size: var(--messages-secondary-text-size);
   }
 
-  .reply-title {
-    font-weight: 500 !important;
-    display: inline !important;
-  }
-
   &.is-square-photo {
     .bubble-content {
       width: fit-content;
     }
 
     .web {
-      .quote {
-        display: flex;
-        justify-content: space-between;
-      }
-  
       .preview-resizer {
-        order: 2;
+        margin: 0;
-        flex-shrink: 0;
+        width: 2rem;
-        max-width: 5rem;
+        height: 2rem;
-        max-height: 5rem;
+        float: right;
-
-        .preview {
-          max-width: unquote('min(5rem, 100%)');
-          max-height: unquote('min(5rem, 100%)');
-        }
       }
 
-      .quote-text {
+      .preview {
-        order: 1;
+        max-width: unquote('min(2rem, 100%)');
-        padding-right: 1rem;
+        max-height: unquote('min(2rem, 100%)');
+        margin: 0;
       }
     }
   }
@@ -919,7 +925,7 @@ $bubble-margin: .25rem;
 
   .reply {
     padding: 4px;
-    margin: 0 4px 6px 4px;
+    margin: 0 4px 6px 6px;
     cursor: pointer;
     border-radius: 4px;
     min-width: 10rem;
@@ -1859,12 +1865,6 @@ $bubble-margin: .25rem;
     border-top-right-radius: 0;
   }
 
-  .quote {
-    @include hover() {
-      background-color: var(--light-primary-color);
-    }
-  }
-
   &.is-reply {
     &.emoji-big, &.sticker {
       .reply {
@@ -1878,11 +1878,9 @@ $bubble-margin: .25rem;
     }
   }
   
-  .quote {
+  .quote .webpage-name, 
-    border-left: 2px var(--primary-color) solid;
+  .reply-title
-  }
+  /* , .reply i */ {
-
-  .quote .webpage-name, .reply-title/* , .reply i */ {
     color: var(--primary-color);
   }
   
@@ -2010,12 +2008,6 @@ $bubble-margin: .25rem;
     border-top-right-radius: 0;
   }
 
-  .quote {
-    @include hover() {
-      background-color: var(--light-message-background-color);
-    }
-  }
-
   &.is-reply {
     &.emoji-big, &.sticker {
       .web, .reply {
@@ -2024,11 +2016,8 @@ $bubble-margin: .25rem;
     }
   }
 
-  .quote {
+  .reply-border, 
-    border-left: 2px solid var(--message-out-primary-color);
+  .quote:before {
-  }
-
-  .reply-border {
     background-color: var(--message-out-primary-color);
   }
 

src/scss/partials/_chatPinned.scss

@@ -135,7 +135,7 @@
 
   &.is-media {
     .emoji:first-child {
-      margin-right: .25rem;
+      margin: 0 .25rem 0 0;
     }
   }
   
@@ -225,6 +225,10 @@
     height: 2rem;
   } */
 
+  &-content {
+    margin-left: .625rem;
+  }
+
   &-media {
     border-radius: .25rem;
   }
@@ -232,6 +236,14 @@
   &-cancel {
     margin-bottom: 0 !important;
   }
+
+  &-title {
+    margin: -1px 0 1px;
+  }
+
+  .peer-title {
+    font-weight: 500;
+  }
 }
 
 .pinned-container {

src/scss/style.scss

@@ -72,7 +72,7 @@ $chat-input-inner-padding-handhelds: .25rem;
   --message-highlightning-color: hsla(85.5319, 36.9171%, 40.402%, .4);//rgba(77, 142, 80, .4);
   --messages-container-width: #{$messages-container-width};
   --messages-text-size: 16px;
-  --messages-secondary-text-size: calc(var(--messages-text-size) - 1px);
+  --messages-secondary-text-size: calc(var(--messages-text-size) - 2px);
   --line-height: 1.3125;
   --esg-sticker-size: 80px;
   --disabled-opacity: .3;