Implements all-day event row collapsing

Adds functionality to collapse the all-day event rows when the number of rows exceeds a limit.

This improves the layout by preventing the all-day section from taking up too much space. A chevron button is added to allow users to expand/collapse the section.

src/managers/AllDayManager.ts

@@ -28,6 +28,11 @@ export class AllDayManager {
   private currentAllDayEvents: CalendarEvent[] = [];
   private currentWeekDates: string[] = [];
 
+  // Expand/collapse state
+  private isExpanded: boolean = false;
+  private actualRowCount: number = 0;
+  private readonly MAX_COLLAPSED_ROWS = 3;
+
   constructor() {
     this.allDayEventRenderer = new AllDayEventRenderer();
     this.setupEventListeners();
@@ -165,6 +170,7 @@ export class AllDayManager {
     const container = this.getAllDayContainer();
     if (!container) {
       this.animateToRows(0);
+      this.updateChevronButton(false);
       return;
     }
 
@@ -192,8 +198,27 @@ export class AllDayManager {
       });
     }
 
+    // Store actual row count
+    this.actualRowCount = maxRows;
+
+    // Determine what to display
+    let displayRows = maxRows;
+    
+    if (maxRows > this.MAX_COLLAPSED_ROWS) {
+      // Show chevron button
+      this.updateChevronButton(true);
+      
+      // Limit to 3 if collapsed
+      if (!this.isExpanded) {
+        displayRows = this.MAX_COLLAPSED_ROWS;
+      }
+    } else {
+      // Hide chevron - not needed
+      this.updateChevronButton(false);
+    }
+
     // Animate to required rows (0 = collapse, >0 = expand)
-    this.animateToRows(maxRows);
+    this.animateToRows(displayRows);
   }
 
   /**
@@ -495,4 +520,42 @@ export class AllDayManager {
 
   }
 
+  /**
+   * Update chevron button visibility and state
+   */
+  private updateChevronButton(show: boolean): void {
+    const headerSpacer = this.getHeaderSpacer();
+    if (!headerSpacer) return;
+    
+    let chevron = headerSpacer.querySelector('.allday-chevron') as HTMLElement;
+    
+    if (show && !chevron) {
+      // Create chevron button
+      chevron = document.createElement('button');
+      chevron.className = 'allday-chevron collapsed';
+      chevron.innerHTML = `
+        <svg width="12" height="8" viewBox="0 0 12 8">
+          <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="2" fill="none"/>
+        </svg>
+      `;
+      chevron.onclick = () => this.toggleExpanded();
+      headerSpacer.appendChild(chevron);
+    } else if (!show && chevron) {
+      // Remove chevron button
+      chevron.remove();
+    } else if (chevron) {
+      // Update chevron state
+      chevron.classList.toggle('collapsed', !this.isExpanded);
+      chevron.classList.toggle('expanded', this.isExpanded);
+    }
+  }
+
+  /**
+   * Toggle between expanded and collapsed state
+   */
+  private toggleExpanded(): void {
+    this.isExpanded = !this.isExpanded;
+    this.checkAndAnimateAllDayHeight();
+  }
+
 }