CHANGELOG-v2.2.5.md

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! **