feat(project-subscribers): implement project subscriber management and loading state

- Added `getProjectSubscribers` method in `TasksControllerV2` to retrieve project subscribers with user details.
- Updated socket command to handle project subscription changes, ensuring no duplicate entries on conflict.
- Enhanced `ProjectViewHeader` to manage subscription loading state, providing user feedback during subscription updates.
- Implemented error handling and timeout for subscription requests to improve user experience.

worklenz-backend/src/controllers/tasks-controller-v2.ts

@@ -610,6 +610,21 @@ export default class TasksControllerV2 extends TasksControllerBase {
     return this.createTagList(result.rows);
   }
 
+  public static async getProjectSubscribers(projectId: string) {
+    const q = `
+      SELECT u.name, u.avatar_url, ps.user_id, ps.team_member_id, ps.project_id
+      FROM project_subscribers ps
+             LEFT JOIN users u ON ps.user_id = u.id
+      WHERE ps.project_id = $1;
+    `;
+    const result = await db.query(q, [projectId]);
+
+    for (const member of result.rows)
+      member.color_code = getColor(member.name);
+
+    return this.createTagList(result.rows);
+  }
+
   public static async checkUserAssignedToTask(taskId: string, userId: string, teamId: string) {
     const q = `
     SELECT EXISTS(

worklenz-backend/src/socket.io/commands/on-project-subscriber-change.ts

@@ -19,7 +19,8 @@ export async function on_project_subscriber_change(_io: Server, socket: Socket,
     const isSubscribe = data.mode == 0;
     const q = isSubscribe
       ? `INSERT INTO project_subscribers (user_id, project_id, team_member_id)
-         VALUES ($1, $2, $3);`
+         VALUES ($1, $2, $3)
+         ON CONFLICT (user_id, project_id, team_member_id) DO NOTHING;`
       : `DELETE
          FROM project_subscribers
          WHERE user_id = $1
@@ -27,7 +28,7 @@ export async function on_project_subscriber_change(_io: Server, socket: Socket,
            AND team_member_id = $3;`;
     await db.query(q, [data.user_id, data.project_id, data.team_member_id]);
 
-    const subscribers = await TasksControllerV2.getTaskSubscribers(data.project_id);
+    const subscribers = await TasksControllerV2.getProjectSubscribers(data.project_id);
     socket.emit(SocketEvents.PROJECT_SUBSCRIBERS_CHANGE.toString(), subscribers);
 
     return;