Feature Request: Chat Heads Screen

[Alpha17-2]

Description

This feature will introduce a new screen to the app to display a list of chat heads. The chat heads screen will allow users to view and access their recent chats easily.

Requirements

1. Chat Heads Screen

• Implement a new screen titled "Chats" accessible from the app's main navigation.

2. Display Chat Heads

• Fetch the list of recent chats from the database.
• Display the list of chat heads with the profile pictures, usernames, last message preview, and timestamps.

3. Access Chat Threads

• Allow users to tap on a chat head to open the full chat thread with that user.

4. New Message Indicator

• Display a new message indicator for chats that have unread messages.

User Interface

Chat Heads Screen

• The screen should have a title "Chats" displayed in the app bar.
• Display the list of chat heads in a scrollable list view.
• Each chat head should be represented by the user's profile picture, username, last message preview, and timestamp.
• Include an indicator for new messages, such as a badge or highlighted text, for chats with unread messages.

Tasks

1. Backend

   • Ensure the backend provides an API endpoint to fetch the list of recent chats for the current user.
   • Implement functionality to mark messages as read when the user opens a chat thread.

2. Frontend

   • Create the UI layout for the Chat Heads screen.
   • Fetch and display the list of chat heads using the provided API endpoint.
   • Implement functionality to open chat threads when the user taps on a chat head.
   • Implement the new message indicator for unread messages.