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

@@ -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
+            <div key={`wrapper-${dateStr}`}>
-              key={dateStr}
+              {showSeparator && (
-              className={`rounded-xl border ${isDateToday ? 'border-primary/50 bg-primary/5' : 'border-border/50 bg-card'} overflow-hidden`}
+                <div 
-              data-testid={`calendar-list-date-${dateStr}`}
+                  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>
           );
         })
       )}