tenkuma/pandora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change layout to look more like WhatsApp for Windows Phone and less like AI slop.

Browse source
This commit is contained in:
天クマ 2026-07-13 11:24:19 -03:00
commit 9d77ea5a97
9 changed files with 132 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/app.js → docs/app.js
View file

@ -115,7 +115,7 @@ function handleIncomingMessage(msg) {
async function fetchChats() {
const userInfo = await waha.getMyInfo();
elements.loggedUserName.textContent = userInfo.pushName;
elements.userIcon.innerText = userInfo.pushName[0];
// elements.userIcon.innerText = userInfo.pushName[0];
elements.chatsLoader.classList.remove('hidden');
try {
chatsState = await waha.getChats();
@ -143,7 +143,7 @@ async function selectChat(chat) {
ui.renderChatList(chatsState, activeChatState, selectChat);
ui.toggleChatState(true);
elements.activeChatName.textContent = chat.name;
elements.activeChatName.textContent = chat.name.toUpperCase();
elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
elements.messagesContainer.innerHTML = '<div class="loading-chats"><div class="spinner"></div><span>Loading messages...</span></div>';

0
public/config.js → docs/config.js
View file

27
public/index.html → docs/index.html
View file

@ -8,39 +8,34 @@
<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">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://unpkg.com/lucide@latest" defer></script>
</head>
<body>
<div class="app-container">
<!-- 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 id="pandora-user-icon" class="avatar user-avatar">P</div> -->
<div class="user-info">
<h3 id="pandora-username">Pandora User</h3>
<span class="status-indicator online">Online</span>
</div>
</div>
<div class="header-actions">
<button class="icon-btn" title="New Chat"><i data-lucide="message-square-plus"></i></button>
<button class="icon-btn" id="refresh-chats-btn" title="Refresh Chats"><i data-lucide="refresh-cw"></i></button>
<button class="icon-btn" title="Settings"><i data-lucide="settings"></i></button>
<button class="text-btn" title="New Chat">new chat</button>
<button class="text-btn" id="refresh-chats-btn" title="Refresh Chats">refresh</button>
<button class="text-btn" title="Settings">settings</button>
</div>
</header>
<div class="search-container">
<div class="search-wrapper">
<i data-lucide="search" class="search-icon"></i>
<input type="text" id="chat-search" placeholder="Search or start new chat...">
</div>
</div>
<div class="chat-list-container">
<div class="chat-list-header">
<span>Recent Chats</span>
<span class="badge" id="chat-count">0</span>
</div>
<div class="loading-chats" id="chats-loader">
<div class="spinner"></div>
<span>Loading chats...</span>
@ -75,7 +70,7 @@
<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" id="back-to-sidebar"><i data-lucide="arrow-left"></i></button>
<!-- <button class="icon-btn back-btn" id="back-to-sidebar"><i data-lucide="arrow-left"></i></button> -->
<div class="avatar active-avatar" id="active-chat-avatar">C</div>
<div>
<h3 id="active-chat-name">Contact Name</h3>
@ -83,10 +78,10 @@
</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="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>
<button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> -->
</div>
</header>
@ -99,7 +94,7 @@
<footer class="chat-input-panel">
<div class="input-actions-left">
<button class="icon-btn" title="Attach file"><i data-lucide="paperclip"></i></button>
<button class="icon-btn" title="Add emoji"><i data-lucide="smile"></i></button>
<!-- <button class="icon-btn" title="Add emoji"><i data-lucide="smile"></i></button> -->
</div>
<form class="input-form" id="message-form">
<input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
@ -116,7 +111,7 @@
<div class="modal-overlay hidden" id="settings-modal">
<div class="modal-content">
<header class="modal-header">
<h2>WAHA Connection Settings</h2>
<h2>SETTINGS</h2>
<button class="icon-btn close-modal-btn" id="close-settings"><i data-lucide="x"></i></button>
</header>
<div class="modal-body">

184
public/style.css → docs/style.css
View file

@ -1,19 +1,20 @@
:root {
--bg-main: #090d16;
--sidebar-bg: rgba(17, 24, 39, 0.75);
--chat-bg: rgba(15, 23, 42, 0.6);
--bg-main: black;
--bg-secondary: #242424;
--sidebar-bg: black;
--chat-bg: black;
--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent: #6366f1;
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
--accent: white;
--accent-gradient: black;
--accent-hover: #4f46e5;
--online-color: #10b981;
--bubble-incoming: rgba(30, 41, 59, 0.85);
--bubble-outgoing: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
--input-bg: rgba(15, 23, 42, 0.8);
--online-color: rgba(255, 255, 255, 0.6);
--bubble-incoming: #01abaa;
--bubble-outgoing: #016f6e;
--input-bg: black;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
@ -24,7 +25,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
@ -37,6 +38,31 @@ body {
radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
}
button {
background-color: var(--bg-main);
border: none;
color: var(--text-primary);
transition: .4s;
}
button:hover {
color: var(--text-secondary);
}
input {
background: var(--bg-main);
color: var(--accent);
border: none;
padding: 1em;
transition: .2s;
}
input:focus {
background-color: var(--text-primary);
color: var(--bg-main);
outline: none;
}
.app-container {
display: flex;
width: 100vw;
@ -45,6 +71,10 @@ body {
backdrop-filter: var(--glass-blur);
}
.app-name {
font-weight: bolder;
}
/* Sidebar Styling */
.sidebar {
width: 380px;
@ -57,11 +87,14 @@ body {
}
.sidebar-header {
padding: 20px;
padding: 20px 20px 0px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
flex-direction: column;
align-items: self-start;
}
#pandora-username {
font-size: xx-large;
}
.user-profile {
@ -73,7 +106,6 @@ body {
.avatar {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
@ -86,6 +118,10 @@ body {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar img {
max-width: 100%;
}
.user-avatar {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
@ -121,9 +157,8 @@ body {
.icon-btn {
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.03);
border: none;
background: var(--bg-main);
color: var(--text-secondary);
display: flex;
align-items: center;
@ -143,6 +178,10 @@ body {
transform: translateY(0);
}
.text-btn {
font-size: larger;
}
/* Search Bar */
.search-container {
padding: 16px 20px;
@ -165,11 +204,8 @@ body {
#chat-search {
width: 100%;
padding: 12px 14px 12px 42px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: rgba(15, 23, 42, 0.6);
color: var(--text-primary);
padding: 12px;
border: none;
font-size: 0.9rem;
transition: all 0.25s ease;
}
@ -177,7 +213,8 @@ body {
#chat-search:focus {
outline: none;
border-color: var(--accent);
background: rgba(15, 23, 42, 0.9);
background: white;
color: var(--bg-main);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
@ -223,7 +260,6 @@ body {
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
@ -233,11 +269,6 @@ body {
background: rgba(255, 255, 255, 0.04);
}
.chat-item.active {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.25);
}
.chat-item-info {
flex: 1;
min-width: 0;
@ -274,7 +305,7 @@ body {
.chat-item-msg {
font-size: 0.82rem;
color: var(--text-secondary);
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -283,7 +314,7 @@ body {
.chat-item .unread-badge {
background: var(--accent);
color: white;
color: var(--bg-main);
font-size: 0.7rem;
min-width: 18px;
height: 18px;
@ -322,8 +353,7 @@ body {
/* Sidebar Footer */
.sidebar-footer {
padding: 14px 20px;
border-top: 1px solid var(--border-color);
background: rgba(10, 15, 26, 0.4);
background: var(--bg-secondary);
}
.api-status-badge {
@ -418,11 +448,10 @@ body {
.chat-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(15, 23, 42, 0.3);
background: var(--bg-main);
}
.active-contact-info {
@ -435,12 +464,12 @@ body {
width: 42px;
height: 42px;
border-radius: 12px;
display: none;
}
.active-contact-info h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
font-weight: bolder;
}
.contact-status {
@ -474,7 +503,6 @@ body {
display: flex;
flex-direction: column;
max-width: 65%;
gap: 4px;
}
.message-group.incoming {
@ -488,14 +516,20 @@ body {
.message-sender {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
margin-left: 12px;
color: var(--text-primary);
margin-bottom: 2px;
width: 100%;
display: flex;
}
.message-indicator {
width: 0;
height: 0;
margin: 0px 10px;
}
.message-bubble {
padding: 12px 16px;
border-radius: 18px;
font-size: 0.92rem;
line-height: 1.5;
position: relative;
@ -506,14 +540,23 @@ body {
.message-group.incoming .message-bubble {
background-color: var(--bubble-incoming);
color: var(--text-primary);
border-top-left-radius: 4px;
border: 1px solid var(--border-color);
}
.message-group.outgoing .message-bubble {
background: var(--bubble-outgoing);
color: white;
border-top-right-radius: 4px;
}
.message-group.outgoing .message-indicator {
border-left: 10px solid transparent;
border-bottom: 10px solid var(--bubble-outgoing);
margin-left: auto;
}
.message-group.incoming .message-indicator {
border-right: 10px solid transparent;
border-bottom: 10px solid var(--bubble-incoming);
}
.message-meta {
@ -522,24 +565,21 @@ body {
justify-content: flex-end;
gap: 4px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.65);
margin-top: 4px;
}
.message-group.incoming .message-meta {
color: var(--text-muted);
}
/* Chat Input Panel */
.chat-input-panel {
padding: 20px 24px;
background: var(--input-bg);
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 16px;
}
.chat-input-panel button {
background-color: transparent;
}
.input-actions-left {
display: flex;
gap: 8px;
@ -555,15 +595,15 @@ body {
#message-input {
flex: 1;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.04);
background-color: white;
border: 1px solid var(--border-color);
border-radius: 12px;
color: var(--text-primary);
color: var(--bg-main);
font-size: 0.95rem;
transition: all 0.2s ease;
}
#message-input:focus {
color: var(--text-primary);
outline: none;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.06);
@ -573,7 +613,6 @@ body {
.send-btn {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-gradient);
border: none;
color: white;
@ -611,7 +650,7 @@ body {
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
@ -663,18 +702,12 @@ body {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
transition: all 0.3s ease;
}
.modal-content {
background: rgba(30, 41, 59, 0.85);
border: 1px solid var(--border-color);
border-radius: 16px;
width: 90%;
max-width: 480px;
background: var(--bg-main);
padding: 24px;
box-shadow: var(--shadow-lg);
backdrop-filter: var(--glass-blur);
@ -688,7 +721,7 @@ body {
}
.modal-header h2 {
font-size: 1.2rem;
font-size: xx-large;
font-weight: 600;
}
@ -710,20 +743,6 @@ body {
font-weight: 500;
}
.form-group input {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: rgba(15, 23, 42, 0.5);
color: var(--text-primary);
font-size: 0.9rem;
}
.form-group input:focus {
outline: none;
border-color: var(--accent);
}
.settings-warning {
font-size: 0.75rem;
color: var(--text-muted);
@ -734,12 +753,11 @@ body {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
margin-top: auto;
}
.btn {
padding: 10px 18px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
@ -758,12 +776,12 @@ body {
}
.secondary-btn {
background: rgba(255, 255, 255, 0.05);
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.secondary-btn:hover {
background: rgba(255, 255, 255, 0.1);
background: var(--text-primary);
color: var(--bg-main);
}

22
public/ui.js → docs/ui.js
View file

@ -1,10 +1,10 @@
import { formatTime } from "./utils.js";
import { waha } from "./waha.js";
// DOM Selector Cache
export const elements = {
chatList: document.getElementById('chat-list'),
chatsLoader: document.getElementById('chats-loader'),
chatCountBadge: document.getElementById('chat-count'),
chatSearch: document.getElementById('chat-search'),
refreshChatsBtn: document.getElementById('refresh-chats-btn'),
backendStatusText: document.getElementById('backend-status-text'),
@ -16,7 +16,8 @@ export const elements = {
messagesContainer: document.getElementById('messages-container'),
messageForm: document.getElementById('message-form'),
messageInput: document.getElementById('message-input'),
backToSidebarBtn: document.getElementById('back-to-sidebar'),
// backToSidebarBtn: document.getElementById('back-to-sidebar'),
backToSidebarBtn: document.getElementById('active-chat-container'),
sidebar: document.querySelector('.sidebar'),
settingsModal: document.getElementById('settings-modal'),
settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'),
@ -27,7 +28,7 @@ export const elements = {
inputSession: document.getElementById('settings-session'),
inputApiKey: document.getElementById('settings-api-key'),
loggedUserName: document.getElementById('pandora-username'),
userIcon: document.getElementById('pandora-user-icon')
// userIcon: document.getElementById('pandora-user-icon')
};
export const ui = {
@ -81,24 +82,24 @@ export const ui = {
*/
renderChatList(chats, activeChat, onChatSelect) {
elements.chatList.innerHTML = '';
elements.chatCountBadge.textContent = chats.length;
if (chats.length === 0) {
elements.chatList.innerHTML = `<li class="loading-chats">No chats found</li>`;
return;
}
chats.forEach(chat => {
chats.forEach(async (chat) => {
const li = document.createElement('li');
li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
li.dataset.id = chat.id;
const picture = await waha.getChatPicture(chat.id);
const initials = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
const hasUnread = chat.unreadCount && chat.unreadCount > 0;
const timeStr = formatTime(chat.timestamp || new Date());
li.innerHTML = `
<div class="avatar">${initials}</div>
<div class="avatar"><img src="${picture.url}"></div>
<div class="chat-item-info">
<div class="chat-item-meta">
<span class="chat-item-name">${chat.name}</span>
@ -133,7 +134,7 @@ export const ui = {
groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
groupDiv.id = msg.id;
const senderName = isOutgoing ? 'Me' : (msg.senderName || activeChatName);
const senderName = isOutgoing ? 'Me' : (msg.from || activeChatName);
const timeStr = formatTime(msg.timestamp || new Date());
let statusCheck = '';
@ -148,9 +149,10 @@ export const ui = {
}
groupDiv.innerHTML = `
${!isOutgoing ? `<span class="message-sender">${senderName}</span>` : ''}
<div class="message-bubble">
${msg.body || msg.text}
<div class="message-indicator"></div>
<div class="message-bubble">
${!isOutgoing ? `<span class="message-sender">${senderName}</span>` : ''}
${msg.body || msg.text || "<i>Empty message, maybe something shows up on your phone...</i>"}
<div class="message-meta">
<span>${timeStr}</span>
${statusCheck}

0
public/utils.js → docs/utils.js
View file

4
public/waha.js → docs/waha.js
View file

@ -54,6 +54,10 @@ export const waha = {
return request(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40`);
},
async getChatPicture(chatId) {
return request(`/api/${config.session}/chats/${chatId}/picture`);
},
async readChat(chatId) {
return request('/api/sendSeen', {
method: 'POST',

0
public/websocket.js → docs/websocket.js
View file

4
index.js
View file

@ -3,14 +3,14 @@ import path from "path";
import { fileURLToPath } from "url";
const app = express();
const PORT = process.env.PORT || 3100;
const PORT = process.env.PORT || 3200;
// Resolve __dirname in ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Serve static assets from the public folder
app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "docs")));
// Start static file server
app.listen(PORT, () => {