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/CalendarConfig.ts

@@ -18,7 +18,7 @@ export const ALL_DAY_CONSTANTS = {
 } as const;
 
 /**
- * Work week presets
+ * Work week presets - Configuration data
  */
 export const WORK_WEEK_PRESETS: { [key: string]: IWorkWeekSettings } = {
   'standard': {
@@ -98,22 +98,13 @@ export class Configuration {
     return Configuration._instance;
   }
 
-
-  // Helper methods
-  getWorkWeekSettings(): IWorkWeekSettings {
-    return WORK_WEEK_PRESETS[this.currentWorkWeek] || WORK_WEEK_PRESETS['standard'];
-  }
-
-  setWorkWeek(workWeekId: string): void {
-    if (WORK_WEEK_PRESETS[workWeekId]) {
-      this.currentWorkWeek = workWeekId;
-      this.dateViewSettings.weekDays = WORK_WEEK_PRESETS[workWeekId].totalDays;
-    }
-  }
-
   setSelectedDate(date: Date): void {
     this.selectedDate = date;
   }
+
+  getWorkWeekSettings(): IWorkWeekSettings {
+    return WORK_WEEK_PRESETS[this.currentWorkWeek] || WORK_WEEK_PRESETS['standard'];
+  }
 }
 
 // Backward compatibility alias

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;
   }
 }

src/managers/CalendarManager.ts

@@ -184,11 +184,10 @@ export class CalendarManager {
      * Handle workweek configuration changes
      */
     private handleWorkweekChange(): void {
-
+        // Simply relay the event - workweek info is in the WORKWEEK_CHANGED event
         this.eventBus.emit('workweek:header-update', {
             currentDate: this.currentDate,
-            currentView: this.currentView,
-            workweek: this.config.currentWorkWeek
+            currentView: this.currentView
         });
     }
 

src/managers/ViewManager.ts

@@ -1,6 +1,5 @@
 import { CalendarView, IEventBus } from '../types/CalendarTypes';
 import { Configuration } from '../configurations/CalendarConfig';
-import { ConfigManager } from '../configurations/ConfigManager';
 import { CoreEvents } from '../constants/CoreEvents';
 
 
@@ -39,9 +38,7 @@ export class ViewManager {
             }
         });
 
-        this.setupButtonGroup('swp-preset-button[data-workweek]', 'data-workweek', (value) => {
-            this.changeWorkweek(value);
-        });
+        // NOTE: Workweek preset buttons are now handled by WorkweekPresetsManager
     }
 
 
@@ -61,15 +58,7 @@ export class ViewManager {
     }
 
     private getViewButtons(): NodeListOf<Element> {
-
         return document.querySelectorAll('swp-view-button[data-view]');
-
-    }
-
-    private getWorkweekButtons(): NodeListOf<Element> {
-
-        return document.querySelectorAll('swp-preset-button[data-workweek]');
-
     }
 
 
@@ -91,27 +80,6 @@ export class ViewManager {
             currentView: newView
         });
     }
-
-    private changeWorkweek(workweekId: string): void {
-
-        this.config.setWorkWeek(workweekId);
-
-        // Update all CSS properties to match new configuration
-        ConfigManager.updateCSSProperties(this.config);
-
-        this.updateAllButtons();
-
-        const settings = this.config.getWorkWeekSettings();
-        
-        //currentDate: this.currentDate,
-        //currentView: this.currentView,
-        //workweek: this.config.currentWorkWeek
-
-        this.eventBus.emit(CoreEvents.WORKWEEK_CHANGED, {
-            workWeekId: workweekId,
-            settings: settings
-        });
-    }
     private updateAllButtons(): void {
         this.updateButtonGroup(
             this.getViewButtons(),
@@ -119,11 +87,7 @@ export class ViewManager {
             this.currentView
         );
 
-        this.updateButtonGroup(
-            this.getWorkweekButtons(),
-            'data-workweek',
-            this.config.currentWorkWeek
-        );
+        // NOTE: Workweek button states are now managed by WorkweekPresetsManager
     }
 
     private updateButtonGroup(buttons: NodeListOf<Element>, attribute: string, activeValue: string): void {

src/managers/WorkweekPresetsManager.ts

@@ -0,0 +1,114 @@
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
+import { IWorkWeekSettings } from '../configurations/WorkWeekSettings';
+import { WORK_WEEK_PRESETS, Configuration } from '../configurations/CalendarConfig';
+
+/**
+ * WorkweekPresetsManager - Manages workweek preset UI and state
+ *
+ * RESPONSIBILITY:
+ * ===============
+ * This manager owns all logic related to the <swp-workweek-presets> UI element.
+ * It follows the principle that each functional UI element has its own manager.
+ *
+ * RESPONSIBILITIES:
+ * - Owns WORK_WEEK_PRESETS data
+ * - Handles button clicks on swp-preset-button elements
+ * - Manages current workweek preset state
+ * - Validates preset IDs
+ * - Emits WORKWEEK_CHANGED events
+ * - Updates button UI states (data-active attributes)
+ *
+ * EVENT FLOW:
+ * ===========
+ * User clicks button → changePreset() → validate → update state → emit event → update UI
+ *
+ * SUBSCRIBERS:
+ * ============
+ * - ConfigManager: Updates CSS variables (--grid-columns)
+ * - GridManager: Re-renders grid with new column count
+ * - CalendarManager: Relays to header update (via workweek:header-update)
+ * - HeaderManager: Updates date headers
+ */
+export class WorkweekPresetsManager {
+  private eventBus: IEventBus;
+  private config: Configuration;
+  private buttonListeners: Map<Element, EventListener> = new Map();
+
+  constructor(eventBus: IEventBus, config: Configuration) {
+    this.eventBus = eventBus;
+    this.config = config;
+
+    this.setupButtonListeners();
+  }
+
+  /**
+   * Setup click listeners on all workweek preset buttons
+   */
+  private setupButtonListeners(): void {
+    const buttons = document.querySelectorAll('swp-preset-button[data-workweek]');
+
+    buttons.forEach(button => {
+      const clickHandler = (event: Event) => {
+        event.preventDefault();
+        const presetId = button.getAttribute('data-workweek');
+        if (presetId) {
+          this.changePreset(presetId);
+        }
+      };
+
+      button.addEventListener('click', clickHandler);
+      this.buttonListeners.set(button, clickHandler);
+    });
+
+    // Initialize button states
+    this.updateButtonStates();
+  }
+
+  /**
+   * Change the active workweek preset
+   */
+  private changePreset(presetId: string): void {
+    if (!WORK_WEEK_PRESETS[presetId]) {
+      console.warn(`Invalid preset ID "${presetId}"`);
+      return;
+    }
+
+    if (presetId === this.config.currentWorkWeek) {
+      return; // No change
+    }
+
+    const previousPresetId = this.config.currentWorkWeek;
+    this.config.currentWorkWeek = presetId;
+
+    const settings = WORK_WEEK_PRESETS[presetId];
+
+    // Update button UI states
+    this.updateButtonStates();
+
+    // Emit event for subscribers
+    this.eventBus.emit(CoreEvents.WORKWEEK_CHANGED, {
+      workWeekId: presetId,
+      previousWorkWeekId: previousPresetId,
+      settings: settings
+    });
+  }
+
+  /**
+   * Update button states (data-active attributes)
+   */
+  private updateButtonStates(): void {
+    const buttons = document.querySelectorAll('swp-preset-button[data-workweek]');
+
+    buttons.forEach(button => {
+      const buttonPresetId = button.getAttribute('data-workweek');
+
+      if (buttonPresetId === this.config.currentWorkWeek) {
+        button.setAttribute('data-active', 'true');
+      } else {
+        button.removeAttribute('data-active');
+      }
+    });
+  }
+
+}