From e396424db793bbb71041dd23eff2ae7d3b94cc2c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 May 2024 15:19:05 +0530
Subject: [PATCH 1/4] [WEB-1251] chore: view list enhancement (#4427)

* chore: moved search query to mobx store

* chore: moved view sub-header to app header

* chore: created by avatar added in view item list
---
 web/components/headers/project-views.tsx      |  2 +
 web/components/views/index.ts                 |  1 +
 web/components/views/view-list-header.tsx     | 84 +++++++++++++++++++
 .../views/view-list-item-action.tsx           | 10 ++-
 web/components/views/views-list.tsx           | 82 +-----------------
 web/store/project-view.store.ts               | 12 +++
 6 files changed, 109 insertions(+), 82 deletions(-)
 create mode 100644 web/components/views/view-list-header.tsx

diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index b733e6784..c79934aec 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -7,6 +7,7 @@ import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // helpers
 import { ProjectLogo } from "@/components/project";
+import { ViewListHeader } from "@/components/views";
 import { EUserProjectRoles } from "@/constants/project";
 // constants
 import { useCommandPalette, useProject, useUser } from "@/hooks/store";
@@ -58,6 +59,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
         </div>
         {canUserCreateIssue && (
           <div className="flex flex-shrink-0 items-center gap-2">
+            <ViewListHeader />
             <div>
               <Button
                 variant="primary"
diff --git a/web/components/views/index.ts b/web/components/views/index.ts
index 2a2a02dc7..085a1c6b7 100644
--- a/web/components/views/index.ts
+++ b/web/components/views/index.ts
@@ -5,3 +5,4 @@ export * from "./quick-actions";
 export * from "./view-list-item";
 export * from "./views-list";
 export * from "./view-list-item-action";
+export * from "./view-list-header";
diff --git a/web/components/views/view-list-header.tsx b/web/components/views/view-list-header.tsx
new file mode 100644
index 000000000..6d36dfef9
--- /dev/null
+++ b/web/components/views/view-list-header.tsx
@@ -0,0 +1,84 @@
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+// icons
+import { Search, X } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useProjectView } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+
+export const ViewListHeader = observer(() => {
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { searchQuery, updateSearchQuery } = useProjectView();
+
+  // handlers
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  return (
+    <div className="h-full flex items-center gap-2">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/views/view-list-item-action.tsx b/web/components/views/view-list-item-action.tsx
index 563d1da41..80ba5ba0c 100644
--- a/web/components/views/view-list-item-action.tsx
+++ b/web/components/views/view-list-item-action.tsx
@@ -11,7 +11,8 @@ import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useProjectView, useUser } from "@/hooks/store";
+import { useMember, useProjectView, useUser } from "@/hooks/store";
+import { ButtonAvatars } from "../dropdowns/member/avatar";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
@@ -31,6 +32,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { addViewToFavorites, removeViewFromFavorites } = useProjectView();
+  const { getUserDetails } = useMember();
 
   // derived values
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -50,6 +52,8 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
     removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
   };
 
+  const createdByDetails = view.created_by ? getUserDetails(view.created_by) : undefined;
+
   return (
     <>
       {workspaceSlug && projectId && view && (
@@ -65,6 +69,10 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
       <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
         {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
       </p>
+
+      {/* created by */}
+      {createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
+
       {isEditingAllowed && (
         <FavoriteStar
           onClick={(e) => {
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
index 967469c79..ea300678a 100644
--- a/web/components/views/views-list.tsx
+++ b/web/components/views/views-list.tsx
@@ -1,7 +1,4 @@
-import { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-// ui
-import { Search, X } from "lucide-react";
 // components
 import { ListLayout } from "@/components/core/list";
 import { EmptyState } from "@/components/empty-state";
@@ -9,28 +6,13 @@ import { ViewListLoader } from "@/components/ui";
 import { ProjectViewListItem } from "@/components/views";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-// helper
-import { cn } from "@/helpers/common.helper";
 // hooks
 import { useCommandPalette, useProjectView } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export const ProjectViewsList = observer(() => {
-  // states
-  const [searchQuery, setSearchQuery] = useState("");
-  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
-
-  // refs
-  const inputRef = useRef<HTMLInputElement>(null);
-
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
-  const { projectViewIds, getViewById, loader } = useProjectView();
-
-  // outside click detector hook
-  useOutsideClickDetector(inputRef, () => {
-    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
-  });
+  const { projectViewIds, getViewById, loader, searchQuery } = useProjectView();
 
   if (loader || !projectViewIds) return <ViewListLoader />;
 
@@ -39,72 +21,10 @@ export const ProjectViewsList = observer(() => {
 
   const filteredViewsList = viewsList.filter((v) => v?.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
-  // handlers
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Escape") {
-      if (searchQuery && searchQuery.trim() !== "") setSearchQuery("");
-      else {
-        setIsSearchOpen(false);
-        inputRef.current?.blur();
-      }
-    }
-  };
-
   return (
     <>
       {viewsList.length > 0 ? (
         <div className="flex h-full w-full flex-col">
-          <div className="h-[50px] flex-shrink-0 w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
-            <div className="flex items-center">
-              <span className="block text-sm font-medium">Project Views</span>
-            </div>
-            <div className="h-full flex items-center gap-2">
-              <div className="flex items-center">
-                {!isSearchOpen && (
-                  <button
-                    type="button"
-                    className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
-                    onClick={() => {
-                      setIsSearchOpen(true);
-                      inputRef.current?.focus();
-                    }}
-                  >
-                    <Search className="h-3.5 w-3.5" />
-                  </button>
-                )}
-                <div
-                  className={cn(
-                    "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
-                    {
-                      "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
-                    }
-                  )}
-                >
-                  <Search className="h-3.5 w-3.5" />
-                  <input
-                    ref={inputRef}
-                    className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    onKeyDown={handleInputKeyDown}
-                  />
-                  {isSearchOpen && (
-                    <button
-                      type="button"
-                      className="grid place-items-center"
-                      onClick={() => {
-                        setSearchQuery("");
-                        setIsSearchOpen(false);
-                      }}
-                    >
-                      <X className="h-3 w-3" />
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
           <ListLayout>
             {filteredViewsList.length > 0 ? (
               filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
diff --git a/web/store/project-view.store.ts b/web/store/project-view.store.ts
index 95ecece58..92b8719c1 100644
--- a/web/store/project-view.store.ts
+++ b/web/store/project-view.store.ts
@@ -12,11 +12,13 @@ export interface IProjectViewStore {
   loader: boolean;
   fetchedMap: Record<string, boolean>;
   // observables
+  searchQuery: string;
   viewMap: Record<string, IProjectView>;
   // computed
   projectViewIds: string[] | null;
   // computed actions
   getViewById: (viewId: string) => IProjectView;
+  updateSearchQuery: (query: string) => void;
   // fetch actions
   fetchViews: (workspaceSlug: string, projectId: string) => Promise<undefined | IProjectView[]>;
   fetchViewDetails: (workspaceSlug: string, projectId: string, viewId: string) => Promise<IProjectView>;
@@ -38,6 +40,7 @@ export class ProjectViewStore implements IProjectViewStore {
   // observables
   loader: boolean = false;
   viewMap: Record<string, IProjectView> = {};
+  searchQuery: string = "";
   //loaders
   fetchedMap: Record<string, boolean> = {};
   // root store
@@ -51,6 +54,7 @@ export class ProjectViewStore implements IProjectViewStore {
       loader: observable.ref,
       viewMap: observable,
       fetchedMap: observable,
+      searchQuery: observable.ref,
       // computed
       projectViewIds: computed,
       // fetch actions
@@ -60,6 +64,8 @@ export class ProjectViewStore implements IProjectViewStore {
       createView: action,
       updateView: action,
       deleteView: action,
+      // actions
+      updateSearchQuery: action,
       // favorites actions
       addViewToFavorites: action,
       removeViewFromFavorites: action,
@@ -85,6 +91,12 @@ export class ProjectViewStore implements IProjectViewStore {
    */
   getViewById = computedFn((viewId: string) => this.viewMap?.[viewId] ?? null);
 
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
   /**
    * Fetches views for current project
    * @param workspaceSlug

From 57eda3408221553f83ac79d8f7a78809941e8e40 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 May 2024 15:19:59 +0530
Subject: [PATCH 2/4] chore: notification action item enhancement (#4426)

---
 web/components/notifications/notification-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index c98772f9b..cfae8a7c1 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -173,7 +173,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
       <div className="w-full space-y-2.5 overflow-hidden">
         <div className="flex items-start">
           {!notification.message ? (
-            <div className="w-full break-words text-sm">
+            <div className="w-full break-all text-sm group-hover:pr-24 line-clamp-2">
               <span className="font-semibold">
                 {notificationTriggeredBy.is_bot
                   ? notificationTriggeredBy.first_name

From 0af55e7bbbc8ffd583bc1f460ec019e548e11081 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 May 2024 15:21:05 +0530
Subject: [PATCH 3/4] [WEB-1250] chore: module list enhancement (#4425)

* chore: move module sub-header to app header

* chore: gantt header improvement, remove title

* chore: progress indicator size reduced

* chore: replace members with lead and updated start and end date ui
---
 web/components/gantt-chart/chart/header.tsx   |  4 +-
 web/components/gantt-chart/chart/root.tsx     |  1 -
 web/components/headers/modules-list.tsx       |  2 +
 web/components/modules/module-card-item.tsx   | 40 ++++++++-------
 .../modules/module-list-item-action.tsx       | 50 +++++++++----------
 web/components/modules/module-list-item.tsx   |  6 +--
 .../projects/[projectId]/modules/index.tsx    | 17 +++----
 7 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/web/components/gantt-chart/chart/header.tsx b/web/components/gantt-chart/chart/header.tsx
index e2722b22a..fe4d0c885 100644
--- a/web/components/gantt-chart/chart/header.tsx
+++ b/web/components/gantt-chart/chart/header.tsx
@@ -15,18 +15,16 @@ type Props = {
   handleChartView: (view: TGanttViews) => void;
   handleToday: () => void;
   loaderTitle: string;
-  title: string;
   toggleFullScreenMode: () => void;
 };
 
 export const GanttChartHeader: React.FC<Props> = observer((props) => {
-  const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
+  const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, toggleFullScreenMode } = props;
   // chart hook
   const { currentView } = useGanttChart();
 
   return (
     <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
-      <div className="flex items-center gap-2 text-lg font-medium">{title}</div>
       <div className="ml-auto">
         <div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
       </div>
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
index a4ea8cbf2..395e0771c 100644
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -172,7 +172,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
         handleChartView={(key) => updateCurrentViewRenderPayload(null, key)}
         handleToday={handleToday}
         loaderTitle={loaderTitle}
-        title={title}
       />
       <GanttChartMainContent
         blocks={blocks}
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index bb27f1a90..881af67aa 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -6,6 +6,7 @@ import { Plus } from "lucide-react";
 import { Breadcrumbs, Button, DiceIcon } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
+import { ModuleViewHeader } from "@/components/modules";
 import { ProjectLogo } from "@/components/project";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
@@ -57,6 +58,7 @@ export const ModulesListHeader: React.FC = observer(() => {
         </div>
       </div>
       <div className="flex items-center gap-2">
+        <ModuleViewHeader />
         {canUserCreateModule && (
           <Button
             variant="primary"
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index c9edbe94c..851af664a 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -2,11 +2,12 @@ import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Info } from "lucide-react";
+import { CalendarCheck2, CalendarClock, Info, MoveRight, User2 } from "lucide-react";
 // ui
-import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
+import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
 import { FavoriteStar } from "@/components/core";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -145,6 +146,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
         : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
     : "0 Issue";
 
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+
   return (
     <div className="relative">
       <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
@@ -179,16 +182,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 <LayersIcon className="h-4 w-4 text-custom-text-300" />
                 <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
               </div>
-              {moduleDetails.member_ids?.length > 0 && (
-                <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
-                  <div className="flex cursor-default items-center gap-1">
-                    <AvatarGroup showTooltip={false}>
-                      {moduleDetails.member_ids.map((member_id) => {
-                        const member = getUserDetails(member_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
-                  </div>
+              {moduleLeadDetails ? (
+                <span className="cursor-default">
+                  <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
+                </span>
+              ) : (
+                <Tooltip tooltipContent="No lead">
+                  <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
                 </Tooltip>
               )}
             </div>
@@ -217,11 +219,13 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
             <div className="flex items-center justify-between py-0.5">
               {isDateValid ? (
-                <>
-                  <span className="text-xs text-custom-text-300">
-                    {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                  </span>
-                </>
+                <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
+                  <CalendarClock className="h-3 w-3 flex-shrink-0" />
+                  <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
+                  <MoveRight className="h-3 w-3 flex-shrink-0" />
+                  <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
+                  <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
+                </div>
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
@@ -229,7 +233,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
           </div>
         </div>
       </Link>
-      <div className="absolute right-4 bottom-3.5 flex items-center gap-1.5">
+      <div className="absolute right-4 bottom-[18px] flex items-center gap-1.5">
         {isEditingAllowed && (
           <FavoriteStar
             onClick={(e) => {
diff --git a/web/components/modules/module-list-item-action.tsx b/web/components/modules/module-list-item-action.tsx
index b34dc7555..fa7d71577 100644
--- a/web/components/modules/module-list-item-action.tsx
+++ b/web/components/modules/module-list-item-action.tsx
@@ -2,11 +2,11 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // icons
-import { User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
 // types
 import { IModule } from "@plane/types";
 // ui
-import { Avatar, AvatarGroup, Tooltip, setPromiseToast } from "@plane/ui";
+import { Tooltip, setPromiseToast } from "@plane/ui";
 // components
 import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
@@ -18,7 +18,7 @@ import { EUserProjectRoles } from "@/constants/project";
 import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ButtonAvatars } from "../dropdowns/member/avatar";
 
 type Props = {
   moduleId: string;
@@ -38,7 +38,6 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
   const { addModuleToFavorites, removeModuleFromFavorites } = useModule();
   const { getUserDetails } = useMember();
   const { captureEvent } = useEventTracker();
-  const { isMobile } = usePlatformOS();
 
   // derived values
   const endDate = getDate(moduleDetails.target_date);
@@ -109,11 +108,23 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
     });
   };
 
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+
   return (
     <>
+      {renderDate && (
+        <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
+          <CalendarClock className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
+          <MoveRight className="h-3 w-3 flex-shrink-0" />
+          <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
+        </div>
+      )}
+
       {moduleStatus && (
         <span
-          className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+          className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs cursor-default"
           style={{
             color: moduleStatus.color,
             backgroundColor: `${moduleStatus.color}20`,
@@ -123,29 +134,18 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
         </span>
       )}
 
-      {renderDate && (
-        <span className=" text-xs text-custom-text-300">
-          {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+      {moduleLeadDetails ? (
+        <span className="cursor-default">
+          <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
         </span>
+      ) : (
+        <Tooltip tooltipContent="No lead">
+          <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+            <User2 className="h-4 w-4 text-custom-text-400" />
+          </span>
+        </Tooltip>
       )}
 
-      <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
-        <div className="flex w-10 cursor-default items-center justify-center gap-1">
-          {moduleDetails.member_ids.length > 0 ? (
-            <AvatarGroup showTooltip={false}>
-              {moduleDetails.member_ids.map((member_id) => {
-                const member = getUserDetails(member_id);
-                return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-              })}
-            </AvatarGroup>
-          ) : (
-            <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-              <User2 className="h-4 w-4 text-custom-text-400" />
-            </span>
-          )}
-        </div>
-      </Tooltip>
-
       {isEditingAllowed && !moduleDetails.archived_at && (
         <FavoriteStar
           onClick={(e) => {
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 9ad7d2225..b74592112 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -77,7 +77,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
           ) : progress === 100 ? (
             <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
           ) : (
-            <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+            <span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
           )}
         </CircularProgressIndicator>
       }
@@ -89,9 +89,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
           <Info className="h-4 w-4 text-custom-text-400" />
         </button>
       }
-      actionableItems={
-        <ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />
-      }
+      actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
       isMobile={isMobile}
       parentRef={parentRef}
     />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 85be0c140..08e621d0f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -1,20 +1,23 @@
 import { ReactElement, useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
+// types
 import { TModuleFilters } from "@plane/types";
-// layouts
 // components
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { ModulesListHeader } from "@/components/headers";
-import { ModuleViewHeader, ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
-// types
-// hooks
+import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
 import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
+// constants
 import { EmptyStateType } from "@/constants/empty-state";
+// helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
 import { useModuleFilter, useProject } from "@/hooks/store";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
+// types
 import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectModulesPage: NextPageWithLayout = observer(() => {
@@ -58,12 +61,6 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div className="h-full w-full flex flex-col">
-        <div className="h-[50px] flex-shrink-0 w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
-          <div className="flex items-center">
-            <span className="block text-sm font-medium">Module name</span>
-          </div>
-          <ModuleViewHeader />
-        </div>
         {(calculateTotalFilters(currentProjectFilters ?? {}) !== 0 || currentProjectDisplayFilters?.favorites) && (
           <div className="border-b border-custom-border-200 px-5 py-3">
             <ModuleAppliedFiltersList

From 0037377c8f258b9e26d65be5f278d53d477196cb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 May 2024 15:22:01 +0530
Subject: [PATCH 4/4] chore: project card enhancement (#4424)

---
 web/components/project/card.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 5e94b1fb5..8f29b245b 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Pencil, Trash2, UserPlus } from "lucide-react";
+import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Trash2, UserPlus } from "lucide-react";
 // types
 import type { IProject } from "@plane/types";
 // ui
@@ -105,10 +105,10 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
 
   const MENU_ITEMS: TContextMenuItem[] = [
     {
-      key: "edit",
+      key: "settings",
       action: () => router.push(`/${workspaceSlug}/projects/${project.id}/settings`),
-      title: "Edit",
-      icon: Pencil,
+      title: "Settings",
+      icon: Settings,
       shouldRender: !isArchived && (isOwner || isMember),
     },
     {
@@ -322,7 +322,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                       }}
                       href={`/${workspaceSlug}/projects/${project.id}/settings`}
                     >
-                      <Pencil className="h-3.5 w-3.5" />
+                      <Settings className="h-3.5 w-3.5" />
                     </Link>
                   ) : (
                     <span className="flex items-center gap-1 text-custom-text-400 text-sm">