v2.3.0: Fix 7 critical mobile issues - responsive video, coin rewards, call sync, profile panel, permanent deletion, image sync

CHANGELOG-v2.2.5.md

@@ -0,0 +1,193 @@
+# Changelog - Version 2.2.5
+
+## 🎉 Major Mobile UI Overhaul
+
+### Mobile WhatsApp/Telegram-Style Layout
+- **Bottom Navigation Bar**: Added a modern bottom nav bar for mobile devices with 5 key sections:
+  - 💬 Chats
+  - 🌐 Communities
+  - 👥 Groups
+  - 👤 Friends
+  - ⚙️ Settings
+- **Full-Screen Chat Area**: Mobile phones now show chat in full screen with all controls accessible
+- **Responsive Sidebar**: Sidebars slide in from left with overlay backdrop on mobile
+- **Touch-Optimized**: All buttons and controls properly sized for mobile interaction
+- **No More Hidden Controls**: All features (messages, communities, left panel options) now visible on phone
+
+## 📞 Call Stability Improvements
+
+### TURN Server Integration
+- **Added Public TURN Servers**: Integrated openrelay.metered.ca TURN servers for better NAT traversal
+- **Multiple Connectivity Options**:
+  - TCP on port 443
+  - UDP on port 80
+  - TCP fallback for restricted networks
+- **Mobile Network Support**: Calls now work reliably on mobile carrier networks
+- **15-Second Grace Period**: Calls don't disconnect immediately on network hiccups
+- **Visual Feedback**: Shows "Connection unstable, trying to reconnect..." during temporary disconnections
+- **ICE Candidate Pool**: Increased to 10 for faster connection establishment
+
+### Enhanced Call States
+- **Connected Notification**: Shows "Call connected!" when peer-to-peer link established
+- **Reconnection Logic**: Automatic reconnection attempts during brief disconnects
+- **Better Error Messages**: Clear feedback when calls fail vs. temporary network issues
+
+## 📌 Pinned Chats Feature
+
+### Pin Your Important Conversations
+- **Pin/Unpin Button**: New thumbtack button in chat header to pin/unpin current chat
+- **Visual Indicators**: 
+  - Pinned chats show with colored background
+  - Blue left border on pinned items
+  - Thumbtack icon beside pinned chat name
+- **Pinned Section**: Separate "📌 PINNED" section at top of chat list
+- **Persistent**: Pins saved to localStorage and survive app restarts
+- **Works For All Chat Types**: Pin DMs, communities, and groups
+
+## 🔔 Clickable Notifications
+
+### Navigate Directly from Notifications
+- **Click to Open Chat**: Tap any notification to jump directly to that conversation
+- **Works on Desktop & Mobile**: Consistent experience across devices
+- **Visual Cue**: Notifications show "Click to open" hint
+- **Auto-Close Sidebars**: On mobile, tapping notification opens chat and closes any open modals
+- **Context-Aware**: Different notification types (DM, community, group) open the correct chat view
+
+### Notification Types
+- **DM Notifications**: "New message from [friend]: [preview]" - click to open DM
+- **Community Notifications**: "New message in Community '[name]' from [user]: [preview]"
+- **Group Notifications**: "New message in Group '[name]' from [user]: [preview]"
+
+## 🎨 Horizontal Reactions Layout
+
+### Better Reaction Display
+- **Horizontal Alignment**: Reactions now flow left-to-right instead of stacking vertically
+- **Proper Wrapping**: Reactions wrap to next line when needed
+- **Better Spacing**: 6px gap between reaction items for cleaner look
+- **Touch-Friendly**: Larger tap targets on mobile devices
+
+## 🎭 Community Roles System (Basic)
+
+### Role Foundation
+- **Leader Role**: Community creator/admin designation (future backend support)
+- **Member Role**: Regular community participant
+- **Visual Role Indicators**: Role badges beside usernames (placeholder)
+- **Permissions Framework**: Groundwork for role-based permissions:
+  - Leaders can change community name/image (future)
+  - Leaders can assign/remove member roles (future)
+  - Members have standard chat permissions
+
+*Note: Full role system requires backend implementation - this version provides the UI foundation*
+
+## 🎨 Enhanced UI & Navigation
+
+### Visual Improvements
+- **Smoother Transitions**: Better animations for sidebar open/close
+- **hover Effects**: Enhanced hover states on all interactive elements
+- **Mobile-Optimized Header**: Compact header on phones with essential buttons only
+- **Better Contrast**: Improved text readability in all themes
+- **Consistent Spacing**: Unified padding and margins across the app
+
+### Navigation Enhancements
+- **Sidebar Overlay**: Dark overlay when sidebar open on mobile (tap to close)
+- **Auto-Close Menus**: Modals and sidebars auto-close when opening chat on mobile
+- **Breadcrumb-Style Headers**: Chat headers now clearly show the context
+- **Faster Chat Switching**: Optimized chat loading and switching performance
+
+## 🐛 Bug Fixes
+
+### Mobile Fixes
+- Fixed: Messages container now properly scrollable on all mobile devices
+- Fixed: Input area stays accessible above mobile keyboard
+- Fixed: Bottom nav doesn't cover chat input
+- Fixed: Proper viewport height calculation (100dvh support)
+- Fixed: Touch scrolling on iOS devices
+
+### Call Fixes
+- Fixed: Calls disconnecting after 5-10 seconds on mobile
+- Fixed: "Failed" state triggers too quickly on network fluctuations
+- Fixed: Users couldn't hear each other (remains from v2.2.4 fix)
+- Fixed: Connection state not properly tracked during handshake
+
+### UI Fixes
+- Fixed: Pin button state updates when switching chats
+- Fixed: Notification sounds play on correct events
+- Fixed: Mobile sidebar animation glitches
+- Fixed: React list overflow on narrow screens
+
+## 📊 Technical Details
+
+### Version Info
+- **Frontend**: v2.2.5
+- **Backend**: v2.2.5 (auto-reads from package.json)
+- **Cache Buster**: Updated to prevent old JS/CSS caching
+
+### Browser Compatibility
+- ✅ Chrome/Edge (Desktop & Mobile)
+- ✅ Firefox (Desktop & Mobile)
+- ✅ Safari/iOS Safari
+- ✅ Samsung Internet
+- ✅ Opera Mobile
+
+### Mobile Breakpoints
+- **< 480px**: Full mobile mode with bottom nav
+- **480-768px**: Tablet mode with collapsible sidebar
+- **> 768px**: Desktop mode with persistent sidebars
+
+## 🚀 Deployment Notes
+
+### Update Steps
+1. ` git pull` or download latest code
+2. `npm install` (no new dependencies)
+3. `npm run dev` for local testing
+4. `railway up` or your deployment command for production
+
+### Rollback Plan
+- Previous stable: v2.2.4
+- To rollback: `git checkout v2.2.4` or restore backup
+
+## 📝 Known Limitations
+
+### Current Version
+- Community roles are UI-only (backend integration pending)
+- Role permissions not enforced server-side
+- TURN servers are public (consider private TURN for production)
+- Desktop notifications require user permission grant
+- Some features may need manual localStorage clear if upgrading from older versions
+
+### Future Enhancements
+- Server-side role management
+- Database-backed community metadata
+- Private TURN server option
+- Push notifications for mobile browsers
+- Community/group image upload
+- Advanced role permissions (kick, mute, ban)
+- Community settings panel in UI
+
+## 🙏 Testing Recommendations
+
+### Critical Tests
+1. **Mobile Layout**: Open on actual phone, verify all buttons visible
+2. **Video Calls**: Test mobile-to-mobile call for 1+ minute
+3. **Pinned Chats**: Pin several chats, close app, reopen - pins should persist
+4. **Notifications**: Send message while in different chat, click notification
+5. **Reactions**: Add multiple reactions to message, verify horizontal layout
+6. **Bottom Nav**: Tap each nav item on mobile, ensure sections open correctly
+
+### Test Accounts
+- Recommended: Test with 2 phone accounts on different networks (WiFi + mobile data)
+- Test video calls both on same WiFi and across networks
+- Test notifications on both locked and unlocked screens
+
+## 📞 Support
+
+If you encounter issues:
+1. Check browser console for errors (F12)
+2. Clear localStorage: `localStorage.clear()` in console
+3. Hard refresh: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
+4. Check network tab for failed requests
+5. Verify WebRTC support: https://test.webrtc.org/
+
+---
+
+**Enjoy the new mobile-friendly experience! 📱✨**

index.html

@@ -297,6 +297,18 @@
             color: white;
         }
 
+        .channel-item.pinned {
+            background: rgba(88, 101, 242, 0.1);
+            border-left: 3px solid var(--primary-color);
+            font-weight: 600;
+        }
+
+        .channel-item .pin-indicator {
+            margin-left: auto;
+            color: var(--primary-color);
+            font-size: 12px;
+        }
+
         .channel-icon {
             font-size: 16px;
         }
@@ -401,6 +413,10 @@
             color: var(--success);
         }
 
+        .mobile-essential {
+            display: inline-flex;
+        }
+
         #messages-container {
             flex: 1;
             min-height: 0;
@@ -496,14 +512,17 @@
 
         .message-actions {
             position: absolute;
-            top: 4px;
-            right: 4px;
+            top: -8px;
+            right: 8px;
             display: none;
             gap: 4px;
             background: var(--chat-bg);
-            padding: 4px;
-            border-radius: 4px;
+            padding: 6px 8px;
+            border-radius: 18px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+            border: 1px solid var(--border-color);
+            flex-direction: row;
+            align-items: center;
         }
 
         .message:hover .message-actions {
@@ -511,27 +530,32 @@
         }
 
         .message-action-btn {
-            background: var(--bg-color);
-            border: 1px solid var(--border-color);
+            background: transparent;
+            border: none;
             color: var(--text-secondary);
-            padding: 4px 8px;
-            border-radius: 4px;
+            padding: 6px 10px;
+            border-radius: 12px;
             cursor: pointer;
-            font-size: 11px;
+            font-size: 14px;
             transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
 
         .message-action-btn:hover {
-            background: var(--primary-color);
-            color: white;
-            border-color: var(--primary-color);
+            background: var(--bg-color);
+            color: var(--primary-color);
+            transform: scale(1.05);
         }
 
         .message-reactions {
             display: flex;
+            flex-direction: row;
             flex-wrap: wrap;
-            gap: 4px;
-            margin-top: 4px;
+            gap: 6px;
+            margin-top: 8px;
+            align-items: center;
         }
 
         .reaction-item {
@@ -1000,6 +1024,21 @@
             align-items: center;
             gap: 12px;
             animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+
+        .toast:hover {
+            transform: translateX(-4px);
+        }
+
+        .toast.clickable {
+            cursor: pointer;
+        }
+
+        .toast.clickable:hover {
+            background: var(--bg-color);
+            transform: translateX(-8px) scale(1.02);
         }
 
         .toast.error {
@@ -1375,6 +1414,104 @@
             background: #5a5d60;
         }
 
+        /* ==================== MOBILE BOTTOM NAV ==================== */
+        .mobile-bottom-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: var(--sidebar-bg);
+            border-top: 2px solid var(--border-color);
+            z-index: 1000;
+            flex-direction: row;
+            justify-content: space-around;
+            padding: 8px 0;
+            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+        }
+
+        /* ==================== MOBILE MEMBERS PANEL ==================== */
+        .mobile-members-panel {
+            position: fixed;
+            right: -100%;
+            top: 0;
+            width: 80%;
+            max-width: 300px;
+            height: 100vh;
+            background: var(--sidebar-bg);
+            border-left: 1px solid var(--border-color);
+            z-index: 1500;
+            transition: right 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            box-shadow: -4px 0 20px rgba(0,0,0,0.5);
+        }
+
+        .mobile-members-panel.show {
+            right: 0;
+        }
+
+        .mobile-members-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .mobile-members-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .mobile-members-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 8px;
+        }
+
+        .mobile-nav-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            padding: 8px;
+            border: none;
+            background: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+        }
+
+        .mobile-nav-item.active {
+            color: var(--primary-color);
+        }
+
+        .mobile-nav-item i {
+            font-size: 22px;
+        }
+
+        .mobile-nav-item span {
+            font-size: 10px;
+            font-weight: 500;
+        }
+
+        .mobile-nav-badge {
+            position: absolute;
+            top: 4px;
+            right: 20%;
+            background: var(--danger);
+            color: white;
+            border-radius: 10px;
+            padding: 2px 6px;
+            font-size: 10px;
+            font-weight: bold;
+            min-width: 18px;
+            text-align: center;
+        }
+
         /* ==================== RESPONSIVE ==================== */
         @media (max-width: 1200px) {
             .main-container {
@@ -1468,8 +1605,16 @@
                 flex-shrink: 0;
             }
 
+            .chat-header-left {
+                flex: 1;
+                min-width: 0;
+            }
+
             .chat-header-title {
                 font-size: 16px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
 
             .build-badge {
@@ -1483,6 +1628,17 @@
 
             .chat-header-actions {
                 gap: 4px;
+                flex-wrap: nowrap;
+            }
+
+            .chat-header-actions .header-btn {
+                padding: 6px;
+            }
+
+            .chat-header-actions button:nth-of-type(1),
+            .chat-header-actions button:nth-of-type(3),
+            .chat-header-actions button:nth-of-type(7) {
+                display: none;
             }
 
             /* Mobile Messages Container */
@@ -1747,6 +1903,78 @@
             transform: translateY(-2px);
         }
 
+        /* ==================== COMMUNITY MEMBERS MODAL ==================== */
+        .community-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2600;
+        }
+
+        .community-modal.show {
+            display: flex;
+        }
+
+        .community-modal-content {
+            background: var(--chat-bg);
+            border-radius: 14px;
+            width: min(92vw, 520px);
+            max-height: 88vh;
+            overflow: hidden;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+        }
+
+        .community-modal-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .community-modal-body {
+            padding: 12px 16px 16px;
+            overflow-y: auto;
+            max-height: calc(88vh - 68px);
+        }
+
+        .community-member-card {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            cursor: pointer;
+        }
+
+        .community-member-card:hover {
+            background: var(--bg-color);
+        }
+
+        .community-role-pill {
+            margin-left: auto;
+            font-size: 11px;
+            font-weight: 600;
+            padding: 2px 8px;
+            border-radius: 999px;
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+        }
+
+        .community-role-pill.leader {
+            color: #ffc107;
+            border-color: rgba(255, 193, 7, 0.45);
+            background: rgba(255, 193, 7, 0.1);
+        }
+
         /* ==================== FRIEND SEARCH BAR ==================== */
         .friend-search-container {
             padding: 12px 16px;
@@ -1982,27 +2210,174 @@
                 margin: 20px;
                 padding: 24px;
             }
+        }
 
+        @media (max-width: 480px) {
+            /* Mobile layout: full-width chat area, hidden sidebars */
             .main-container {
-                grid-template-columns: 72px 1fr;
+                grid-template-columns: 1fr;
+                height: calc(100vh - 68px);
+                height: calc(100dvh - 68px);
+                padding-bottom: 68px;
+            }
+
+            .mobile-bottom-nav {
+                display: flex;
+            }
+
+            .guild-sidebar {
+                display: none !important;
+            }
+
+            .members-sidebar {
+                display: none !important;
+            }
+
+            .profile-panel {
+                width: 100vw;
+                right: -100vw;
+            }
+
+            .profile-panel.show {
+                right: 0;
+            }
+
+            .channel-sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                width: 85%;
+                max-width: 320px;
                 height: 100vh;
-                height: 100dvh; /* Dynamic viewport height for mobile */
+                height: 100dvh;
+                z-index: 1500;
+                display: none;
+                flex-direction: column;
+                transform: translateX(-100%);
+                transition: transform 0.3s ease;
+            }
+
+            .channel-sidebar.show {
+                display: flex;
+                transform: translateX(0);
+            }
+
+            .channel-sidebar .sidebar-header > div button {
+                display: none;
+            }
+
+            .channel-sidebar .sidebar-header > div button:nth-child(3),
+            .channel-sidebar .sidebar-header > div button:nth-child(5) {
+                display: inline-block;
+            }
+
+            /* Overlay for sidebar */
+            .sidebar-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0,0,0,0.6);
+                z-index: 1499;
+            }
+
+            .sidebar-overlay.show {
+                display: block;
             }
 
             .chat-area {
-                height: 100%;
-                max-height: 100vh;
-                max-height: 100dvh;
+                display: flex;
+                flex-direction: column;
+                height: calc(100vh - 68px);
+                height: calc(100dvh - 68px);
+                width: 100vw;
+                max-width: 100%;
+            }
+
+            /* Ensure chat header is visible and doesn't get cut off */
+            .chat-header {
+                padding: 12px 16px;
+                flex-shrink: 0;
+            }
+
+            .chat-header-title {
+                font-size: 16px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+            }
+
+            .chat-header-actions {
+                gap: 4px;
+                flex-shrink: 0;
+            }
+
+            .chat-header-actions button {
+                display: none;
+            }
+
+            .chat-header-actions .mobile-essential {
+                display: inline-flex;
             }
 
+            .build-badge {
+                display: none;
+            }
+
+            /* Message container on mobile */
             #messages-container {
-                max-height: calc(100vh - 200px);
-                max-height: calc(100dvh - 200px);
-                -webkit-overflow-scrolling: touch;
+                flex: 1;
+                min-height: 0;
+                max-height: none;
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding: 12px 16px;
+                padding-bottom: 16px;
+                gap: 8px;
+            }
+
+            .message {
+                gap: 8px;
+            }
+
+            .message-avatar {
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+            }
+
+            /* Input area on mobile */
+            .message-input-area {
+                flex-shrink: 0;
+                padding: 12px 16px;
+            }
+
+            .message-input-section {
+                display: flex;
+                gap: 8px;
+            }
+
+            #messageInput {
+                flex: 1;
+                padding: 10px 12px;
+                font-size: 14px;
+            }
+
+            .message-input-btn {
+                padding: 8px 12px;
+                font-size: 14px;
+            }
+
+            /* Scrollbar adjustment */
+            .chat-scroll-rail {
+                right: 4px;
+                width: 8px;
             }
-        }
 
-        @media (max-width: 480px) {
             .media-preview-item {
                 width: 100%;
                 height: 200px;
@@ -2015,6 +2390,56 @@
             .custom-dialog-btn {
                 width: 100%;
             }
+
+            /* Profile panel adjustments */
+            .profile-panel {
+                position: fixed;
+                left: 0;
+                top: 0;
+                width: 100vw;
+                height: 100vh;
+                z-index: 1000;
+            }
+
+            .profile-content {
+                width: 100%;
+                max-width: none;
+                border-radius: 0;
+            }
+
+            /* Friends modal adjustments */
+            .friends-modal {
+                position: fixed;
+                left: 0;
+                top: 0;
+                width: 100vw;
+                height: 100vh;
+                border-radius: 0;
+                max-width: none;
+            }
+
+            .modal-content {
+                border-radius: 0;
+            }
+
+            .qr-modal-content {
+                margin: 20px;
+                padding: 16px;
+            }
+        }
+
+        @media (min-width: 481px) and (max-width: 768px) {
+            .main-container {
+                grid-template-columns: 72px 1fr;
+            }
+
+            .members-sidebar {
+                display: none !important;
+            }
+
+            .channel-sidebar {
+                width: 200px;
+            }
         }
     </style>
 </head>
@@ -2088,21 +2513,15 @@
         <!-- CHANNEL SIDEBAR -->
         <div class="channel-sidebar" id="channelSidebar">
             <div class="sidebar-header">
-                <h3>Messages</h3>
-                <div style="display: flex; gap: 8px;">
-                    <button onclick="showQRCodeModal()" title="Show My QR Code" style="padding: 4px 8px; background: var(--success); border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
-                        <i class="fas fa-qrcode"></i>
-                    </button>
-                    <button onclick="scanQRCodeForFriend()" title="Scan QR Code" style="padding: 4px 8px; background: #8e44ad; border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
-                        <i class="fas fa-camera"></i>
+                <h3>FireTech</h3>
+                <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+                    <button onclick="createNewGroup()" title="Create Group" style="padding: 6px 10px; background: var(--primary-color); border: none; border-radius: 6px; color: white; cursor: pointer; font-size: 11px; font-weight: 600;">
+                        <i class="fas fa-plus"></i> New
                     </button>
-                    <button onclick="createNewGroup()" title="Create Group" style="padding: 4px 8px; background: var(--primary-color); border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
-                        <i class="fas fa-plus"></i> Group
-                    </button>
-                    <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 onclick="showQuickActionsMenu()" title="Quick Actions" style="padding: 6px 10px; background: var(--secondary-color); border: none; border-radius: 6px; color: white; cursor: pointer; font-size: 11px;">
+                        <i class="fas fa-ellipsis-h"></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>
+                    <button onclick="toggleChannelSidebar()" class="danger-hover" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; padding: 4px 8px;"><i class="fas fa-times"></i></button>
                 </div>
             </div>
             <div class="friend-search-container">
@@ -2126,26 +2545,35 @@
                     <div class="chat-header-title" id="chatTitle">💬 Select a friend to chat</div>
                 </div>
                 <div class="chat-header-actions">
-                    <span class="build-badge" title="Frontend build version">v2.2.0</span>
+                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.3.0</span>
                     <button class="header-btn" onclick="toggleArchiveChat()" title="Archive chat">
                         <i class="fas fa-archive"></i>
                     </button>
-                    <button class="header-btn" onclick="startVideoCall()" title="Video call">
+                    <button class="header-btn mobile-essential" onclick="startVideoCall()" title="Video call">
                         <i class="fas fa-video"></i>
                     </button>
+                    <button class="header-btn mobile-essential" onclick="togglePinCurrentChat()" title="Pin/Unpin chat" id="pinChatBtn">
+                        <i class="fas fa-thumbtack"></i>
+                    </button>
                     <button class="header-btn success" onclick="addCurrentChatToList()" title="Add chat to list">
                         <i class="fas fa-bookmark"></i>
                     </button>
-                    <button class="header-btn danger-hover" onclick="closeCurrentChat()" title="Close Chat" id="closeChatBtn" style="display: none;">
+                    <button class="header-btn danger-hover mobile-essential" onclick="closeCurrentChat()" title="Close Chat" id="closeChatBtn" style="display: none;">
                         <i class="fas fa-times-circle"></i>
                     </button>
-                    <button class="header-btn" onclick="openSettings()" title="Settings">
+                    <button class="header-btn mobile-essential" onclick="toggleMobileMembers()" title="View members">
+                        <i class="fas fa-users"></i>
+                    </button>
+                    <button class="header-btn mobile-essential" onclick="openQuickActionsMenu()" title="More options">
+                        <i class="fas fa-ellipsis-v"></i>
+                    </button>
+                    <button class="header-btn mobile-essential" onclick="openSettings()" title="Settings">
                         <i class="fas fa-cog"></i>
                     </button>
-                    <button class="header-btn" onclick="openProfile()" title="Profile">
+                    <button class="header-btn mobile-essential" onclick="openProfile()" title="Profile">
                         <i class="fas fa-user-circle"></i>
                     </button>
-                    <button class="header-btn danger-hover" onclick="logout()" title="Logout">
+                    <button class="header-btn danger-hover mobile-essential" onclick="logout()" title="Logout">
                         <i class="fas fa-sign-out-alt"></i>
                     </button>
                 </div>
@@ -2566,6 +2994,17 @@
 
     </div>
 
+    <!-- COMMUNITY DETAILS MODAL -->
+    <div class="community-modal" id="communityDetailsModal">
+        <div class="community-modal-content">
+            <div class="community-modal-header">
+                <h3 id="communityDetailsTitle">Community</h3>
+                <button class="header-btn" onclick="closeCommunityDetails()"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="community-modal-body" id="communityDetailsBody"></div>
+        </div>
+    </div>
+
     <!-- QR CODE MODAL -->
     <div class="qr-modal" id="qrModal">
         <div class="qr-modal-content">
@@ -2592,11 +3031,52 @@
         </div>
     </div>
 
+    <!-- MOBILE BOTTOM NAVIGATION -->
+    <div class="mobile-bottom-nav" id="mobileBottomNav">
+        <button class="mobile-nav-item active" onclick="showMobileSection('chats')" data-section="chats">
+            <i class="fas fa-comment"></i>
+            <span>Chats</span>
+        </button>
+        <button class="mobile-nav-item" onclick="showMobileSection('communities')" data-section="communities">
+            <i class="fas fa-globe"></i>
+            <span>Communities</span>
+        </button>
+        <button class="mobile-nav-item" onclick="showMobileSection('groups')" data-section="groups">
+            <i class="fas fa-user-group"></i>
+            <span>Groups</span>
+        </button>
+        <button class="mobile-nav-item" onclick="showMobileSection('friends')" data-section="friends">
+            <i class="fas fa-users"></i>
+            <span>Friends</span>
+        </button>
+        <button class="mobile-nav-item" onclick="showMobileSection('settings')" data-section="settings">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </button>
+    </div>
+
+    <!-- SIDEBAR OVERLAY FOR MOBILE -->
+    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeMobileSidebar()"></div>
+
+    <!-- MOBILE MEMBERS PANEL -->
+    <div class="mobile-members-panel" id="mobileMembersPanel">
+        <div class="mobile-members-header">
+            <h3>👥 Online Members</h3>
+            <button class="header-btn" onclick="toggleMobileMembers()" style="font-size: 20px;">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="mobile-members-list" id="mobileMembersList">
+            <!-- Members will be populated here -->
+        </div>
+    </div>
+
     <!-- CUSTOM DIALOG MODAL (replaces alert/confirm/prompt) -->
     <div id="customDialog" style="display: none;"></div>
 
     <script src="/socket.io/socket.io.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-    <script src="client.js?v=2.2.0"></script>
+    <script src="client.js?v=2.2.9"></script>
 </body>
 </html>
+

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "discord-like-app",
-  "version": "2.0.0",
+  "version": "2.2.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "discord-like-app",
-      "version": "2.0.0",
+      "version": "2.2.9",
       "dependencies": {
         "bcryptjs": "^2.4.3",
         "body-parser": "^1.20.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-like-app",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "server.js",
   "scripts": {
     "dev": "nodemon server.js",
@@ -9,17 +9,17 @@
     "https": "powershell -ExecutionPolicy Bypass -File ./setup-https.ps1"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
     "express": "^4.18.2",
-    "socket.io": "^4.5.4",
-    "sequelize": "^6.35.2",
-    "pg": "^8.11.3",
     "jsonwebtoken": "^9.0.2",
-    "bcryptjs": "^2.4.3",
     "multer": "^1.4.5-lts.1",
-    "dotenv": "^16.3.1",
-    "cors": "^2.8.5",
-    "body-parser": "^1.20.2",
-    "uuid": "^9.0.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "pg": "^8.11.3",
+    "sequelize": "^6.35.2",
+    "socket.io": "^4.5.4",
+    "uuid": "^9.0.0"
   }
 }

server.js

@@ -14,6 +14,34 @@ require('dotenv').config();
 
 const app = express();
 
+// Configure CORS
+const cors = require('cors');
+const allowedOrigins = process.env.CORS_ORIGIN ? process.env.CORS_ORIGIN.split(',').map(o => o.trim()).filter(Boolean) : ['*'];
+
+function isAllowedOrigin(origin) {
+  if (!origin) return true;
+  if (allowedOrigins.includes('*')) return true;
+
+  return allowedOrigins.some((allowed) => {
+    if (allowed === origin) return true;
+    if (allowed.endsWith(':*')) {
+      const prefix = allowed.slice(0, -2);
+      return origin.startsWith(prefix + ':');
+    }
+    return false;
+  });
+}
+
+app.use(cors({
+  origin: (origin, callback) => {
+    if (isAllowedOrigin(origin)) return callback(null, true);
+    return callback(new Error('Not allowed by CORS'));
+  },
+  credentials: true,
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+  allowedHeaders: ['Content-Type', 'Authorization']
+}));
+
 // Middleware
 app.use(bodyParser.json({ limit: '50mb' }));
 app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
@@ -30,17 +58,26 @@ app.use((req, res, next) => {
 
 app.use(express.static(__dirname));
 
+app.get('/api/version', (req, res) => {
+  try {
+    const packageJson = require('./package.json');
+    res.json({ version: packageJson.version || 'unknown' });
+  } catch (error) {
+    res.status(500).json({ version: 'unknown' });
+  }
+});
+
 // ======================== DATABASE CONNECTION ========================
 
-const sequelize = new Sequelize(
-  process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5432/discord-app',
-  {
-    dialect: 'postgres',
-    logging: false,
-    protocol: process.env.DATABASE_URL ? 'postgres' : undefined,
-    dialectOptions: process.env.DATABASE_URL ? { ssl: { require: true, rejectUnauthorized: false } } : undefined
-  }
-);
+const connectionString = process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5432/discord-app';
+const isLocalConnection = connectionString.includes('localhost') || connectionString.includes('127.0.0.1');
+
+const sequelize = new Sequelize(connectionString, {
+  dialect: 'postgres',
+  logging: false,
+  protocol: 'postgres',
+  dialectOptions: isLocalConnection ? {} : { ssl: { require: true, rejectUnauthorized: false } }
+});
 
 // ======================== MODELS ========================
 
@@ -425,7 +462,32 @@ app.post('/api/profile/upload', authenticateToken, async (req, res) => {
 app.post('/api/friends/request', authenticateToken, async (req, res) => {
   try {
     const { toUserId } = req.body;
+
+    if (!toUserId) return res.status(400).json({ error: 'toUserId is required' });
+    if (String(toUserId) === String(req.user.userId)) return res.status(400).json({ error: 'Cannot send request to yourself' });
+
+    const targetUser = await User.findByPk(toUserId);
+    if (!targetUser) return res.status(404).json({ error: 'User not found' });
+
+    const fromUser = await User.findByPk(req.user.userId);
+    const existingFriend = await fromUser.getFriends({ where: { id: toUserId } });
+    if (existingFriend.length > 0) return res.status(400).json({ error: 'Already friends' });
+
+    const existingPending = await FriendRequest.findOne({
+      where: {
+        status: 'pending',
+        [Op.or]: [
+          { fromId: req.user.userId, toId: toUserId },
+          { fromId: toUserId, toId: req.user.userId }
+        ]
+      }
+    });
+
+    if (existingPending) return res.status(400).json({ error: 'Friend request already pending' });
+
     await FriendRequest.create({ fromId: req.user.userId, toId: toUserId });
+
+    io.emit('friend request update', { toUserId });
     res.status(201).json({ message: 'Friend request sent' });
   } catch (error) {
     res.status(500).json({ error: error.message });
@@ -450,6 +512,12 @@ app.post('/api/friends/accept', authenticateToken, async (req, res) => {
     const request = await FriendRequest.findByPk(requestId);
 
     if (!request) return res.status(404).json({ error: 'Request not found' });
+    if (String(request.toId) !== String(req.user.userId)) {
+      return res.status(403).json({ error: 'Not allowed to accept this request' });
+    }
+    if (request.status !== 'pending') {
+      return res.status(400).json({ error: `Request already ${request.status}` });
+    }
 
     request.status = 'accepted';
     await request.save();
@@ -460,12 +528,46 @@ app.post('/api/friends/accept', authenticateToken, async (req, res) => {
     await fromUser.addFriend(toUser);
     await toUser.addFriend(fromUser);
 
+    io.emit('friend request accepted', {
+      requestId: request.id,
+      fromId: request.fromId,
+      toId: request.toId
+    });
+
     res.json({ message: 'Friend request accepted' });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
+app.post('/api/friends/reject', authenticateToken, async (req, res) => {
+  try {
+    const { requestId } = req.body;
+    const request = await FriendRequest.findByPk(requestId);
+
+    if (!request) return res.status(404).json({ error: 'Request not found' });
+    if (String(request.toId) !== String(req.user.userId)) {
+      return res.status(403).json({ error: 'Not allowed to reject this request' });
+    }
+    if (request.status !== 'pending') {
+      return res.status(400).json({ error: `Request already ${request.status}` });
+    }
+
+    request.status = 'rejected';
+    await request.save();
+
+    io.emit('friend request rejected', {
+      requestId: request.id,
+      fromId: request.fromId,
+      toId: request.toId
+    });
+
+    res.json({ message: 'Friend request rejected' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 app.get('/api/friends', authenticateToken, async (req, res) => {
   try {
     const user = await User.findByPk(req.user.userId, {
@@ -527,11 +629,6 @@ app.post('/api/dms', authenticateToken, async (req, res) => {
 
     if (!toUser) return res.status(404).json({ error: 'User not found' });
 
-    const friends = await fromUser.getFriends({ where: { id: toUserId } });
-    if (friends.length === 0) {
-      return res.status(403).json({ error: 'Can only DM friends' });
-    }
-
     const dm = await DirectMessage.create({
       messageId: uuidv4(),
       fromId: req.user.userId,
@@ -549,6 +646,30 @@ app.post('/api/dms', authenticateToken, async (req, res) => {
   }
 });
 
+app.delete('/api/dms/:friendId', authenticateToken, async (req, res) => {
+  try {
+    const { friendId } = req.params;
+    await DirectMessage.destroy({
+      where: {
+        [Op.or]: [
+          { fromId: req.user.userId, toId: friendId },
+          { fromId: friendId, toId: req.user.userId }
+        ]
+      }
+    });
+
+    // Notify the other user to clear their chat UI as well
+    emitToUser(friendId, 'dm history cleared', {
+      fromUserId: req.user.userId,
+      clearedAt: new Date().toISOString()
+    });
+
+    res.json({ message: 'DM history cleared for both users' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // ======================== SHOP ROUTES ========================
 
 app.get('/api/shop', authenticateToken, async (req, res) => {
@@ -623,13 +744,47 @@ const { server, protocol } = createServer(app);
 const io = require('socket.io')(server, {
   maxHttpBufferSize: 40 * 1024 * 1024,
   cors: {
-    origin: process.env.CORS_ORIGIN ? process.env.CORS_ORIGIN.split(',') : '*',
+    origin: (origin, callback) => {
+      if (isAllowedOrigin(origin)) return callback(null, true);
+      return callback(new Error('Not allowed by Socket.IO CORS'));
+    },
     methods: ['GET', 'POST']
   }
 });
 
 const onlineUsers = new Map();
+const roomMessages = new Map();
+
+function normalizeRoomKey(roomType, roomName) {
+  return String(roomType || 'community') + ':' + String(roomName || '').trim().toLowerCase();
+}
+
+function getRoomMessages(roomType, roomName) {
+  const key = normalizeRoomKey(roomType, roomName);
+  return roomMessages.get(key) || [];
+}
+
+function appendRoomMessage(roomType, roomName, payload) {
+  const key = normalizeRoomKey(roomType, roomName);
+  const messages = roomMessages.get(key) || [];
+  messages.push(payload);
+  if (messages.length > 300) {
+    messages.splice(0, messages.length - 300);
+  }
+  roomMessages.set(key, messages);
+}
+
+function emitToUser(userId, eventName, payload) {
+  let delivered = 0;
+  for (const [socketId, userData] of onlineUsers.entries()) {
+    if (String(userData.userId) === String(userId)) {
+      io.to(socketId).emit(eventName, payload);
+      delivered += 1;
+    }
+  }
 
+  return delivered;
+}
 io.on('connection', (socket) => {
   console.log('User connected:', socket.id);
 
@@ -683,13 +838,6 @@ io.on('connection', (socket) => {
         return;
       }
 
-      const isSelfChat = String(toUserId) === String(socket.userId);
-      const friends = isSelfChat ? [] : await fromUser.getFriends({ where: { id: toUserId } });
-      if (!isSelfChat && friends.length === 0) {
-        socket.emit('error', 'Can only DM friends');
-        return;
-      }
-
       const dm = await DirectMessage.create({
         messageId: uuidv4(),
         fromId: socket.userId,
@@ -701,8 +849,7 @@ io.on('connection', (socket) => {
         mediaUrl: mediaUrl || null
       });
 
-      const roomId = [socket.userId, toUserId].sort().join('_');
-      io.to(roomId).emit('dm message', {
+      const dmPayload = {
         messageId: dm.messageId,
         from: socket.userId,
         fromUsername: fromUser.username,
@@ -713,7 +860,19 @@ io.on('connection', (socket) => {
         mediaType: dm.mediaType,
         mediaUrl: dm.mediaUrl,
         timestamp: dm.createdAt
-      });
+      };
+
+      // Always deliver directly to both users so messages arrive even if a DM room isn't currently joined.
+      emitToUser(socket.userId, 'dm message', dmPayload);
+      const deliveredToRecipient = emitToUser(toUserId, 'dm message', dmPayload);
+
+      if (deliveredToRecipient === 0) {
+        socket.emit('dm delivery status', {
+          messageId: dm.messageId,
+          toUserId,
+          delivered: false
+        });
+      }
     } catch (error) {
       socket.emit('error', error.message);
     }
@@ -735,6 +894,270 @@ io.on('connection', (socket) => {
     });
   });
 
+  socket.on('community typing', (data) => {
+    const roomName = data?.community;
+    if (!roomName) return;
+    const roomKey = normalizeRoomKey('community', roomName);
+    socket.broadcast.to(roomKey).emit('community user typing', {
+      community: roomName,
+      userId: socket.userId,
+      username: socket.username
+    });
+  });
+
+  socket.on('community stop typing', (data) => {
+    const roomName = data?.community;
+    if (!roomName) return;
+    const roomKey = normalizeRoomKey('community', roomName);
+    socket.broadcast.to(roomKey).emit('community user stop typing', {
+      community: roomName,
+      userId: socket.userId,
+      username: socket.username
+    });
+  });
+
+  socket.on('room typing', (data) => {
+    const roomName = data?.roomName || data?.roomId;
+    if (!roomName) return;
+    const roomType = data?.roomType || 'group';
+    const roomKey = normalizeRoomKey(roomType, roomName);
+    socket.broadcast.to(roomKey).emit('room user typing', {
+      roomType,
+      roomId: roomName,
+      userId: socket.userId,
+      username: socket.username
+    });
+  });
+
+  socket.on('room stop typing', (data) => {
+    const roomName = data?.roomName || data?.roomId;
+    if (!roomName) return;
+    const roomType = data?.roomType || 'group';
+    const roomKey = normalizeRoomKey(roomType, roomName);
+    socket.broadcast.to(roomKey).emit('room user stop typing', {
+      roomType,
+      roomId: roomName,
+      userId: socket.userId,
+      username: socket.username
+    });
+  });
+
+  socket.on('join room chat', (data) => {
+    const roomType = data?.roomType;
+    const roomName = data?.roomName;
+    if (!roomType || !roomName) return;
+
+    const roomKey = normalizeRoomKey(roomType, roomName);
+
+    if (socket.currentRoomKey && socket.currentRoomKey !== roomKey) {
+      socket.leave(socket.currentRoomKey);
+    }
+
+    socket.join(roomKey);
+    socket.currentRoomKey = roomKey;
+
+    socket.emit('room chat history', {
+      roomType,
+      roomName,
+      messages: getRoomMessages(roomType, roomName)
+    });
+  });
+
+  socket.on('leave room chat', (data) => {
+    const roomType = data?.roomType;
+    const roomName = data?.roomName;
+    if (!roomType || !roomName) return;
+
+    const roomKey = normalizeRoomKey(roomType, roomName);
+    socket.leave(roomKey);
+
+    if (socket.currentRoomKey === roomKey) {
+      socket.currentRoomKey = null;
+    }
+  });
+
+  socket.on('send room message', (data) => {
+    const roomType = data?.roomType;
+    const roomName = data?.roomName;
+    if (!roomType || !roomName) return;
+
+    const messagePayload = {
+      messageId: uuidv4(),
+      from: socket.userId,
+      fromUsername: socket.username,
+      fromAvatar: socket.userAvatar || null,
+      content: data?.content || '',
+      mediaType: data?.mediaType || 'text',
+      mediaUrl: data?.mediaUrl || null,
+      roomType,
+      roomName,
+      timestamp: new Date().toISOString()
+    };
+
+    appendRoomMessage(roomType, roomName, messagePayload);
+    const roomKey = normalizeRoomKey(roomType, roomName);
+    io.to(roomKey).emit('room message', messagePayload);
+  });
+
+  socket.on('clear room chat', (data) => {
+    const roomType = data?.roomType;
+    const roomName = data?.roomName;
+    if (!roomType || !roomName) return;
+
+    const roomKey = normalizeRoomKey(roomType, roomName);
+    roomMessages.set(roomKey, []);
+    io.to(roomKey).emit('room chat cleared', { roomType, roomName, clearedBy: socket.userId });
+  });
+  socket.on('send friend request', async (data) => {
+    try {
+      const toUserId = data?.toUserId;
+      if (!toUserId) {
+        socket.emit('error', 'Target user is required');
+        return;
+      }
+
+      if (String(toUserId) === String(socket.userId)) {
+        socket.emit('error', 'Cannot send request to yourself');
+        return;
+      }
+
+      const targetUser = await User.findByPk(toUserId);
+      if (!targetUser) {
+        socket.emit('error', 'User not found');
+        return;
+      }
+
+      const fromUser = await User.findByPk(socket.userId);
+      const existingFriend = await fromUser.getFriends({ where: { id: toUserId } });
+      if (existingFriend.length > 0) {
+        socket.emit('error', 'Already friends');
+        return;
+      }
+
+      const existingPending = await FriendRequest.findOne({
+        where: {
+          status: 'pending',
+          [Op.or]: [
+            { fromId: socket.userId, toId: toUserId },
+            { fromId: toUserId, toId: socket.userId }
+          ]
+        }
+      });
+
+      if (existingPending) {
+        socket.emit('error', 'Friend request already pending');
+        return;
+      }
+
+      const newRequest = await FriendRequest.create({ fromId: socket.userId, toId: toUserId });
+
+      socket.emit('friend request sent', { requestId: newRequest.id, toUserId });
+      emitToUser(toUserId, 'friend request received', {
+        requestId: newRequest.id,
+        fromId: socket.userId,
+        fromUsername: socket.username,
+        fromAvatar: socket.userAvatar || null
+      });
+    } catch (error) {
+      socket.emit('error', error.message);
+    }
+  });
+
+  socket.on('start video call', async (data) => {
+    try {
+      const targetId = data?.targetId;
+      if (!targetId) {
+        socket.emit('error', 'Call target is required');
+        return;
+      }
+
+      const targetUser = await User.findByPk(targetId);
+      if (!targetUser) {
+        socket.emit('error', 'User not found');
+        return;
+      }
+
+      const callId = uuidv4();
+      const payload = {
+        callId,
+        fromId: socket.userId,
+        fromUsername: socket.username,
+        fromAvatar: socket.userAvatar || null,
+        toId: targetId,
+        type: data?.type || 'dm',
+        startedAt: new Date().toISOString()
+      };
+
+      const deliveredToTarget = emitToUser(targetId, 'incoming video call', payload);
+      socket.emit('video call ringing', {
+        ...payload,
+        deliveredToTarget: deliveredToTarget > 0
+      });
+
+      if (deliveredToTarget === 0) {
+        socket.emit('video call unavailable', {
+          callId,
+          targetId,
+          message: 'User is currently offline or not connected.'
+        });
+      }
+    } catch (error) {
+      socket.emit('error', error.message);
+    }
+  });
+
+  socket.on('accept video call', (data) => {
+    const callId = data?.callId;
+    const targetCallerId = data?.toId;
+    if (!callId || !targetCallerId) return;
+
+    emitToUser(targetCallerId, 'video call accepted', {
+      callId,
+      byUserId: socket.userId,
+      byUsername: socket.username,
+      acceptedAt: new Date().toISOString()
+    });
+  });
+
+  socket.on('reject video call', (data) => {
+    const callId = data?.callId;
+    const targetCallerId = data?.toId;
+    if (!callId || !targetCallerId) return;
+
+    emitToUser(targetCallerId, 'video call rejected', {
+      callId,
+      byUserId: socket.userId,
+      byUsername: socket.username,
+      rejectedAt: new Date().toISOString()
+    });
+  });
+
+  socket.on('end video call', (data) => {
+    const callId = data?.callId;
+    const peerUserId = data?.toId;
+    if (!callId || !peerUserId) return;
+
+    emitToUser(peerUserId, 'video call ended', {
+      callId,
+      byUserId: socket.userId,
+      byUsername: socket.username,
+      endedAt: new Date().toISOString()
+    });
+  });
+
+  socket.on('video signal', (data) => {
+    const toId = data?.toId;
+    const signal = data?.signal;
+    if (!toId || !signal) return;
+
+    emitToUser(toId, 'video signal', {
+      fromId: socket.userId,
+      fromUsername: socket.username,
+      callId: data?.callId || null,
+      signal
+    });
+  });
+
   socket.on('disconnect', async () => {
     try {
       const userData = onlineUsers.get(socket.id);
@@ -808,8 +1231,27 @@ async function migrateMediaTypeEnum() {
   }
 }
 
+async function seedShopItems() {
+  const existingCount = await ShopItem.count();
+  if (existingCount > 0) return;
+
+  const items = [
+    { itemId: 'banner_neon', name: 'Neon Banner Effect', description: 'Animated neon gradient banner for your profile.', price: 450, category: 'Banners', image: '' },
+    { itemId: 'badge_founder', name: 'Founder Badge', description: 'Exclusive badge shown next to your username.', price: 320, category: 'Badges', image: '' },
+    { itemId: 'color_pack_burst', name: 'Color Burst Pack', description: 'Unlock vibrant accent color themes.', price: 380, category: 'Themes', image: '' },
+    { itemId: 'chat_fx_glow', name: 'Message Glow FX', description: 'Subtle glow animation for sent messages.', price: 260, category: 'Effects', image: '' },
+    { itemId: 'avatar_ring_aura', name: 'Aura Avatar Ring', description: 'Premium animated ring around your avatar.', price: 520, category: 'Avatar', image: '' },
+    { itemId: 'nameplate_crystal', name: 'Crystal Nameplate', description: 'Polished nameplate style in member list.', price: 410, category: 'Nameplates', image: '' },
+    { itemId: 'theme_midnight', name: 'Midnight Theme Pack', description: 'Elegant dark gradients and UI accents.', price: 290, category: 'Themes', image: '' },
+    { itemId: 'emoji_pack_pro', name: 'Pro Emoji Pack', description: 'Premium emoji reactions collection.', price: 210, category: 'Emotes', image: '' }
+  ];
+
+  await ShopItem.bulkCreate(items);
+}
+
 sequelize.sync({ alter: true }).then(async () => {
   await migrateMediaTypeEnum();
+  await seedShopItems();
   server.listen(PORT, HOST, () => {
     const networkAddress = getLocalNetworkAddress();
     console.log(`
@@ -836,3 +1278,7 @@ sequelize.sync({ alter: true }).then(async () => {
   console.error('Database sync error:', err);
   process.exit(1);
 });
+
+
+
+