Refactors navigation buttons with comprehensive logic

Enhances navigation buttons management with advanced date calculation and view-specific navigation

Separates navigation logic from GridManager into dedicated NavigationButtons component
Adds support for multiple calendar views (week, month, day)
Implements robust event-driven navigation mechanism
Improves date navigation with dynamic period label generation

src/components/NavigationButtons.ts

@@ -1,35 +1,56 @@
-import { IEventBus } from '../types/CalendarTypes';
+import { IEventBus, CalendarView } from '../types/CalendarTypes';
 import { CoreEvents } from '../constants/CoreEvents';
+import { DateService } from '../utils/DateService';
+import { Configuration } from '../configurations/CalendarConfig';
 
 /**
- * NavigationButtonsManager - Manages navigation button UI and state
+ * NavigationButtons - Manages navigation button UI and navigation logic
  *
  * RESPONSIBILITY:
  * ===============
- * This manager owns all logic related to the <swp-nav-group> UI element.
+ * This manager owns all logic related to the <swp-nav-group> UI element
- * It follows the principle that each functional UI element has its own manager.
+ * and performs the actual navigation calculations.
  *
  * RESPONSIBILITIES:
  * - Handles button clicks on swp-nav-button elements
  * - Validates navigation actions (prev, next, today)
- * - Emits NAV_BUTTON_CLICKED events
+ * - Calculates next/previous dates based on current view
+ * - Emits NAVIGATION_COMPLETED events with new date
  * - Manages button UI listeners
  *
  * EVENT FLOW:
  * ===========
- * User clicks button → validateAction() → emit event → NavigationManager handles navigation
+ * User clicks button → calculateNewDate() → emit NAVIGATION_COMPLETED → GridManager re-renders
- *
- * SUBSCRIBERS:
- * ============
- * - NavigationManager: Performs actual navigation logic (animations, grid updates, week calculations)
  */
 export class NavigationButtons {
   private eventBus: IEventBus;
   private buttonListeners: Map<Element, EventListener> = new Map();
+  private dateService: DateService;
+  private config: Configuration;
+  private currentDate: Date = new Date();
+  private currentView: CalendarView = 'week';
 
-  constructor(eventBus: IEventBus) {
+  constructor(
+    eventBus: IEventBus,
+    dateService: DateService,
+    config: Configuration
+  ) {
     this.eventBus = eventBus;
+    this.dateService = dateService;
+    this.config = config;
     this.setupButtonListeners();
+    this.subscribeToEvents();
+  }
+
+  /**
+   * Subscribe to events
+   */
+  private subscribeToEvents(): void {
+    // Listen for view changes
+    this.eventBus.on(CoreEvents.VIEW_CHANGED, (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      this.currentView = detail.currentView;
+    });
   }
 
   /**
@@ -56,12 +77,111 @@ export class NavigationButtons {
    * Handle navigation action
    */
   private handleNavigation(action: string): void {
-    // Emit navigation button clicked event
+    switch (action) {
-    this.eventBus.emit(CoreEvents.NAV_BUTTON_CLICKED, {
+      case 'prev':
-      action: action
+        this.navigatePrevious();
+        break;
+      case 'next':
+        this.navigateNext();
+        break;
+      case 'today':
+        this.navigateToday();
+        break;
+    }
+  }
+
+  /**
+   * Navigate in specified direction
+   */
+  private navigate(direction: 'next' | 'prev'): void {
+    const offset = direction === 'next' ? 1 : -1;
+    let newDate: Date;
+
+    switch (this.currentView) {
+      case 'week':
+        newDate = this.dateService.addWeeks(this.currentDate, offset);
+        break;
+      case 'month':
+        newDate = this.dateService.addMonths(this.currentDate, offset);
+        break;
+      case 'day':
+        newDate = this.dateService.addDays(this.currentDate, offset);
+        break;
+      default:
+        newDate = this.dateService.addWeeks(this.currentDate, offset);
+    }
+
+    this.currentDate = newDate;
+
+    this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
+      direction: direction === 'next' ? 'next' : 'previous',
+      newDate: newDate,
+      periodLabel: this.getCurrentPeriodLabel()
     });
   }
 
+  /**
+   * Navigate to next period
+   */
+  private navigateNext(): void {
+    this.navigate('next');
+  }
+
+  /**
+   * Navigate to previous period
+   */
+  private navigatePrevious(): void {
+    this.navigate('prev');
+  }
+
+  /**
+   * Navigate to today
+   */
+  private navigateToday(): void {
+    this.currentDate = new Date();
+
+    this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
+      direction: 'today',
+      newDate: this.currentDate,
+      periodLabel: this.getCurrentPeriodLabel()
+    });
+  }
+
+  /**
+   * Get ISO week start (Monday)
+   */
+  private getISOWeekStart(date: Date): Date {
+    const weekBounds = this.dateService.getWeekBounds(date);
+    return this.dateService.startOfDay(weekBounds.start);
+  }
+
+  /**
+   * Get week end (Sunday)
+   */
+  private getWeekEnd(date: Date): Date {
+    const weekBounds = this.dateService.getWeekBounds(date);
+    return this.dateService.endOfDay(weekBounds.end);
+  }
+
+  /**
+   * Get current period label
+   */
+  private getCurrentPeriodLabel(): string {
+    switch (this.currentView) {
+      case 'week':
+      case 'day':
+        const weekStart = this.getISOWeekStart(this.currentDate);
+        const weekEnd = this.getWeekEnd(this.currentDate);
+        return this.dateService.formatDateRange(weekStart, weekEnd);
+      case 'month':
+        return this.dateService.formatMonthYear(this.currentDate);
+      default:
+        const defaultWeekStart = this.getISOWeekStart(this.currentDate);
+        const defaultWeekEnd = this.getWeekEnd(this.currentDate);
+        return this.dateService.formatDateRange(defaultWeekStart, defaultWeekEnd);
+    }
+  }
+
   /**
    * Validate if string is a valid navigation action
    */

src/managers/GridManager.ts

@@ -61,6 +61,13 @@ export class GridManager {
       this.render();
     });
 
+    // Listen for navigation events from NavigationButtons
+    eventBus.on(CoreEvents.NAVIGATION_COMPLETED, (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      this.currentDate = detail.newDate;
+      this.render();
+    });
+
     // Listen for config changes that affect rendering
     eventBus.on(CoreEvents.REFRESH_REQUESTED, (e: Event) => {
       this.render();
@@ -105,86 +112,6 @@ export class GridManager {
   }
 
 
-  /**
-   * Get current period label
-   */
-  public getCurrentPeriodLabel(): string {
-    switch (this.currentView) {
-      case 'week':
-      case 'day':
-        const weekStart = this.getISOWeekStart(this.currentDate);
-        const weekEnd = this.getWeekEnd(this.currentDate);
-        return this.dateService.formatDateRange(weekStart, weekEnd);
-      case 'month':
-        return this.dateService.formatMonthYear(this.currentDate);
-      default:
-        const defaultWeekStart = this.getISOWeekStart(this.currentDate);
-        const defaultWeekEnd = this.getWeekEnd(this.currentDate);
-        return this.dateService.formatDateRange(defaultWeekStart, defaultWeekEnd);
-    }
-  }
-
-  /**
-   * Navigate to next period
-   */
-  public navigateNext(): void {
-    let nextDate: Date;
-
-    switch (this.currentView) {
-      case 'week':
-        nextDate = this.dateService.addWeeks(this.currentDate, 1);
-        break;
-      case 'month':
-        nextDate = this.dateService.addMonths(this.currentDate, 1);
-        break;
-      case 'day':
-        nextDate = this.dateService.addDays(this.currentDate, 1);
-        break;
-      default:
-        nextDate = this.dateService.addWeeks(this.currentDate, 1);
-    }
-
-    this.currentDate = nextDate;
-
-    eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
-      direction: 'next',
-      newDate: nextDate,
-      periodLabel: this.getCurrentPeriodLabel()
-    });
-
-    this.render();
-  }
-
-  /**
-   * Navigate to previous period
-   */
-  public navigatePrevious(): void {
-    let prevDate: Date;
-
-    switch (this.currentView) {
-      case 'week':
-        prevDate = this.dateService.addWeeks(this.currentDate, -1);
-        break;
-      case 'month':
-        prevDate = this.dateService.addMonths(this.currentDate, -1);
-        break;
-      case 'day':
-        prevDate = this.dateService.addDays(this.currentDate, -1);
-        break;
-      default:
-        prevDate = this.dateService.addWeeks(this.currentDate, -1);
-    }
-
-    this.currentDate = prevDate;
-
-    eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
-      direction: 'previous',
-      newDate: prevDate,
-      periodLabel: this.getCurrentPeriodLabel()
-    });
-
-    this.render();
-  }
 
   /**
    * Get current view's display dates