From b5c8182410ea1d4dd75f6513ea06534862998bc0 Mon Sep 17 00:00:00 2001
From: cartoone <contact@cartoone.dev>
Date: Sun, 23 Aug 2026 22:08:42 +0200
Subject: [PATCH] feat(planner): clicking the selected day header again
 deselects it

Same effect as the day panel's close button: selection cleared and the
day detail panel closed. Discussed in #2024.
---
 client/src/components/Planner/DayPlanSidebar.test.tsx | 11 +++++++++++
 client/src/components/Planner/DayPlanSidebar.tsx      |  5 +++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx
index 782bb6d71..e6aba3be1 100644
--- a/client/src/components/Planner/DayPlanSidebar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.test.tsx
@@ -370,6 +370,17 @@ describe('DayPlanSidebar', () => {
     expect(onSelectDay).toHaveBeenCalledWith(10)
   })
 
+  it('FE-PLANNER-DAYPLAN-209: clicking the selected day header again deselects it', async () => {
+    const user = userEvent.setup()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
+    const onSelectDay = vi.fn()
+    const onDayDetail = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10, onSelectDay, onDayDetail })} />)
+    await user.click(screen.getByText('My Day'))
+    expect(onSelectDay).toHaveBeenCalledWith(null)
+    expect(onDayDetail).toHaveBeenCalledWith(null)
+  })
+
   it('FE-PLANNER-DAYPLAN-010: selectedDayId renders without error', () => {
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10 })} />)
diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index 2ce0f5d74..c6e4c17a2 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -65,7 +65,7 @@ interface DayPlanSidebarProps {
   selectedAssignmentId: number | null
   onSelectDay: (dayId: number | null, skipFit?: boolean) => void
   onPlaceClick: (placeId: number | null, assignmentId?: number | null) => void
-  onDayDetail: (day: Day) => void
+  onDayDetail: (day: Day | null) => void
   accommodations?: Accommodation[]
   onReorder: (dayId: number, orderedIds: number[]) => void
   onReorderDays?: (orderedIds: number[]) => void
@@ -1579,7 +1579,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
               <div
                 className="dp-day-header"
                 data-selected={isSelected}
-                onClick={() => { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) }}
+                // Clicking the selected day again deselects it — same as the day panel's × (#2024).
+                onClick={() => { if (isSelected) { onSelectDay(null); if (onDayDetail) onDayDetail(null) } else { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) } }}
                 onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
                 onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setDragOverDayId(null) }}
                 onDrop={e => handleDropOnDay(e, day.id)}