Implement `markAsRead` in MessageContext and add unread badge persistence

[Benalex8797]

Category: Feature / Bug Fix
Difficulty: High

Description

markAsRead in MessageContext.tsx is a no-op — the function body is empty. As a result, unread message counts never decrement and the red badge on the navigation never clears even after reading a conversation.

Problem Statement

// MessageContext.tsx — line ~120
const markAsRead = (_threadId: string) => {
    // Logic to clear unread count
};

Additionally, unreadCount on Thread is only incremented during sendMessage but is never set accurately for the receiving user because both users share the same localStorage key.

Technical Requirements

• Implement markAsRead to set unreadCount = 0 for the given thread and persist to localStorage
• Fix unread count logic: when sendMessage is called, increment unreadCount only for participants who are NOT the sender
• setActiveThreadId should automatically call markAsRead for the newly active thread
• The BottomNav and NotificationDropdown message badge must reactively update when unread count changes
• Add a totalUnreadMessages derived value to the context

Acceptance Criteria

• Opening a thread clears its unread badge immediately
• Badge count on nav icons is accurate across navigation
• After page refresh, read state persists correctly
• totalUnreadMessages is exported from context and consumed by Navigation.tsx

Deliverables

• Updated MessageContext.tsx
• Updated Navigation.tsx (Sidebar and BottomNav badge logic)

[fridaypetra55-afk]

Hi Maintainers,

I have reviewed the issue requirements and would love to contribute. I am comfortable working with smart contracts, backend systems, and developer tooling. I will provide regular updates and ensure high-quality implementation.

[grantfox-oss]

🦊 GrantFox — @fridaypetra55-afk has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #3)
2. Your PR will be reviewed by the MentorsMind maintainers

Good luck! Track your progress on GrantFox.