From 8456d8aa28d7ba3ae22070d5cc853ab4c7a02ac6 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 3 Nov 2025 23:07:30 +0100
Subject: [PATCH] Enhances CSS grid configuration synchronization

Replaces isolated grid column update with comprehensive CSS property management

Extends configuration synchronization to include:
- Dynamic grid layout dimensions
- Hour height configuration
- Work and day hour boundaries

Provides more flexible and configurable grid styling
---
 src/configurations/ConfigManager.ts | 24 +++++++++++++++++-------
 src/managers/ViewManager.ts         |  4 ++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/configurations/ConfigManager.ts b/src/configurations/ConfigManager.ts
index f7de519..fb306e4 100644
--- a/src/configurations/ConfigManager.ts
+++ b/src/configurations/ConfigManager.ts
@@ -9,11 +9,22 @@ import { TimeFormatter } from '../utils/TimeFormatter';
  */
 export class ConfigManager {
   /**
-   * Update CSS custom property for grid columns
-   * This ensures the CSS grid matches the number of visible columns
+   * Synchronize all CSS custom properties with configuration
+   * This ensures CSS grid, time axis, and grid lines match the configuration
    */
-  static updateGridColumns(weekDays: number): void {
-    document.documentElement.style.setProperty('--grid-columns', weekDays.toString());
+  static updateCSSProperties(config: Configuration): void {
+    const gridSettings = config.gridSettings;
+    const workWeekSettings = config.getWorkWeekSettings();
+
+    // Grid layout
+    document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());
+
+    // Grid timing and dimensions
+    document.documentElement.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
+    document.documentElement.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
+    document.documentElement.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
+    document.documentElement.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
+    document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
   }
 
   /**
@@ -59,9 +70,8 @@ export class ConfigManager {
     // Configure TimeFormatter
     TimeFormatter.configure(config.timeFormatConfig);
 
-    // Set initial CSS grid columns based on the current work week preset
-    const workWeekSettings = config.getWorkWeekSettings();
-    ConfigManager.updateGridColumns(workWeekSettings.totalDays);
+    // Synchronize all CSS custom properties with configuration
+    ConfigManager.updateCSSProperties(config);
 
     return config;
   }
diff --git a/src/managers/ViewManager.ts b/src/managers/ViewManager.ts
index 99bfd9d..b6fc6a0 100644
--- a/src/managers/ViewManager.ts
+++ b/src/managers/ViewManager.ts
@@ -96,8 +96,8 @@ export class ViewManager {
 
         this.config.setWorkWeek(workweekId);
 
-        // Update CSS grid columns to match new week days count
-        ConfigManager.updateGridColumns(this.config.dateViewSettings.weekDays);
+        // Update all CSS properties to match new configuration
+        ConfigManager.updateCSSProperties(this.config);
 
         this.updateAllButtons();