Only load when not already loading one. Don't animate .selectable on hover.

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;
@@ -193,11 +195,29 @@ function setupEventListeners() {
         console.log(result);
     }, 2000))
 
-    // elements.selectable.forEach(e => {
+    elements.selectable.forEach(e => {
-    //     e.addEventListener('pointerdown', () => {
+        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 = '<div class="loading-chats">Error loading messages</div>';
     }
+
+    isLoadingChat = false;
 }
 
 async function closeActiveChat(isPopState = false) {

style.css

@@ -336,23 +336,13 @@ 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;
 }
-}
 
 .chat-item-info {
     flex: 1;