From c705869c9e5483b110828c9f53ca4a8827382571 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Tue, 30 Sep 2025 00:34:27 +0200
Subject: [PATCH] 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       | 65 ++++++++++++++++++++++++++++-
 wwwroot/css/calendar-layout-css.css | 36 ++++++++++++++++
 2 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts
index 7ffeda8..13e2812 100644
--- a/src/managers/AllDayManager.ts
+++ b/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();
+  }
+
 }
\ No newline at end of file
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index c06f78a..4b37100 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -58,6 +58,42 @@ swp-header-spacer {
   position: relative;
 }
 
+/* All-day chevron button */
+.allday-chevron {
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  color: #666;
+  transition: transform 0.3s ease, color 0.2s ease;
+  border-radius: 4px;
+}
+
+.allday-chevron:hover {
+  color: #000;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Chevron points down when collapsed (can expand) */
+.allday-chevron.collapsed {
+  transform: translateX(-50%) rotate(0deg);
+}
+
+/* Chevron points up when expanded (can collapse) */
+.allday-chevron.expanded {
+  transform: translateX(-50%) rotate(180deg);
+}
+
+.allday-chevron svg {
+  display: block;
+  width: 12px;
+  height: 8px;
+}
+
 
 
 /* Week container for sliding */