dragging/inserting between rows

Author: chriscollins3456

datahub-web-react/src/app/homeV3/context/hooks/useDragAndDrop.ts

@@ -14,6 +14,7 @@ interface DraggedModuleData {
 export interface DroppableData {
     rowIndex: number;
     moduleIndex?: number; // If undefined, drop at the end of the row
+    insertNewRow?: boolean; // If true, create a new row at this position
 }
 
 export function useDragAndDrop() {
@@ -51,6 +52,7 @@ export function useDragAndDrop() {
                 module: draggedData.module,
                 fromPosition: draggedData.position,
                 toPosition,
+                insertNewRow: droppableData.insertNewRow,
             });
         },
         [moveModule],

datahub-web-react/src/app/homeV3/context/hooks/useModuleOperations.ts

@@ -29,6 +29,7 @@ export interface MoveModuleInput {
     module: PageModuleFragment;
     fromPosition: ModulePositionInput;
     toPosition: ModulePositionInput;
+    insertNewRow?: boolean;
 }
 
 // Helper types for shared operations
@@ -200,6 +201,7 @@ export function useModuleOperations(
             module: PageModuleFragment,
             fromPosition: ModulePositionInput,
             toPosition: ModulePositionInput,
+            insertNewRow?: boolean,
         ): PageTemplateFragment | null => {
             if (!template) return null;
 
@@ -241,8 +243,14 @@ export function useModuleOperations(
                                       ? toRowIndex - 1 
                                       : toRowIndex;
 
-            if (adjustedToRowIndex >= newRows.length) {
-                // Create new row
+            if (insertNewRow) {
+                // Insert a new row at the specified position
+                const newRow = {
+                    modules: [module],
+                };
+                newRows.splice(adjustedToRowIndex, 0, newRow);
+            } else if (adjustedToRowIndex >= newRows.length) {
+                // Create new row at the end
                 newRows.push({
                     modules: [module],
                 });
@@ -404,7 +412,7 @@ export function useModuleOperations(
                 return;
             }
 
-            const { module, fromPosition, toPosition } = input;
+            const { module, fromPosition, toPosition, insertNewRow } = input;
             const { template: templateToUpdate, isPersonal } = getTemplateToUpdate(context);
 
             if (!templateToUpdate) {
@@ -430,7 +438,7 @@ export function useModuleOperations(
             }
 
             // Update template state
-            const updatedTemplate = moveModuleInTemplate(templateToUpdate, module, fromPosition, toPosition);
+            const updatedTemplate = moveModuleInTemplate(templateToUpdate, module, fromPosition, toPosition, insertNewRow);
 
             if (!updatedTemplate) {
                 console.error('Failed to update template during move operation');

datahub-web-react/src/app/homeV3/context/types.ts

@@ -26,6 +26,7 @@ export interface MoveModuleInput {
     module: PageModuleFragment;
     fromPosition: ModulePositionInput;
     toPosition: ModulePositionInput;
+    insertNewRow?: boolean;
 }
 
 // Context state shape

datahub-web-react/src/app/homeV3/template/Template.tsx

@@ -18,7 +18,7 @@ import Module from '@app/homeV3/module/Module';
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
-    gap: ${spacing.md};
+    gap: ${spacing.xsm};
 `;
 
 // Additional margin to have width of content excluding side buttons
@@ -27,37 +27,15 @@ const StyledAddModulesButton = styled(AddModuleButton)<{ $hasRows?: boolean }>`
 `;
 
 const NewRowDropZone = styled.div<{ $isOver?: boolean }>`
-    min-height: 60px;
-    border-radius: 8px;
-    margin: 0 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     transition: all 0.2s ease;
-    border: 2px dashed transparent;
     
     ${({ $isOver }) =>
         $isOver &&
         `
-        background-color: rgba(59, 130, 246, 0.1);
-        border-color: #3b82f6;
-        min-height: 80px;
+        border: 2px solid #CAC3F1;
     `}
 `;
 
-const NewRowDropText = styled.div<{ $isOver?: boolean }>`
-    color: #6b7280;
-    font-size: 14px;
-    text-align: center;
-    transition: all 0.2s ease;
-    
-    ${({ $isOver }) =>
-        $isOver &&
-        `
-        color: #3b82f6;
-        font-weight: 500;
-    `}
-`;
 
 // Styled wrapper for drag overlay to make it look like it's floating
 const DragOverlayWrapper = styled.div`
@@ -75,24 +53,27 @@ interface Props {
 }
 
 // Memoized new row drop zone component
-const NewRowDropZoneComponent = memo(function NewRowDropZoneComponent({ rowIndex }: { rowIndex: number }) {
+const NewRowDropZoneComponent = memo(function NewRowDropZoneComponent({ 
+    rowIndex, 
+    insertNewRow = false 
+}: { 
+    rowIndex: number;
+    insertNewRow?: boolean;
+}) {
     const {
         isOver,
         setNodeRef,
     } = useDroppable({
-        id: `new-row-drop-zone-${rowIndex}`,
+        id: `new-row-drop-zone-${rowIndex}${insertNewRow ? '-insert' : ''}`,
         data: {
             rowIndex,
             moduleIndex: 0, // First position in new row
+            insertNewRow, // Flag to indicate this should create a new row at this position
         },
     });
 
     return (
-        <NewRowDropZone ref={setNodeRef} $isOver={isOver}>
-            <NewRowDropText $isOver={isOver}>
-                {isOver ? 'Drop here to create a new row' : 'Drop a module here to create a new row'}
-            </NewRowDropText>
-        </NewRowDropZone>
+        <NewRowDropZone ref={setNodeRef} $isOver={isOver} />
     );
 });
 
@@ -130,18 +111,44 @@ function Template({ className }: Props) {
         handleDragEnd(event);
     }, [handleDragEnd]);
 
-    // Memoize the template rows to prevent unnecessary re-renders
-    const templateRows = useMemo(() => 
-        wrappedRows.map((row, i) => (
-            <TemplateRow 
-                key={`templateRow-${i}`}
-                row={row} 
-                rowIndex={i} 
-                modulesAvailableToAdd={modulesAvailableToAdd} 
-            />
-        )),
-        [wrappedRows, modulesAvailableToAdd]
-    );
+    // Memoize the template rows with drop zones between them
+    const templateRowsWithDropZones = useMemo(() => {
+        const result: React.ReactElement[] = [];
+        
+        wrappedRows.forEach((row, i) => {
+            // Add drop zone before the first row (for inserting at beginning)
+            if (i === 0) {
+                result.push(
+                    <NewRowDropZoneComponent 
+                        key={`drop-zone-before-${i}`}
+                        rowIndex={i}
+                        insertNewRow={true}
+                    />
+                );
+            }
+            
+            // Add the actual row
+            result.push(
+                <TemplateRow 
+                    key={`templateRow-${i}`}
+                    row={row} 
+                    rowIndex={i} 
+                    modulesAvailableToAdd={modulesAvailableToAdd} 
+                />
+            );
+            
+            // Add drop zone after each row (for inserting between/after rows)
+            result.push(
+                <NewRowDropZoneComponent 
+                    key={`drop-zone-after-${i}`}
+                    rowIndex={i + 1}
+                    insertNewRow={true}
+                />
+            );
+        });
+        
+        return result;
+    }, [wrappedRows, modulesAvailableToAdd]);
 
     return (
         <Wrapper className={className}>
@@ -150,10 +157,7 @@ function Template({ className }: Props) {
                 onDragStart={handleDragStart}
                 onDragEnd={handleDragEndWithCleanup}
             >
-                {templateRows}
-                
-                {/* Drop zone for creating new rows */}
-                <NewRowDropZoneComponent rowIndex={wrappedRows.length} />
+                {templateRowsWithDropZones}
 
                 <DragOverlay>
                     {activeModule && (