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

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 => 
@@ -164,9 +156,13 @@ function setupEventListeners() {
     elements.backToSidebarBtn.addEventListener('click', () => {
         closeActiveChat(false);
     });
-    
-    elements.settingsIconBtn.addEventListener('click', openSettings);
-    elements.cancelSettingsBtn.addEventListener('click', () => ui.toggleModal(false));
+
+    elements.desktopSidebarButtons.forEach(sidebarBtn => {
+        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-')) {
-        //     history.back();
-        // }
+        if (window.location.hash.startsWith('#chat-')) {
+            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"]'),
-    cancelSettingsBtn: document.getElementById('cancel-settings'),
+    settingsIconBtn: document.getElementById('settings-sidebar-btn'),
     saveSettingsBtn: document.getElementById('save-settings'),
     inputWahaUrl: document.getElementById('settings-waha-url'),
     inputSession: document.getElementById('settings-session'),
@@ -33,20 +29,21 @@ 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 = {
-    /**
-    * Show or hide Settings connection modal
-    */
-    toggleModal(show) {
-        if (show) {
-            elements.settingsModal.scrollTo();
-        } else {
-            elements.sidebar.scrollTo();
-        }
+    showExtraPage(pageId) {
+        elements.extraPages.forEach(page => {
+            if (page.id != pageId) {
+                page.style.display = "none";
+            } else {
+                page.style.display = "flex";
+            }
+        })
     },
-    
+
     /**
     * Switch view state when a contact chat is opened or closed
     */