jettypod 4.4.82 → 4.4.84

package/apps/dashboard/components/DragContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState, useCallback, useRef, ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import type { WorkItem } from '@/lib/db';
 
@@ -22,14 +22,26 @@ interface EpicDropZoneInfo {
   onReorder?: ReorderHandler;
 }
 
+interface CardPosition {
+  id: number;
+  rect: DOMRect;
+}
+
+interface InsertionPreview {
+  afterCardId: number | null; // null means insert at beginning
+  zoneId: string; // epic zone or drop zone id
+}
+
 interface DragContextType {
   isDragging: boolean;
   draggedItem: WorkItem | null;
   activeDropZone: string | null;
   activeEpicZone: string | null;
+  insertionPreview: InsertionPreview | null;
   dragPosition: { x: number; y: number };
   dragOffset: { x: number; y: number };
   draggedCardWidth: number;
+  draggedCardHeight: number;
   setDraggedItem: (item: WorkItem | null) => void;
   registerDropZone: (id: string, info: DropZoneInfo) => void;
   unregisterDropZone: (id: string) => void;
@@ -38,6 +50,9 @@ interface DragContextType {
   updatePointerPosition: (x: number, y: number) => void;
   startDrag: (item: WorkItem, cardRect: DOMRect, pointerX: number, pointerY: number) => void;
   handleDrop: () => Promise<void>;
+  registerCardPosition: (id: number, rect: DOMRect) => void;
+  unregisterCard: (id: number) => void;
+  getCardPositions: () => CardPosition[];
 }
 
 const DragContext = createContext<DragContextType>({
@@ -45,9 +60,11 @@ const DragContext = createContext<DragContextType>({
   draggedItem: null,
   activeDropZone: null,
   activeEpicZone: null,
+  insertionPreview: null,
   dragPosition: { x: 0, y: 0 },
   dragOffset: { x: 0, y: 0 },
   draggedCardWidth: 0,
+  draggedCardHeight: 0,
   setDraggedItem: () => {},
   registerDropZone: () => {},
   unregisterDropZone: () => {},
@@ -56,23 +73,31 @@ const DragContext = createContext<DragContextType>({
   updatePointerPosition: () => {},
   startDrag: () => {},
   handleDrop: async () => {},
+  registerCardPosition: () => {},
+  unregisterCard: () => {},
+  getCardPositions: () => [],
 });
 
 interface DragProviderProps {
   children: ReactNode;
   renderDragOverlay?: (item: WorkItem) => ReactNode;
+  onRemoveFromEpic?: EpicAssignHandler;
 }
 
-export function DragProvider({ children, renderDragOverlay }: DragProviderProps) {
+export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic }: DragProviderProps) {
   const [draggedItem, setDraggedItem] = useState<WorkItem | null>(null);
   const [activeDropZone, setActiveDropZone] = useState<string | null>(null);
   const [activeEpicZone, setActiveEpicZone] = useState<string | null>(null);
+  const [insertionPreview, setInsertionPreview] = useState<InsertionPreview | null>(null);
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [draggedCardWidth, setDraggedCardWidth] = useState(0);
+  const [draggedCardHeight, setDraggedCardHeight] = useState(0);
   const dropZonesRef = useRef<Map<string, DropZoneInfo>>(new Map());
   const epicDropZonesRef = useRef<Map<string, EpicDropZoneInfo>>(new Map());
+  const cardPositionsRef = useRef<Map<number, DOMRect>>(new Map());
   const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const draggedItemRef = useRef<WorkItem | null>(null);
 
   const registerDropZone = useCallback((id: string, info: DropZoneInfo) => {
     dropZonesRef.current.set(id, info);
@@ -90,6 +115,25 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
     epicDropZonesRef.current.delete(id);
   }, []);
 
+  const registerCardPosition = useCallback((id: number, rect: DOMRect) => {
+    console.log('[DragContext] registerCardPosition:', id, 'rect:', { top: rect.top, bottom: rect.bottom });
+    cardPositionsRef.current.set(id, rect);
+  }, []);
+
+  const unregisterCard = useCallback((id: number) => {
+    console.log('[DragContext] unregisterCard:', id);
+    cardPositionsRef.current.delete(id);
+  }, []);
+
+  const getCardPositions = useCallback((): CardPosition[] => {
+    const positions: CardPosition[] = [];
+    cardPositionsRef.current.forEach((rect, id) => {
+      positions.push({ id, rect });
+    });
+    console.log('[DragContext] getCardPositions:', positions.length, 'positions', positions.map(p => ({ id: p.id, midY: (p.rect.top + p.rect.bottom) / 2 })));
+    return positions;
+  }, []);
+
   const updatePointerPosition = useCallback((x: number, y: number) => {
     pointerPositionRef.current = { x, y };
     setDragPosition({ x, y });
@@ -114,6 +158,32 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
 
     setActiveDropZone(foundZone);
     setActiveEpicZone(foundEpicZone);
+
+    // Calculate insertion preview based on pointer position
+    const zoneId = foundEpicZone || foundZone;
+    if (zoneId && draggedItemRef.current) {
+      const allPositions = Array.from(cardPositionsRef.current.entries())
+        .filter(([id]) => id !== draggedItemRef.current?.id)
+        .map(([id, rect]) => ({
+          id,
+          midY: (rect.top + rect.bottom) / 2,
+        }))
+        .sort((a, b) => a.midY - b.midY);
+
+      // Find which card the pointer is after
+      let afterCardId: number | null = null;
+      for (const pos of allPositions) {
+        if (y > pos.midY) {
+          afterCardId = pos.id;
+        } else {
+          break;
+        }
+      }
+
+      setInsertionPreview({ afterCardId, zoneId });
+    } else {
+      setInsertionPreview(null);
+    }
   }, []);
 
   const startDrag = useCallback((item: WorkItem, cardRect: DOMRect, pointerX: number, pointerY: number) => {
@@ -123,52 +193,106 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
     setDragOffset({ x: offsetX, y: offsetY });
     setDragPosition({ x: pointerX, y: pointerY });
     setDraggedCardWidth(cardRect.width);
+    setDraggedCardHeight(cardRect.height);
     setDraggedItem(item);
+    draggedItemRef.current = item;
   }, []);
 
   const handleDrop = useCallback(async () => {
+    console.log('[DragContext] handleDrop called:', {
+      draggedItem: draggedItem ? { id: draggedItem.id, parent_id: draggedItem.parent_id, epic_id: draggedItem.epic_id } : null,
+      activeEpicZone,
+      activeDropZone
+    });
     if (!draggedItem) return;
 
     // Check for epic drop zone first (more specific drop target)
     if (activeEpicZone) {
       const epicZoneInfo = epicDropZonesRef.current.get(activeEpicZone);
+      console.log('[DragContext] epicZoneInfo:', epicZoneInfo ? { epicId: epicZoneInfo.epicId, hasOnReorder: !!epicZoneInfo.onReorder } : null);
       if (epicZoneInfo) {
         const currentEpicId = draggedItem.parent_id || draggedItem.epic_id;
+        console.log('[DragContext] currentEpicId:', currentEpicId, 'targetEpicId:', epicZoneInfo.epicId);
 
         // Same epic - reorder within epic
         if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
+          console.log('[DragContext] Same epic - calling onReorder');
           await epicZoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
           return;
         }
 
         // Different epic - assign to new epic
         if (currentEpicId !== epicZoneInfo.epicId) {
+          console.log('[DragContext] Different epic - calling onEpicAssign');
           await epicZoneInfo.onEpicAssign(draggedItem.id, epicZoneInfo.epicId);
           return;
         }
       }
     }
 
-    // Otherwise handle status drop zone
-    if (!activeDropZone) return;
+    // Check if card is being removed from an epic (dropped outside all epic zones)
+    const currentEpicId = draggedItem.parent_id || draggedItem.epic_id;
+    if (!activeEpicZone && currentEpicId && onRemoveFromEpic) {
+      console.log('[DragContext] Removing from epic - card has epic_id but dropped outside epic zones');
+      await onRemoveFromEpic(draggedItem.id, null);
+      // Continue to also handle status change if needed
+    }
+
+    // Handle status drop zone
+    if (!activeDropZone) {
+      console.log('[DragContext] No activeDropZone, returning');
+      return;
+    }
 
     const zoneInfo = dropZonesRef.current.get(activeDropZone);
-    if (!zoneInfo) return;
+    if (!zoneInfo) {
+      console.log('[DragContext] No zoneInfo for activeDropZone:', activeDropZone);
+      return;
+    }
+
+    console.log('[DragContext] Status drop zone:', { targetStatus: zoneInfo.targetStatus, itemStatus: draggedItem.status, hasOnReorder: !!zoneInfo.onReorder });
 
     // Check if this is a status change or a reorder
     if (draggedItem.status !== zoneInfo.targetStatus) {
       // Status change
+      console.log('[DragContext] Status change - calling onDrop');
       await zoneInfo.onDrop(draggedItem.id, zoneInfo.targetStatus);
     } else if (zoneInfo.onReorder) {
       // Reorder within same status
+      console.log('[DragContext] Same status - calling onReorder');
       await zoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
+    } else {
+      console.log('[DragContext] Same status but no onReorder handler');
     }
-  }, [activeDropZone, activeEpicZone, draggedItem]);
+  }, [activeDropZone, activeEpicZone, draggedItem, onRemoveFromEpic]);
 
   // Calculate overlay position (pointer position minus offset = card top-left)
   const overlayX = dragPosition.x - dragOffset.x;
   const overlayY = dragPosition.y - dragOffset.y;
 
+  // Wrap setDraggedItem to also clear ref and preview
+  const handleSetDraggedItem = useCallback((item: WorkItem | null) => {
+    setDraggedItem(item);
+    draggedItemRef.current = item;
+    if (!item) {
+      setInsertionPreview(null);
+    }
+  }, []);
+
+  // Cancel drag on Escape key
+  useEffect(() => {
+    if (!draggedItem) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleSetDraggedItem(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [draggedItem, handleSetDraggedItem]);
+
   return (
     <DragContext.Provider
       value={{
@@ -176,10 +300,12 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
         draggedItem,
         activeDropZone,
         activeEpicZone,
+        insertionPreview,
         dragPosition,
         dragOffset,
         draggedCardWidth,
-        setDraggedItem,
+        draggedCardHeight,
+        setDraggedItem: handleSetDraggedItem,
         registerDropZone,
         unregisterDropZone,
         registerEpicDropZone,
@@ -187,6 +313,9 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
         updatePointerPosition,
         startDrag,
         handleDrop,
+        registerCardPosition,
+        unregisterCard,
+        getCardPositions,
       }}
     >
       {children}

package/apps/dashboard/components/DraggableCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { motion, PanInfo } from 'framer-motion';
 import type { WorkItem } from '@/lib/db';
 import { useDragContext } from './DragContext';
@@ -12,10 +12,38 @@ interface DraggableCardProps {
 }
 
 export function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
-  const { startDrag, setDraggedItem, updatePointerPosition, handleDrop } = useDragContext();
+  const { startDrag, setDraggedItem, updatePointerPosition, handleDrop, registerCardPosition, unregisterCard } = useDragContext();
   const wasDraggingRef = useRef(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
+  // Register card position for optimized reorder calculations
+  useEffect(() => {
+    if (disabled || !cardRef.current) return;
+
+    const updatePosition = () => {
+      if (cardRef.current) {
+        registerCardPosition(item.id, cardRef.current.getBoundingClientRect());
+      }
+    };
+
+    // Initial registration
+    updatePosition();
+
+    // Update on resize/layout changes
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(cardRef.current);
+
+    // Update on scroll (positions are viewport-relative)
+    const scrollHandler = () => updatePosition();
+    window.addEventListener('scroll', scrollHandler, true);
+
+    return () => {
+      unregisterCard(item.id);
+      resizeObserver.disconnect();
+      window.removeEventListener('scroll', scrollHandler, true);
+    };
+  }, [item.id, disabled, registerCardPosition, unregisterCard]);
+
   if (disabled) {
     return <>{children}</>;
   }
@@ -55,6 +83,10 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
       whileDrag={{
         cursor: 'grabbing',
         opacity: 0,
+        height: 0,
+        marginBottom: 0,
+        padding: 0,
+        overflow: 'hidden',
       }}
       onDragStart={handleDragStart}
       onDrag={handleDrag}