Issue 1: Build Static UI for Messaging System #116
Description
Feature Request
Create the static UI for the Messaging System in LessonConnect based on the prototype. No backend or real-time functionality yet—just structure, layout, and mock data.
Is your feature request related to a problem?
🔹 Messaging is a critical part of the platform, but the interface does not yet exist. This feature begins the build-out of the messaging frontend from scratch.
Describe the solution you'd like
✅ Build modular UI components:
- Chat list panel (with mock chat previews and toggle)
- Main conversation window (message bubbles + timestamps)
- Input field for sending messages (simulated)
- Right-side contact panel (user info, status, role)
Use placeholder data to simulate user messages, avatars, and presence. Layout should match the wireframe provided.
Describe alternatives you've considered
Could have jumped straight into real-time functionality, but that introduces complexity. We want to get layout and UX validated before backend integration.
Additional Context
- Branch:
messaging-frontend - Style: Tailwind CSS or CSS Modules
- Components:
ChatList,ChatWindow,ChatInput,UserInfoPanel - Mobile responsiveness is important
Tasks Breakdown (if applicable)
- Build ChatList with mock conversations
- Implement ChatWindow with left/right message alignment
- Add ChatInput with basic input functionality
- Build UserInfoPanel with avatar, name, role, etc.
- Apply styling and layout
- Use dummy JSON for now
Resources
🔗
Priority & Impact
⚡ High (blocks further messaging development)