feat: completed all layout changes needed for frontend

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -2,9 +2,9 @@ import { ReactNode, useMemo, useState } from "react";
 import { faFolderOpen, faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowDownAZ,
-  faArrowRight,
   faArrowUpZA,
   faBorderAll,
+  faCheckCircle,
   faList,
   faMagnifyingGlass,
   faPlus,
@@ -13,12 +13,26 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  IconButton,
+  Input,
+  Lottie,
+  Pagination,
+  Skeleton,
+  Tooltip
+} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { getProjectHomePage } from "@app/helpers/project";
+import { getProjectHomePage, getProjectLottieIcon, getProjectTitle } from "@app/helpers/project";
 import {
   getUserTablePreference,
   PreferenceKey,
@@ -29,7 +43,7 @@ import { useGetUserWorkspaces } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
-import { Workspace } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
 
 type Props = {
   onAddNewProject: () => void;
@@ -53,6 +67,9 @@ export const MyProjectView = ({
 }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
+  const [projectTypeFilter, setProjectTypeFilter] = useState<Partial<Record<ProjectType, boolean>>>(
+    {}
+  );
 
   const { data: workspaces = [], isPending: isWorkspaceLoading } = useGetUserWorkspaces();
   const {
@@ -67,6 +84,7 @@ export const MyProjectView = ({
   } = usePagination(ProjectOrderBy.Name, {
     initPerPage: getUserTablePreference("myProjectsTable", PreferenceKey.PerPage, 24)
   });
+  const isTableFilteredByType = Boolean(Object.values(projectTypeFilter).some((el) => el));
 
   const handlePerPageChange = (newPerPage: number) => {
     setPerPage(newPerPage);
@@ -88,13 +106,18 @@ export const MyProjectView = ({
   const filteredWorkspaces = useMemo(
     () =>
       workspaces
-        .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
+        .filter((ws) => {
+          if (isTableFilteredByType && !projectTypeFilter?.[ws.type]) {
+            return false;
+          }
+          return ws?.name?.toLowerCase().includes(searchFilter.toLowerCase());
+        })
         .sort((a, b) =>
           orderDirection === OrderByDirection.ASC
             ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
             : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
         ),
-    [searchFilter, orderDirection, workspaces]
+    [searchFilter, orderDirection, workspaces, projectTypeFilter]
   );
 
   useResetPageHelper({
@@ -117,6 +140,15 @@ export const MyProjectView = ({
     };
   }, [filteredWorkspaces, projectFavorites, offset, limit, page]);
 
+  const handleToggleFilterByProjectType = (type: ProjectType) => {
+    setProjectTypeFilter((state) => {
+      return {
+        ...(state || {}),
+        [type]: !state?.[type]
+      };
+    });
+  };
+
   const addProjectToFavorites = async (projectId: string) => {
     try {
       if (currentOrg?.id) {
@@ -160,53 +192,46 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className="flex h-40 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+      className="relative flex h-36 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-500 bg-mineshaft-800 p-4 transition-all hover:border-mineshaft-400"
     >
-      <div className="flex flex-row justify-between">
-        <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
-        {isFavorite ? (
-          <FontAwesomeIcon
-            icon={faSolidStar}
-            className="text-sm text-yellow-600 hover:text-mineshaft-400"
-            onClick={(e) => {
-              e.stopPropagation();
-              removeProjectFromFavorites(workspace.id);
-            }}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={faStar}
-            className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
-            onClick={(e) => {
-              e.stopPropagation();
-              addProjectToFavorites(workspace.id);
-            }}
-          />
-        )}
-      </div>
-
-      <div
-        className="mb-2.5 mt-1 grow text-sm text-mineshaft-300"
-        style={{
-          overflow: "hidden",
-          display: "-webkit-box",
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2
-        }}
-      >
-        {workspace.description}
-      </div>
-
-      <div className="flex w-full flex-row items-end justify-between place-self-end">
-        <button type="button">
-          <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 px-4 py-2 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
-            Explore{" "}
-            <FontAwesomeIcon
-              icon={faArrowRight}
-              className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
-            />
+      <div className="flex items-center gap-4">
+        <div className="h-12 w-12 rounded bg-mineshaft-600 p-2">
+          <Lottie icon={getProjectLottieIcon(workspace.type)} className="h-full w-full" />
+        </div>
+        <div className="flex-1">
+          <div className="flex">
+            <div className="flex-1 truncate text-lg font-semibold text-mineshaft-100">
+              {workspace.name}
+            </div>
+            <div className="">
+              {isFavorite ? (
+                <FontAwesomeIcon
+                  icon={faSolidStar}
+                  className="text-sm text-yellow-600 hover:text-mineshaft-400"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeProjectFromFavorites(workspace.id);
+                  }}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faStar}
+                  className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    addProjectToFavorites(workspace.id);
+                  }}
+                />
+              )}
+            </div>
           </div>
-        </button>
+          <div className="truncate text-sm text-mineshaft-300">
+            {getProjectTitle(workspace.type)}
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 text-sm text-mineshaft-400">
+        {workspace.description || "No description"}
       </div>
     </div>
   );
@@ -222,12 +247,16 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className={`group grid h-14 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+      className={`group grid h-16 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
         index === 0 && "rounded-t-md"
       }`}
     >
-      <div className="flex items-center sm:col-span-3 lg:col-span-4">
+      <div className="flex flex-col justify-center sm:col-span-3 lg:col-span-4">
         <div className="truncate text-sm text-mineshaft-100">{workspace.name}</div>
+        <div className="mt-1 text-xs text-mineshaft-300">
+          {getProjectTitle(workspace.type)}{" "}
+          {workspace.description ? `- ${workspace.description}` : ""}
+        </div>
       </div>
       <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
         {isFavorite ? (
@@ -258,7 +287,7 @@ export const MyProjectView = ({
     switch (projectsViewMode) {
       case ProjectsViewMode.GRID:
         projectsComponents = (
-          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
             {isProjectViewLoading &&
               Array.apply(0, Array(3)).map((_x, i) => (
                 <div
@@ -351,6 +380,49 @@ export const MyProjectView = ({
             </IconButton>
           </Tooltip>
         </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <div
+              className={twMerge(
+                "ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1",
+                isTableFilteredByType && "border-primary-400 text-primary-400"
+              )}
+            >
+              <Tooltip content="Choose visible project type" className="mb-2">
+                <IconButton
+                  ariaLabel="project-types"
+                  className={twMerge(
+                    "min-w-[2.4rem] border-none hover:bg-mineshaft-600",
+                    isTableFilteredByType && "text-primary-400"
+                  )}
+                  variant="plain"
+                  size="xs"
+                  colorSchema="secondary"
+                >
+                  <FontAwesomeIcon icon={faList} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="thin-scrollbar overflow-y-auto" align="end">
+            <DropdownMenuLabel>Filter By Project Type</DropdownMenuLabel>
+            {Object.values(ProjectType).map((el) => (
+              <DropdownMenuItem
+                key={`filter-item-${el}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleFilterByProjectType(el);
+                }}
+                icon={projectTypeFilter?.[el] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <span>{getProjectTitle(el)}</span>
+                </div>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
         <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <IconButton
             variant="outline_bg"