Refactors grid and navigation rendering

Attempt 1

src/renderers/GridStyleManager.ts

@@ -0,0 +1,110 @@
+import { CalendarConfig } from '../core/CalendarConfig';
+import { ResourceCalendarData } from '../types/CalendarTypes';
+
+/**
+ * GridStyleManager - Manages CSS variables and styling for the grid
+ * Separated from GridManager to follow Single Responsibility Principle
+ */
+export class GridStyleManager {
+  private config: CalendarConfig;
+
+  constructor(config: CalendarConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Update all grid CSS variables
+   */
+  public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
+    const root = document.documentElement;
+    const gridSettings = this.config.getGridSettings();
+    const calendar = document.querySelector('swp-calendar') as HTMLElement;
+    const calendarType = this.config.getCalendarMode();
+    
+    // Set CSS variables for time and grid measurements
+    this.setTimeVariables(root, gridSettings);
+    
+    // Set column count based on calendar type
+    const columnCount = this.calculateColumnCount(calendarType, resourceData);
+    root.style.setProperty('--grid-columns', columnCount.toString());
+    
+    // Set column width based on fitToWidth setting
+    this.setColumnWidth(root, gridSettings);
+    
+    // Set fitToWidth data attribute for CSS targeting
+    if (calendar) {
+      calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
+    }
+    
+    console.log('GridStyleManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
+  }
+
+  /**
+   * Set time-related CSS variables
+   */
+  private setTimeVariables(root: HTMLElement, gridSettings: any): void {
+    root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
+    root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
+    root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());
+    root.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
+    root.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
+    root.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
+    root.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
+  }
+
+  /**
+   * Calculate number of columns based on calendar type and view
+   */
+  private calculateColumnCount(calendarType: string, resourceData: ResourceCalendarData | null): number {
+    if (calendarType === 'resource' && resourceData) {
+      return resourceData.resources.length;
+    } else if (calendarType === 'date') {
+      const dateSettings = this.config.getDateViewSettings();
+      switch (dateSettings.period) {
+        case 'day':
+          return 1;
+        case 'week':
+          return dateSettings.weekDays;
+        case 'month':
+          return 7;
+        default:
+          return dateSettings.weekDays;
+      }
+    }
+    
+    return 7; // Default
+  }
+
+  /**
+   * Set column width based on fitToWidth setting
+   */
+  private setColumnWidth(root: HTMLElement, gridSettings: any): void {
+    if (gridSettings.fitToWidth) {
+      root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
+    } else {
+      root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
+    }
+  }
+
+  /**
+   * Update spacer heights based on all-day events
+   */
+  public updateSpacerHeights(allDayEventCount: number = 1): void {
+    const eventHeight = 26; // Height per all-day event in pixels
+    const padding = 0; // Top/bottom padding
+    const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
+    
+    // Set CSS variable for dynamic spacer height
+    document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
+    
+    console.log('GridStyleManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
+  }
+
+  /**
+   * Get current column count
+   */
+  public getColumnCount(resourceData: ResourceCalendarData | null = null): number {
+    const calendarType = this.config.getCalendarMode();
+    return this.calculateColumnCount(calendarType, resourceData);
+  }
+}