Merge pull request #87 from R0m1k3/dev

Dev

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>
           );
         })
       )}

replit.md

@@ -11,6 +11,7 @@ Preferred communication style: Simple, everyday language.
 ## Recent Changes
 
 ### November 5, 2025
+- **Mobile Calendar Visual Separator**: Added visual separator between future and past dates in mobile calendar list view. A horizontal divider with centered text "PUBLICATIONS PASSÉES" now appears before the first past date when both future/today and past dates exist. The separator uses gray horizontal lines on both sides of uppercase text, providing clear visual distinction between upcoming posts and past posts. The separator only appears when transitioning from future to past dates - it does not show when only past or only future dates exist.
 - **Mobile Calendar List Sorting Fix**: Fixed illogical date ordering in mobile calendar list view. Problem: After displaying today's date first, remaining dates were sorted using simple localeCompare, mixing past and future dates together. Solution: Implemented intelligent chronological sorting in `calendar-list-view.tsx` with three-tier logic: (1) Today's date always appears first, (2) Future dates display in ascending chronological order (soonest first), (3) Past dates appear last in descending order (most recent first). The sorting uses ISO date string comparison (yyyy-MM-dd) which preserves chronological order. This provides intuitive navigation where users see today, then upcoming posts in order, then recent past posts.
 
 ### October 31, 2025