From 2d76ecf8695f1143236ab7b5849aef1717101fbb Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 17 Mar 2026 20:03:22 +0800
Subject: [PATCH] Fix 1st-of-month highlight bug and restore Calendars header

selectedDate now only set by user clicks in mini calendar, not by
external currentDate prop (which is always 1st of displayed month
from FullCalendar's view.currentStart). Restore h-16 "Calendars"
header above mini calendar for consistent top-of-page alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/calendar/CalendarSidebar.tsx | 3 +++
 frontend/src/components/calendar/MiniCalendar.tsx    | 6 ++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarSidebar.tsx b/frontend/src/components/calendar/CalendarSidebar.tsx
index 4dbeb79..7cac30a 100644
--- a/frontend/src/components/calendar/CalendarSidebar.tsx
+++ b/frontend/src/components/calendar/CalendarSidebar.tsx
@@ -99,6 +99,9 @@ const CalendarSidebar = forwardRef<HTMLDivElement, CalendarSidebarProps>(functio
 
   return (
     <div ref={ref} className="shrink-0 border-r bg-card flex flex-col" style={{ width }}>
+      <div className="h-16 px-4 border-b flex items-center shrink-0">
+        <span className="text-sm font-semibold font-heading text-foreground">Calendars</span>
+      </div>
       {onDateClick && (
         <div className="border-b shrink-0">
           <MiniCalendar
diff --git a/frontend/src/components/calendar/MiniCalendar.tsx b/frontend/src/components/calendar/MiniCalendar.tsx
index 87871d1..39ec6ab 100644
--- a/frontend/src/components/calendar/MiniCalendar.tsx
+++ b/frontend/src/components/calendar/MiniCalendar.tsx
@@ -42,18 +42,16 @@ const MiniCalendar = memo(function MiniCalendar({
   const [displayedMonth, setDisplayedMonth] = useState(() =>
     currentDate ? startOfMonth(parseDate(currentDate)) : startOfMonth(new Date())
   );
-  const [selectedDate, setSelectedDate] = useState<string | null>(
-    currentDate ?? null
-  );
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
 
   // Sync displayed month when main calendar navigates across months
+  // selectedDate is only set by user clicks in the mini calendar, not by external navigation
   useEffect(() => {
     if (!currentDate) return;
     const incoming = startOfMonth(parseDate(currentDate));
     setDisplayedMonth((prev) =>
       prev.getTime() === incoming.getTime() ? prev : incoming
     );
-    setSelectedDate((prev) => prev === currentDate ? prev : currentDate);
   }, [currentDate, parseDate]);
 
   const days = useMemo(