Update public/index.html

public/index.html

@@ -4,16 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reiker Wa-Web</title>
-    <link rel="stylesheet" href="public/styles.css">
 </head>
-<body>
-    <header>
+<body style="margin: 0; font-family: Arial, sans-serif; background-color: #121212; color: #e0e0e0;">
+    <header style="background-color: #2a2a2a; padding: 10px 20px; text-align: center; border-bottom: 1px solid #333; color: #fff;">
         <h1>Reiker Wa-Web</h1>
     </header>
-    <main>
+    <main style="padding: 10px;">
         <!-- Loading spinner -->
-        <div id="loading">
-            <div class="spinner"></div>
+        <div id="loading" style="display: none; text-align: center; margin-top: 50px;">
+            <div class="spinner" style="border: 4px solid #444; border-top: 4px solid #1a73e8; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite;"></div>
             <p>Loading messages...</p>
         </div>
         <!-- Chats will be dynamically loaded here -->
@@ -25,13 +24,11 @@
         const loadingSpinner = document.getElementById('loading');
         const socket = io(); // Connect to WebSocket
 
-        // Function to show/hide loading spinner
         function toggleLoading(show) {
             loadingSpinner.style.display = show ? 'block' : 'none';
             chatList.style.display = show ? 'none' : 'block';
         }
 
-        // Function to truncate content to 3 words or fewer
         function truncateContent(content) {
             const words = content.split(' ');
             if (words.length > 3) {
@@ -40,43 +37,51 @@
             return content;
         }
 
-        // Function to clean up private DM numbers (remove @s.whatsapp.net)
         function formatChatName(chatName) {
             return chatName.includes('@s.whatsapp.net')
                 ? chatName.replace('@s.whatsapp.net', '')
                 : chatName;
         }
 
-        // Group messages by chat name and keep only the latest message
         function groupMessagesByChat(messages) {
             const grouped = {};
             messages.forEach(message => {
-                message.chatName = formatChatName(message.chatName); // Clean chat name
-                grouped[message.chatName] = message; // Overwrite to keep the latest message
+                message.chatName = formatChatName(message.chatName);
+                grouped[message.chatName] = message;
             });
             return grouped;
         }
 
-        // Function to render grouped chats
         function renderGroupedChats(chats) {
-            chatList.innerHTML = ''; // Clear the current list
+            chatList.innerHTML = '';
             const groupedChats = groupMessagesByChat(chats);
 
             Object.entries(groupedChats).forEach(([chatName, latestMessage]) => {
                 const chatDiv = document.createElement('div');
                 chatDiv.className = 'chat';
-                chatDiv.setAttribute('data-jid', latestMessage.jid); // Add jid for navigation
+                chatDiv.setAttribute('data-jid', latestMessage.jid);
+                chatDiv.style.cssText = `
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    background-color: #1e1e1e;
+                    padding: 15px;
+                    border-radius: 8px;
+                    margin-bottom: 10px;
+                    cursor: pointer;
+                    transition: background-color 0.2s ease;
+                `;
+                chatDiv.addEventListener('mouseover', () => chatDiv.style.backgroundColor = '#2c2c2c');
+                chatDiv.addEventListener('mouseout', () => chatDiv.style.backgroundColor = '#1e1e1e');
 
-                // Chat info
                 const chatInfo = document.createElement('div');
                 chatInfo.className = 'chat-info';
                 chatInfo.innerHTML = `
-                    <h2>${chatName}</h2>
-                    <p>${truncateContent(latestMessage.content)}</p>
+                    <h2 style="margin: 0; font-size: 1rem; font-weight: bold; color: #fff;">${chatName}</h2>
+                    <p style="margin: 5px 0 0; font-size: 0.9rem; color: #aaa;">${truncateContent(latestMessage.content)}</p>
                 `;
                 chatDiv.appendChild(chatInfo);
 
-                // Make chat clickable
                 chatDiv.addEventListener('click', () => {
                     window.location.href = `/chat/${latestMessage.jid}`;
                 });
@@ -85,55 +90,38 @@
             });
         }
 
-        // Function to merge/update chats and render them
-        function updateChatList(chats, newMessage) {
-            const groupedChats = groupMessagesByChat(chats);
-
-            // Update or add the new message
-            const chatName = formatChatName(newMessage.chatName);
-            groupedChats[chatName] = newMessage;
-
-            // Sort by timestamp (latest first)
-            const sortedChats = Object.values(groupedChats).sort(
-                (a, b) => b.timestamp - a.timestamp
-            );
-
-            renderGroupedChats(sortedChats); // Render sorted chats
-        }
-
-        // Function to fetch and render chat list
         async function loadChatList() {
-            toggleLoading(true); // Show loading spinner
+            toggleLoading(true);
             try {
                 const res = await fetch('/messages.json');
-                if (!res.ok) {
-                    throw new Error(`HTTP error! status: ${res.status}`);
-                }
+                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
                 const chats = await res.json();
-                renderGroupedChats(chats); // Render the chats
+                renderGroupedChats(chats);
             } catch (err) {
                 console.error('Failed to load chat list:', err);
                 chatList.innerHTML = '<p>Failed to load chats. Try again later.</p>';
             } finally {
-                toggleLoading(false); // Hide loading spinner
+                toggleLoading(false);
             }
         }
 
-        // Initial fetch of chat list
         loadChatList();
 
-        // Listen for new messages via WebSocket
         socket.on('new_message', (newMessage) => {
-            // Fetch the current chat list and update/merge the new message
             const currentChats = Array.from(chatList.children).map(chat => ({
                 jid: chat.getAttribute('data-jid'),
                 chatName: chat.querySelector('h2').innerText,
                 content: chat.querySelector('p').innerText,
             }));
 
-            // Merge the new message and render
             updateChatList(currentChats, newMessage);
         });
     </script>
+    <style>
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </body>
 </html>