From 368af223db63ae932f97620cfe2e790a8a254e76 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Wed, 10 Dec 2025 01:00:37 +0530
Subject: [PATCH] [WEB-5585]chore: timeline chart refactor (#8246)

* chore: timeline chart refactor

* fix: format
---
 apps/web/ce/components/gantt-chart/index.ts               | 1 +
 .../components/gantt-chart/layers/additional-layers.tsx   | 8 ++++++++
 apps/web/ce/components/gantt-chart/layers/index.ts        | 1 +
 .../core/components/gantt-chart/chart/main-content.tsx    | 7 ++++++-
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
 create mode 100644 apps/web/ce/components/gantt-chart/layers/index.ts

diff --git a/apps/web/ce/components/gantt-chart/index.ts b/apps/web/ce/components/gantt-chart/index.ts
index d08e0f7d6..d652e4bbc 100644
--- a/apps/web/ce/components/gantt-chart/index.ts
+++ b/apps/web/ce/components/gantt-chart/index.ts
@@ -1 +1,2 @@
 export * from "./dependency";
+export * from "./layers";
diff --git a/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx b/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
new file mode 100644
index 000000000..5cc7c2ce5
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
@@ -0,0 +1,8 @@
+import type { FC } from "react";
+
+type Props = {
+  itemsContainerWidth: number;
+  blockCount: number;
+};
+
+export const GanttAdditionalLayers: FC<Props> = () => null;
diff --git a/apps/web/ce/components/gantt-chart/layers/index.ts b/apps/web/ce/components/gantt-chart/layers/index.ts
new file mode 100644
index 000000000..fcd77a972
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/index.ts
@@ -0,0 +1 @@
+export { GanttAdditionalLayers } from "./additional-layers";
diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
index f555f90ab..bfa9d5fc3 100644
--- a/apps/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -17,7 +17,11 @@ import { GanttChartSidebar, MonthChartView, QuarterChartView, WeekChartView } fr
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 // plane web components
-import { TimelineDependencyPaths, TimelineDraggablePath } from "@/plane-web/components/gantt-chart";
+import {
+  TimelineDependencyPaths,
+  TimelineDraggablePath,
+  GanttAdditionalLayers,
+} from "@/plane-web/components/gantt-chart";
 import { GanttChartRowList } from "@/plane-web/components/gantt-chart/blocks/block-row-list";
 import { GanttChartBlocksList } from "@/plane-web/components/gantt-chart/blocks/blocks-list";
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues/bulk-operations";
@@ -212,6 +216,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
                     />
                     <TimelineDependencyPaths isEpic={isEpic} />
                     <TimelineDraggablePath />
+                    <GanttAdditionalLayers itemsContainerWidth={itemsContainerWidth} blockCount={blockIds.length} />
                     <GanttChartBlocksList
                       blockIds={blockIds}
                       blockToRender={blockToRender}