[WEB-2448] chore: workspace collaborators improvements

web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import { useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -63,6 +63,10 @@ const WIDGET_KEY = "recent_collaborators";
 
 export const CollaboratorsList: React.FC<CollaboratorsListProps> = (props) => {
   const { dashboardId, searchQuery = "", workspaceSlug } = props;
+
+  // state
+  const [visibleItems, setVisibleItems] = useState(16);
+  const [isExpanded, setIsExpanded] = useState(false);
   // store hooks
   const { fetchWidgetStats } = useDashboard();
   const { getUserDetails } = useMember();
@@ -90,8 +94,10 @@ export const CollaboratorsList: React.FC<CollaboratorsListProps> = (props) => {
   const sortedStats = sortBy(widgetStats, [(user) => user?.user_id !== currentUser?.id]);
 
   const filteredStats = sortedStats.filter((user) => {
-    const { display_name, first_name, last_name } = getUserDetails(user?.user_id) || {};
-
+    if (!user) return false;
+    const userDetails = getUserDetails(user?.user_id);
+    if (!userDetails || userDetails.is_bot) return false;
+    const { display_name, first_name, last_name } = userDetails;
     const searchLower = searchQuery.toLowerCase();
     return (
       display_name?.toLowerCase().includes(searchLower) ||
@@ -100,16 +106,49 @@ export const CollaboratorsList: React.FC<CollaboratorsListProps> = (props) => {
     );
   });
 
+  // Update the displayedStats to always use the visibleItems limit
+  const handleLoadMore = () => {
+    setVisibleItems((prev) => {
+      const newValue = prev + 16;
+      if (newValue >= filteredStats.length) {
+        setIsExpanded(true);
+        return filteredStats.length;
+      }
+      return newValue;
+    });
+  };
+
+  const handleHide = () => {
+    setVisibleItems(16);
+    setIsExpanded(false);
+  };
+
+  const displayedStats = filteredStats.slice(0, visibleItems);
+
   return (
-    <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
-      {filteredStats?.map((user) => (
-        <CollaboratorListItem
-          key={user?.user_id}
-          issueCount={user?.active_issue_count}
-          userId={user?.user_id}
-          workspaceSlug={workspaceSlug}
-        />
-      ))}
-    </div>
+    <>
+      <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
+        {displayedStats?.map((user) => (
+          <CollaboratorListItem
+            key={user?.user_id}
+            issueCount={user?.active_issue_count}
+            userId={user?.user_id}
+            workspaceSlug={workspaceSlug}
+          />
+        ))}
+      </div>
+      {filteredStats.length > visibleItems && !isExpanded && (
+        <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={handleLoadMore}>
+          <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
+            Load more
+          </div>
+        </div>
+      )}
+      {isExpanded && (
+        <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={handleHide}>
+          <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">Hide</div>
+        </div>
+      )}
+    </>
   );
 };