From b1f7938b3738d75fa8ad877511eb3c9bab4a3952 Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Fri, 17 Jul 2026 11:23:41 -0300
Subject: [PATCH] Move settings to extra pages

---
 index.html | 75 +++++++++++++++++++++++++++---------------------------
 js/app.js  |  7 ++---
 js/ui.js   |  6 ++---
 style.css  | 25 ++++++++++++++++++
 4 files changed, 69 insertions(+), 44 deletions(-)
diff --git a/index.html b/index.html
index f8bd731..904f097 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,11 @@
 <body>
     <script defer>
         document.addEventListener("DOMContentLoaded", () => {
-          setTimeout(() => {
-            document.querySelectorAll(".dots").forEach(el => {
-              el.classList.add("animate");
-            });
-          }, 100);
+            setTimeout(() => {
+                document.querySelectorAll(".dots").forEach(el => {
+                    el.classList.add("animate");
+                });
+            }, 100);
         });
     </script>
     <div class="app-container no-active-chat">
@@ -38,13 +38,13 @@
                     <button class="text-btn" title="Settings">settings</button>
                 </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='dots'>
@@ -67,7 +67,7 @@
                 </div>
             </div>
         </aside>
-
+        
         <!-- Main Chat Area -->
         <main class="chat-area">
             <!-- 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>
                 </div>
             </div>
-
+            
             <!-- Active Chat State -->
             <div class="active-chat-container hidden" id="active-chat-container">
                 <header class="chat-header">
@@ -97,12 +97,12 @@
                         <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">
@@ -121,36 +121,35 @@
                 </footer>
             </div>
         </main>
-    </div>
-
-    <!-- Settings Modal -->
-    <div class="modal-overlay hidden" id="settings-modal">
-        <div class="modal-content">
-            <header class="modal-header">
-                <h2>SETTINGS</h2>
-            </header>
-            <div class="modal-body">
-                <div class="form-group">
-                    <label for="settings-waha-url">WAHA Server URL</label>
-                    <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
+        
+        <section class="extra-page" id="settings-page">
+            <div class="modal-content">
+                <header class="modal-header">
+                    <h2>SETTINGS</h2>
+                </header>
+                <div class="modal-body">
+                    <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>
                 </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>
+                <footer class="modal-footer">
+                    <button class="btn secondary-btn" id="cancel-settings">Cancel</button>
+                    <button class="btn primary-btn" id="save-settings">Save Config</button>
+                </footer>
             </div>
-            <footer class="modal-footer">
-                <button class="btn secondary-btn" id="cancel-settings">Cancel</button>
-                <button class="btn primary-btn" id="save-settings">Save Config</button>
-            </footer>
-        </div>
+        </section>
     </div>
-
+    
     <!-- Client-side script loaded as ES Module -->
     <script type="module" src="./js/app.js"></script>
 </body>
diff --git a/js/app.js b/js/app.js
index 3ca0ef6..e0d8104 100644
--- a/js/app.js
+++ b/js/app.js
@@ -10,6 +10,9 @@ let activeChatState = null;
 const messageTone = new Audio("./message.ogg");
 
 document.addEventListener('DOMContentLoaded', async () => {
+    elements.inputApiKey.value = config.apiKey;
+    elements.inputWahaUrl.value = config.wahaUrl;
+    elements.inputSession.value = config.session;
     await updateOnlineStatus();
     setupEventListeners();
     try {
@@ -381,9 +384,7 @@ async function sendFileMessage(file) {
 }
 
 function openSettings() {
-    elements.inputWahaUrl.value = config.wahaUrl;
-    elements.inputSession.value = config.session;
-    elements.inputApiKey.value = config.apiKey;
+    
     ui.toggleModal(true);
 }
 
diff --git a/js/ui.js b/js/ui.js
index 28adc58..f6593e8 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -20,7 +20,7 @@ export const elements = {
     backToSidebarBtn: document.querySelector('.chat-header'),
     sidebar: document.querySelector('.sidebar'),
     appContainer: document.querySelector('.app-container'),
-    settingsModal: document.getElementById('settings-modal'),
+    settingsModal: document.getElementById('settings-page'),
     settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'),
     cancelSettingsBtn: document.getElementById('cancel-settings'),
     saveSettingsBtn: document.getElementById('save-settings'),
@@ -41,9 +41,9 @@ export const ui = {
     */
     toggleModal(show) {
         if (show) {
-            elements.settingsModal.classList.remove('hidden');
+            elements.settingsModal.scrollTo();
         } else {
-            elements.settingsModal.classList.add('hidden');
+            elements.sidebar.scrollTo();
         }
     },
     
diff --git a/style.css b/style.css
index 659fe7c..1bd95b9 100644
--- a/style.css
+++ b/style.css
@@ -738,6 +738,16 @@ input:focus {
     display: none !important;
 }
 
+/* Extra Pages */
+.extra-page {
+    display: none;
+}
+
+.extra-page-content {
+    padding: 24px;
+    color: var(--text-secondary);
+}
+
 @media (max-width: 768px) {
     .app-container {
         width: 100%;
@@ -783,6 +793,21 @@ input:focus {
         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 */
     /* .app-container.no-active-chat .chat-area {
         display: none !important;
