From ea02ca71066a18384f038c494cdbfdadef38981d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Tue, 24 Mar 2026 11:46:43 +0100
Subject: [PATCH] fix: match Project View grid lines to Resource View

The Project View used its own buildProjectRowGridBackground() which
rendered CSS gradients with hardcoded rgba colors (no dark mode).
The Resource View used shared gridLines from useTimelineLayout which
renders React div elements with proper dark: Tailwind classes.

Fix: replaced the CSS gradient approach with the shared gridLines
in both resource rows and open demand rows within the Project View.
Removed the now-unused buildProjectRowGridBackground function (~40 LOC).

Both views now use identical grid lines with:
- Brand-colored today marker
- Amber weekend highlights
- Proper dark mode colors via Tailwind classes

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../timeline/TimelineProjectPanel.tsx         | 55 ++-----------------
 1 file changed, 5 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/components/timeline/TimelineProjectPanel.tsx b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
index 2672834..e6caa68 100644
--- a/apps/web/src/components/timeline/TimelineProjectPanel.tsx
+++ b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
@@ -137,47 +137,6 @@ type ProjectFlatRow =
 const EMPTY_DAY_METRICS: ProjectDayMetric[] = [];
 const SVG_XMLNS = "http://www.w3.org/2000/svg";
 
-function buildProjectRowGridBackground(dates: Date[], CELL_WIDTH: number, today: Date) {
-  const gradientLayers: string[] = [
-    `repeating-linear-gradient(to right, transparent 0, transparent ${Math.max(
-      CELL_WIDTH - 1,
-      0,
-    )}px, rgba(229, 231, 235, 1) ${Math.max(CELL_WIDTH - 1, 0)}px, rgba(229, 231, 235, 1) ${CELL_WIDTH}px)`,
-  ];
-
-  dates.forEach((date, index) => {
-    const left = index * CELL_WIDTH;
-    const right = left + CELL_WIDTH;
-    const isToday = date.toDateString() === today.toDateString();
-    const isSaturday = date.getDay() === 6;
-    const isSunday = date.getDay() === 0;
-
-    if (isSaturday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(254, 243, 199, 0.4) ${left}px, rgba(254, 243, 199, 0.4) ${right}px, transparent ${right}px)`,
-      );
-    } else if (isSunday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(243, 244, 246, 0.6) ${left}px, rgba(243, 244, 246, 0.6) ${right}px, transparent ${right}px)`,
-      );
-    }
-
-    if (isToday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(110, 231, 183, 0.95) ${left}px, rgba(110, 231, 183, 0.95) ${Math.min(
-          left + 2,
-          right,
-        )}px, transparent ${Math.min(left + 2, right)}px)`,
-      );
-    }
-  });
-
-  return {
-    backgroundImage: gradientLayers.join(", "),
-    backgroundRepeat: "no-repeat",
-  } as const;
-}
-
 // ─── Component ──────────────────────────────────────────────────────────────
 
 function TimelineProjectPanelInner({
@@ -432,11 +391,6 @@ function TimelineProjectPanelInner({
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalRowHeight = rowVirtualizer.getTotalSize();
 
-  const resourceRowGridStyle = useMemo(
-    () => buildProjectRowGridBackground(dates, CELL_WIDTH, today),
-    [CELL_WIDTH, dates, today],
-  );
-
   const resourcesWithVacations = useMemo(() => {
     const result = new Set<string>();
     for (const [resourceId, vacations] of vacationsByResource) {
@@ -713,7 +667,7 @@ function TimelineProjectPanelInner({
                 totalCanvasWidth,
                 toLeft,
                 toWidth,
-                resourceRowGridStyle,
+                gridLines,
                 onOpenDemandClick,
                 onAllocMouseDown,
                 onAllocTouchStart,
@@ -750,7 +704,6 @@ function TimelineProjectPanelInner({
                     width: totalCanvasWidth,
                     height: ROW_HEIGHT,
                     touchAction: "none",
-                    ...resourceRowGridStyle,
                   }}
                   onMouseDown={(e) => {
                     const rect = e.currentTarget.getBoundingClientRect();
@@ -776,6 +729,7 @@ function TimelineProjectPanelInner({
                   }}
                   onMouseLeave={clearHoverTooltips}
                 >
+                  {gridLines}
                   {renderProjectUtilOverlay(
                     projectRowMetrics.get(row.metricsKey) ?? EMPTY_DAY_METRICS,
                     CELL_WIDTH,
@@ -889,7 +843,7 @@ function renderOpenDemandRow(
   totalCanvasWidth: number,
   toLeft: (d: Date) => number,
   toWidth: (s: Date, e: Date) => number,
-  rowGridStyle: CSSProperties,
+  rowGridLines: React.ReactNode,
   _onOpenDemandClick: (demand: OpenDemandAssignment) => void,
   onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
   onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
@@ -934,8 +888,9 @@ function renderOpenDemandRow(
 
       <div
         className="relative overflow-hidden bg-amber-50 touch-none dark:bg-slate-950"
-        style={{ width: totalCanvasWidth, height: rowHeight, ...rowGridStyle }}
+        style={{ width: totalCanvasWidth, height: rowHeight }}
       >
+        {rowGridLines}
         <div className="pointer-events-none absolute inset-x-0 inset-y-0 border-y border-dashed border-amber-200/70 dark:border-amber-800/80" />
         <div className="pointer-events-none absolute inset-x-0 inset-y-1 rounded-md bg-amber-100/25 dark:bg-amber-950/35" />
         {openDemands.map((alloc) => {