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/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');
+      }
+    });
+  }
+
+}