display chattype

src/components/chat/bubbles.ts

@@ -110,6 +110,10 @@ const IGNORE_ACTIONS: Set<Message.messageService['action']['_']> = new Set([
 
 const SERVICE_AS_REGULAR: Set<Message.messageService['action']['_']> = new Set();
 
+function Decodeuint8arr(uint8array: Uint8Array) : string {
+  return new TextDecoder("utf-8").decode(uint8array);
+}
+
 if(IS_CALL_SUPPORTED) {
   SERVICE_AS_REGULAR.add('messageActionPhoneCall');
 }
@@ -2972,7 +2976,7 @@ export default class ChatBubbles {
     
     const messageDiv = document.createElement('div');
     messageDiv.classList.add('message');
-    
+
     //messageDiv.innerText = message.message;
 
     let bubbleContainer: HTMLDivElement;
@@ -3170,6 +3174,12 @@ export default class ChatBubbles {
       chatType: this.chat.type, 
       message
     });
+
+    const messageiddiv = document.createElement('span');
+    messageiddiv.innerText = message.id + ' ' + message.mid;
+    messageiddiv.classList.add('messageid');
+
+    messageDiv.append(messageiddiv);
     messageDiv.append(timeSpan);
     bubbleContainer.prepend(messageDiv);
     //bubble.prepend(timeSpan, messageDiv); // that's bad
@@ -3220,6 +3230,7 @@ export default class ChatBubbles {
 
               buttonEl = htmlToDocumentFragment(r).firstElementChild as HTMLAnchorElement;
               buttonEl.classList.add('is-link', 'tgico');
+              buttonEl.title = button.url;
 
               break;
             }
@@ -3227,6 +3238,7 @@ export default class ChatBubbles {
             case 'keyboardButtonSwitchInline': {
               buttonEl = document.createElement('button');
               buttonEl.classList.add('is-switch-inline', 'tgico');
+              buttonEl.title = 'SwitchInline: ' + button.query;
               attachClickEvent(buttonEl, (e) => {
                 cancelEvent(e);
 
@@ -3261,6 +3273,10 @@ export default class ChatBubbles {
 
             default: {
               buttonEl = document.createElement('button');
+
+              if (button._ === 'keyboardButtonCallback') {
+                buttonEl.title = Decodeuint8arr(button.data);
+              }
               break;
             }
           }

src/components/peerProfile.ts

@@ -52,6 +52,8 @@ export default class PeerProfile {
   private notifications: Row;
   private location: Row;
   private link: Row;
+  private peerid: Row;
+  private chattype: Row;
   
   private cleaned: boolean;
   private setMoreDetailsTimeout: number;
@@ -149,6 +151,22 @@ export default class PeerProfile {
       }
     });
 
+    this.peerid = new Row({
+      title: this.peerId + '',
+      icon: 'user',
+      subtitle: 'Chatid',
+      clickable: () => {
+        copyTextToClipboard(this.peerId + '');
+          toast('ChatID Copied');
+      }
+    });
+
+    this.chattype = new Row({
+      title: ' ',
+      icon: 'user',
+      subtitle: 'Chattype'
+    });
+
     this.location = new Row({
       title: ' ',
       subtitleLangKey: 'ChatLocation',
@@ -158,6 +176,8 @@ export default class PeerProfile {
     this.section.content.append(
       this.phone.container,
       this.username.container,
+      this.peerid.container,
+      this.chattype.container,
       this.location.container,
       this.bio.container,
       this.link.container
@@ -415,6 +435,10 @@ export default class PeerProfile {
       }
 
       this.setMoreDetailsTimeout = window.setTimeout(() => this.setMoreDetails(true), 60e3);
+
+      setText(peerId + '', this.peerid);
+      let chattype = peerFull._ || 'unkonwn';
+      setText(chattype, this.chattype);
     });
   }
 

src/components/peerTitle.ts

@@ -53,7 +53,7 @@ export default class PeerTitle {
     this.element = document.createElement('span');
     this.element.classList.add('peer-title');
     this.element.setAttribute('dir', 'auto');
-    
+
     this.update(options);
     weakMap.set(this.element, this);
   }
@@ -91,5 +91,10 @@ export default class PeerTitle {
     } else {
       replaceContent(this.element, i18n(this.onlyFirstName ? 'Saved' : 'SavedMessages'));
     }
+
+    const chatidspan = document.createElement('span');
+    chatidspan.innerText = this.peerId + '';
+    chatidspan.classList.add('chatid');
+    this.element.appendChild(chatidspan);
   }
 }

src/helpers/date.ts

@@ -103,7 +103,9 @@ export function formatTime(date: Date) {
     date,
     options: {
       hour: '2-digit',
-      minute: '2-digit'
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false
     }
   }).element;
 }

src/scss/partials/_chatBubble.scss

@@ -97,7 +97,7 @@ $bubble-beside-button-width: 38px;
     }
   }
 
-  &.is-highlighted, 
+  &.is-highlighted,
   &.is-selected, 
   /* .bubbles.is-selecting */ & {
     &:after {
@@ -186,7 +186,7 @@ $bubble-beside-button-width: 38px;
   }
 
   //&.is-highlighted:after, &.is-first-unread:before, &.is-selected:after {
-  &:after, 
+  &:after,
   &:before {
     width: 200%;
     display: block;
@@ -2112,6 +2112,15 @@ $bubble-beside-button-width: 38px;
   code {
     cursor: pointer;
   }
+
+  .messageid {
+    color: var(--message-out-status-color);
+    text-align: left;
+  }
+
+  .messageid::before {
+    content: '\A';
+  }
 }
 
 // * fix scroll with only 1 bubble

src/scss/partials/_chatTopbar.scss

@@ -65,6 +65,12 @@ body.is-right-column-shown {
   }
 }
 
+.chatid {
+	color: rgba(255, 255, 255, .6);
+
+	margin-left: 0.3em;
+}
+
 .topbar {
   --topbar-height: 3.5rem;
   
@@ -186,7 +192,7 @@ body.is-right-column-shown {
 		}
 	}
 	
-	.peer-title, 
+	.peer-title,
 	.info {
 		@include text-overflow();
 		line-height: var(--line-height);