updates: better new message badge management / fix: responsive UI

lamorbidamacchina · Nov 18, 2024 · 5da4172 · 5da4172
1 parent badb21e
commit 5da4172
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 94 deletions.
diff --git a/public/client.js b/public/client.js
@@ -20,6 +20,7 @@ const userKeys = new Map();
 let connectedUsers = new Map();
 const unreadMessages = new Map();
 let activeConversationWith = null;
+let isViewingUsersList = window.innerWidth <= 768;  // Initialize based on screen width
 
 // Connection established
 socket.on('connect', () => {
@@ -48,10 +49,13 @@ socket.on('private-message', async ({ from, fromName, encryptedMessage }) => {
             text: decryptedMessage
         });
 
-        // If this message is not from the active conversation, increment unread count
-        if (from !== activeConversationWith) {
+        // Increment unread messages counter only if:
+        // 1. User is viewing the users list, OR
+        // 2. Message is from someone other than active conversation
+        if (isViewingUsersList || from !== activeConversationWith) {
             const currentCount = unreadMessages.get(from) || 0;
             unreadMessages.set(from, currentCount + 1);
+            // Force UI update
             updateUsersList(Array.from(connectedUsers.values()));
         }
     } catch (error) {
@@ -87,11 +91,15 @@ function updateUsersList(users) {
             // Create user name container
             const nameContainer = document.createElement('div');
             nameContainer.className = 'user-item-content';
-            nameContainer.textContent = `User: ${user.displayName}`;
 
-            // Add unread messages badge if any
+            // Add username
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = user.displayName;
+            nameContainer.appendChild(nameSpan);
+
+            // Add unread messages badge
             const unreadCount = unreadMessages.get(user.socketId) || 0;
-            if (unreadCount > 0 && user.socketId !== activeConversationWith) {
+            if (unreadCount > 0) {
                 const badge = document.createElement('span');
                 badge.className = 'unread-badge';
                 badge.textContent = unreadCount;
@@ -107,6 +115,7 @@ function updateUsersList(users) {
 
                 // Update active conversation
                 activeConversationWith = user.socketId;
+                isViewingUsersList = false;  // Explicitly set to false when starting a chat
 
                 // Update UI
                 document.querySelectorAll('.user-item').forEach(el => el.classList.remove('active'));
@@ -119,16 +128,10 @@ function updateUsersList(users) {
                 // Update message display
                 filterMessages(user.socketId);
 
-                // Remove badge immediately
-                const badge = userElement.querySelector('.unread-badge');
-                if (badge) {
-                    badge.remove();
-                }
-
                 // Focus message input
                 document.getElementById('message-input').focus();
 
-                // Add this for mobile
+                // Handle mobile view
                 if (window.innerWidth <= 768) {
                     backToChat();
                 }
@@ -353,17 +356,30 @@ window.onclick = function(event) {
 function toggleUsersList() {
     const usersPanel = document.querySelector('.users-panel');
     usersPanel.classList.add('active');
+    isViewingUsersList = true;
+    activeConversationWith = null;
+    // Force UI update
+    updateUsersList(Array.from(connectedUsers.values()));
 }
 
 function backToChat() {
     const usersPanel = document.querySelector('.users-panel');
     usersPanel.classList.remove('active');
+    isViewingUsersList = false;
+    // Force UI update
+    updateUsersList(Array.from(connectedUsers.values()));
 }
 
 // Optional: Handle resize events
 window.addEventListener('resize', () => {
     const usersPanel = document.querySelector('.users-panel');
     if (window.innerWidth > 768) {
         usersPanel.classList.remove('active');
+        isViewingUsersList = false;
+    } else {
+        // On mobile, if no active conversation, show users list
+        isViewingUsersList = !activeConversationWith;
     }
+    // Force UI update
+    updateUsersList(Array.from(connectedUsers.values()));
 });
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shush! | Private web chats for everyone</title>
     <link rel="stylesheet" href="styles.css">
     <script src="/socket.io/socket.io.js"></script>

diff --git a/public/styles.css b/public/styles.css
@@ -210,9 +210,7 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    width: 100%;
 }
 
 .unread-badge {
@@ -224,6 +222,7 @@ body {
     font-weight: 600;
     min-width: 20px;
     text-align: center;
+    margin-left: 8px;
 }
 
 .user-item.active .unread-badge {
@@ -359,6 +358,10 @@ body {
 
 /* Responsive styles */
 @media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+
     .header-titles {
         flex-direction: column;
         align-items: flex-start;
@@ -375,12 +378,12 @@ body {
 
     .chat-layout {
         grid-template-columns: 1fr;
-        height: calc(100vh - 100px); /* Adjust based on your header height */
+        height: calc(100vh - 120px);
         gap: 0;
     }
 
     .users-panel {
-        display: none; /* Hidden by default on mobile */
+        display: none;
         position: fixed;
         top: 0;
         left: 0;
@@ -394,107 +397,45 @@ body {
         display: block;
     }
 
-    .chat-panel {
-        height: 100%;
-    }
-
-    /* Add mobile navigation */
     .mobile-nav {
-        display: flex;
+        display: flex !important;
         justify-content: space-between;
         align-items: center;
         padding: 0.5rem;
+        margin-bottom: 0.5rem;
         background-color: var(--background);
         border-bottom: 1px solid var(--border);
     }
 
     .mobile-nav-button {
-        padding: 0.5rem;
-        background: transparent;
+        padding: 0.5rem 1rem;
+        background-color: var(--secondary);
         border: 1px solid var(--border);
         border-radius: var(--radius);
         color: var(--foreground);
         cursor: pointer;
+        display: block;
     }
 
-    /* Adjust modal for mobile */
-    .modal-content {
-        margin: 10% auto;
-        width: 90%;
-        max-width: none;
-    }
-
-    /* Adjust message input area */
-    .message-input {
-        padding: 0.5rem;
-        gap: 0.25rem;
-    }
-
-    .input {
-        font-size: 16px; /* Prevent zoom on iOS */
-    }
-
-    .button {
-        padding: 0.5rem 0.75rem;
-    }
-
-    /* Add this to your existing styles */
-    .mobile-nav {
-        display: none; /* Hidden by default */
-    }
-
-    /* Show only relevant button based on context */
-    .mobile-nav-button.back-button {
-        display: none; /* Hidden by default */
+    .mobile-nav-button:hover {
+        background-color: var(--accent);
     }
 
-    /* When users panel is active, show back button and hide users list button */
-    .users-panel.active ~ .chat-panel .mobile-nav .back-button {
-        display: block;
+    /* Gestione visibilità dei pulsanti */
+    .users-panel:not(.active) ~ .chat-panel .mobile-nav .back-button {
+        display: none;
     }
 
     .users-panel.active ~ .chat-panel .mobile-nav .users-button {
         display: none;
     }
+
+    .message-list {
+        height: calc(100vh - 200px);
+    }
 }
 
-/* Mobile nav is hidden by default */
+/* Base state - mobile nav is hidden by default on desktop */
 .mobile-nav {
     display: none;
-}
-
-/* Mobile styles */
-@media (max-width: 768px) {
-    /* ... other mobile styles ... */
-
-    .mobile-nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem;
-        background-color: var(--background);
-        border-bottom: 1px solid var(--border);
-    }
-
-    .mobile-nav-button {
-        padding: 0.5rem;
-        background: transparent;
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        color: var(--foreground);
-        cursor: pointer;
-    }
-
-    /* Show/hide appropriate buttons based on panel state */
-    .mobile-nav .back-button {
-        display: none;
-    }
-
-    .users-panel.active ~ .chat-panel .mobile-nav .back-button {
-        display: block;
-    }
-
-    .users-panel.active ~ .chat-panel .mobile-nav .users-button {
-        display: none;
-    }
 }