feat: project-details-page-comments-tab

[legend4tech]

Pull Request: Implement Project Comments Tab

This PR implements the complete Comments tab for the project details page, including both desktop and mobile views, an empty state, and a populated state with full comment and reply functionality.

Closes #314

📝 Summary

• Created a new project-comments component in components/project-details/.
• Integrated the component into the project layout.
• Implemented a responsive design that matches the Figma specifications for both empty and populated states.
• Added core features: posting comments, replying to comments, liking comments, and sorting.

🛠 Key Changes & Features

1. New Components:

   • ProjectComments: The main container component that manages the comment state.
   • CommentsEmptyState: Displays an illustration and input when no comments exist.
   • CommentItem: Renders an individual comment or reply, with like and reply functionality.
   • CommentInput: A reusable input for both new comments and replies.
   • CommentsSortDropdown: A filter dropdown for sorting comments.

2. Features:

   • Add top-level comments.
   • Reply to any comment, creating nested threads.
   • Like comments (UI state).
   • Collapse and expand comment threads.
   • Sort comments via dropdown (UI is connected, logic can be hooked up to an API later).
   • Fully responsive design for mobile and desktop.

📸 Screenshots

✅ Checklist

]

• The code follows the project's style guidelines.
• I have performed a self-review of my own code.
• The UI has been tested for responsiveness on both mobile and desktop views.
• All new components are properly typed (TypeScript).
• There are no console errors or warnings.

---

Notes for Reviewers:

• The component uses mock data from @/lib/data/comments-mock for demonstration. This can be easily swapped out for real API calls.
• The "like" functionality currently only toggles the UI state; it does not persist anywhere.

[vercel]

@legend4tech is attempting to deploy a commit to the christroa's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
boundless-t4ms	Ready	Preview	Comment	Oct 6, 2025 8:19pm