tenkuma/pandora
Watch
1
0
Fork
You've already forked pandora
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
天クマ 2026-08-17 19:45:31 -03:00
commit c5218f3c1a
5 changed files with 67 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/app.html
View file

@ -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>

8
web/src/app.ts
View file

@ -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) {

2
web/src/parser.ts
View file

@ -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)}`;
});

23
web/src/ui.ts
View file

@ -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 {

39
web/style.css
View file

@ -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;