Frontend: Build Private Project Notes UI with Role-Based Access

[Sudhanshugochar]

Important Points to Note

• I agree to adhere to the project's Code of Conduct.
• I have reviewed and understood the project's Contributing Guidelines.
• I have checked the existing issues and can confirm that this is not a duplicate.
• I have reviewed and understood the project's Issue Creation Guidelines.

Category

Behaviour Updating

Enhancement Description

Overview

This issue covers the frontend implementation for the private project notes feature.
The goal is to provide a clean, user-friendly interface that shows private notes only to authorized project members.

Requirements

1. Notes Display (Read Access)

Implement UI to display private notes to:

• Collaborators (Read-only)
• Maintainers
• Admins
• Project Owner

Notes should be displayed inside the project dashboard.

2. Add / Edit Notes (Write Access)

Show "Add Note" and "Edit Note" options only for:

• Maintainers
• Admins

Collaborators should NOT see any edit or add button.

3. API Integration

Connect to backend routes:

• GET /projects/:id/notes → Fetch notes
• POST /projects/:id/notes → Add note
• PUT /projects/:projectId/notes/:noteId → Update note

Use proper loading states and error handling.

4. Access Control in UI

Frontend should hide buttons based on user role returned from backend:

• USER → No access
• COLLABORATOR → Read only
• MAINTAINER → Read + Write
• ADMIN → Read + Write

5. UI/UX Requirements

• Simple and clean design
• Notes listed in chronological order
• Textarea or modal for adding/editing notes
• Show timestamps (createdAt / updatedAt)

Goal

Provide a functional UI layer for managing private project notes and integrate it seamlessly with backend APIs.

Screenshots or Logs

Frontend-only enhancement. No screenshots available yet.

Priority

Up to 2 days

Open Source Program

None

Would you like to work on this issue?

Yes

[github-actions]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊
For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

[Avdhesh-Varshney]

For FE part, We need to discuss properly where should be displaying the private notes in UI on the website for better UX

[Sudhanshugochar]

@Avdhesh-Varshney Yeah, I can help you with the UI/UX part. I have good knowledge of UI/UX design, so if possible, you can add me.