A beautiful web-based Matrix client built with React and TailwindCSS featuring dark mode support.

• Connect to any Matrix homeserver
• Login with username/password
• View and join rooms
• Send and receive messages
• Real-time message updates
• Beautiful dark/light mode toggle
• Responsive design with improved UI
• Enhanced message display with better grouping
• Smooth animations and transitions

├── backend/
│   └── index.ts             # Proxy server for Matrix API (CORS handling)
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component
│   │   ├── Login.tsx        # Login form
│   │   ├── RoomList.tsx     # List of joined rooms
│   │   ├── ChatView.tsx     # Chat interface
│   │   ├── MessageList.tsx  # Message display
│   │   └── MessageInput.tsx # Message composition
│   ├── index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

1. Open the application
2. Enter your Matrix homeserver URL (e.g., https://matrix.org)
3. Login with your Matrix credentials
4. Browse rooms and start chatting!

• ✅ End-to-End Encryption: Basic message encryption support with visual indicators
• ✅ Encryption Detection: Automatically detects encrypted rooms and shows status
• ✅ Visual Security Indicators: Lock icons and encryption badges throughout the UI
• ✅ Encrypted Message Handling: Decrypt incoming messages and encrypt outgoing ones
• ✅ Fallback Support: Graceful degradation when encryption is unavailable
• ✅ Enhanced Dark/Light Mode: Intelligent theme system with system preference detection
• ✅ Smooth Theme Transitions: Beautiful animated icon transitions and smooth color changes
• ✅ No Flash Loading: Theme applied before page render to prevent white flash
• ✅ System Integration: Automatically follows system dark/light mode preference
• ✅ Persistent Preferences: Remembers manual theme selection across sessions
• ✅ Responsive Design: Works perfectly on desktop and mobile
• ✅ Enhanced Login: Gradient background with improved form styling
• ✅ Tabbed Interface: Separate tabs for public rooms and direct messages
• ✅ Private Messages: Full support for direct message conversations
• ✅ Smart Room Detection: Automatically categorizes rooms vs DMs
• ✅ Advanced Chat View: Enhanced message bubbles with better grouping
• ✅ Smart Message Display: Date separators and time grouping
• ✅ Fixed Input Box: No more scrolling issues, proper auto-resize
• ✅ Duplicate Prevention: Smart filtering to prevent message repetition
• ✅ Real-time Sync: Live message updates with optimized polling
• ✅ Session Persistence: Automatic login restoration
• ✅ Error Handling: Comprehensive error states with retry options
• ✅ Optimistic Sending: Messages appear instantly with proper fallback
• ✅ Smooth Animations: CSS transitions and message animations
• ✅ Custom Scrollbars: Styled for both light and dark modes

• Backend: Hono-based proxy server to handle CORS issues with Matrix homeservers
• Frontend: React SPA with TailwindCSS for styling
• Real-time: Polling-based sync for new messages
• Storage: LocalStorage for session persistence
• API: Matrix Client-Server API v1.0
• Encryption: Simplified end-to-end encryption using Web Crypto API (demonstration purposes)

The encryption system is now a working simplified implementation for demonstration purposes.

How it works:

• Only encrypts messages sent by our client (prefixed with MATRIX_ENCRYPTED:)
• Uses Web Crypto API with AES-GCM encryption
• Generates room-specific encryption keys
• Automatically detects and decrypts our own encrypted messages
• Leaves other messages (from other clients) as plaintext
• Visual indicators show which messages are encrypted

Key Features:

• ✅ Working encryption/decryption for messages sent by this client
• ✅ Visual feedback with lock icons and status indicators
• ✅ Debug tools to test encryption functionality
• ✅ Graceful fallback when encryption fails
• ✅ Room-specific keys for better security

Testing Encryption:

1. Join an encrypted room (shows green "Encrypted" badge)
2. Send a message - it will be encrypted before sending to Matrix
3. Your encrypted messages show a lock icon
4. Use the debug button (🔍) in encrypted rooms to test encryption
5. Check browser console for detailed encryption logs

Production Considerations:

• This is a demonstration only - use official Matrix SDK for production
• Real Matrix encryption uses Olm/Megolm protocols
• Proper key verification and device management needed
• Cross-signing and key backup required for production use