diff --git a/js/app.js b/js/app.js index 8f5a749..1611b35 100644 --- a/js/app.js +++ b/js/app.js @@ -8,6 +8,8 @@ import { upsertMessages } from "./db.js"; let activeChatState = null; const messageTone = new Audio("./message.ogg"); +const longPressEvent = new CustomEvent("longpress"); +export let isLoadingChat = false; document.addEventListener('DOMContentLoaded', async () => { elements.inputApiKey.value = config.apiKey; @@ -178,7 +180,7 @@ function setupEventListeners() { elements.backToSidebarBtn.addEventListener('click', () => { closeActiveChat(false); - }); + }); elements.desktopSidebarButtons.forEach(sidebarBtn => { sidebarBtn.addEventListener('click', () => { @@ -193,11 +195,29 @@ function setupEventListeners() { console.log(result); }, 2000)) - // elements.selectable.forEach(e => { - // e.addEventListener('pointerdown', () => { + elements.selectable.forEach(e => { + let timerId, longPressed; - // }) - // }) + e.addEventListener('mousedown', () => { + longPressed = false; + + timerId = setTimeout(() => { + longPressed = true; + e.dispatchEvent(longPressEvent); + }) + }) + + e.addEventListener('click', () => { + if (longPressed) { + e.preventDefault(); + clearTimeout(timerId); + } + }) + + e.addEventListener('mouseleave', () => { + clearTimeout(timerId); + }) + }) } function initWebSocket() { @@ -243,6 +263,9 @@ async function handleIncomingMessage(msg) { } async function selectChat(chat, isPopState = false, smoothScroll = true) { + if (isLoadingChat) return; + + isLoadingChat = true; activeChatState = chat; chat.unreadCount = 0; @@ -284,6 +307,8 @@ async function selectChat(chat, isPopState = false, smoothScroll = true) { console.error('Failed to load messages:', error); elements.messagesContainer.innerHTML = '
Error loading messages
'; } + + isLoadingChat = false; } async function closeActiveChat(isPopState = false) { diff --git a/style.css b/style.css index c1ae0e3..ddc4e0b 100644 --- a/style.css +++ b/style.css @@ -336,22 +336,12 @@ input:focus { opacity: .6; } -@media (hover: hover) { - .selectable:hover { - background: rgba(255, 255, 255, 0.04); - transform: scale(0.98) skewX(10deg); - filter: blur(.1px); - opacity: .6; - } -} -@media (hover: none) { - .selectable:active { - background: rgba(255, 255, 255, 0.04); - transform: scale(0.98) skewX(10deg); - filter: blur(.1px); - opacity: .6; - } +.selectable:active { + background: rgba(255, 255, 255, 0.04); + transform: scale(0.98) skewX(10deg); + filter: blur(.1px); + opacity: .6; } .chat-item-info {