refactor: Gantt chart layout (#3585)

* chore: gantt sidebar and main content scroll sync

* chore: add arrow navigation position logic

* refactor: scroll position update logic

* refactor: gantt chart components

* refactor: gantt sidebar

* fix: vertical scroll issue

* fix: move to the hidden block button flickering

* refactor: gantt sidebar components

* chore: move timeline header outside

* fix gantt scroll issue

* fix: sticky position issues

* fix: infinite timeline scroll logic

* chore: removed unnecessary import statements

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>

web/components/modules/gantt-chart/blocks.tsx

@@ -1,52 +1,74 @@
 import { useRouter } from "next/router";
+import { observer } from "mobx-react";
+// hooks
+import { useApplication, useModule } from "hooks/store";
 // ui
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { IModule } from "@plane/types";
 // constants
 import { MODULE_STATUS } from "constants/module";
 
-export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
 
   return (
     <div
       className="relative flex h-full w-full items-center rounded"
-      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
+      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${moduleDetails?.project}/modules/${moduleDetails?.id}`)}
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
         tooltipContent={
           <div className="space-y-1">
-            <h5>{data?.name}</h5>
+            <h5>{moduleDetails?.name}</h5>
             <div>
-              {renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.target_date ?? "")}
+              {renderFormattedDate(moduleDetails?.start_date ?? "")} to{" "}
+              {renderFormattedDate(moduleDetails?.target_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{moduleDetails?.name}</div>
       </Tooltip>
     </div>
   );
-};
+});
 
-export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
+export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
 
   return (
     <div
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${moduleDetails?.project}/modules/${moduleDetails?.id}`)}
     >
-      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
-      <h6 className="flex-grow truncate text-sm font-medium">{data.name}</h6>
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
     </div>
   );
-};
+});

web/components/modules/gantt-chart/modules-list-layout.tsx

@@ -47,7 +47,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
         sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}