Adds navigation buttons management and refactors navigation

Introduces NavigationButtonsManager to handle navigation button interactions
Renames NavigationRenderer to WeekInfoRenderer for clarity
Adds new NAV_BUTTON_CLICKED event for better separation of concerns

Improves event-driven navigation workflow

src/renderers/WeekInfoRenderer.ts

@@ -3,20 +3,22 @@ import { CoreEvents } from '../constants/CoreEvents';
 import { EventRenderingService } from './EventRendererManager';
 
 /**
- * NavigationRenderer - Handles DOM rendering for navigation containers
- * Separated from NavigationManager to follow Single Responsibility Principle
+ * WeekInfoRenderer - Handles DOM rendering for week info display
+ * Updates swp-week-number and swp-date-range elements
+ *
+ * Renamed from NavigationRenderer to better reflect its actual responsibility
  */
 
-export class NavigationRenderer {
+export class WeekInfoRenderer {
   private eventBus: IEventBus;
 
   constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) {
     this.eventBus = eventBus;
     this.setupEventListeners();
   }
- 
 
- 
+
+
   /**
    * Setup event listeners for DOM updates
    */
@@ -28,36 +30,36 @@ export class NavigationRenderer {
     });
   }
 
-  
+
   private updateWeekInfoInDOM(weekNumber: number, dateRange: string): void {
 
     const weekNumberElement = document.querySelector('swp-week-number');
     const dateRangeElement = document.querySelector('swp-date-range');
-    
+
     if (weekNumberElement) {
       weekNumberElement.textContent = `Week ${weekNumber}`;
     }
-    
+
     if (dateRangeElement) {
       dateRangeElement.textContent = dateRange;
     }
   }
-  
+
   /**
    * Apply filter state to pre-rendered grids
    */
   public applyFilterToPreRenderedGrids(filterState: { active: boolean; matchingIds: string[] }): void {
     // Find all grid containers (including pre-rendered ones)
     const allGridContainers = document.querySelectorAll('swp-grid-container');
-    
+
     allGridContainers.forEach(container => {
       const eventsLayers = container.querySelectorAll('swp-events-layer');
-      
+
       eventsLayers.forEach(layer => {
         if (filterState.active) {
           // Apply filter active state
           layer.setAttribute('data-filter-active', 'true');
-          
+
           // Mark matching events in this layer
           const events = layer.querySelectorAll('swp-event');
           events.forEach(event => {
@@ -71,7 +73,7 @@ export class NavigationRenderer {
         } else {
           // Remove filter state
           layer.removeAttribute('data-filter-active');
-          
+
           // Remove all match attributes
           const events = layer.querySelectorAll('swp-event');
           events.forEach(event => {
@@ -82,4 +84,4 @@ export class NavigationRenderer {
     });
   }
 
-}
+}