A beautiful web-based Matrix client built with React and TailwindCSS featuring customizable themes, responsive design, and mobile support.

• Connect to any Matrix homeserver
• Login with username/password
• View and join rooms
• Send and receive messages
• Real-time message updates
• Customizable themes with multiple color schemes
• App settings page for theme customization
• Fully responsive design optimized for mobile and desktop
• Mobile-first UI with touch-friendly interactions
• Enhanced message display with better grouping
• Smooth animations and transitions

• Responsive Layout: Adapts seamlessly to all screen sizes
• Mobile Sidebar: Collapsible sidebar with overlay on mobile
• Touch Optimized: Proper touch targets and gestures
• Safe Area Support: Works with device notches and rounded corners
• Mobile Header: Dedicated mobile navigation with room info
• Optimized Input: Mobile-friendly message composition
• Swipe Navigation: Easy room switching on mobile devices

├── backend/
│   └── index.ts             # Proxy server for Matrix API (CORS handling)
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component (responsive)
│   │   ├── Login.tsx        # Login form (mobile-optimized)
│   │   ├── RoomList.tsx     # List of joined rooms (responsive)
│   │   ├── ChatView.tsx     # Chat interface (mobile-friendly)
│   │   ├── MessageList.tsx  # Message display
│   │   ├── MessageInput.tsx # Message composition (touch-optimized)
│   │   └── Settings.tsx     # App settings and theme selection
│   ├── index.html           # Main HTML template (mobile meta tags)
│   └── index.tsx            # Frontend entry point
├── shared/
│   ├── types.ts             # Shared TypeScript types
│   └── themes.ts            # Theme definitions and utilities
└── README.md

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

• Tap the hamburger menu to open/close the sidebar
• Tap a room to open it and automatically close the sidebar
• Use the mobile header to navigate back to room list
• Tap and hold for additional options (future feature)

• ✅ Advanced Theme System: Multiple color themes with CSS custom properties
• ✅ App Settings Page: Dedicated settings interface for theme customization
• ✅ Theme Persistence: Remembers selected theme across sessions
• ✅ Live Theme Preview: See how themes look before applying them
• ✅ Smooth Theme Transitions: Beautiful animated color changes
• ✅ No Flash Loading: Theme applied before page render to prevent white flash
• ✅ System Integration: Automatically follows system dark/light mode preference as default
• ✅ Fully Responsive Design: Works perfectly on desktop, tablet, and mobile
• ✅ Mobile-First UI: Touch-optimized interface with proper spacing
• ✅ Collapsible Sidebar: Mobile-friendly navigation with overlay
• ✅ Safe Area Support: Handles device notches and rounded corners
• ✅ Touch Targets: Minimum 44px touch targets for accessibility
• ✅ Mobile Headers: Dedicated mobile navigation bars
• ✅ Enhanced Login: Gradient background with responsive 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
• ✅ Responsive Input: Auto-resizing message input with mobile optimization
• ✅ 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 all themes and devices

• Mobile: < 768px (single column, collapsible sidebar)
• Tablet: 768px - 1024px (responsive layout)
• Desktop: > 1024px (full sidebar always visible)

• Backend: Hono-based proxy server to handle CORS issues with Matrix homeservers
• Frontend: React SPA with TailwindCSS for responsive styling
• Real-time: Polling-based sync for new messages
• Storage: LocalStorage for session persistence
• API: Matrix Client-Server API v1.0
• Mobile: Viewport meta tags, safe area support, touch optimization

The backend serves as a proxy to handle CORS issues with Matrix homeservers. All Matrix API calls are proxied through /api/matrix/* endpoints.

Test the responsive design using:

• Browser developer tools device simulation
• Real mobile devices
• Different screen orientations
• Various viewport sizes