Make chat a page and add sidebar with buttons to cycle through pages on desktop.

index.html

@@ -22,6 +22,11 @@
         });
     </script>
     <div class="app-container no-active-chat">
+        <aside id="desktop-aside">
+            <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">
@@ -32,11 +37,6 @@
                         <h3 id="pandora-username">Pandora User</h3>
                     </div>
                 </div>
-                <div class="header-actions">
-                    <!-- <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">
@@ -68,6 +68,7 @@
             </div>
         </aside>
         
+        <div class="extra-page" id="chat-page">
             <!-- Main Chat Area -->
             <main class="chat-area">
                 <!-- No Chat Selected State -->
@@ -75,7 +76,7 @@
                     <div class="empty-state-content">
                         <div class="empty-state-icon mif-qa mif-3x">
                         </div>
-                    <p>Select a contact from the sidebar to view the conversation or start a new chat.</p>
+                        <p>Select a contact to view the conversation or start a new chat.</p>
                     </div>
                 </div>
                 
@@ -121,6 +122,7 @@
                     </footer>
                 </div>
             </main>
+        </div>
         
         <section class="extra-page" id="settings-page">
             <div class="modal-content">
@@ -143,7 +145,6 @@
                     <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>
                 <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>

js/app.js

@@ -120,14 +120,6 @@ function setupEventListeners() {
         }
     });
     
-    elements.refreshChatsBtn.addEventListener('click', () => {
-        elements.refreshChatsBtn.classList.add('spinning');
-        loadChats()
-        setTimeout(() => {
-            elements.refreshChatsBtn.classList.remove('spinning');
-        }, 600);
-    });
-    
     elements.chatSearch.addEventListener('input', (e) => {
         const query = e.target.value.toLowerCase();
         const filtered = getChats().filter(chat => 
@@ -165,8 +157,12 @@ function setupEventListeners() {
         closeActiveChat(false);
     });
 
-    elements.settingsIconBtn.addEventListener('click', openSettings);
+    elements.desktopSidebarButtons.forEach(sidebarBtn => {
-    elements.cancelSettingsBtn.addEventListener('click', () => ui.toggleModal(false));
+        sidebarBtn.addEventListener('click', () => {
+            ui.showExtraPage(sidebarBtn.dataset.page);           
+        })
+    })
+
     elements.saveSettingsBtn.addEventListener('click', saveSettings);
 }
 
@@ -271,20 +267,15 @@ async function closeActiveChat(isPopState = false) {
     
     if (window.innerWidth <= 768) {
         scrollToList();
-        setTimeout(() => {
-            if (!activeChatState) {
-                elements.appContainer.classList.add('no-active-chat');
-                // ui.toggleChatState(false);
-            }
-        }, 350);
     } else {
         ui.toggleChatState(false);
     }
 
+    
     if (!isPopState) {
-        // if (window.location.hash.startsWith('#chat-')) {
+        if (window.location.hash.startsWith('#chat-')) {
-        //     history.back();
+            history.back();
-        // }
+        }
     }
 }
 
@@ -383,18 +374,13 @@ async function sendFileMessage(file) {
     }
 }
 
-function openSettings() {
-    
-    ui.toggleModal(true);
-}
-
 function saveSettings() {
     config.save(
         elements.inputWahaUrl.value,
         elements.inputSession.value,
         elements.inputApiKey.value
     );
-    ui.toggleModal(false);
+    location.reload();
     loadChats();
     checkWahaStatus();
     initWebSocket();

js/ui.js

@@ -1,13 +1,10 @@
 import { formatTime, normalizeId } from "./utils.js";
-import { waha } from "./waha.js";
-import { config } from "./config.js";
 import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage.js";
 
 export const elements = {
     chatList: document.getElementById('chat-list'),
     chatsLoader: document.getElementById('chats-loader'),
     chatSearch: document.getElementById('chat-search'),
-    refreshChatsBtn: document.getElementById('refresh-chats-btn'),
     backendStatusText: document.getElementById('backend-status-text'),
     apiStatusIndicator: document.querySelector('.pulse-dot'),
     noChatState: document.getElementById('no-chat-state'),
@@ -21,8 +18,7 @@ export const elements = {
     sidebar: document.querySelector('.sidebar'),
     appContainer: document.querySelector('.app-container'),
     settingsModal: document.getElementById('settings-page'),
-    settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'),
+    settingsIconBtn: document.getElementById('settings-sidebar-btn'),
-    cancelSettingsBtn: document.getElementById('cancel-settings'),
     saveSettingsBtn: document.getElementById('save-settings'),
     inputWahaUrl: document.getElementById('settings-waha-url'),
     inputSession: document.getElementById('settings-session'),
@@ -33,18 +29,19 @@ export const elements = {
     chatInputPanel: document.getElementById('chat-input-panel'),
     attachmentInput: document.getElementById('attachment-input'),
     attachmentBtn: document.getElementById('attachment-btn'),
+    extraPages: document.querySelectorAll('.extra-page'),
+    desktopSidebarButtons: document.querySelectorAll("#desktop-aside button")
 };
 
 export const ui = {
-    /**
+    showExtraPage(pageId) {
-    * Show or hide Settings connection modal
+        elements.extraPages.forEach(page => {
-    */
+            if (page.id != pageId) {
-    toggleModal(show) {
+                page.style.display = "none";
-        if (show) {
-            elements.settingsModal.scrollTo();
             } else {
-            elements.sidebar.scrollTo();
+                page.style.display = "flex";
             }
+        })
     },
 
     /**

loading.css

@@ -1,7 +1,3 @@
-body {
-  background-color: #4e8ba6;
-}
-
 .dots {
   position: relative;
   width: 100%;

style.css

@@ -364,6 +364,16 @@ input:focus {
     to { transform: rotate(360deg); }
 }
 
+/* Desktop aside */
+#desktop-aside {
+    height: 100%;
+    background-color: black;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    padding: .2em;
+}
+
 /* Sidebar Footer */
 .sidebar-footer {
     padding: 14px 20px;
@@ -383,14 +393,14 @@ input:focus {
     height: 8px;
     background-color: var(--online-color);
     border-radius: 50%;
-    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
     animation: pulse 1.8s infinite;
 }
 
 @keyframes pulse {
     0% {
         transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
     }
     70% {
         transform: scale(1);
@@ -740,6 +750,7 @@ input:focus {
 /* Extra Pages */
 .extra-page {
     display: none;
+    width: 100%;
 }
 
 .extra-page-content {
@@ -747,6 +758,10 @@ input:focus {
     color: var(--text-secondary);
 }
 
+#chat-page {
+    display: flex;
+}
+
 @media (max-width: 768px) {
     .app-container {
         width: 100%;
@@ -806,11 +821,6 @@ input:focus {
         overflow-y: auto;
     }
     
-    /* Disable scrolling to active chat if none is selected */
-    /* .app-container.no-active-chat .chat-area {
-        display: none !important;
-    } */
-    
     .back-btn {
         display: flex;
         margin-right: 12px;
@@ -823,6 +833,10 @@ input:focus {
     .message-image-attachement {
         max-height: 20em;
     }
+
+    #desktop-aside {
+        display: none;
+    }
 }
 
 /* Modal Styling */
@@ -847,6 +861,7 @@ input:focus {
     backdrop-filter: var(--glass-blur);
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 .modal-header {