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

Add account setup workflow; move activeChatState to states.ts to avoid importing app.ts on ui.ts; add ScrollableView to ui.ts to contain and modularize scrollable views; make app layout use ScrollableView add option to delete data on settings page.
Some checks failed
Build Vite / build (24.x) (push) Has been cancelled
Details

Browse source
This commit is contained in:
天クマ 2026-08-16 17:33:59 -03:00
commit d4adfde73a
13 changed files with 652 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
dist/
node_modules/
.idea

2
package.json
View file

@ -6,7 +6,7 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
"preview": "tsc && vite build && vite preview"
},
"keywords": [],
"author": "",

175
web/app.html Normal file
View file

@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
<meta name="HandheldFriendly" content="true" />
<title>Pandora</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="loading.css">
<link rel="stylesheet" href="metroicons.css">
<link rel="manifest" href="./manifest.json">
</head>
<body>
<div class="app-container no-active-chat">
<div class="main-holder">
<aside id="desktop-aside">
<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>
</aside>
<!-- Sidebar -->
<aside class="sidebar">
<header class="sidebar-header">
<p class="app-name">PANDORA</p>
<div class="user-profile">
<!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
<div class="user-info">
<h3 id="pandora-username" data-content="app-user">Pandora User</h3>
</div>
</div>
</header>
<div class="search-container">
<div class="search-wrapper">
<input type="text" id="chat-search" placeholder="Search or start new chat...">
</div>
</div>
<div class="chat-list-container">
<div class="loading-chats" id="chats-loader">
<div class='loading-animation-wrapper'>
<div class="animation">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<ul class="chat-list" id="chat-list">
<!-- Chats will be dynamically injected here -->
</ul>
</div>
</aside>
<div class="_scrollableView" id="main-view">
<div class="extra-page" id="chat-page">
<!-- Main Chat Area -->
<main class="chat-area">
<!-- No Chat Selected State -->
<div class="no-chat-state" id="no-chat-state">
<div class="empty-state-content">
<div class="empty-state-icon mif-qa mif-3x">
</div>
<p>Select a contact to view the conversation or start a new chat.</p>
</div>
</div>
<!-- Active Chat State -->
<div class="active-chat-container hidden" id="active-chat-container">
<header class="chat-header">
<div class="active-contact-info">
<!-- <button class="icon-btn back-btn mif-arrow-left mif-2x" id="back-to-sidebar" title="Back to chats"></button> -->
<div class="avatar active-avatar" id="active-chat-avatar">C</div>
<div>
<h3 id="active-chat-name">Contact Name</h3>
<span class="contact-status" id="active-chat-status"></span>
</div>
</div>
<div class="chat-actions">
</div>
</header>
<!-- Messages Area -->
<div class="messages-container" id="messages-container">
<!-- Messages will be dynamically injected here -->
</div>
<!-- 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>
</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">
</button>
</form>
</footer>
<!-- Bottom Bar -->
<footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
<button id="markread-btn" class="icon-btn send-btn mif-done_all mif-2x" title="Mark read"></button>
<input id="attachment-input" style="display: none;" type="file">
<button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
</footer>
</div>
</main>
</div>
<section class="extra-page" id="profile-page">
<h2 class="big-title" data-content="app-user">Pandora User</h2>
<div class="content">
<img id="profile-page-picture" data-resource="app-user-image">
<div id="profile-page-user-info">
<p id="profile-page-user-number" data-content="app-user-number">Pandora User</p>
<input id="profile-page-status-input" placeholder="enter your status" data-value="app-user-status">
</div>
</div>
</section>
<section class="extra-page" id="settings-page">
<div class="modal-content">
<header class="modal-header">
<h2>SETTINGS</h2>
</header>
<div class="modal-body">
<h3>server</h3>
<div class="form-group">
<label for="settings-waha-url">WAHA Server URL</label>
<input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
</div>
<div class="form-group">
<label for="settings-session">Session ID</label>
<input type="text" id="settings-session" placeholder="session_01...">
</div>
<div class="form-group">
<label for="settings-api-key">API Key (X-API-KEY)</label>
<input type="password" id="settings-api-key" placeholder="Enter API Key">
</div>
<p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
<h3>chats</h3>
<div class="form-group">
<label for="settings-background-image">Chat background image</label>
<input type="text" id="settings-background-image" placeholder="Enter image URL">
</div>
<div class="form-group">
<label for="settings-background-opacity">Chat background opacity</label>
<input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
</div>
</div>
<div class="sidebar-footer">
<div class="api-status-badge">
<span class="pulse-dot"></span>
<span id="backend-status-text">Backend connected</span>
</div>
</div>
<footer class="modal-footer">
<button class="btn secondary-btn" id="purge-database">Delete data</button>
<button class="btn primary-btn" id="save-settings">Save</button>
</footer>
</div>
</section>
</div>
</div>
<!-- Client-side script loaded as ES Module -->
</div>
<script type="module" src="./src/app.ts"></script>
</body>
</html>

190
web/index.html
View file

@ -5,43 +5,64 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
<meta name="HandheldFriendly" content="true" />
<title>Pandora</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="loading.css">
<link rel="stylesheet" href="metroicons.css">
<link rel="manifest" href="./manifest.json">
</head>
<body>
<div class="app-container no-active-chat">
<aside id="desktop-aside">
<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>
</aside>
<!-- Sidebar -->
<aside class="sidebar">
<header class="sidebar-header">
<p class="app-name">PANDORA</p>
<div class="user-profile">
<!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
<div class="user-info">
<h3 id="pandora-username" data-content="app-user">Pandora User</h3>
<div class="app-container _scrollableView">
<section class="extra-page" id="welcome-page" style="display: flex;">
<h2 class="big-title" style="margin: 0 auto">Pandora</h2>
<div class="modal-content">
<div style="font-size: 20rem; margin: 0 0 auto auto; transform: translateX(40%); opacity: .4;" class="mif-qa mif"></div>
<div class="modal-body">
<p>
Welcome to Pandora, we need to get some things set up before you can start messaging. It shouldn't take long.
</p>
<p>This setup will guide you into linking your WAHA server to Pandora.</p>
</div>
<footer class="modal-footer">
<button class="btn primary-btn next-page-btn">Continue</button>
</footer>
</div>
</header>
<div class="search-container">
<div class="search-wrapper">
<input type="text" id="chat-search" placeholder="Search or start new chat...">
</section>
<section class="extra-page" id="server-page">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<h3>where's your server?</h3>
<div class="form-group">
<label for="settings-waha-url">WAHA Server URL</label>
<input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
</div>
<h3>credentials</h3>
<div class="form-group">
<label for="settings-session">Session ID</label>
<input type="text" id="settings-session" placeholder="session_01...">
</div>
<div class="chat-list-container">
<div class="loading-chats" id="chats-loader">
<div class='loading-animation-wrapper'>
<div class="form-group">
<label for="settings-api-key">API Key</label>
<input type="password" id="settings-api-key" placeholder="Enter API Key">
</div>
<p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
<hr style="margin-top: auto">
<h3>I don't have a server</h3>
<p>You can setup a WAHA server on a system running Docker. <a href="https://waha.devlike.pro/docs/how-to/install/">See documentation.</a></p>
</div>
<footer class="modal-footer">
<button class="btn primary-btn next-page-btn">Connect</button>
</footer>
</div>
</section>
<section class="extra-page" id="connecting-page">
<h2 class="big-title" style="margin: 0 auto">Connecting</h2>
<div class="modal-content">
<div style="font-size: 20rem; margin: 0 0 auto auto; transform: translateX(40%); opacity: .4;" class="mif-broadcast mif"></div>
<div class="modal-body">
<p style="text-align: center;">Please wait while we test your connection to this WAHA server</p>
<p class="dim" id="connecting-status" style="text-align: center;">Asking for server version...</p>
<div class='loading-animation-wrapper' id="connecting-animation">
<div class="animation">
<div class="dot"></div>
<div class="dot"></div>
@ -51,124 +72,13 @@
</div>
</div>
</div>
<ul class="chat-list" id="chat-list">
<!-- Chats will be dynamically injected here -->
</ul>
</div>
</aside>
<div class="extra-page" id="chat-page">
<!-- Main Chat Area -->
<main class="chat-area">
<!-- No Chat Selected State -->
<div class="no-chat-state" id="no-chat-state">
<div class="empty-state-content">
<div class="empty-state-icon mif-qa mif-3x">
</div>
<p>Select a contact to view the conversation or start a new chat.</p>
</div>
</div>
<!-- Active Chat State -->
<div class="active-chat-container hidden" id="active-chat-container">
<header class="chat-header">
<div class="active-contact-info">
<!-- <button class="icon-btn back-btn mif-arrow-left mif-2x" id="back-to-sidebar" title="Back to chats"></button> -->
<div class="avatar active-avatar" id="active-chat-avatar">C</div>
<div>
<h3 id="active-chat-name">Contact Name</h3>
<span class="contact-status" id="active-chat-status"></span>
</div>
</div>
<div class="chat-actions">
<!-- <button class="icon-btn" title="Search in conversation"><i data-lucide="search"></i></button>
<button class="icon-btn" title="Call"><i data-lucide="phone"></i></button>
<button class="icon-btn" title="Video Call"><i data-lucide="video"></i></button>
<button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> -->
</div>
</header>
<!-- Messages Area -->
<div class="messages-container" id="messages-container">
<!-- Messages will be dynamically injected here -->
</div>
<!-- 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>
</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">
</button>
</form>
</footer>
<!-- Bottom Bar -->
<footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
<button id="markread-btn" class="icon-btn send-btn mif-done_all mif-2x" title="Mark read"></button>
<input id="attachment-input" style="display: none;" type="file">
<button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
</footer>
</div>
</main>
</div>
<section class="extra-page" id="profile-page">
<h2 data-content="app-user">Pandora User</h2>
<div class="content">
<img id="profile-page-picture" data-resource="app-user-image">
<div id="profile-page-user-info">
<p id="profile-page-user-number" data-content="app-user-number">Pandora User</p>
<input id="profile-page-status-input" placeholder="enter your status" data-value="app-user-status">
</div>
</div>
</section>
<section class="extra-page" id="settings-page">
<div class="modal-content">
<header class="modal-header">
<h2>SETTINGS</h2>
</header>
<div class="modal-body">
<h3>server</h3>
<div class="form-group">
<label for="settings-waha-url">WAHA Server URL</label>
<input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
</div>
<div class="form-group">
<label for="settings-session">Session ID</label>
<input type="text" id="settings-session" placeholder="session_01...">
</div>
<div class="form-group">
<label for="settings-api-key">API Key (X-API-KEY)</label>
<input type="password" id="settings-api-key" placeholder="Enter API Key">
</div>
<p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
<h3>chats</h3>
<div class="form-group">
<label for="settings-background-image">Chat background image</label>
<input type="text" id="settings-background-image" placeholder="Enter image URL">
</div>
<div class="form-group">
<label for="settings-background-opacity">Chat background opacity</label>
<input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
</div>
</div>
<footer class="modal-footer">
<button class="btn primary-btn" id="save-settings">Save</button>
<button id="connecting-next-btn" class="btn primary-btn next-page-btn" style="display: none;">Finish</button>
</footer>
<div class="sidebar-footer">
<div class="api-status-badge">
<span class="pulse-dot"></span>
<span id="backend-status-text">Backend connected</span>
</div>
</div>
</div>
</section>
</div>
<!-- Client-side script loaded as ES Module -->
<script type="module" src="./src/app.ts"></script>
<script type="module" src="./src/setup.ts"></script>
</body>
</html>

66
web/src/app.ts
View file

@ -1,28 +1,34 @@
import { config } from "./config";
import { waha } from "./waha";
import { ui, elements } from "./ui";
import { ui, elements, views } from "./ui";
import { websocket } from "./websocket";
import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils";
import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, markRead, sendStatus, updateOnlineStatus } from "./storage";
import { upsertMessages } from "./db";
import { deleteDatabase, upsertMessages } from "./db";
import { showNotification } from "./notification";
import type { Chat, Message, WebSocketEvent } from "./types";
import { activeChatState, setActiveChatState } from "./states";
let activeChatState: Chat | null = null;
const messageTone = new Audio("./message.ogg");
const longPressEvent = new CustomEvent("longpress");
export let isLoadingChat = false;
export let notificationAuthorization: NotificationPermission = "default";
const mainViewEl = document.getElementById("main-view");
if (!mainViewEl) throw console.error();
const mainView = views.get(mainViewEl);
document.addEventListener('DOMContentLoaded', async () => {
updateSidebarPosition();
askForNotificationPermission();
elements.inputApiKey.value = config.apiKey;
elements.inputWahaUrl.value = config.wahaUrl;
elements.inputSession.value = config.session;
elements.inputBackgroundImage.value = config.bgImg;
elements.inputBackgroundOpacity.value = config.bgOpacity;
if (elements.inputApiKey) elements.inputApiKey.value = config.apiKey;
if (elements.inputWahaUrl) elements.inputWahaUrl.value = config.wahaUrl;
if (elements.inputSession) elements.inputSession.value = config.session;
if (elements.inputBackgroundImage) elements.inputBackgroundImage.value = config.bgImg;
if (elements.inputBackgroundOpacity) elements.inputBackgroundOpacity.value = config.bgOpacity;
if (elements.activeChatContainer) {
elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
}
await updateOnlineStatus();
setupEventListeners();
try {
@ -62,6 +68,15 @@ async function setupElementsData() {
}
}
function purgeDatabase(ask: boolean = true) {
if (ask) {
if (!(confirm("Are you sure you want to delete all cached messages?") && confirm("This cannot be undone. Proceed?"))) return;
}
localStorage.clear();
deleteDatabase();
location.reload();
}
function loadChats() {
elements.chatsLoader.classList.remove('hidden');
try {
@ -115,6 +130,8 @@ function scrollToList(smooth = true) {
}
function setupEventListeners() {
window.addEventListener('resize', updateSidebarPosition);
if (!window.location.hash) {
window.location.hash = '';
}
@ -150,6 +167,14 @@ function setupEventListeners() {
}, 100);
});
elements.appContainer.addEventListener('resize', () => {
if (window.innerWidth > 768) {
elements.desktopAside.after(elements.sidebar);
} else {
mainViewEl?.insertBefore(elements.sidebar, mainViewEl.firstChild);
}
})
document.addEventListener('keydown', (e) => {
if (e.code == "Escape") {
e.preventDefault();
@ -203,12 +228,17 @@ function setupEventListeners() {
elements.desktopSidebarButtons.forEach(sidebarBtn => {
sidebarBtn.addEventListener('click', () => {
const page = sidebarBtn.dataset.page;
if (page) ui.showExtraPage(page);
if (!page) return;
const pageEl = document.getElementById(page);
if (!pageEl) return;
if (page) mainView?.scrollTo(pageEl);
})
})
elements.saveSettingsBtn.addEventListener('click', saveSettings);
elements.purgeDatabaseButton.addEventListener('click', () => purgeDatabase(true));
elements.inputUserStatus.addEventListener('input', debounce(async function() {
const result = await sendStatus(elements.inputUserStatus.value);
if (result?.success) {
@ -244,6 +274,20 @@ function setupEventListeners() {
})
}
function updateSidebarPosition() {
if (!mainViewEl || !elements.sidebar || !elements.desktopAside) return;
if (window.innerWidth > 768) {
if (elements.sidebar.parentElement !== elements.appContainer) {
elements.desktopAside.after(elements.sidebar);
}
} else {
if (elements.sidebar.parentElement !== mainViewEl) {
mainViewEl.insertBefore(elements.sidebar, mainViewEl.firstChild);
}
}
}
function initWebSocket() {
websocket.connect((data: WebSocketEvent) => {
const ev = data.event;
@ -292,7 +336,7 @@ async function selectChat(chat: Chat, isPopState = false, smoothScroll = true) {
if (isLoadingChat) return;
isLoadingChat = true;
activeChatState = chat;
setActiveChatState(chat);
chat.unreadCount = 0;
@ -336,7 +380,7 @@ async function selectChat(chat: Chat, isPopState = false, smoothScroll = true) {
}
async function closeActiveChat(isPopState = false) {
activeChatState = null;
setActiveChatState(null);
if (window.innerWidth <= 768) {
scrollToList();

4
web/src/config.ts
View file

@ -8,8 +8,8 @@ export interface Config {
}
export const config: Config = {
wahaUrl: localStorage.getItem('waha_url') || 'http://inspiran.beetal-castor.ts.net:3100',
session: localStorage.getItem('waha_session') || 'session_01kxc62bk5fs8vh4v127k88a7j',
wahaUrl: localStorage.getItem('waha_url') || '',
session: localStorage.getItem('waha_session') || '',
apiKey: localStorage.getItem('waha_api_key') || '',
bgImg: localStorage.getItem('background_image') || '',
bgOpacity: localStorage.getItem('background_opacity') || '0.4',

4
web/src/db.ts
View file

@ -243,3 +243,7 @@ export async function loadMedia(reqId: string): Promise<StoredMedia | undefined>
req.onerror = () => reject(req.error);
});
}
export function deleteDatabase() {
indexedDB.deleteDatabase(DB_NAME);
}

57
web/src/setup.ts Normal file
View file

@ -0,0 +1,57 @@
import { config } from "./config";
import { elements, ScrollableView, ui, views } from "./ui";
import { waha } from "./waha";
const page = views.get(elements.appContainer);
page?.scrollToIndex(0);
const statusConnection = document.getElementById("connecting-status");
const connectingPage = document.getElementById("connecting-page");
const loading = document.getElementById("connecting-animation");
const connectingNextBtn = document.getElementById("connecting-next-btn");
const settingsApiKey = document.getElementById("settings-api-key") as HTMLInputElement;
const settingsSession = document.getElementById("settings-session") as HTMLInputElement;
const settingsWahaURL = document.getElementById("settings-waha-url") as HTMLInputElement;
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
window.addEventListener('load', () => {
window.scrollTo(0, 0);
if (localStorage.getItem('setupComplete') == 'true') {
window.location.href = 'app.html';
}
});
if (connectingPage) {
connectingPage.addEventListener('intoView', () => {
testConnection();
})
}
connectingNextBtn?.addEventListener('click', () => {
localStorage.setItem('setupComplete', 'true');
window.location.href = "app.html";
})
async function testConnection() {
console.log(settingsWahaURL?.value)
config.save(settingsWahaURL?.value, settingsSession?.value, settingsApiKey?.value, "", "");
if (!statusConnection || !connectingNextBtn || !loading) return;
statusConnection.textContent = "Asking for server version...";
try {
const resp = await waha.getMyInfo();
if (resp.pushName != null) {
statusConnection.textContent = `Logged in as ${resp.pushName}`
connectingNextBtn.style.display = 'flex';
loading.style.display = 'none';
} else {
page?.previows();
}
} catch (e) {
console.log(e);
page?.previows();
}
}

7
web/src/states.ts Normal file
View file

@ -0,0 +1,7 @@
import { Chat } from "./types";
export let activeChatState: Chat | null = null;
export function setActiveChatState(value: Chat | null) {
activeChatState = value;
}

152
web/src/ui.ts
View file

@ -1,7 +1,7 @@
import { formatTime, normalizeId } from "./utils";
import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage";
import { getCurrentChat } from "./app";
import type { Chat, Message } from "./types";
import { activeChatState } from "./states";
export const elements = {
chatList: document.getElementById('chat-list') as HTMLUListElement,
@ -22,6 +22,7 @@ export const elements = {
settingsModal: document.getElementById('settings-page') as HTMLElement,
settingsIconBtn: document.getElementById('settings-sidebar-btn') as HTMLButtonElement,
saveSettingsBtn: document.getElementById('save-settings') as HTMLButtonElement,
purgeDatabaseButton: document.getElementById('purge-database') as HTMLButtonElement,
inputWahaUrl: document.getElementById('settings-waha-url') as HTMLInputElement,
inputSession: document.getElementById('settings-session') as HTMLInputElement,
inputApiKey: document.getElementById('settings-api-key') as HTMLInputElement,
@ -36,25 +37,20 @@ export const elements = {
markreadBtn: document.getElementById('markread-btn') as HTMLButtonElement,
extraPages: document.querySelectorAll('.extra-page') as NodeListOf<HTMLElement>,
desktopSidebarButtons: document.querySelectorAll("#desktop-aside button") as NodeListOf<HTMLButtonElement>,
desktopAside: document.getElementById('desktop-aside') as HTMLElement,
contentUserName: document.querySelectorAll('[data-content="app-user"]') as NodeListOf<HTMLElement>,
contentUserNumber: document.querySelectorAll('[data-content="app-user-number"]') as NodeListOf<HTMLElement>,
resourceUserPic: document.querySelectorAll('[data-resource="app-user-image"]') as NodeListOf<HTMLImageElement>,
valueUserStatus: document.querySelectorAll('[data-value="app-user-status"]') as NodeListOf<HTMLInputElement>,
inputUserStatus: document.getElementById('profile-page-status-input') as HTMLInputElement,
selectable: document.querySelectorAll('.selectable') as NodeListOf<HTMLElement>,
nextPageButtons: document.querySelectorAll('.next-page-btn') as NodeListOf<HTMLElement>,
scrollableViews: document.querySelectorAll('._scrollableView') as NodeListOf<HTMLElement>
};
export const ui = {
showExtraPage(pageId: string) {
elements.extraPages.forEach(page => {
if (page.id != pageId) {
page.style.display = "none";
} else {
page.style.display = "flex";
}
})
},
export const views = new Map<HTMLElement, ScrollableView>;
export const ui = {
/**
* Switch view state when a contact chat is opened or closed
*/
@ -72,7 +68,19 @@ export const ui = {
* Scroll message list automatically to bottom
*/
scrollToBottom() {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
elements.messagesContainer.scrollTop = elements.messagesContainer.scrollHeight;
});
});
},
ensureScroll(container: HTMLElement, after: Function) {
const scrolled = container.scrollTop === (container.scrollHeight - container.clientHeight);
after();
if (scrolled) {
container.scrollTop = container.scrollHeight;
}
},
/**
@ -103,6 +111,7 @@ export const ui = {
}
for (const chat of chats) {
if (chat.timestamp == null) return;
const li = document.createElement('li');
li.className = `chat-item selectable ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
li.dataset.id = chat.id;
@ -125,8 +134,8 @@ export const ui = {
<span class="chat-item-time">${timeStr}</span>
</div>
<div class="chat-item-preview">
<span class="chat-item-msg" data-chatid="${chat.id}">
${chat.lastMessage || 'No messages yet'}
<span class="chat-item-msg${chat.lastMessage == null ? ' text-accent' : ''}" data-chatid="${chat.id}">
${chat.lastMessage || '...'}
</span>
${hasUnread ? `<span class="unread-badge">${chat.unreadCount}</span>` : ''}
</div>
@ -156,8 +165,6 @@ export const ui = {
messageItem.innerText = msg.body || msg.text || 'Media message';
time.innerText = msg.timestamp ? formatTime(msg.timestamp) : formatTime(Date.now());
const activeChatState = getCurrentChat();
if (!msg.fromMe && (!activeChatState || activeChatState.id !== (msg.fromMe ? msg.to : msg.from))) {
const unreadBadge = chatNode.querySelector('.unread-badge') as HTMLElement;
if (unreadBadge) {
@ -351,9 +358,11 @@ export const ui = {
const img = document.createElement('img');
img.classList.add('message-image-attachement');
img.src = objectUrl;
bubble.after(img);
const content = bubble.querySelector('.message-content');
if (content) content.remove();
this.ensureScroll(elements.messagesContainer, () => {
bubble.before(img);
})
// const content = bubble.querySelector('.message-content');
// if (content) content.remove(); // TODO make images attachment with text look cooler
} else {
(e.target as HTMLAnchorElement).textContent = media.filename || `Download ${mediaMsg.media.filename}`;
}
@ -362,7 +371,9 @@ export const ui = {
a.addEventListener('click', clickListener);
}
this.ensureScroll(elements.messagesContainer, () => {
contentEl.appendChild(a);
});
if (!isLocal && msg._data?.mimetype?.startsWith('image/')) {
a.click();
@ -435,5 +446,108 @@ export const ui = {
removeChatMessage(msgId: string) {
const message = document.getElementById(msgId);
if (message) message.remove();
}
},
};
export class ScrollableView {
private observer: IntersectionObserver | null = null;
private activePage: HTMLElement | null = null;
container: HTMLElement;
isScrollingProgrammatically = false;
scrollTimeout: ReturnType<typeof setTimeout> | null = null;
constructor(container: HTMLElement) {
this.container = container;
this.setupIntersectionObserver();
window.addEventListener('scroll', (e) => {
if (this.isScrollingProgrammatically) e.preventDefault();
});
container.querySelectorAll('.next-page-btn').forEach(nextBtn => {
nextBtn.addEventListener('click', () => {
this.next();
})
})
}
private setupIntersectionObserver() {
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.target !== this.activePage) {
this.activePage = entry.target as HTMLElement;
entry.target.dispatchEvent(new CustomEvent('intoView', {
bubbles: true,
detail: {
page: entry.target,
index: this.getCurrentIndex()
}
}));
}
});
}, {
root: this.container,
threshold: 0.6
});
this.observePages();
}
observePages() {
if (!this.observer) return;
Array.from(this.container.children).forEach(child => {
this.observer?.observe(child);
});
}
get pages(): HTMLElement[] {
return Array.from(this.container.children) as HTMLElement[];
}
getCurrentIndex(): number {
const width = this.container.clientWidth;
if (width === 0) return 0;
return Math.round(this.container.scrollLeft / width);
}
getCurrentScreen(): HTMLElement | null {
const pages = this.pages;
return pages[this.getCurrentIndex()] || null;
}
scrollToIndex(index: number, smooth = true) {
const pages = this.pages;
if (index >= 0 && index < pages.length) {
this.scrollTo(pages[index], smooth);
}
}
next(smooth = true) {
this.scrollToIndex(this.getCurrentIndex() + 1, smooth);
}
previows(smooth = true) {
this.scrollToIndex(this.getCurrentIndex() - 1, smooth);
}
scrollTo(element: HTMLElement, smooth = true) {
this.isScrollingProgrammatically = true;
element.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
inline: 'start',
block: 'nearest'
});
setTimeout(() => { this.isScrollingProgrammatically = false; }, smooth ? 400 : 50);
}
getCurrentExtraPage(): number {
const pages = Array.from(elements.extraPages);
const activeIndex = pages.findIndex(page => page.classList.contains("shown"));
return activeIndex !== -1 ? activeIndex : 0;
}
}
elements.scrollableViews.forEach(view => {
views.set(view, new ScrollableView(view));
})

8
web/src/waha.ts
View file

@ -79,11 +79,11 @@ export const waha = {
chatId = chatId._serialized || chatId.user || JSON.stringify(chatId);
}
return {
id: chatId || chat.chatId || chat.name,
name: chat.name || "Unknown Contact",
id: chatId || chat.chatId || null,
name: chat.name || null,
unreadCount: chat.unreadCount || 0,
lastMessage: chat.lastMessage?.body || chat.lastMessageText || "Click to open chat",
timestamp: chat.lastMessage?.timestamp || new Date()
lastMessage: chat.lastMessage?.body || chat.lastMessageText || null,
timestamp: chat.lastMessage?.timestamp || null
};
});
},

81
web/style.css
View file

@ -93,9 +93,6 @@ html, body {
body {
background-color: var(--bg-main);
color: var(--text-primary);
background-image:
radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
}
a {
@ -129,16 +126,44 @@ input:focus {
.app-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100dvh;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.main-holder {
display: flex;
}
._scrollableView, ._scrollableContainer {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.app-container::-webkit-scrollbar, ._scrollableContainer::-webkit-scrollbar, ._scrollableView::-webkit-scrollbar {
display: none;
}
.app-name {
font-weight: bold;
}
.dim {
opacity: .6;
}
/* Sidebar Styling */
.sidebar {
width: 380px;
@ -237,10 +262,6 @@ input:focus {
border-color: var(--border-hover);
}
#chat-bottom-bar .icon-btn:hover::before {
color: var(--bg-main);
}
.icon-btn:active {
transform: translateY(0);
}
@ -444,6 +465,7 @@ input:focus {
.api-status-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.75rem;
color: var(--text-secondary);
@ -480,6 +502,7 @@ input:focus {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
}
/* Empty State */
@ -847,8 +870,14 @@ input:focus {
/* Extra Pages */
.extra-page {
display: none;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 100%;
}
.extra-page-content {
@ -875,7 +904,7 @@ input:focus {
flex: 1;
}
#profile-page h2 {
.big-title {
padding: 1.4rem;
font-size: 5rem;
text-wrap-mode: nowrap;
@ -935,13 +964,12 @@ input:focus {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Hide scrollbars */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
-ms-overflow-style: none;
}
.app-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
display: none;
}
.sidebar {
@ -969,7 +997,7 @@ input:focus {
}
.extra-page {
display: block;
display: flex;
width: 100%;
flex: 0 0 100%;
position: relative;
@ -1018,7 +1046,6 @@ input:focus {
.modal-content {
width: 100%;
background: var(--bg-main);
padding: 24px;
box-shadow: var(--shadow-lg);
backdrop-filter: var(--glass-blur);
display: flex;
@ -1035,7 +1062,7 @@ input:focus {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 1em 2em 0em 2em;
}
.modal-header h2 {
@ -1047,6 +1074,11 @@ input:focus {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
overflow-y: auto;
flex: 1;
overflow-x: hidden;
padding: 0 2rem 0 2rem;
}
.form-group {
@ -1071,7 +1103,7 @@ input:focus {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: auto;
padding: 1rem 2rem;
}
.btn {
@ -1084,8 +1116,15 @@ input:focus {
}
.primary-btn {
background: var(--accent-gradient);
color: white;
background: transparent;
color: var(--text-primary);
border: medium solid var(--bg-secondary);
}
.primary-btn:hover {
background: var(--text-primary);
color: var(--bg-main);
border-color: var(--text-primary);
}
.secondary-btn {