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

web/app.html

@@ -20,6 +20,7 @@
                 <button id="profile-sidebar-btn" class="icon-btn mif-person mif-2x" data-page="profile-page"></button>
                 <button id="chats-sidebar-btn" class="icon-btn mif-qa mif-2x" data-page="chat-page"></button>
                 <button id="settings-sidebar-btn" class="icon-btn mif-cog mif-2x" data-page="settings-page"></button>
+                <img data-resource="app-user-image">
             </aside>
             
             <!-- Sidebar -->
@@ -94,11 +95,11 @@
                             <!-- Input Panel -->
                             <footer id="chat-input-panel" class="chat-input-panel">
                                 <div class="input-actions-left">
-                                    <button id="chat-bottom-bar-btn" class="icon-btn mif-expand-less mif-3x" title="Expand"></button>
+                                    <button id="chat-bottom-bar-btn" class="chat-footer-btn icon-btn mif-expand-less mif-3x" title="Expand"></button>
                                 </div>
                                 <form class="input-form" id="message-form">
-                                    <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
-                                    <button type="submit" class="send-btn mif-paper-plane mif-3x" id="send-button">
+                                    <textarea type="text" id="message-input" rows="1" placeholder="Type a message..." autocomplete="off"></textarea>
+                                    <button type="submit" class="chat-footer-btn send-btn mif-paper-plane mif-3x" id="send-button">
                                     </button>
                                 </form>
                             </footer>

web/src/app.ts

@@ -190,6 +190,8 @@ function setupEventListeners() {
         ui.renderChatList(filtered, activeChatState, selectChat);
     });
 
+    ui.autoResizeTextArea(elements.messageInput);
+    
     elements.messageForm.addEventListener('submit', (e) => {
         e.preventDefault();
         sendMessage();
@@ -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 {

web/style.css

@@ -470,7 +470,19 @@ li {
     border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
-    padding: .2em;
+    padding: .6em .2em;
+    width: 60px;
+    align-items: center;
+}
+
+#desktop-aside * {
+    width: 38px;
+    height: 38px;
+}
+
+#desktop-aside img {
+    margin: .2rem;
+    margin-top: auto;
 }
 
 /* Sidebar Footer */
@@ -764,7 +776,7 @@ li {
 .chat-input-panel {
     padding: .8rem;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     gap: 16px;
     background-color: var(--bg-main);
 }
@@ -814,19 +826,24 @@ li {
     flex: 1;
     display: flex;
     gap: 12px;
-    align-items: center;
+    align-items: flex-end;
     min-width: 0;
 }
 
 #message-input {
     flex: 1;
+    overflow-y: scroll;
     padding: 12px 18px;
     background-color: var(--text-primary);
     border: medium solid var(--border-color);
     color: var(--bg-main);
     font-size: 0.95rem;
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
     min-width: 0;
+    resize: none;
+    line-height: 1.3;
+    max-height: 6rem;
+    box-sizing: border-box;
 }
 
 #message-input:focus {
@@ -836,6 +853,15 @@ li {
     background: rgba(255, 255, 255, 0.06);
 }
 
+#chat-bottom-bar-btn {
+    margin-bottom: 6px;
+}
+
+#send-button {
+    margin-bottom: 4px;
+    margin-right: 6px;
+}
+
 .send-btn {
     width: 44px;
     height: 44px;
@@ -1010,6 +1036,11 @@ li {
         scroll-snap-stop: always;
     }
 
+    #message-input {
+        padding: 8px 12px;
+        max-height: 10rem;
+    }
+    
     .extra-page {
         display: flex;
         width: 100%;