From 47e8d55954608fd18e543da25ea86732f52feb6a Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 11 Apr 2025 13:03:48 -0600
Subject: [PATCH] over target in header

---
 .../TanStackDataGrid/DataGridHeader.tsx           | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
index 8d5a4d336..549b03cf7 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
@@ -43,7 +43,7 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = ({
     position: 'relative',
     whiteSpace: 'nowrap',
     width: header.column.getSize(),
-    opacity: isDragging ? 0.65 : 1,
+    opacity: isDragging ? 0.95 : 1,
     transition: 'none', // Prevent any transitions for snappy changes
     height: `${HEADER_HEIGHT}px` // Set fixed header height
   };
@@ -116,6 +116,8 @@ interface DataGridHeaderProps {
   rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
+const HEADER_DROP_TARGET_ID = 'buster-base-header-container';
+
 export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
   rowVirtualizer,
   table,
@@ -127,13 +129,20 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
 
   const showScrollShadow = (rowVirtualizer?.scrollOffset || 0) > 10;
 
+  const { setNodeRef: setDropNodeRef } = useDroppable({
+    id: HEADER_DROP_TARGET_ID
+  });
+  const isOverHeaderDropTarget = overTargetId === HEADER_DROP_TARGET_ID;
+
   return (
     <>
       <thead className="bg-background sticky top-0 z-10 w-full" suppressHydrationWarning>
         <tr
+          ref={setDropNodeRef}
           className={cn(
-            'flex border-b transition-all duration-200',
-            showScrollShadow && 'shadow-sm'
+            'data-grid-header flex border-b transition-all duration-200',
+            showScrollShadow && 'shadow-sm',
+            isOverHeaderDropTarget && 'bg-primary/10'
           )}>
           {table
             .getHeaderGroups()[0]