@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -0,0 +1,1018 @@
+import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { getEventStyles } from '@tuturuuu/utils/color-helper';
+import { cn } from '@tuturuuu/utils/format';
+import { format } from 'date-fns';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { HOUR_HEIGHT } from './config';
+import { useCalendarSettings } from './settings/settings-context';
+
+dayjs.extend(timezone);
+
+interface DragPreviewProps {
+  startDate: Date;
+  endDate: Date;
+  top: number;
+  height: number;
+  isReversed: boolean;
+  color: string;
+  timeFormat?: '12h' | '24h';
+}
+
+const DragPreview = ({
+  startDate,
+  endDate,
+  top,
+  height,
+  color,
+  timeFormat = '12h',
+}: DragPreviewProps) => {
+  const timePattern = timeFormat === '24h' ? 'HH:mm' : 'h:mm a';
+  // Calculate duration in minutes
+  const durationMs = endDate.getTime() - startDate.getTime();
+  const durationMinutes = Math.round(durationMs / (1000 * 60));
+
+  // Get color styles for the preview
+  const { bg, border, text } = getEventStyles(color);
+
+  return (
+    <div
+      className={cn(
+        'absolute right-1 left-1 rounded-r-md rounded-l border-l-2 transition-colors duration-300',
+        'group transition-all hover:ring-1 focus:outline-none',
+        'transform shadow-md', // Subtle transform during interaction
+        border,
+        text,
+        bg
+      )}
+      style={{
+        top: `${top}px`,
+        height: `${Math.max(height, 20)}px`,
+        transition: 'none', // No transition during interaction
+        willChange: 'transform', // GPU acceleration
+        zIndex: 11, // Higher z-index to stay above all other elements
+        pointerEvents: 'none', // Prevent interaction with preview
+      }}
+    >
+      <div
+        className={cn(
+          'flex h-full w-full flex-col justify-between p-1',
+          height > 40 ? 'opacity-100' : 'opacity-0',
+          'transition-opacity'
+        )}
+      >
+        <div className="absolute left-2 text-left font-semibold text-xs">
+          {format(startDate, timePattern)}
+        </div>
+        <div className="absolute bottom-1 left-2 text-left font-semibold text-xs">
+          {format(endDate, timePattern)}
+        </div>
+      </div>
+      <div
+        className={cn(
+          'pointer-events-none absolute whitespace-nowrap rounded-md font-semibold text-xs',
+          // More compact styling for short durations
+          height < 60
+            ? 'top-1/2 right-1 -translate-y-1/2 px-1 py-0.5 text-[10px]'
+            : 'top-2 right-2 px-1.5 py-0.5',
+          text,
+          bg
+        )}
+        style={{
+          maxWidth: 'calc(100% - 8px)', // Tighter max width
+          minWidth: 24, // Smaller min width for short durations
+          textAlign: 'right',
+          transform: height < 60 ? 'translateY(-50%)' : 'none',
+        }}
+      >
+        {durationMinutes < 60
+          ? `${durationMinutes <= 0 ? 15 : durationMinutes}m`
+          : `${Math.floor(durationMinutes / 60)}h${durationMinutes % 60 ? ` ${durationMinutes % 60}m` : ''}`}
+      </div>
+    </div>
+  );
+};
+
+interface CalendarCellProps {
+  date: string;
+  hour: number;
+}
+
+// Find the scrollable parent container
+const findScrollContainer = (el: HTMLElement | null): HTMLElement | null => {
+  let node = el;
+  while (node) {
+    if (node.scrollHeight > node.clientHeight) return node;
+    node = node.parentElement;
+  }
+  return null;
+};
+
+const GRID_SNAP = HOUR_HEIGHT / 4; // 15 minutes per grid
+
+type TooltipPos = {
+  x: number;
+  y: number;
+  arrowDirection: 'right' | 'left' | 'down' | 'up';
+};
+
+export const CalendarCell = ({ date, hour }: CalendarCellProps) => {
+  const {
+    addEmptyEvent,
+    addEmptyEventWithDuration,
+    isDragging,
+    setIsDragging,
+    scheduleTaskAsEvent,
+    readOnly,
+  } = useCalendar();
+  const { settings } = useCalendarSettings();
+  const [isHovering, setIsHovering] = useState(false);
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  // Task drop preview state
+  const [taskDropPreview, setTaskDropPreview] = useState<{
+    top: number;
+    height: number;
+    taskName: string;
+  } | null>(null);
+  const taskDragDataRef = useRef<{
+    taskName: string;
+    totalDuration: number;
+  } | null>(null);
+  const cellRef = useRef<HTMLDivElement>(null);
+  const dragStartRef = useRef<{ date: Date; y: number } | null>(null);
+  const [dragPreview, setDragPreview] = useState<{
+    startDate: Date;
+    endDate: Date;
+    top: number;
+    height: number;
+    isReversed: boolean;
+  } | null>(null);
+  const tz = settings?.timezone?.timezone;
+  const [hoveredSlot, setHoveredSlot] = useState<
+    'hour' | 'half-hour' | number | null
+  >(null);
+  const [showBothLabels, setShowBothLabels] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipLocked, setTooltipLocked] = useState(false);
+  const hoverTimeout = useRef<NodeJS.Timeout | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+  // --- Google Calendar-like Drag & Auto-Scroll ---
+  const autoScrollRef = useRef<number | null>(null);
+  const scrollContainerRef = useRef<HTMLElement | null>(null);
+  // Store drag start Y relative to container and cell top in container
+  const dragStartYInContainer = useRef<number>(0);
+  const cellTopInContainer = useRef<number>(0);
+  // Add refs for tooltip position and animation frame
+  const tooltipPosRef = useRef<TooltipPos>({
+    x: 0,
+    y: 0,
+    arrowDirection: 'right',
+  });
+  const rafId = useRef<number | null>(null);
+  const [tooltipPos, setTooltipPos] = useState<TooltipPos>({
+    x: 0,
+    y: 0,
+    arrowDirection: 'right',
+  });
+
+  const id = `cell-${date}-${hour}`;
+  const tooltipId = `calendar-tooltip-${id}`;
+
+  // Format time for display - only show when hovering
+  const formatTime = (hour: number, minute: number = 0) => {
+    const base = dayjs(`${date}T00:00:00`);
+    const dateTz = tz === 'auto' ? base.local() : base.tz(tz);
+    return dateTz
+      .hour(hour)
+      .minute(minute)
+      .format(settings?.appearance?.timeFormat === '24h' ? 'HH:mm' : 'h:mm a');
+  };
+
+  // Helper to get a Date object for a given hour/minute, timezone-aware
+  const getCellDate = useCallback(
+    (hour: number, minute: number = 0) => {
+      const base = dayjs(`${date}T00:00:00`);
+      const dateTz = tz === 'auto' ? base.local() : base.tz(tz);
+      return dateTz.hour(hour).minute(minute).second(0).millisecond(0).toDate();
+    },
+    [date, tz]
+  );
+
+  // --- HTML5 Drag-and-Drop handlers for task scheduling ---
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      if (readOnly) return;
+      e.preventDefault();
+      if (e.dataTransfer.types.includes('application/json')) {
+        setIsDropTarget(true);
+        // Try to parse task data for preview
+        try {
+          const jsonData = e.dataTransfer.getData('application/json');
+          if (jsonData) {
+            const data = JSON.parse(jsonData);
+            if (data.type === 'task') {
+              taskDragDataRef.current = {
+                taskName: data.taskName || 'Task',
+                totalDuration: data.totalDuration || 0,
+              };
+            }
+          }
+        } catch {
+          // getData may fail during dragenter in some browsers, that's ok
+        }
+      }
+    },
+    [readOnly]
+  );
+
+  // Calculate preview height based on task duration
+  const getTaskPreviewHeight = useCallback((totalDuration: number): number => {
+    let durationMinutes: number;
+    if (totalDuration <= 0) {
+      durationMinutes = 60; // Default 1 hour
+    } else {
+      const totalMinutes = totalDuration * 60;
+      const cappedMinutes = Math.min(totalMinutes, 60);
+      durationMinutes = Math.ceil(cappedMinutes / 15) * 15;
+    }
+    return (durationMinutes / 60) * HOUR_HEIGHT;
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      if (readOnly) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+
+      // Update task drop preview position
+      if (isDropTarget && cellRef.current) {
+        const rect = cellRef.current.getBoundingClientRect();
+        const relativeY = e.clientY - rect.top;
+        const exactMinutes = (relativeY / HOUR_HEIGHT) * 60;
+        const snappedMinutes = Math.round(exactMinutes / 15) * 15;
+
+        // Calculate preview position
+        const top = (snappedMinutes / 60) * HOUR_HEIGHT;
+        const height = getTaskPreviewHeight(
+          taskDragDataRef.current?.totalDuration || 0
+        );
+
+        setTaskDropPreview({
+          top,
+          height,
+          taskName: taskDragDataRef.current?.taskName || 'Task',
+        });
+      }
+    },
+    [readOnly, isDropTarget, getTaskPreviewHeight]
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      if (readOnly) return;
+      // Only reset if we're actually leaving the cell (not entering a child)
+      if (
+        !cellRef.current?.contains(e.relatedTarget as Node) ||
+        e.relatedTarget === null
+      ) {
+        setIsDropTarget(false);
+        setTaskDropPreview(null);
+        taskDragDataRef.current = null;
+      }
+    },
+    [readOnly]
+  );
+
+  const handleTaskDrop = useCallback(
+    async (e: React.DragEvent<HTMLDivElement>) => {
+      if (readOnly) return;
+      e.preventDefault();
+      setIsDropTarget(false);
+      setTaskDropPreview(null);
+      taskDragDataRef.current = null;
+
+      try {
+        const jsonData = e.dataTransfer.getData('application/json');
+        if (!jsonData) return;
+
+        const data = JSON.parse(jsonData);
+        if (data.type !== 'task') return;
+
+        // Calculate time from mouse position within the cell
+        if (!cellRef.current) return;
+        const rect = cellRef.current.getBoundingClientRect();
+        const relativeY = e.clientY - rect.top;
+        // Calculate exact minute position without intermediate rounding
+        const exactMinutes = (relativeY / HOUR_HEIGHT) * 60;
+        // Snap directly to nearest 15-minute interval (avoids double-rounding offset)
+        const snappedMinutes = Math.round(exactMinutes / 15) * 15;
+
+        const startAt = getCellDate(hour, snappedMinutes);
+
+        // Calculate duration based on user requirements:
+        // Use task's total_duration if ≤1 hour, otherwise 1 hour
+        // Round to 15-minute multiples
+        const totalDurationHours = data.totalDuration || 0;
+        let durationMinutes: number;
+
+        if (totalDurationHours <= 0) {
+          durationMinutes = 60; // Default 1 hour
+        } else {
+          const totalMinutes = totalDurationHours * 60;
+          // Cap at 1 hour if total duration exceeds it
+          const cappedMinutes = Math.min(totalMinutes, 60);
+          // Round to 15-minute multiples
+          durationMinutes = Math.ceil(cappedMinutes / 15) * 15;
+        }
+
+        const endAt = new Date(startAt.getTime() + durationMinutes * 60000);
+
+        // Schedule the task as a calendar event
+        if (scheduleTaskAsEvent) {
+          await scheduleTaskAsEvent(data.taskId, startAt, endAt, {
+            name: data.taskName,
+            priority: data.priority,
+            totalDuration: data.totalDuration,
+          });
+        }
+      } catch (err) {
+        console.error('Failed to drop task:', err);
+      }
+    },
+    [hour, getCellDate, scheduleTaskAsEvent, readOnly]
+  );
+
+  const handleCreateEvent = (midHour?: boolean) => {
+    if (readOnly) return;
+    // Always use timezone-aware date construction
+    const eventDate = getCellDate(hour, midHour ? 30 : 0);
+    // Clear drag state before opening modal
+    setIsDragging(false);
+    setDragPreview(null);
+    addEmptyEvent(eventDate);
+  };
+
+  // Improved rounding for Google Calendar parity
+  const roundToNearest15Minutes = useCallback((date: Date): Date => {
+    const minutes = date.getMinutes();
+    const remainder = minutes % 15;
+    const roundedMinutes =
+      remainder < 7.5 ? minutes - remainder : minutes + (15 - remainder);
+    const roundedDate = new Date(date);
+    roundedDate.setMinutes(roundedMinutes);
+    roundedDate.setSeconds(0);
+    roundedDate.setMilliseconds(0);
+    return roundedDate;
+  }, []);
+
+  // Convert Y coordinate to time (hour and minutes)
+  const yToTime = useCallback(
+    (y: number): [number, number] => {
+      if (!cellRef.current) return [hour, 0];
+      const cellRect = cellRef.current.getBoundingClientRect();
+      const relativeY = y - cellRect.top;
+      const hourFraction = relativeY / HOUR_HEIGHT;
+      const hours = Math.floor(hourFraction) + hour;
+      const minutes = Math.round(
+        (hourFraction - Math.floor(hourFraction)) * 60
+      );
+      return [hours, minutes];
+    },
+    [hour]
+  );
+
+  // Auto-scroll logic
+  const autoScroll = useCallback((clientY: number) => {
+    if (!scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const rect = container.getBoundingClientRect();
+    const edgeThreshold = 60; // px from edge to start scrolling
+    const scrollSpeed = 18; // px per frame
+    let scrollDelta = 0;
+    if (clientY < rect.top + edgeThreshold) {
+      scrollDelta = -scrollSpeed;
+    } else if (clientY > rect.bottom - edgeThreshold) {
+      scrollDelta = scrollSpeed;
+    }
+    if (scrollDelta !== 0) {
+      container.scrollTop += scrollDelta;
+      autoScrollRef.current = requestAnimationFrame(() => autoScroll(clientY));
+    } else {
+      if (autoScrollRef.current) {
+        cancelAnimationFrame(autoScrollRef.current);
+        autoScrollRef.current = null;
+      }
+    }
+  }, []);
+
+  // Update drag start to use container-relative coordinates
+  const handleMouseDown = useCallback(
+    (e: MouseEvent) => {
+      if (readOnly || e.button !== 0) return;
+      e.preventDefault();
+      // Clear any existing previews when starting a new drag
+      setDragPreview(null);
+      const [hours, minutes] = yToTime(e.clientY);
+      const newDate = getCellDate(hours, minutes);
+      const roundedDate = roundToNearest15Minutes(newDate);
+      dragStartRef.current = {
+        date: roundedDate,
+        y: e.clientY,
+      };
+      if (!scrollContainerRef.current && cellRef.current) {
+        scrollContainerRef.current = findScrollContainer(cellRef.current);
+      }
+      const container = scrollContainerRef.current;
+      if (container && cellRef.current) {
+        const containerRect = container.getBoundingClientRect();
+        const cellRect = cellRef.current.getBoundingClientRect();
+        dragStartYInContainer.current =
+          e.clientY + container.scrollTop - containerRect.top;
+        cellTopInContainer.current =
+          cellRect.top + container.scrollTop - containerRect.top;
+      }
+      // Set dragging state immediately
+      setIsDragging(true);
+      document.body.style.cursor = 'ns-resize';
+      document.body.classList.add('select-none');
+    },
+    [yToTime, getCellDate, setIsDragging, readOnly, roundToNearest15Minutes]
+  );
+
+  // Enhanced mouse move for Google Calendar-like drag
+  const enhancedHandleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!dragStartRef.current || !cellRef.current) return;
+      e.preventDefault();
+      // Always call autoScroll on every mousemove during drag
+      if (isDragging) {
+        autoScroll(e.clientY);
+      }
+      const container = scrollContainerRef.current;
+      if (!container) return;
+      const containerRect = container.getBoundingClientRect();
+      // Calculate current Y in container
+      const currentYInContainer =
+        e.clientY + container.scrollTop - containerRect.top;
+      const startYInContainer = dragStartYInContainer.current;
+      const cellTop = cellTopInContainer.current;
+      // Snap both start and current Y to the 15-minute grid
+      const snapToGrid = (value: number) =>
+        Math.round(value / GRID_SNAP) * GRID_SNAP;
+      const snappedStartY = snapToGrid(startYInContainer - cellTop);
+      const snappedCurrentY = snapToGrid(currentYInContainer - cellTop);
+      const top = Math.min(snappedStartY, snappedCurrentY);
+      const height = Math.abs(snappedCurrentY - snappedStartY);
+      // Calculate the corresponding time for the snapped Y
+      const getTimeFromY = (y: number) => {
+        const hourFloat = y / HOUR_HEIGHT;
+        const hours = Math.floor(hourFloat) + hour;
+        const minutes = Math.round((hourFloat - Math.floor(hourFloat)) * 60);
+        return getCellDate(hours, minutes);
+      };
+      const startDate = getTimeFromY(snappedStartY);
+      const endDate = getTimeFromY(snappedCurrentY);
+      const roundedStartDate = roundToNearest15Minutes(startDate);
+      const roundedEndDate = roundToNearest15Minutes(endDate);
+
+      if (!isDragging) return;
+      const isReversed = roundedEndDate.getTime() < roundedStartDate.getTime();
+      const actualStartDate = isReversed ? roundedEndDate : roundedStartDate;
+      const actualEndDate = isReversed ? roundedStartDate : roundedEndDate;
+      setDragPreview({
+        startDate: actualStartDate,
+        endDate: actualEndDate,
+        top,
+        height,
+        isReversed,
+      });
+    },
+    [isDragging, getCellDate, autoScroll, hour, roundToNearest15Minutes]
+  );
+
+  // Setup scroll container ref on mount
+  useEffect(() => {
+    if (!scrollContainerRef.current && cellRef.current) {
+      scrollContainerRef.current = findScrollContainer(cellRef.current);
+    }
+  }, []);
+
+  // Listen for scroll events during drag to update preview
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    if (!isDragging) return;
+    const onScroll = () => {
+      // Simulate a mousemove event to update preview
+      const fakeEvent = {
+        ...window.event,
+        pageY: window.event ? (window.event as MouseEvent).pageY : 0,
+        clientY: window.event ? (window.event as MouseEvent).clientY : 0,
+      } as MouseEvent;
+      enhancedHandleMouseMove(fakeEvent);
+    };
+    container.addEventListener('scroll', onScroll);
+    return () => container.removeEventListener('scroll', onScroll);
+  }, [isDragging, enhancedHandleMouseMove]);
+
+  // Replace mousemove event listener with enhanced version
+  useEffect(() => {
+    document.addEventListener('mousemove', enhancedHandleMouseMove);
+    return () => {
+      document.removeEventListener('mousemove', enhancedHandleMouseMove);
+      if (autoScrollRef.current) cancelAnimationFrame(autoScrollRef.current);
+    };
+  }, [enhancedHandleMouseMove]);
+
+  // Stop auto-scroll on drag end
+  useEffect(() => {
+    if (!isDragging && autoScrollRef.current) {
+      cancelAnimationFrame(autoScrollRef.current);
+      autoScrollRef.current = null;
+    }
+  }, [isDragging]);
+
+  // Handle mouse up event - create event
+  const handleMouseUp = useCallback(
+    (e: MouseEvent) => {
+      if (readOnly || !dragStartRef.current) return;
+      e.preventDefault();
+      document.body.style.cursor = '';
+      document.body.classList.remove('select-none');
+      // If we weren't dragging, treat as a click
+      if (!isDragging) {
+        const [hours, minutes] = yToTime(e.clientY);
+        const eventDate = getCellDate(hours, minutes);
+        const roundedDate = roundToNearest15Minutes(eventDate);
+        setDragPreview(null);
+        setIsDragging(false);
+        addEmptyEvent(roundedDate);
+        dragStartRef.current = null;
+        return;
+      }
+      setIsDragging(false);
+      // Calculate event duration
+      const container = scrollContainerRef.current;
+      if (!container || !cellRef.current) return;
+      const containerRect = container.getBoundingClientRect();
+      const currentYInContainer =
+        e.clientY + container.scrollTop - containerRect.top;
+      const startYInContainer = dragStartYInContainer.current;
+      const cellTop = cellTopInContainer.current;
+      const snapToGrid = (value: number) =>
+        Math.round(value / GRID_SNAP) * GRID_SNAP;
+      const snappedStartY = snapToGrid(startYInContainer - cellTop);
+      const snappedCurrentY = snapToGrid(currentYInContainer - cellTop);
+      const getTimeFromY = (y: number) => {
+        const hourFloat = y / HOUR_HEIGHT;
+        const hours = Math.floor(hourFloat) + hour;
+        const minutes = Math.round((hourFloat - Math.floor(hourFloat)) * 60);
+        return getCellDate(hours, minutes);
+      };
+      let eventStart = roundToNearest15Minutes(getTimeFromY(snappedStartY));
+      let eventEnd = roundToNearest15Minutes(getTimeFromY(snappedCurrentY));
+      // Always order start and end
+      if (eventEnd.getTime() < eventStart.getTime()) {
+        [eventStart, eventEnd] = [eventEnd, eventStart];
+      }
+      let duration = Math.abs(eventEnd.getTime() - eventStart.getTime());
+      // If duration is 0, set to 15 minutes
+      if (duration === 0) {
+        eventEnd = new Date(eventStart.getTime() + 15 * 60 * 1000);
+        duration = 15 * 60 * 1000;
+      }
+      // --- Event time range validation ---
+      // Cap event duration to 24 hours
+      const MAX_EVENT_DURATION = 24 * 60 * 60 * 1000;
+      if (duration > MAX_EVENT_DURATION) {
+        eventEnd = new Date(eventStart.getTime() + MAX_EVENT_DURATION);
+        duration = MAX_EVENT_DURATION;
+      }
+      // If event spans midnight but is less than 12 hours, cap at midnight
+      const startDay = eventStart.getDate();
+      const endDay = eventEnd.getDate();
+      if (startDay !== endDay && duration < 12 * 60 * 60 * 1000) {
+        const midnight = new Date(eventStart);
+        midnight.setHours(23, 59, 59, 999);
+        eventEnd = midnight;
+        duration = eventEnd.getTime() - eventStart.getTime();
+      }
+      // Only create if duration >= 15 minutes
+      if (duration >= 15 * 60 * 1000) {
+        setDragPreview(null);
+        addEmptyEventWithDuration(eventStart, eventEnd);
+      } else {
+        setDragPreview(null);
+      }
+      dragStartRef.current = null;
+    },
+    [
+      isDragging,
+      yToTime,
+      getCellDate,
+      addEmptyEvent,
+      addEmptyEventWithDuration,
+      setIsDragging,
+      hour,
+      readOnly,
+      roundToNearest15Minutes,
+    ]
+  );
+
+  // Helper to handle mouse enter for each slot
+  const handleSlotMouseEnter = (slot: 'hour' | 'half-hour' | number) => {
+    setHoveredSlot(slot);
+    if (!tooltipLocked) {
+      setShowBothLabels(false);
+      setShowTooltip(false);
+      if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
+      hoverTimeout.current = setTimeout(() => {
+        setShowBothLabels(true);
+        setShowTooltip(true);
+        setTooltipLocked(true);
+      }, 1000);
+    } else {
+      setShowTooltip(true);
+    }
+  };
+
+  // Helper to handle mouse leave for each slot
+  const handleSlotMouseLeave = () => {
+    setHoveredSlot(null);
+    // Do not reset tooltip/labels here; only reset on cell leave
+    if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
+  };
+
+  // Throttled tooltip position update
+
+  // Helper to determine if a given minute is a 15-minute interval
+  const isQuarterHour = (minute: number) => minute % 15 === 0;
+
+  // Update mouse move/hover logic to show tooltip for every 15-minute cell
+  const handleSlotMouseMove = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    slot: 'hour' | 'half-hour' | number
+  ) => {
+    if (isDragging) return;
+    setIsHovering(true);
+    // If slot is a number, it's a 15-minute cell
+    if (typeof slot === 'number' && isQuarterHour(slot)) {
+      setHoveredSlot(slot);
+    } else {
+      setHoveredSlot(slot);
+    }
+    const offset = 8;
+    const tooltipWidth = 200;
+    const tooltipHeight = 40;
+    const padding = 8;
+    let x = e.clientX + offset;
+    let y = e.clientY + offset;
+    let arrowDirection: 'right' | 'left' | 'down' | 'up' = 'right';
+
+    // Flip horizontally if overflowing right
+    if (x + tooltipWidth > window.innerWidth - padding) {
+      x = e.clientX - tooltipWidth - offset + 30;
+      arrowDirection = 'left';
+      if (x < padding) x = window.innerWidth - tooltipWidth - padding;
+    }
+    // Flip vertically if overflowing bottom
+    if (y + tooltipHeight > window.innerHeight - padding) {
+      y = e.clientY - tooltipHeight - offset + 30;
+      arrowDirection = 'up';
+      if (y < padding) y = window.innerHeight - tooltipHeight - padding;
+    }
+    // Clamp to viewport just in case
+    x = Math.max(
+      padding,
+      Math.min(x, window.innerWidth - tooltipWidth - padding)
+    );
+    y = Math.max(
+      padding,
+      Math.min(y, window.innerHeight - tooltipHeight - padding)
+    );
+
+    tooltipPosRef.current = { x, y, arrowDirection };
+    if (!rafId.current) {
+      rafId.current = requestAnimationFrame(() => {
+        // Only update if position has changed significantly
+        const { x: prevX, y: prevY, arrowDirection: prevArrow } = tooltipPos;
+        const { x: newX, y: newY, arrowDirection } = tooltipPosRef.current;
+        const hasSignificantChange =
+          Math.abs(prevX - newX) > 5 || Math.abs(prevY - newY) > 5;
+        if (hasSignificantChange || prevArrow !== arrowDirection) {
+          setTooltipPos(tooltipPosRef.current);
+        }
+        rafId.current = null;
+      });
+    }
+    if (tooltipLocked) setShowTooltip(true);
+  };
+
+  // Handle leaving the cell: reset everything
+  const handleCellMouseLeave = () => {
+    setIsHovering(false);
+    setHoveredSlot(null);
+    setShowBothLabels(false);
+    setShowTooltip(false);
+    setTooltipLocked(false);
+    if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
+  };
+
+  const handleSlotFocus = (slot: 'hour' | 'half-hour') => {
+    setHoveredSlot(slot);
+    if (!tooltipLocked) {
+      setShowBothLabels(false);
+      setShowTooltip(false);
+      if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
+      hoverTimeout.current = setTimeout(() => {
+        setShowBothLabels(true);
+        setShowTooltip(true);
+        setTooltipLocked(true);
+      }, 1000);
+    } else {
+      setShowTooltip(true);
+    }
+  };
+
+  const handleSlotBlur = () => {
+    setHoveredSlot(null);
+    setShowTooltip(false);
+  };
+
+  // Set up event listeners
+  useEffect(() => {
+    const cell = cellRef.current;
+    if (!cell) return;
+
+    cell.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', enhancedHandleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      cell.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', enhancedHandleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      if (autoScrollRef.current) {
+        cancelAnimationFrame(autoScrollRef.current);
+        autoScrollRef.current = null;
+      }
+    };
+  }, [handleMouseDown, enhancedHandleMouseMove, handleMouseUp]);
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (autoScrollRef.current) {
+        cancelAnimationFrame(autoScrollRef.current);
+        autoScrollRef.current = null;
+      }
+    };
+  }, []);
+
+  // --- Tooltip rendering guard ---
+  // Helper to check if tooltip position is valid (not at 0,0 unless intentionally)
+  const isTooltipPosValid = (pos: TooltipPos) => {
+    // Consider (0,0) as invalid unless showTooltip is true and mouse is inside cell
+    // You can adjust this logic if you want to allow (0,0) in some cases
+    return pos.x !== 0 || pos.y !== 0;
+  };
+
+  // Prepare tooltip node to avoid rendering at (0,0)
+  let tooltipNode: React.ReactNode = null;
+  if (
+    !readOnly &&
+    showTooltip &&
+    hoveredSlot !== null &&
+    isTooltipPosValid(tooltipPos)
+  ) {
+    tooltipNode = (
+      <div
+        ref={tooltipRef}
+        id={tooltipId}
+        role="tooltip"
+        aria-live="polite"
+        className="pointer-events-none animate-fade-in rounded-md bg-neutral-900 px-3 py-1.5 font-medium text-white text-xs opacity-100 shadow-lg transition-opacity duration-150"
+        style={{
+          position: 'fixed',
+          left: tooltipPos.x,
+          top: tooltipPos.y,
+          minWidth: 120,
+          maxWidth: 200,
+          zIndex: 10000,
+          whiteSpace: 'nowrap',
+          opacity: showTooltip ? 1 : 0,
+          transition: 'opacity 0.15s',
+        }}
+      >
+        {`Create an event at ${
+          typeof hoveredSlot === 'number'
+            ? formatTime(hour, hoveredSlot)
+            : hoveredSlot === 'hour'
+              ? formatTime(hour)
+              : formatTime(hour, 30)
+        }`}
+      </div>
+    );
+  }
+
+  // Hide tooltip on scroll or mouse leave
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowTooltip(false);
+      setTooltipPos({ x: -9999, y: -9999, arrowDirection: 'right' }); // Move off-screen
+    };
+    const cell = cellRef.current;
+    const handleMouseLeave = () => {
+      setShowTooltip(false);
+      setTooltipPos({ x: -9999, y: -9999, arrowDirection: 'right' }); // Move off-screen
+    };
+    if (cell) {
+      cell.addEventListener('mouseleave', handleMouseLeave);
+    }
+    window.addEventListener('scroll', handleScroll, true);
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true);
+      if (cell) {
+        cell.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+    };
+  }, []);
+
+  // Cancel drag on window blur or visibility change
+  useEffect(() => {
+    const cancelDrag = () => {
+      setIsDragging(false);
+      setDragPreview(null);
+      dragStartRef.current = null;
+      document.body.style.cursor = '';
+      document.body.classList.remove('select-none');
+    };
+    const handleVisibilityChange = () => {
+      if (document.hidden) cancelDrag();
+    };
+    window.addEventListener('blur', cancelDrag);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      window.removeEventListener('blur', cancelDrag);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [setIsDragging]);
+
+  return (
+    <div
+      id={id}
+      ref={cellRef}
+      className={cn(
+        'calendar-cell relative transition-colors',
+        hour !== 0 && 'border-border/30 border-t',
+        isHovering ? 'bg-muted/20' : 'hover:bg-muted/10',
+        // Only show cell highlight if no task preview (preview has its own visual)
+        isDropTarget &&
+          !taskDropPreview &&
+          'bg-primary/10 ring-2 ring-primary ring-inset'
+      )}
+      style={{
+        height: `${HOUR_HEIGHT}px`,
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={handleCellMouseLeave}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleTaskDrop}
+      data-hour={hour}
+      data-date={date}
+    >
+      {/* Show only the hovered label before 1s, both after 1s */}
+      {!isDragging &&
+        (showBothLabels ? (
+          <>
+            <span className="absolute top-2 left-2 font-medium text-muted-foreground/70 text-xs">
+              {formatTime(hour)}
+            </span>
+            <span className="absolute bottom-2 left-2 font-medium text-muted-foreground/70 text-xs">
+              {formatTime(hour, 30)}
+            </span>
+          </>
+        ) : hoveredSlot === 'hour' ? (
+          <span className="absolute top-2 left-2 font-medium text-muted-foreground/70 text-xs">
+            {formatTime(hour)}
+          </span>
+        ) : hoveredSlot === 'half-hour' ? (
+          <span className="absolute bottom-2 left-2 font-medium text-muted-foreground/70 text-xs">
+            {formatTime(hour, 30)}
+          </span>
+        ) : null)}
+
+      {/* Drag preview overlay */}
+      {dragPreview && (
+        <DragPreview
+          startDate={dragPreview.startDate}
+          endDate={dragPreview.endDate}
+          top={dragPreview.top}
+          height={dragPreview.height}
+          isReversed={dragPreview.isReversed}
+          color={settings?.categoryColors?.categories?.[0]?.color || 'BLUE'}
+          timeFormat={settings?.appearance?.timeFormat}
+        />
+      )}
+
+      {/* Task drop preview - shows exactly where the task will land */}
+      {taskDropPreview && (
+        <div
+          className="pointer-events-none absolute right-1 left-1 z-50 overflow-hidden rounded-md border-2 border-primary border-dashed bg-primary/20 px-2 py-1"
+          style={{
+            top: taskDropPreview.top,
+            height: Math.max(taskDropPreview.height, 20),
+          }}
+        >
+          <span className="line-clamp-1 font-medium text-primary text-xs">
+            {taskDropPreview.taskName}
+          </span>
+        </div>
+      )}
+
+      {/* Full cell clickable area (hour) */}
+      <button
+        type="button"
+        className={cn(
+          'absolute inset-0 h-1/2 w-full focus:outline-none',
+          readOnly ? 'cursor-default' : 'cursor-pointer'
+        )}
+        onClick={() => handleCreateEvent()}
+        onMouseEnter={() => handleSlotMouseEnter('hour')}
+        onMouseLeave={handleSlotMouseLeave}
+        onMouseMove={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+          handleSlotMouseMove(e as any, 'hour')
+        }
+        onFocus={() => handleSlotFocus('hour')}
+        onBlur={handleSlotBlur}
+        aria-describedby={tooltipId}
+        disabled={readOnly}
+      />
+      {/* 15-minute marker */}
+      <button
+        type="button"
+        className={cn(
+          'absolute top-1/4 right-0 left-0 h-1/4 w-full focus:outline-none',
+          readOnly ? 'cursor-default' : 'cursor-pointer'
+        )}
+        style={{ background: 'transparent' }}
+        onMouseEnter={() => handleSlotMouseEnter(15)}
+        onMouseLeave={handleSlotMouseLeave}
+        onMouseMove={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+          handleSlotMouseMove(e as any, 15)
+        }
+        aria-describedby={tooltipId}
+        tabIndex={-1}
+        disabled={readOnly}
+      />
+      {/* Half-hour marker */}
+      <div className="absolute top-1/2 right-0 left-0 border-border/30 border-t border-dashed" />
+      <button
+        type="button"
+        className={cn(
+          'absolute inset-x-0 top-1/2 h-1/2 focus:outline-none',
+          readOnly ? 'cursor-default' : 'cursor-pointer'
+        )}
+        onClick={() => handleCreateEvent(true)}
+        onMouseEnter={() => handleSlotMouseEnter('half-hour')}
+        onMouseLeave={handleSlotMouseLeave}
+        onMouseMove={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+          handleSlotMouseMove(e as any, 'half-hour')
+        }
+        onFocus={() => handleSlotFocus('half-hour')}
+        onBlur={handleSlotBlur}
+        aria-describedby={tooltipId}
+        disabled={readOnly}
+      />
+      {/* 45-minute marker */}
+      <button
+        type="button"
+        className={cn(
+          'absolute top-3/4 right-0 left-0 h-1/4 w-full focus:outline-none',
+          readOnly ? 'cursor-default' : 'cursor-pointer'
+        )}
+        style={{ background: 'transparent' }}
+        onMouseEnter={() => handleSlotMouseEnter(45)}
+        onMouseLeave={handleSlotMouseLeave}
+        onMouseMove={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+          handleSlotMouseMove(e as any, 45)
+        }
+        aria-describedby={tooltipId}
+        tabIndex={-1}
+        disabled={readOnly}
+      />
+      {/* Show tooltip for hovered slot (hour, half-hour, or 15-min) */}
+      {tooltipNode}
+    </div>
+  );
+};