From 3691ebea85ea8ed2611fde3a6089ef310dd1a60e Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Mon, 4 Aug 2025 00:21:41 +0200
Subject: [PATCH] Adds header sections to calendar week view

Improves calendar week view by adding header sections.

This change introduces two new header sections, styled with an orange background, to the calendar week view. These sections are positioned in the second row of the week header, enhancing the visual organization and potentially providing space for additional information or actions related to the week view. The overall height of the header has also been adjusted to accommodate the new row.
---
 src/managers/GridManager.ts         |  9 ++++++++
 wwwroot/css/calendar-layout-css.css | 33 +++++++++++++++++++++++------
 wwwroot/css/calendar.css            |  2 +-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts
index 0713d04..9bd0f2e 100644
--- a/src/managers/GridManager.ts
+++ b/src/managers/GridManager.ts
@@ -254,6 +254,15 @@ export class GridManager {
       
       weekHeader.appendChild(header);
     });
+
+    // Add orange header sections in row 2
+    const headerSectionLeft = document.createElement('swp-header-section-left');
+    headerSectionLeft.textContent = 'Left Section';
+    weekHeader.appendChild(headerSectionLeft);
+
+    const headerSectionRight = document.createElement('swp-header-section-right');
+    headerSectionRight.textContent = 'Right Section';
+    weekHeader.appendChild(headerSectionRight);
   }
 
   /**
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index ed974e3..c96c5da 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -39,7 +39,7 @@ swp-calendar-nav {
 swp-calendar-container {
   display: grid;
   grid-template-columns: 60px 1fr 20px;
-  grid-template-rows: 80px 1fr 20px;
+  grid-template-rows: 110px 1fr 20px;
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -50,7 +50,7 @@ swp-calendar-container {
 swp-header-spacer {
   grid-column: 1;
   grid-row: 1;
-  height: 80px; /* Same as week header height */
+  height: 110px; /* Same as week header height */
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -63,7 +63,7 @@ swp-header-spacer {
 swp-right-header-spacer {
   grid-column: 3;
   grid-row: 1;
-  height: 80px; /* Same as week header height */
+  height: 110px; /* Same as week header height */
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -76,7 +76,7 @@ swp-week-container {
   grid-column: 2 / 3;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: 80px 1fr;
+  grid-template-rows: 110px 1fr;
   position: relative;
   width: 100%;
   transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -211,17 +211,18 @@ swp-hour-marker::after {
   pointer-events: none;
 }
 
-/* Week header */
+/* Week header with 2 rows */
 swp-week-header {
   display: grid;
   grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
+  grid-template-rows: 80px 30px; /* Row 1: day headers, Row 2: orange sections */
   min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
-  height: 80px; /* Fixed height */
+  height: 110px; /* Updated height: 80px + 30px */
 }
 
 swp-day-header {
@@ -264,6 +265,26 @@ swp-day-header[data-today="true"] swp-day-date {
   margin: 4px auto 0;
 }
 
+/* Orange header sections in row 2 */
+swp-header-section-left {
+  grid-column: 1 / 3; /* Span columns 1-2 */
+  grid-row: 2; /* Row 2 only */
+  background: #ff9800; /* Orange background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+swp-header-section-right {
+  grid-column: 3 / 8; /* Span columns 3-7 */
+  grid-row: 2; /* Row 2 only */
+  background: #ff9800; /* Orange background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Scrollable content */
 swp-scrollable-content {
   overflow-y: auto;
diff --git a/wwwroot/css/calendar.css b/wwwroot/css/calendar.css
index 7bcd48d..36cbdd4 100644
--- a/wwwroot/css/calendar.css
+++ b/wwwroot/css/calendar.css
@@ -226,7 +226,7 @@ swp-week-header {
     position: sticky;
     top: 0;
     z-index: 3;
-    height: 80px; /* Fixed height */
+    height: 110px; /* Fixed height */
 }
 
 swp-day-header {