feat: Comprehensive mobile adaptive layout, clickable member profiles, enhanced communities/groups, fixed QR modal

client.js

@@ -1047,6 +1047,8 @@ function updateMembersList(users) {
     users.forEach(user => {
         const item = document.createElement('div');
         item.className = 'member-item';
+        item.style.cursor = 'pointer';
+        item.title = `Click to view ${user.username}'s profile`;
 
         // Create avatar
         const avatar = document.createElement('div');
@@ -1065,6 +1067,15 @@ function updateMembersList(users) {
         const name = document.createElement('span');
         name.textContent = user.username;
 
+        // Make item clickable to view profile
+        item.onclick = () => {
+            if (user.id === currentUser.id) {
+                openProfile();
+            } else {
+                visitUserProfile(user.id, user.username);
+            }
+        };
+
         item.appendChild(avatar);
         item.appendChild(status);
         item.appendChild(name);
@@ -1804,11 +1815,36 @@ function applySettingsToUI() {
 function openCommunitiesModal() {
     const modal = document.getElementById('communitiesModal');
     const list = document.getElementById('communitiesList');
-    list.innerHTML = `
-        <div class="friend-item"><span class="friend-name">🎮 Gaming</span><button class="buy-btn" onclick="joinCommunity('Gaming')">Join</button></div>
-        <div class="friend-item"><span class="friend-name">💻 Coding</span><button class="buy-btn" onclick="joinCommunity('Coding')">Join</button></div>
-        <div class="friend-item"><span class="friend-name">🎵 Music</span><button class="buy-btn" onclick="joinCommunity('Music')">Join</button></div>
-    `;
+    
+    // Show communities with better styling
+    const communities = [
+        { name: 'Gaming', emoji: '🎮', description: 'Talk about your favorite games' },
+        { name: 'Coding', emoji: '💻', description: 'Share code and learn together' },
+        { name: 'Music', emoji: '🎵', description: 'Discuss and share music' },
+        { name: 'Art', emoji: '🎨', description: 'Share your creative works' },
+        { name: 'Sports', emoji: '⚽', description: 'Sports fans unite' },
+        { name: 'Movies', emoji: '🎬', description: 'Film enthusiasts' }
+    ];
+    
+    list.innerHTML = communities.map(c => {
+        const isJoined = joinedCommunities.includes(c.name);
+        return `
+            <div class="friend-item" style="flex-direction: column; align-items: flex-start; padding: 16px;">
+                <div style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
+                    <div>
+                        <span class="friend-name" style="font-size: 16px;">${c.emoji} ${c.name}</span>
+                        <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">${c.description}</div>
+                    </div>
+                    <button class="buy-btn" 
+                        onclick="${isJoined ? `openCommunityChat('${c.name}'); closeCommunitiesModal();` : `joinCommunity('${c.name}')`}" 
+                        style="${isJoined ? 'background: var(--success);' : ''}">
+                        ${isJoined ? 'Open' : 'Join'}
+                    </button>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
     modal.classList.remove('hidden');
 }
 
@@ -1819,11 +1855,35 @@ function closeCommunitiesModal() {
 function openGroupsModal() {
     const modal = document.getElementById('groupsModal');
     const list = document.getElementById('groupsList');
-    list.innerHTML = `
-        <div class="friend-item"><span class="friend-name">Study Group</span><button class="buy-btn" onclick="joinGroup('Study Group')">Join</button></div>
-        <div class="friend-item"><span class="friend-name">Project Team</span><button class="buy-btn" onclick="joinGroup('Project Team')">Join</button></div>
-        <div class="friend-item"><span class="friend-name">Family</span><button class="buy-btn" onclick="joinGroup('Family')">Join</button></div>
-    `;
+    
+    // Show groups with better styling
+    const groups = [
+        { name: 'Study Group', emoji: '📚', description: 'Study together and share notes' },
+        { name: 'Project Team', emoji: '💼', description: 'Collaborate on projects' },
+        { name: 'Family', emoji: '👨‍👩‍👧', description: 'Family group chat' },
+        { name: 'Friends', emoji: '🎉', description: 'Hang out with friends' },
+        { name: 'Work', emoji: '🏢', description: 'Work related discussions' }
+    ];
+    
+    list.innerHTML = groups.map(g => {
+        const isJoined = joinedGroups.includes(g.name);
+        return `
+            <div class="friend-item" style="flex-direction: column; align-items: flex-start; padding: 16px;">
+                <div style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
+                    <div>
+                        <span class="friend-name" style="font-size: 16px;">${g.emoji} ${g.name}</span>
+                        <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">${g.description}</div>
+                    </div>
+                    <button class="buy-btn" 
+                        onclick="${isJoined ? `openGroupChat('${g.name}'); closeGroupsModal();` : `joinGroup('${g.name}')`}" 
+                        style="${isJoined ? 'background: var(--success);' : ''}">
+                        ${isJoined ? 'Open' : 'Join'}
+                    </button>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
     modal.classList.remove('hidden');
 }
 

index.html

@@ -1395,29 +1395,167 @@
             }
         }
 
+        /* ==================== MOBILE ADAPTIVE LAYOUT ==================== */
         @media (max-width: 768px) {
+            body {
+                overflow: hidden;
+            }
+
             .main-container {
-                grid-template-columns: 72px 1fr;
+                grid-template-columns: 60px 1fr;
+                height: 100vh;
+                height: 100dvh;
+                max-height: -webkit-fill-available;
             }
 
+            /* Mobile Guild Sidebar */
+            .guild-sidebar {
+                padding: 4px 0;
+            }
+
+            .guild-item {
+                width: 48px;
+                height: 48px;
+                font-size: 20px;
+                margin-bottom: 6px;
+            }
+
+            .guild-divider {
+                width: 28px;
+                margin: 6px 0;
+            }
+
+            /* Mobile Channel Sidebar */
             .channel-sidebar {
                 display: none;
                 position: fixed;
-                left: 72px;
+                left: 0;
                 top: 0;
-                width: 240px;
+                width: 85%;
+                max-width: 320px;
                 height: 100%;
+                height: 100dvh;
                 z-index: 999;
+                box-shadow: 4px 0 20px rgba(0,0,0,0.5);
             }
 
             .channel-sidebar.show {
                 display: flex;
             }
 
+            /* Mobile overlay for sidebar */
+            .channel-sidebar.show::before {
+                content: '';
+                position: fixed;
+                left: 0;
+                top: 0;
+                width: 100vw;
+                height: 100vh;
+                background: rgba(0,0,0,0.5);
+                z-index: -1;
+            }
+
+            /* Mobile Chat Area */
+            .chat-area {
+                height: 100vh;
+                height: 100dvh;
+                max-height: -webkit-fill-available;
+            }
+
+            .chat-header {
+                padding: 12px 16px;
+                flex-shrink: 0;
+            }
+
+            .chat-header-title {
+                font-size: 16px;
+            }
+
+            .build-badge {
+                display: none;
+            }
+
+            .header-btn {
+                font-size: 16px;
+                padding: 8px;
+            }
+
+            .chat-header-actions {
+                gap: 4px;
+            }
+
+            /* Mobile Messages Container */
+            #messages-container {
+                flex: 1;
+                min-height: 0;
+                max-height: none;
+                padding: 12px 16px;
+                padding-bottom: 16px;
+                -webkit-overflow-scrolling: touch;
+                overscroll-behavior: contain;
+            }
+
+            .message {
+                gap: 8px;
+            }
+
+            .message-avatar {
+                width: 36px;
+                height: 36px;
+                font-size: 16px;
+            }
+
+            .message-username {
+                font-size: 14px;
+            }
+
+            .message-text {
+                font-size: 14px;
+            }
+
+            .message-media {
+                max-width: 90%;
+            }
+
+            /* Mobile Input Area */
+            .input-area {
+                padding: 12px 16px;
+                gap: 8px;
+                flex-shrink: 0;
+                border-top: 2px solid var(--border-color);
+            }
+
+            .input-area input {
+                font-size: 16px;
+                padding: 10px 14px;
+            }
+
+            .input-btn {
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
+                flex-shrink: 0;
+            }
+
+            /* Mobile Scroll Rail */
+            .chat-scroll-rail {
+                right: 4px;
+                top: 64px;
+                bottom: 74px;
+                width: 12px;
+            }
+
+            .chat-scroll-thumb {
+                min-height: 40px;
+            }
+
+            /* Mobile Panels */
             .picker-panel {
-                width: 90%;
-                left: 5%;
-                bottom: 80px;
+                width: 100%;
+                left: 0;
+                bottom: 0;
+                height: 50vh;
+                border-radius: 16px 16px 0 0;
             }
 
             .voice-recorder {
@@ -1427,6 +1565,12 @@
                 bottom: 80px;
             }
 
+            .draft-preview {
+                margin: 8px 16px 0;
+                padding: 8px;
+            }
+
+            /* Mobile Settings Panel */
             .settings-panel {
                 width: 100%;
                 right: -100%;
@@ -1452,6 +1596,8 @@
                 white-space: nowrap;
                 border-left: none;
                 border-bottom: 3px solid transparent;
+                font-size: 13px;
+                padding: 10px 14px;
             }
 
             .settings-nav-item.active {
@@ -1459,6 +1605,7 @@
                 border-bottom-color: var(--primary-color);
             }
 
+            /* Mobile Toasts */
             .toast-container {
                 top: 10px;
                 right: 10px;
@@ -1467,6 +1614,17 @@
 
             .toast {
                 min-width: auto;
+                padding: 12px 16px;
+            }
+
+            /* Mobile Profile Panel */
+            .profile-panel {
+                width: 100%;
+            }
+
+            /* Hide members sidebar completely on mobile */
+            .members-sidebar {
+                display: none !important;
             }
         }
 
@@ -1937,7 +2095,7 @@
                     <button onclick="showArchivedChats()" title="Archived Chats" style="padding: 4px 8px; background: var(--secondary-color); border: none; border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 12px;">
                         <i class="fas fa-archive"></i>
                     </button>
-                    <button onclick="toggleChannelSidebar()"><i class="fas fa-times"></i></button>
+                    <button onclick="toggleChannelSidebar()" class="danger-hover" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 20px; padding: 4px 8px;"><i class="fas fa-times"></i></button>
                 </div>
             </div>
             <div class="friend-search-container">
@@ -2381,6 +2539,7 @@
     </div>
 
     <!-- COMMUNITIES MODAL -->
+    <div class="modal hidden" id="communitiesModal">
         <div class="modal-content">
             <h2><i class="fas fa-globe"></i> Communities</h2>
             <p style="margin-top: 10px; color: var(--text-secondary);">Join public communities to discover people with shared interests.</p>