From 42d9e863daa8dd45fffd6a157dbc03aad8e7725f Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 5 Nov 2025 16:08:58 +0000
Subject: [PATCH] Add a separator to distinguish past and future scheduled
 posts

Introduces a visual separator in the calendar list view to differentiate between past and future scheduled posts, enhancing chronological organization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 31687f99-9e96-4b22-9fd0-04c5a51141bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/YZ4cngz
---
 client/src/components/calendar-list-view.tsx | 32 ++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/src/components/calendar-list-view.tsx b/client/src/components/calendar-list-view.tsx
index b8e8577..9cb2fad 100644
--- a/client/src/components/calendar-list-view.tsx
+++ b/client/src/components/calendar-list-view.tsx
@@ -88,18 +88,37 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
           Aucune publication programmée
         </div>
       ) : (
-        sortedDates.map((dateStr) => {
+        sortedDates.map((dateStr, index) => {
           const posts = groupedPosts[dateStr];
           const isExpanded = expandedDates.has(dateStr);
           const dateObj = parseISO(dateStr);
           const isDateToday = isToday(dateStr);
+          
+          // Check if we need to show the separator (first past date)
+          const isPastDate = dateStr < today;
+          const prevDate = index > 0 ? sortedDates[index - 1] : null;
+          const prevWasFutureOrToday = prevDate ? (prevDate >= today) : false;
+          const showSeparator = isPastDate && prevWasFutureOrToday;
 
           return (
-            <div
-              key={dateStr}
-              className={`rounded-xl border ${isDateToday ? 'border-primary/50 bg-primary/5' : 'border-border/50 bg-card'} overflow-hidden`}
-              data-testid={`calendar-list-date-${dateStr}`}
-            >
+            <div key={`wrapper-${dateStr}`}>
+              {showSeparator && (
+                <div 
+                  key="past-separator"
+                  className="flex items-center gap-3 py-2"
+                  data-testid="separator-past-dates"
+                >
+                  <div className="flex-1 h-px bg-muted-foreground/30"></div>
+                  <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Publications passées
+                  </span>
+                  <div className="flex-1 h-px bg-muted-foreground/30"></div>
+                </div>
+              )}
+              <div
+                className={`rounded-xl border ${isDateToday ? 'border-primary/50 bg-primary/5' : 'border-border/50 bg-card'} overflow-hidden`}
+                data-testid={`calendar-list-date-${dateStr}`}
+              >
               <button
                 onClick={() => toggleDate(dateStr)}
                 className="w-full px-4 py-3 flex items-center justify-between hover:bg-muted/30 transition-colors"
@@ -212,6 +231,7 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
                 </div>
               )}
             </div>
+            </div>
           );
         })
       )}