diff --git a/web/app.html b/web/app.html index b614f5e..22caace 100644 --- a/web/app.html +++ b/web/app.html @@ -20,6 +20,7 @@ + @@ -94,11 +95,11 @@ diff --git a/web/src/app.ts b/web/src/app.ts index 1a704de..e8acdb4 100644 --- a/web/src/app.ts +++ b/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) { diff --git a/web/src/parser.ts b/web/src/parser.ts index fa29ec7..6cc56ff 100644 --- a/web/src/parser.ts +++ b/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)}`; }); diff --git a/web/src/ui.ts b/web/src/ui.ts index 82b6c2c..fd2ee93 100644 --- a/web/src/ui.ts +++ b/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 { diff --git a/web/style.css b/web/style.css index 2772706..a156320 100644 --- a/web/style.css +++ b/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; @@ -1009,6 +1035,11 @@ li { scroll-snap-align: start; scroll-snap-stop: always; } + + #message-input { + padding: 8px 12px; + max-height: 10rem; + } .extra-page { display: flex;