Add user picture to desktop sidebar; change text input to textarea to allow resizing.

web/src/app.ts

@@ -189,6 +189,8 @@ function setupEventListeners() {
         );
         ui.renderChatList(filtered, activeChatState, selectChat);
     });
+
+    ui.autoResizeTextArea(elements.messageInput);
     
     elements.messageForm.addEventListener('submit', (e) => {
         e.preventDefault();
@@ -313,9 +315,9 @@ async function handleIncomingMessage(msg: Message) {
     
     if (!msg.fromMe) {
         messageTone.play();
-    }
-    if (notificationAuthorization === "granted") {
-        new Notification("New message", { body: msg.body || msg.text });
+        if (notificationAuthorization === "granted") {
+            new Notification("New message", { body: msg.body || msg.text });
+        }
     }
     
     if (activeChatState && activeChatState.id === msgChatId) {

web/src/parser.ts

@@ -10,7 +10,7 @@ export class Parser {
         
         const regex = new RegExp(`(^|\\s)${esc}(.+?)${esc}(?=\\s|$)`, "gs");
         
-        this.input = this.input.replace(regex, (match, pre, inner) => {
+        this.input = this.input.replace(regex, (_match, pre, inner) => {
             return `${pre}${to.replace("$1", inner)}`;
         });
         

web/src/ui.ts

@@ -16,7 +16,7 @@ export const elements = {
     activeChatAvatar: document.getElementById('active-chat-avatar') as HTMLDivElement,
     messagesContainer: document.getElementById('messages-container') as HTMLDivElement,
     messageForm: document.getElementById('message-form') as HTMLFormElement,
-    messageInput: document.getElementById('message-input') as HTMLInputElement,
+    messageInput: document.getElementById('message-input') as HTMLTextAreaElement,
     backToSidebarBtn: document.querySelector('.chat-header') as HTMLElement,
     sidebar: document.querySelector('.sidebar') as HTMLElement,
     appContainer: document.querySelector('.app-container') as HTMLElement,
@@ -465,6 +465,27 @@ export const ui = {
         const message = document.getElementById(msgId);
         if (message) message.remove();
     },
+
+    autoResizeTextArea(element: HTMLTextAreaElement) {
+        const resize = () => {
+            element.style.height = 'auto';
+            const offset = element.offsetHeight - element.clientHeight;
+            const newHeight = element.scrollHeight + offset;
+
+            if (element.scrollHeight > 0) {
+                element.style.height = `${newHeight}px`;
+            }
+        };
+
+        element.addEventListener('input', resize);
+        
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                resize();
+            }
+        });
+        observer.observe(element);
+    },
 };
 
 export class ScrollableView {