From dcd40790e040082cc4551f0a1df2197b248835b8 Mon Sep 17 00:00:00 2001 From: Adrian Victor Date: Fri, 17 Jul 2026 13:46:24 -0300 Subject: [PATCH] Make chat a page and add sidebar with buttons to cycle through pages on desktop. --- index.html | 109 ++++++++++++++++++++++++++-------------------------- js/app.js | 38 ++++++------------ js/ui.js | 27 ++++++------- loading.css | 4 -- style.css | 29 ++++++++++---- 5 files changed, 101 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index 904f097..09f089b 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,11 @@ });
+ +
-
- - - -
@@ -68,59 +68,61 @@
- -
- -
-
-
-
-

Select a contact from the sidebar to view the conversation or start a new chat.

-
-
- - - -
+ + + + + + + +
@@ -143,7 +145,6 @@

Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.

diff --git a/js/app.js b/js/app.js index 244dc67..3834d72 100644 --- a/js/app.js +++ b/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(); diff --git a/js/ui.js b/js/ui.js index f6593e8..f5a1bc5 100644 --- a/js/ui.js +++ b/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 */ diff --git a/loading.css b/loading.css index 9f152d2..ae2f8c9 100644 --- a/loading.css +++ b/loading.css @@ -1,7 +1,3 @@ -body { - background-color: #4e8ba6; -} - .dots { position: relative; width: 100%; diff --git a/style.css b/style.css index 2eed9ee..4b54b0a 100644 --- a/style.css +++ b/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 {