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

Move settings to extra pages

Browse source
This commit is contained in:
天クマ 2026-07-17 11:23:41 -03:00
commit b1f7938b37
4 changed files with 69 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

75
index.html
View file

@ -14,11 +14,11 @@
<body> <body>
<script defer> <script defer>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => { setTimeout(() => {
document.querySelectorAll(".dots").forEach(el => { document.querySelectorAll(".dots").forEach(el => {
el.classList.add("animate"); el.classList.add("animate");
}); });
}, 100); }, 100);
}); });
</script> </script>
<div class="app-container no-active-chat"> <div class="app-container no-active-chat">
@ -38,13 +38,13 @@
<button class="text-btn" title="Settings">settings</button> <button class="text-btn" title="Settings">settings</button>
</div> </div>
</header> </header>
<div class="search-container"> <div class="search-container">
<div class="search-wrapper"> <div class="search-wrapper">
<input type="text" id="chat-search" placeholder="Search or start new chat..."> <input type="text" id="chat-search" placeholder="Search or start new chat...">
</div> </div>
</div> </div>
<div class="chat-list-container"> <div class="chat-list-container">
<div class="loading-chats" id="chats-loader"> <div class="loading-chats" id="chats-loader">
<div class='dots'> <div class='dots'>
@ -67,7 +67,7 @@
</div> </div>
</div> </div>
</aside> </aside>
<!-- Main Chat Area --> <!-- Main Chat Area -->
<main class="chat-area"> <main class="chat-area">
<!-- No Chat Selected State --> <!-- No Chat Selected State -->
@ -78,7 +78,7 @@
<p>Select a contact from the sidebar to view the conversation or start a new chat.</p> <p>Select a contact from the sidebar to view the conversation or start a new chat.</p>
</div> </div>
</div> </div>
<!-- Active Chat State --> <!-- Active Chat State -->
<div class="active-chat-container hidden" id="active-chat-container"> <div class="active-chat-container hidden" id="active-chat-container">
<header class="chat-header"> <header class="chat-header">
@ -97,12 +97,12 @@
<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> </div>
</header> </header>
<!-- Messages Area --> <!-- Messages Area -->
<div class="messages-container" id="messages-container"> <div class="messages-container" id="messages-container">
<!-- Messages will be dynamically injected here --> <!-- Messages will be dynamically injected here -->
</div> </div>
<!-- Input Panel --> <!-- Input Panel -->
<footer id="chat-input-panel" class="chat-input-panel"> <footer id="chat-input-panel" class="chat-input-panel">
<div class="input-actions-left"> <div class="input-actions-left">
@ -121,36 +121,35 @@
</footer> </footer>
</div> </div>
</main> </main>
</div>
<section class="extra-page" id="settings-page">
<!-- Settings Modal --> <div class="modal-content">
<div class="modal-overlay hidden" id="settings-modal"> <header class="modal-header">
<div class="modal-content"> <h2>SETTINGS</h2>
<header class="modal-header"> </header>
<h2>SETTINGS</h2> <div class="modal-body">
</header> <div class="form-group">
<div class="modal-body"> <label for="settings-waha-url">WAHA Server URL</label>
<div class="form-group"> <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
<label for="settings-waha-url">WAHA Server URL</label> </div>
<input type="text" id="settings-waha-url" placeholder="http://localhost:3100"> <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>
</div> </div>
<div class="form-group"> <footer class="modal-footer">
<label for="settings-session">Session ID</label> <button class="btn secondary-btn" id="cancel-settings">Cancel</button>
<input type="text" id="settings-session" placeholder="session_01..."> <button class="btn primary-btn" id="save-settings">Save Config</button>
</div> </footer>
<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>
</div> </div>
<footer class="modal-footer"> </section>
<button class="btn secondary-btn" id="cancel-settings">Cancel</button>
<button class="btn primary-btn" id="save-settings">Save Config</button>
</footer>
</div>
</div> </div>
<!-- Client-side script loaded as ES Module --> <!-- Client-side script loaded as ES Module -->
<script type="module" src="./js/app.js"></script> <script type="module" src="./js/app.js"></script>
</body> </body>

7
js/app.js
View file

@ -10,6 +10,9 @@ let activeChatState = null;
const messageTone = new Audio("./message.ogg"); const messageTone = new Audio("./message.ogg");
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
elements.inputApiKey.value = config.apiKey;
elements.inputWahaUrl.value = config.wahaUrl;
elements.inputSession.value = config.session;
await updateOnlineStatus(); await updateOnlineStatus();
setupEventListeners(); setupEventListeners();
try { try {
@ -381,9 +384,7 @@ async function sendFileMessage(file) {
} }
function openSettings() { function openSettings() {
elements.inputWahaUrl.value = config.wahaUrl;
elements.inputSession.value = config.session;
elements.inputApiKey.value = config.apiKey;
ui.toggleModal(true); ui.toggleModal(true);
} }

6
js/ui.js
View file

@ -20,7 +20,7 @@ export const elements = {
backToSidebarBtn: document.querySelector('.chat-header'), backToSidebarBtn: document.querySelector('.chat-header'),
sidebar: document.querySelector('.sidebar'), sidebar: document.querySelector('.sidebar'),
appContainer: document.querySelector('.app-container'), appContainer: document.querySelector('.app-container'),
settingsModal: document.getElementById('settings-modal'), settingsModal: document.getElementById('settings-page'),
settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'), settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'),
cancelSettingsBtn: document.getElementById('cancel-settings'), cancelSettingsBtn: document.getElementById('cancel-settings'),
saveSettingsBtn: document.getElementById('save-settings'), saveSettingsBtn: document.getElementById('save-settings'),
@ -41,9 +41,9 @@ export const ui = {
*/ */
toggleModal(show) { toggleModal(show) {
if (show) { if (show) {
elements.settingsModal.classList.remove('hidden'); elements.settingsModal.scrollTo();
} else { } else {
elements.settingsModal.classList.add('hidden'); elements.sidebar.scrollTo();
} }
}, },

25
style.css
View file

@ -738,6 +738,16 @@ input:focus {
display: none !important; display: none !important;
} }
/* Extra Pages */
.extra-page {
display: none;
}
.extra-page-content {
padding: 24px;
color: var(--text-secondary);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.app-container { .app-container {
width: 100%; width: 100%;
@ -783,6 +793,21 @@ input:focus {
scroll-snap-stop: always; scroll-snap-stop: always;
} }
.extra-page {
display: block;
width: 100%;
flex: 0 0 100%;
position: relative;
left: auto;
top: auto;
height: 100%;
z-index: 1;
scroll-snap-align: start;
scroll-snap-stop: always;
background-color: var(--bg-main);
overflow-y: auto;
}
/* Disable scrolling to active chat if none is selected */ /* Disable scrolling to active chat if none is selected */
/* .app-container.no-active-chat .chat-area { /* .app-container.no-active-chat .chat-area {
display: none !important; display: none !important;