@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/legacy/calendar/all-day-event-bar.tsx

@@ -1,60 +1,32 @@
 import { Calendar, ChevronDown, ChevronUp } from '@tuturuuu/icons';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import { useCalendarSync } from '@tuturuuu/ui/hooks/use-calendar-sync';
 import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { getEventStyles } from '@tuturuuu/utils/color-helper';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
-import isBetween from 'dayjs/plugin/isBetween';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import timezone from 'dayjs/plugin/timezone';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   calendarDayBoundary,
   calendarDayKey,
 } from '../../../../lib/calendar-day';
+import {
+  calculateAllDayEventLayout,
+  type EventSpan,
+  MAX_EVENTS_DISPLAY,
+} from './all-day-event-layout';
 import { MIN_COLUMN_WIDTH } from './config';
 import { CalendarEventProviderIcon } from './event-provider-display';
 import { LocationTimeline } from './location-timeline';
+import { pastEventTreatment } from './past-event-treatment';
 import { useCalendarSettings } from './settings/settings-context';
 import { getEventLocationType } from './working-location';
 
-dayjs.extend(isBetween);
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
 dayjs.extend(timezone);
 
-function getZonedDay(date: Date, zone?: string) {
-  const boundary = dayjs(calendarDayBoundary(date, zone));
-  return zone && zone !== 'auto' ? boundary.tz(zone) : boundary;
-}
-
-const MAX_EVENTS_DISPLAY = 2;
-
-interface EventSpan {
-  event: CalendarEvent;
-  startIndex: number;
-  endIndex: number;
-  span: number;
-  isCutOffStart: boolean; // Event starts before visible range
-  isCutOffEnd: boolean; // Event ends after visible range
-  actualStartDate: dayjs.Dayjs; // Actual start date of the event
-  actualEndDate: dayjs.Dayjs; // Actual end date of the event
-  row: number; // Add row property for proper stacking
-  isMerged?: boolean;
-  mergedEventIds?: string[];
-}
-
-interface EventLayout {
-  spans: EventSpan[];
-  maxVisibleEventsPerDay: number;
-  eventsByDay: EventSpan[][];
-  locationSpansFromMerge: EventSpan[];
-}
-
-// Drag state interface
 interface DragState {
   isDragging: boolean;
   draggedEvent: CalendarEvent | null;
@@ -65,7 +37,6 @@ interface DragState {
   currentY: number;
   targetDateIndex: number | null;
   originalDateIndex: number;
-  // Add preview span for better visual feedback
   previewSpan: {
     startIndex: number;
     span: number;
@@ -73,7 +44,6 @@ interface DragState {
   } | null;
 }
 
-// 1. Extract EventContent component for shared rendering
 const EventContent = ({ event }: { event: CalendarEvent }) => (
   <>
     <CalendarEventProviderIcon
@@ -85,14 +55,20 @@ const EventContent = ({ event }: { event: CalendarEvent }) => (
 );
 
 export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
-  const { openModal, updateEvent, addEvent, deleteEvent } = useCalendar();
+  const {
+    openModal,
+    updateEvent,
+    addEvent,
+    deleteEvent,
+    preservePastEventOpacity,
+  } = useCalendar();
   const { allDayEvents } = useCalendarSync();
+  const now = useCalendarClock();
   const { settings } = useCalendarSettings();
   const showWeekends = settings.appearance.showWeekends;
   const tz = settings?.timezone?.timezone;
   const [expandedDates, setExpandedDates] = useState<string[]>([]);
 
-  // Drag and drop state
   const [dragState, setDragState] = useState<DragState>({
     isDragging: false,
     draggedEvent: null,
@@ -106,27 +82,22 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     previewSpan: null,
   });
 
-  // Use ref to store the current drag state for stable handlers
   const dragStateRef = useRef<DragState>(dragState);
   dragStateRef.current = dragState;
 
-  // Refs for drag handling
   const containerRef = useRef<HTMLDivElement>(null);
   const dragPreviewRef = useRef<HTMLDivElement>(null);
 
-  // Add refs for drag threshold and timer
   const dragStartPos = useRef<{ x: number; y: number } | null>(null);
   const dragInitiated = useRef(false);
   const longPressTimer = useRef<NodeJS.Timeout | null>(null);
   const DRAG_THRESHOLD = 5; // px
   const LONG_PRESS_DURATION = 250; // ms
 
-  // Constants for layout
   const EVENT_LEFT_OFFSET = 4; // 4px offset from left edge
   /** Height of the LocationTimeline strip in rem. Used to offset regular events when location events are present. */
   const LOCATION_TIMELINE_HEIGHT_REM = 1.5;
 
-  // Filter out weekend days if showWeekends is false
   const visibleDates = showWeekends
     ? dates
     : dates.filter((date) => {
@@ -134,11 +105,9 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         return day !== 0 && day !== 6; // 0 = Sunday, 6 = Saturday
       });
 
-  // Stable drag event handlers using refs
   const handleDragStart = useCallback(
     (e: React.MouseEvent, eventSpan: EventSpan) => {
-      // Don't allow dragging if there are no visible dates or only one date
-      if (visibleDates.length <= 1) return;
+      if (visibleDates.length <= 1 || eventSpan.event.seriesId) return;
 
       e.preventDefault();
       e.stopPropagation();
@@ -146,7 +115,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       const rect = containerRef.current?.getBoundingClientRect();
       if (!rect) return;
 
-      // Calculate initial preview span
       const previewSpan = {
         startIndex: eventSpan.startIndex,
         span: eventSpan.span,
@@ -166,14 +134,12 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         previewSpan,
       });
 
-      // Set cursor and prevent text selection
       document.body.style.cursor = 'grabbing';
       document.body.classList.add('select-none');
     },
     [visibleDates.length]
   );
 
-  // Stable drag move handler
   const handleDragMove = useCallback(
     (e: MouseEvent) => {
       const currentDragState = dragStateRef.current;
@@ -187,7 +153,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       const rect = containerRef.current.getBoundingClientRect();
       const relativeX = e.clientX - rect.left;
 
-      // Calculate which date column we're over
       const columnWidth = rect.width / visibleDates.length;
       const targetDateIndex = Math.floor(relativeX / columnWidth);
       const clampedTargetIndex = Math.max(
@@ -195,7 +160,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         Math.min(targetDateIndex, visibleDates.length - 1)
       );
 
-      // Calculate new preview span based on target position
       const originalSpan = currentDragState.draggedEventSpan.span;
       const newStartIndex = clampedTargetIndex;
       const newEndIndex = Math.min(
@@ -221,7 +185,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     [visibleDates.length]
   );
 
-  // Stable drag end handler
   const handleDragEnd = useCallback(async () => {
     const currentDragState = dragStateRef.current;
     if (
@@ -234,17 +197,14 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     const targetDateIndex = currentDragState.targetDateIndex;
     const originalDateIndex = currentDragState.originalDateIndex;
 
-    // Only validate originalDateIndex (targetDateIndex is always clamped)
     if (originalDateIndex < 0 || originalDateIndex >= visibleDates.length) {
       console.warn('Invalid original date index for drag operation');
       return;
     }
 
-    // Helper for dayjs + timezone
     const getDayjsDate = (d: string | Date) =>
       tz === 'auto' ? dayjs(d) : dayjs(d).tz(tz);
 
-    // Reset drag state and cursor
     setDragState({
       isDragging: false,
       draggedEvent: null,
@@ -261,13 +221,11 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     document.body.style.cursor = '';
     document.body.classList.remove('select-none');
 
-    // If dropped on the same date or invalid target, do nothing
     if (targetDateIndex === null || targetDateIndex === originalDateIndex) {
       return;
     }
 
     try {
-      // Use helper for all dayjs conversions
       const originalStartDate = getDayjsDate(
         visibleDates[originalDateIndex] ?? new Date()
       );
@@ -293,7 +251,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     }
   }, [visibleDates, tz, updateEvent]);
 
-  // Set up global mouse event listeners with stable handlers
   React.useEffect(() => {
     if (dragState.isDragging) {
       document.addEventListener('mousemove', handleDragMove);
@@ -306,302 +263,23 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     }
   }, [dragState.isDragging, handleDragMove, handleDragEnd]);
 
-  // Process events to determine their spans across visible dates
-  const eventLayout = useMemo((): EventLayout => {
-    const spans: EventSpan[] = [];
-    const eventsByDay: EventSpan[][] = Array(visibleDates.length)
-      .fill(null)
-      .map(() => []);
-
-    // First pass: create event spans without row assignment
-    const tempSpans: Omit<EventSpan, 'row'>[] = [];
-
-    // Process each all-day event
-    (visibleDates.length ? allDayEvents : []).forEach((event) => {
-      const eventStart =
-        tz === 'auto' ? dayjs(event.start_at) : dayjs(event.start_at).tz(tz);
-      const eventEnd =
-        tz === 'auto' ? dayjs(event.end_at) : dayjs(event.end_at).tz(tz);
-
-      // Find the start and end indices within our visible dates
-      let startIndex = -1;
-      let endIndex = -1;
-
-      // First pass: find any overlap with visible dates
-      const firstVisibleDate = getZonedDay(visibleDates[0]!, tz);
-      const lastVisibleDate = getZonedDay(
-        visibleDates[visibleDates.length - 1]!,
-        tz
-      );
-
-      // Check if event overlaps with our visible date range at all
-      // Event overlaps if: event_start < visible_end AND event_end > visible_start
-      const eventOverlaps =
-        eventStart.isBefore(lastVisibleDate.add(1, 'day'), 'day') &&
-        eventEnd.isAfter(firstVisibleDate, 'day');
-
-      if (!eventOverlaps) {
-        return; // Skip this event if it doesn't overlap with visible dates
-      }
-
-      // Improved logic for multi-day events
-      // Start index: first visible date that overlaps with the event
-      if (eventStart.isSameOrBefore(firstVisibleDate, 'day')) {
-        // Event starts before or on the first visible date
-        startIndex = 0;
-      } else {
-        // Find the first visible date that matches the event start
-        for (let i = 0; i < visibleDates.length; i++) {
-          const currentDate = getZonedDay(visibleDates[i]!, tz);
-          if (
-            currentDate.isSameOrAfter(eventStart, 'day') &&
-            currentDate.isBefore(eventEnd, 'day')
-          ) {
-            startIndex = i;
-            break;
-          }
-        }
-      }
-
-      // End index: last visible date that overlaps with the event
-      if (eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day')) {
-        // Event ends after the last visible date
-        endIndex = visibleDates.length - 1;
-      } else {
-        // Find the last visible date that the event covers
-        for (let i = visibleDates.length - 1; i >= 0; i--) {
-          const currentDate = getZonedDay(visibleDates[i]!, tz);
-          if (
-            currentDate.isBefore(eventEnd, 'day') &&
-            currentDate.isSameOrAfter(eventStart, 'day')
-          ) {
-            endIndex = i;
-            break;
-          }
-        }
-      }
-
-      // Include events that have at least one day visible in our date range
-      if (startIndex !== -1 && endIndex !== -1) {
-        const span = endIndex - startIndex + 1;
-
-        // Fix: Proper cut-off logic for all-day events
-        // For all-day events, end_at is typically start of next day (exclusive)
-        // So we need to check actual duration, not just date comparison
-        const actualDurationDays = eventEnd.diff(eventStart, 'day');
-        const isActuallyMultiDay = actualDurationDays > 1;
-
-        // Only show cut-off indicators for events that actually span multiple days
-        // AND are cut off by the visible range
-        const isCutOffStart =
-          isActuallyMultiDay && eventStart.isBefore(firstVisibleDate, 'day');
-        const isCutOffEnd =
-          isActuallyMultiDay &&
-          eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day');
-
-        const eventSpan: Omit<EventSpan, 'row'> = {
-          event,
-          startIndex,
-          endIndex,
-          span,
-          // Add indicators for cut-off events
-          isCutOffStart,
-          isCutOffEnd,
-          actualStartDate: eventStart,
-          actualEndDate: eventEnd,
-        };
-
-        tempSpans.push(eventSpan);
-      }
-    });
-
-    // Second pass: Merge consecutive SINGLE-DAY events with same title and color
-    // Optimized O(n log n) approach: group by mergeKey, sort groups, linear scan per group
-    const mergedTempSpans: Omit<EventSpan, 'row'>[] = [];
-
-    // Group single-day spans by mergeKey; multi-day events go directly to output
-    const groups = new Map<string, Omit<EventSpan, 'row'>[]>();
-
-    for (const span of tempSpans) {
-      if (span.span !== 1) {
-        // Multi-day events - don't merge, just add directly
-        mergedTempSpans.push(span);
-        continue;
-      }
-
-      const mergeKey = `${(span.event.title ?? '').toLowerCase().trim()}|${span.event.color ?? 'BLUE'}`;
-      const group = groups.get(mergeKey) ?? [];
-      group.push(span);
-      groups.set(mergeKey, group);
-    }
-
-    // Process each group with linear merge
-    for (const [, group] of groups) {
-      // Sort by startIndex (O(k log k) per group, where k is group size)
-      group.sort((a, b) => a.startIndex - b.startIndex);
-
-      let currentMerged: Omit<EventSpan, 'row'> | null = null;
-      let mergedIds: string[] = [];
-
-      for (const span of group) {
-        if (!currentMerged) {
-          // Start a new potential merge chain
-          currentMerged = { ...span };
-          mergedIds = [span.event.id];
-        } else if (span.startIndex === currentMerged.endIndex + 1) {
-          // Adjacent - extend the merge
-          currentMerged.endIndex = span.endIndex;
-          currentMerged.span =
-            currentMerged.endIndex - currentMerged.startIndex + 1;
-          currentMerged.isCutOffEnd =
-            currentMerged.isCutOffEnd || span.isCutOffEnd;
-          currentMerged.actualEndDate = currentMerged.actualEndDate.isAfter(
-            span.actualEndDate
-          )
-            ? currentMerged.actualEndDate
-            : span.actualEndDate;
-          mergedIds.push(span.event.id);
-        } else {
-          // Gap - push current merged span and start a new one
-          if (mergedIds.length > 1) {
-            currentMerged.isMerged = true;
-            currentMerged.mergedEventIds = mergedIds;
-          }
-          mergedTempSpans.push(currentMerged);
-          currentMerged = { ...span };
-          mergedIds = [span.event.id];
-        }
-      }
-
-      // Push the final merged span from this group
-      if (currentMerged) {
-        if (mergedIds.length > 1) {
-          currentMerged.isMerged = true;
-          currentMerged.mergedEventIds = mergedIds;
-        }
-        mergedTempSpans.push(currentMerged);
-      }
-    }
-
-    // Sort final output by startIndex for consistent ordering
-    mergedTempSpans.sort((a, b) => a.startIndex - b.startIndex);
-
-    // Third pass: assign rows (ONLY for non-location events)
-    // Location events will be rendered separately as a compact timeline strip
-    // Extract location spans before filtering them out for row assignment
-    const locationSpansFromMerge = mergedTempSpans
-      .filter((span) => getEventLocationType(span.event) !== null)
-      .map((span) => ({ ...span, row: 0 })); // Give them row 0 as placeholder
-
-    const nonLocationSpans = mergedTempSpans.filter(
-      (span) => getEventLocationType(span.event) === null
-    );
-
-    // Sort: 1) by span length (longer events first for better packing), 2) by start date
-    const sortedTempSpans = nonLocationSpans.sort((a, b) => {
-      // Longer events first (they need to claim their full row first)
-      const spanDiff = b.span - a.span;
-      if (spanDiff !== 0) return spanDiff;
-
-      // Then by start date
-      return a.actualStartDate.diff(b.actualStartDate);
-    });
-
-    // Track occupied rows for each day
-    const occupiedRows: boolean[][] = Array(visibleDates.length)
-      .fill(null)
-      .map(() => []);
-
-    // Assign rows to events
-    sortedTempSpans.forEach((tempSpan) => {
-      // Find the first available row that works for all days this event spans
-      let row = 0;
-      let rowFound = false;
-
-      while (!rowFound) {
-        // Check if this row is available for all days the event spans
-        let canUseRow = true;
-        for (
-          let dayIndex = tempSpan.startIndex;
-          dayIndex <= tempSpan.endIndex;
-          dayIndex++
-        ) {
-          if (occupiedRows[dayIndex]?.[row]) {
-            canUseRow = false;
-            break;
-          }
-        }
-
-        if (canUseRow) {
-          // Mark this row as occupied for all days the event spans
-          for (
-            let dayIndex = tempSpan.startIndex;
-            dayIndex <= tempSpan.endIndex;
-            dayIndex++
-          ) {
-            if (!occupiedRows[dayIndex]) {
-              occupiedRows[dayIndex] = [];
-            }
-            occupiedRows[dayIndex]![row] = true;
-          }
-          rowFound = true;
-        } else {
-          row++;
-        }
-      }
-
-      // Create the final event span with row assignment
-      const eventSpan: EventSpan = {
-        ...tempSpan,
-        row,
-      };
-
-      spans.push(eventSpan);
-
-      // Add this event to each day it spans
-      for (let i = tempSpan.startIndex; i <= tempSpan.endIndex; i++) {
-        eventsByDay[i]?.push(eventSpan);
-      }
-    });
-
-    // Calculate max visible events per day for layout purposes
-    let maxVisibleEventsPerDay = 0;
-    eventsByDay.forEach((dayEvents, dayIndex) => {
-      const dateKey = calendarDayKey(visibleDates[dayIndex]!);
-
-      const shouldShowAll = dayEvents.length === MAX_EVENTS_DISPLAY + 1;
-      const isExpanded = expandedDates.includes(dateKey) || shouldShowAll;
-      const visibleCount = isExpanded
-        ? dayEvents.length
-        : Math.min(dayEvents.length, MAX_EVENTS_DISPLAY);
-
-      maxVisibleEventsPerDay = Math.max(maxVisibleEventsPerDay, visibleCount);
-    });
-
-    return {
-      spans,
-      maxVisibleEventsPerDay,
-      eventsByDay,
-      locationSpansFromMerge,
-    };
-  }, [allDayEvents, visibleDates, tz, expandedDates]);
+  const eventLayout = useMemo(
+    () =>
+      calculateAllDayEventLayout(allDayEvents, visibleDates, tz, expandedDates),
+    [allDayEvents, visibleDates, tz, expandedDates]
+  );
 
-  // Extract location events (Home/Office) for compact timeline display
-  // Deduplicate: only show one location event per day cell (first one wins)
   const locationSpans = useMemo(() => {
     const allLocationSpans = eventLayout.locationSpansFromMerge || [];
 
-    // Track which day indices have been claimed by a location event
     const claimedDays = new Set<number>();
     const deduplicatedSpans: EventSpan[] = [];
 
-    // Sort by start index to process in order
     const sortedSpans = [...allLocationSpans].sort(
       (a, b) => a.startIndex - b.startIndex
     );
 
     for (const span of sortedSpans) {
-      // Check if any day in this span is already claimed
       let hasConflict = false;
       for (let day = span.startIndex; day <= span.endIndex; day++) {
         if (claimedDays.has(day)) {
@@ -611,7 +289,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       }
 
       if (!hasConflict) {
-        // Claim all days for this span
         for (let day = span.startIndex; day <= span.endIndex; day++) {
           claimedDays.add(day);
         }
@@ -622,19 +299,16 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     return deduplicatedSpans;
   }, [eventLayout.locationSpansFromMerge]);
 
-  // Get non-location spans for regular event display
   const regularSpans = useMemo(() => {
     return eventLayout.spans.filter(
       (span) => getEventLocationType(span.event) === null
     );
   }, [eventLayout.spans]);
 
-  // Get unique events for a specific date (for expansion logic)
   const getUniqueEventsForDate = (dateIndex: number): EventSpan[] => {
     return eventLayout.eventsByDay[dateIndex] ?? [];
   };
 
-  // Check if we have any all-day events to display
   if (eventLayout.spans.length === 0) {
     return null;
   }
@@ -647,7 +321,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     );
   };
 
-  // Calculate dynamic height based on visible events
   const locationTopOffset =
     locationSpans.length > 0 ? LOCATION_TIMELINE_HEIGHT_REM : 0;
   const regularRowsHeight =
@@ -656,9 +329,8 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       : 0;
   const barHeight = Math.max(1.9, locationTopOffset + regularRowsHeight);
 
-  // Enhanced mouse and touch handlers
   const handleEventMouseDown = (e: React.MouseEvent, eventSpan: EventSpan) => {
-    if (visibleDates.length <= 1) return;
+    if (visibleDates.length <= 1 || eventSpan.event.seriesId) return;
     e.preventDefault();
     e.stopPropagation();
     dragStartPos.current = { x: e.clientX, y: e.clientY };
@@ -675,13 +347,11 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         dragInitiated.current = true;
         handleDragStart(e, eventSpan);
       }
-      // If drag already started, let handleDragMove do its job
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
       if (!dragInitiated.current) {
-        // Treat as click (open modal)
         openModal(eventSpan.event.id, 'all-day');
       }
       dragStartPos.current = null;
@@ -692,13 +362,12 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
   };
 
   const handleEventTouchStart = (e: React.TouchEvent, eventSpan: EventSpan) => {
-    if (visibleDates.length <= 1) return;
+    if (visibleDates.length <= 1 || eventSpan.event.seriesId) return;
     if (e.touches.length !== 1) return;
     const touch = e.touches[0];
     if (!touch) return;
     dragStartPos.current = { x: touch.clientX, y: touch.clientY };
     dragInitiated.current = false;
-    // Start long-press timer
     longPressTimer.current = setTimeout(() => {
       dragInitiated.current = true;
       handleDragStart(
@@ -723,7 +392,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         !dragInitiated.current &&
         Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD
       ) {
-        // Cancel long-press, treat as scroll
         if (longPressTimer.current) clearTimeout(longPressTimer.current);
         longPressTimer.current = null;
         dragStartPos.current = null;
@@ -738,7 +406,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       document.removeEventListener('touchmove', onTouchMove);
       document.removeEventListener('touchend', onTouchEnd);
       if (!dragInitiated.current) {
-        // Treat as tap (open modal)
         openModal(eventSpan.event.id, 'all-day');
       }
       dragStartPos.current = null;
@@ -782,7 +449,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                 ? Math.max(0, dateEvents.length - MAX_EVENTS_DISPLAY)
                 : 0;
 
-            // Check if this column is a drop target
             const isDropTarget =
               dragState.isDragging && dragState.targetDateIndex === dateIndex;
             const isOriginalColumn =
@@ -793,13 +459,11 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                 key={`all-day-column-${dateKey}`}
                 className={cn(
                   'group flex h-full flex-col justify-start border-l transition-colors duration-200 last:border-r',
-                  // Drop zone visual feedback
                   isDropTarget &&
                     !isOriginalColumn &&
                     'border-blue-300 bg-blue-100 dark:border-blue-700 dark:bg-blue-900/30',
                   isOriginalColumn &&
                     'border-red-300 bg-red-100 dark:border-red-700 dark:bg-red-900/30',
-                  // Normal hover state (only when not dragging)
                   !dragState.isDragging && 'hover:bg-muted/20'
                 )}
               >
@@ -864,8 +528,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
             />
           )}
 
-        {/* Absolute positioned spanning events */}
-        {/* Location timeline strip at the top */}
         <LocationTimeline
           visibleDates={visibleDates}
           locationSpans={locationSpans}
@@ -876,7 +538,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
           deleteEvent={deleteEvent}
         />
 
-        {/* Absolute positioned spanning events */}
         {regularSpans.map((eventSpan) => {
           const { event, startIndex, span, row, isCutOffStart, isCutOffEnd } =
             eventSpan;
@@ -884,7 +545,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
           const eventStyle = calendarEventStyle(event);
           const eventRow = row;
 
-          // Check if this event should be visible based on expansion state
           const shouldHideEvent = visibleDates.some((date, dateIndex) => {
             if (dateIndex < startIndex || dateIndex > startIndex + span - 1)
               return false;
@@ -903,11 +563,9 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
 
           if (shouldHideEvent) return null;
 
-          // Check if this event is currently being dragged
           const isDraggedEvent =
             dragState.isDragging && dragState.draggedEvent?.id === event.id;
 
-          // Calculate top offset based on location strip presence
           const topOffset = locationTopOffset;
           const optimisticStatus = (
             event as CalendarEvent & {
@@ -926,15 +584,22 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
               key={`spanning-event-${event.id}`}
               className={cn(
                 'absolute flex items-center rounded-sm border-l-2 px-2 py-1 font-semibold text-xs transition-all duration-200',
-                // Cursor changes based on drag state
+                pastEventTreatment(
+                  event,
+                  preservePastEventOpacity,
+                  isDraggedEvent,
+                  now.getTime(),
+                  calendarDayBoundary(
+                    eventSpan.actualEndDate.toDate(),
+                    tz
+                  ).getTime()
+                ),
                 dragState.isDragging
                   ? 'cursor-grabbing'
                   : 'cursor-grab hover:cursor-grab',
-                // Visual feedback for dragging
                 isDraggedEvent && 'scale-95 outline outline-dashed',
                 isPendingMutation &&
                   'outline outline-dashed outline-1 outline-primary',
-                // Special styling for cut-off events
                 (isCutOffStart || isCutOffEnd) && 'border-dashed'
               )}
               style={{
@@ -947,7 +612,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                 zIndex: isDraggedEvent ? 10 : 5,
               }}
               onClick={() => {
-                // Only open modal if not dragging (locked events can still be clicked to edit)
                 if (!dragState.isDragging) {
                   openModal(event.id, 'all-day');
                 }