From 5624ca59ca404974d959677216ccca59957d836e Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 17 May 2026 13:03:30 +0200
Subject: [PATCH] feat(17): add day-separator headers to planning event list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PlanningShowDaySeparator in planning_forms.go — returns true when date
  changes between consecutive events
- PlanningDaySeparator templ: slate-50 header row with date label and
  data-day-separator attribute
- PlanningEventListItem: remove redundant DateLabel column (now in separator)
- Loop uses index to call PlanningShowDaySeparator before each event row

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 backend/templates/planning.templ    | 16 ++++++++++++----
 backend/templates/planning_forms.go | 10 ++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/backend/templates/planning.templ b/backend/templates/planning.templ
index f462f60..d065fab 100644
--- a/backend/templates/planning.templ
+++ b/backend/templates/planning.templ
@@ -32,8 +32,11 @@ templ PlanningPage(user *auth.User, csrfToken string, activePath string, tablos
 					<p class="mt-2 text-base text-slate-600">Use the navigation controls to browse another 14-day window.</p>
 				</div>
 			} else {
-				<ul class="divide-y divide-slate-200 border-y border-slate-200" aria-label="Planning agenda">
-					for _, event := range agenda.Events {
+				<ul class="border-y border-slate-200" aria-label="Planning agenda">
+					for i, event := range agenda.Events {
+						if PlanningShowDaySeparator(agenda.Events, i) {
+							@PlanningDaySeparator(event.DateLabel)
+						}
 						@PlanningEventListItem(event)
 					}
 				</ul>
@@ -42,12 +45,17 @@ templ PlanningPage(user *auth.User, csrfToken string, activePath string, tablos
 	}
 }
 
+templ PlanningDaySeparator(label string) {
+	<li class="bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 border-t border-slate-200" data-day-separator="true">
+		{ label }
+	</li>
+}
+
 templ PlanningEventListItem(event PlanningEventRow) {
-	<li class="bg-white px-4 py-3 hover:bg-slate-50">
+	<li class="bg-white px-4 py-3 hover:bg-slate-50 border-t border-slate-200">
 		<a href={ templ.SafeURL(event.URL) } class="block focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" aria-label={ "Open event in tablo: " + event.Title }>
 			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
 				<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
-					<span class="text-sm font-medium text-slate-700">{ event.DateLabel }</span>
 					<span class="text-sm font-medium text-slate-700">{ event.TimeRange }</span>
 					<span class="text-base font-semibold text-slate-900">{ event.Title }</span>
 				</div>
diff --git a/backend/templates/planning_forms.go b/backend/templates/planning_forms.go
index ab777fc..4eed345 100644
--- a/backend/templates/planning_forms.go
+++ b/backend/templates/planning_forms.go
@@ -102,3 +102,13 @@ func PlanningRangeLabel(start time.Time, end time.Time) string {
 func samePlanningDay(a time.Time, b time.Time) bool {
 	return a.Year() == b.Year() && a.Month() == b.Month() && a.Day() == b.Day()
 }
+
+// PlanningShowDaySeparator returns true when the event at index i belongs to a
+// different day than the previous event — i.e. a date-group header should be
+// rendered before it.
+func PlanningShowDaySeparator(events []PlanningEventRow, index int) bool {
+	if index == 0 {
+		return true
+	}
+	return events[index].DateLabel != events[index-1].DateLabel
+}