[TOOL-3124] Dashboard: Show 8 top projects, Add show more button for full list

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx

@@ -23,6 +23,7 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import {
   ChevronDownIcon,
@@ -47,8 +48,9 @@ export function TeamProjectsPage(props: {
   const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] =
     useState(false);
   const router = useDashboardRouter();
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const projectsToShow = useMemo(() => {
+  const filteredProjects = useMemo(() => {
     let _projectsToShow = !searchTerm
       ? projects
       : projects.filter(
@@ -77,6 +79,14 @@ export function TeamProjectsPage(props: {
     return _projectsToShow;
   }, [searchTerm, sortBy, projects]);
 
+  const maxProjectsToShow = 8;
+
+  const projectsToShow = isExpanded
+    ? filteredProjects
+    : filteredProjects.slice(0, maxProjectsToShow);
+
+  const showExpandCollapseButton = filteredProjects.length > maxProjectsToShow;
+
   return (
     <div className="flex grow flex-col">
       {/* Filters + Add New */}
@@ -132,6 +142,27 @@ export function TeamProjectsPage(props: {
         </div>
       )}
 
+      {showExpandCollapseButton && (
+        <div className="mt-4 flex items-center justify-end">
+          <Button
+            size="sm"
+            variant="ghost"
+            className="gap-2"
+            onClick={() => {
+              setIsExpanded((v) => !v);
+            }}
+          >
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isExpanded && "rotate-180",
+              )}
+            />
+            {isExpanded ? "Show less" : "Show more"}
+          </Button>
+        </div>
+      )}
+
       <LazyCreateAPIKeyDialog
         open={isCreateProjectDialogOpen}
         onOpenChange={setIsCreateProjectDialogOpen}
@@ -160,7 +191,7 @@ function ProjectCard(props: {
       {/* TODO - set image */}
       <ProjectAvatar className="size-10 rounded-full" src="" />
 
-      <div className="flex-grow flex-col gap-1.5">
+      <div className="flex flex-grow flex-col gap-1">
         <Link
           className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
           // remove /connect when we have overview page