Refactor workweek presets into dedicated manager

Extracts workweek preset logic from ViewManager into WorkweekPresetsManager

Improves separation of concerns by:
- Creating a dedicated manager for workweek preset UI
- Simplifying ViewManager to focus only on view selector
- Implementing event-driven CSS updates
- Reducing code duplication in ConfigManager

Follows "each UI element has its own manager" architectural principle

src/configurations/ConfigManager.ts

@@ -1,25 +1,45 @@
 import { Configuration } from './CalendarConfig';
 import { ICalendarConfig } from './ICalendarConfig';
 import { TimeFormatter } from '../utils/TimeFormatter';
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
+import { IWorkWeekSettings } from './WorkWeekSettings';
 
 /**
- * ConfigManager - Static configuration loader
+ * ConfigManager - Configuration loader and CSS property manager
  * Loads JSON and creates Configuration instance
- * Also manages CSS custom properties for dynamic styling
+ * Listens to events and manages CSS custom properties for dynamic styling
  */
 export class ConfigManager {
+  private eventBus: IEventBus;
+  private config: Configuration;
+
+  constructor(eventBus: IEventBus, config: Configuration) {
+    this.eventBus = eventBus;
+    this.config = config;
+
+    this.setupEventListeners();
+    this.syncGridCSSVariables();
+    this.syncWorkweekCSSVariables();
+  }
+
   /**
-   * Synchronize all CSS custom properties with configuration
-   * This ensures CSS grid, time axis, and grid lines match the configuration
+   * Setup event listeners for dynamic CSS updates
    */
-  static updateCSSProperties(config: Configuration): void {
-    const gridSettings = config.gridSettings;
-    const workWeekSettings = config.getWorkWeekSettings();
+  private setupEventListeners(): void {
+    // Listen to workweek changes and update CSS accordingly
+    this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => {
+      const { settings } = (event as CustomEvent<{ settings: IWorkWeekSettings }>).detail;
+      this.syncWorkweekCSSVariables(settings);
+    });
+  }
 
-    // Grid layout
-    document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());
+  /**
+   * Sync grid-related CSS variables from configuration
+   */
+  private syncGridCSSVariables(): void {
+    const gridSettings = this.config.gridSettings;
 
-    // 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());
@@ -27,6 +47,14 @@ export class ConfigManager {
     document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
   }
 
+  /**
+   * Sync workweek-related CSS variables
+   */
+  private syncWorkweekCSSVariables(workWeekSettings?: IWorkWeekSettings): void {
+    const settings = workWeekSettings || this.config.getWorkWeekSettings();
+    document.documentElement.style.setProperty('--grid-columns', settings.totalDays.toString());
+  }
+
   /**
    * Load configuration from JSON and create Configuration instance
    */
@@ -70,9 +98,6 @@ export class ConfigManager {
     // Configure TimeFormatter
     TimeFormatter.configure(config.timeFormatConfig);
 
-    // Synchronize all CSS custom properties with configuration
-    ConfigManager.updateCSSProperties(config);
-
     return config;
   }
 }