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;