[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

@@ -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>

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}

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"

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 && (
+              {moduleLeadDetails ? (
-                <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
+                <span className="cursor-default">
-                  <div className="flex cursor-default items-center gap-1">
+                  <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
-                    <AvatarGroup showTooltip={false}>
+                </span>
-                      {moduleDetails.member_ids.map((member_id) => {
+              ) : (
-                        const member = getUserDetails(member_id);
+                <Tooltip tooltipContent="No lead">
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                  <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" />
-                    </AvatarGroup>
+                  </span>
-                  </div>
                 </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 ? (
-                <>
+                <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">
-                  <span className="text-xs text-custom-text-300">
+                  <CalendarClock className="h-3 w-3 flex-shrink-0" />
-                    {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+                  <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
-                  </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) => {

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,28 +134,17 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
         </span>
       )}
 
-      {renderDate && (
+      {moduleLeadDetails ? (
-        <span className=" text-xs text-custom-text-300">
+        <span className="cursor-default">
-          {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+          <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
         </span>
-      )}
-
-      <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">
+        <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>
-          )}
-        </div>
         </Tooltip>
+      )}
 
       {isEditingAllowed && !moduleDetails.archived_at && (
         <FavoriteStar

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={
+      actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
-        <ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />
-      }
       isMobile={isMobile}
       parentRef={parentRef}
     />

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";
+import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
-// types
-// hooks
 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