Refactors grid and navigation rendering

Attempt 1

src/renderers/NavigationRenderer.ts

@@ -0,0 +1,119 @@
+import { IEventBus } from '../types/CalendarTypes';
+import { EventTypes } from '../constants/EventTypes';
+import { DateUtils } from '../utils/DateUtils';
+
+/**
+ * NavigationRenderer - Handles DOM rendering for navigation containers
+ * Separated from NavigationManager to follow Single Responsibility Principle
+ */
+export class NavigationRenderer {
+  private eventBus: IEventBus;
+
+  constructor(eventBus: IEventBus) {
+    this.eventBus = eventBus;
+  }
+
+  /**
+   * Render a complete container with content and events
+   */
+  public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
+    console.log('NavigationRenderer: Rendering new container for week:', weekStart.toDateString());
+    
+    // Create new grid container
+    const newGrid = document.createElement('swp-grid-container');
+    newGrid.innerHTML = `
+      <swp-calendar-header></swp-calendar-header>
+      <swp-scrollable-content>
+        <swp-time-grid>
+          <swp-grid-lines></swp-grid-lines>
+          <swp-day-columns></swp-day-columns>
+        </swp-time-grid>
+      </swp-scrollable-content>
+    `;
+
+    // Position new grid - NO transform here, let Animation API handle it
+    newGrid.style.position = 'absolute';
+    newGrid.style.top = '0';
+    newGrid.style.left = '0';
+    newGrid.style.width = '100%';
+    newGrid.style.height = '100%';
+
+    // Add to parent container
+    parentContainer.appendChild(newGrid);
+
+    // Render week content (headers and columns)
+    this.renderWeekContentInContainer(newGrid, weekStart);
+    
+    // Emit event to trigger event rendering
+    const weekEnd = DateUtils.addDays(weekStart, 6);
+    this.eventBus.emit(EventTypes.CONTAINER_READY_FOR_EVENTS, {
+      container: newGrid,
+      startDate: weekStart,
+      endDate: weekEnd
+    });
+    
+    return newGrid;
+  }
+
+  /**
+   * Render week content in specific container
+   */
+  private renderWeekContentInContainer(gridContainer: HTMLElement, weekStart: Date): void {
+    const header = gridContainer.querySelector('swp-calendar-header');
+    const dayColumns = gridContainer.querySelector('swp-day-columns');
+    
+    if (!header || !dayColumns) return;
+
+    // Clear existing content
+    header.innerHTML = '';
+    dayColumns.innerHTML = '';
+
+    // Render headers for target week
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(weekStart);
+      date.setDate(date.getDate() + i);
+      
+      const headerElement = document.createElement('swp-day-header');
+      if (this.isToday(date)) {
+        headerElement.dataset.today = 'true';
+      }
+      
+      headerElement.innerHTML = `
+        <swp-day-name>${days[date.getDay()]}</swp-day-name>
+        <swp-day-date>${date.getDate()}</swp-day-date>
+      `;
+      headerElement.dataset.date = this.formatDate(date);
+      
+      header.appendChild(headerElement);
+    }
+    
+    // Render day columns for target week
+    for (let i = 0; i < 7; i++) {
+      const column = document.createElement('swp-day-column');
+      const date = new Date(weekStart);
+      date.setDate(date.getDate() + i);
+      column.dataset.date = this.formatDate(date);
+      
+      const eventsLayer = document.createElement('swp-events-layer');
+      column.appendChild(eventsLayer);
+      
+      dayColumns.appendChild(column);
+    }
+  }
+
+  /**
+   * Utility method to format date
+   */
+  private formatDate(date: Date): string {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  }
+
+  /**
+   * Check if date is today
+   */
+  private isToday(date: Date): boolean {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  }
+}