Function handleSessionDrop

frontend/src/components/DraggableProjectTreeView.tsx:1474–1661

(e: React.DragEvent, targetSession: Session, projectId: number)

  };

  const handleSessionDrop = async (e: React.DragEvent, targetSession: Session, projectId: number) => {
    e.preventDefault();
    e.stopPropagation();

    const project = projectsWithSessions.find(p => p.id === projectId);
    if (!project) return;

    // Handle both session-to-session and folder-to-session reordering
    if (dragState.type === 'session' &&
        dragState.sessionId &&
        dragState.projectId === projectId &&
        dragState.sessionId !== targetSession.id &&
        !targetSession.folderId && // Only reorder at root level
        !dragState.folderId) { // Only if dragged session is also at root level

      // Get root-level items only (sessions and folders without parents)
      const rootSessions = project.sessions.filter(s => !s.folderId);
      const rootFolders = project.folders ? buildFolderTree(project.folders) : [];

      // Find indices in the root-level combined list
      const sourceSessionIndex = rootSessions.findIndex(s => s.id === dragState.sessionId);
      const targetSessionIndex = rootSessions.findIndex(s => s.id === targetSession.id);

      if (sourceSessionIndex !== -1 && targetSessionIndex !== -1) {
        // Update display orders for root sessions and folders together
        // Build a combined list with CURRENT displayOrder values, sorted by displayOrder
        type RootItem = { type: 'session' | 'folder'; id: string; displayOrder: number; createdAt: string; originalIndex: number };
        const rootItems: RootItem[] = [
          ...rootFolders.map((f, idx) => ({ type: 'folder' as const, id: f.id, displayOrder: f.displayOrder ?? 0, createdAt: f.createdAt, originalIndex: idx })),
          ...rootSessions.map((s, idx) => ({ type: 'session' as const, id: s.id, displayOrder: s.displayOrder ?? 0, createdAt: s.createdAt, originalIndex: idx }))
        ];

        // Sort by current displayOrder to get the current visual order
        // Use createdAt as a tiebreaker to ensure stable sorting when displayOrder values are duplicated
        rootItems.sort((a, b) => {
          const orderDiff = a.displayOrder - b.displayOrder;
          if (orderDiff !== 0) return orderDiff;
          // If displayOrder is equal, sort by createdAt (older items first)
          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
        });

        // Find positions of source and target in the current order
        const sourceItemIndex = rootItems.findIndex(item => item.type === 'session' && item.id === dragState.sessionId);
        const targetItemIndex = rootItems.findIndex(item => item.type === 'session' && item.id === targetSession.id);

        if (sourceItemIndex !== -1 && targetItemIndex !== -1) {
          // Remove the source item and insert it at the target position
          const [removedItem] = rootItems.splice(sourceItemIndex, 1);
          rootItems.splice(targetItemIndex, 0, removedItem);

          // Reassign displayOrder values sequentially to reflect the new order
          rootItems.forEach((item, index) => {
            item.displayOrder = index;
          });
        }

        // Prepare updates for API
        const sessionOrders = rootItems