Refactor calendar navigation to use event bus

Decouples calendar navigation from direct DOM events
Adds new event constants for calendar navigation commands
Updates CalendarApp to handle navigation via event bus
Simplifies navigation logic and improves event-driven architecture

src/v2/constants/CoreEvents.ts

@@ -67,5 +67,9 @@ export const CoreEvents = {
   AUDIT_LOGGED: 'audit:logged',
 
   // Rendering events
-  EVENTS_RENDERED: 'events:rendered'
+  EVENTS_RENDERED: 'events:rendered',
+
+  // Calendar command events
+  CALENDAR_CMD_NAVIGATE_PREV: 'calendar:cmd:navigate:prev',
+  CALENDAR_CMD_NAVIGATE_NEXT: 'calendar:cmd:navigate:next'
 } as const;

src/v2/core/CalendarApp.ts

@@ -14,6 +14,8 @@ import { SettingsService } from '../storage/settings/SettingsService';
 import { ResourceService } from '../storage/resources/ResourceService';
 import { ViewConfigService } from '../storage/viewconfigs/ViewConfigService';
 import { IWorkweekPreset } from '../types/SettingsTypes';
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
 
 export class CalendarApp {
   private animator!: NavigationAnimator;
@@ -35,7 +37,8 @@ export class CalendarApp {
     private eventPersistenceManager: EventPersistenceManager,
     private settingsService: SettingsService,
     private resourceService: ResourceService,
-    private viewConfigService: ViewConfigService
+    private viewConfigService: ViewConfigService,
+    private eventBus: IEventBus
   ) {}
 
   async init(container: HTMLElement): Promise<void> {
@@ -74,16 +77,21 @@ export class CalendarApp {
   }
 
   private setupEventListeners(): void {
+    // Navigation commands via EventBus
+    this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV, () => {
+      this.handleNavigatePrev();
+    });
+
+    this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT, () => {
+      this.handleNavigateNext();
+    });
+
+    // Other commands via container DOM events (migrates later)
     this.container.addEventListener('calendar:cmd:render', ((e: CustomEvent) => {
       const { viewId, direction } = e.detail;
       this.handleRenderCommand(viewId, direction);
     }) as EventListener);
 
-    this.container.addEventListener('calendar:cmd:navigate', ((e: CustomEvent) => {
-      const { offset, direction } = e.detail;
-      this.handleNavigateCommand(offset, direction);
-    }) as EventListener);
-
     this.container.addEventListener('calendar:cmd:drawer:toggle', (() => {
       this.headerDrawerManager.toggle();
     }) as EventListener);
@@ -101,9 +109,15 @@ export class CalendarApp {
     this.emitStatus('rendered', { viewId });
   }
 
-  private async handleNavigateCommand(offset: number, direction: 'left' | 'right'): Promise<void> {
+  private async handleNavigatePrev(): Promise<void> {
-    this.weekOffset += offset;
+    this.weekOffset--;
-    await this.animator.slide(direction, () => this.render());
+    await this.animator.slide('right', () => this.render());
+    this.emitStatus('rendered', { viewId: this.currentViewId });
+  }
+
+  private async handleNavigateNext(): Promise<void> {
+    this.weekOffset++;
+    await this.animator.slide('left', () => this.render());
     this.emitStatus('rendered', { viewId: this.currentViewId });
   }
 

src/v2/demo/DemoApp.ts

@@ -3,6 +3,8 @@ import { DataSeeder } from '../workers/DataSeeder';
 import { AuditService } from '../storage/audit/AuditService';
 import { CalendarApp } from '../core/CalendarApp';
 import { DateService } from '../core/DateService';
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
 
 export class DemoApp {
   private container!: HTMLElement;
@@ -13,7 +15,8 @@ export class DemoApp {
     private dataSeeder: DataSeeder,
     private auditService: AuditService,
     private calendarApp: CalendarApp,
-    private dateService: DateService
+    private dateService: DateService,
+    private eventBus: IEventBus
   ) {}
 
   async init(): Promise<void> {
@@ -48,11 +51,11 @@ export class DemoApp {
 
   private setupNavigation(): void {
     document.getElementById('btn-prev')!.onclick = () => {
-      this.emitNavigateCommand(-1, 'right');
+      this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV);
     };
 
     document.getElementById('btn-next')!.onclick = () => {
-      this.emitNavigateCommand(1, 'left');
+      this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT);
     };
   }
 
@@ -97,10 +100,4 @@ export class DemoApp {
       detail: { viewId, direction }
     }));
   }
-
-  private emitNavigateCommand(offset: number, direction: 'left' | 'right'): void {
-    this.container.dispatchEvent(new CustomEvent('calendar:cmd:navigate', {
-      detail: { offset, direction }
-    }));
-  }
 }