-
-
-
-
-
-
-
- Select a contact from the sidebar to view the conversation or start a new chat.
-
-
-
-
-
C
-
-
Contact Name
- +
+
+
+
+
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 {
+
+
+
- Select a contact 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.