workspace panel drag commented

src/workspaces/components/Workspace/PanelSlot.tsx

@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
+import { ArrowLeftRight } from 'lucide-react';
-import { ArrowLeftRight, GripVertical } from 'lucide-react';
 import type { LayoutPanel, AppRegistry, PanelComponents } from './types';
 import { useWorkspace } from './WorkspaceContext';
 import { Card } from '../Card';
@@ -98,34 +97,23 @@ const SwapSourceIndicator = ({ panelId }: { panelId: string }) => {
   );
 };
 
-const DragHandle = ({ panelId }: { panelId: string }) => {
+// TODO: drag-to-reposition needs work (visual feedback, edge cases)
-  const { setDragSourceId, dragSourceId } = useWorkspace();
+// const DragHandle = ({ panelId }: { panelId: string }) => {
-
+//   const { setDragSourceId, dragSourceId } = useWorkspace();
-  const onPointerDown = useCallback(
+//   const onPointerDown = useCallback((ev: React.PointerEvent) => { ev.preventDefault(); setDragSourceId(panelId); }, [panelId, setDragSourceId]);
-    (ev: React.PointerEvent) => {
+//   if (dragSourceId) return null;
-      ev.preventDefault();
+//   return (
-      setDragSourceId(panelId);
+//     <div className="absolute top-2 right-2 z-10 p-1.5 rounded-md bg-duck-dark/5 text-duck-dark/30 opacity-0 group-hover/panel:opacity-100 hover:!bg-duck-dark/10 hover:!text-duck-dark/60 transition-all cursor-grab" onPointerDown={onPointerDown}>
-    },
+//       <GripVertical className="h-5 w-5" />
-    [panelId, setDragSourceId],
+//     </div>
-  );
+//   );
-
+// };
-  if (dragSourceId) return null;
+//
-
+// const DragSourceDimmer = ({ panelId }: { panelId: string }) => {
-  return (
+//   const { dragSourceId } = useWorkspace();
-    <div
+//   if (dragSourceId !== panelId) return null;
-      className="absolute top-2 right-2 z-10 p-1.5 rounded-md bg-duck-dark/5 text-duck-dark/30 opacity-0 group-hover/panel:opacity-100 hover:!bg-duck-dark/10 hover:!text-duck-dark/60 transition-all cursor-grab"
+//   return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
-      onPointerDown={onPointerDown}
+// };
-    >
-      <GripVertical className="h-5 w-5" />
-    </div>
-  );
-};
-
-const DragSourceDimmer = ({ panelId }: { panelId: string }) => {
-  const { dragSourceId } = useWorkspace();
-  if (dragSourceId !== panelId) return null;
-  return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
-};
 
 export const PanelSlot = ({ panel, registry, components, interactive, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
   const PanelComponent = components?.[panel.id];
@@ -144,8 +132,9 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
     <>
       <SwapOverlay panelId={panel.id} />
       <SwapSourceIndicator panelId={panel.id} />
-      <DragHandle panelId={panel.id} />
+      {/* TODO: re-enable when drag-to-reposition is polished */}
-      <DragSourceDimmer panelId={panel.id} />
+      {/* <DragHandle panelId={panel.id} /> */}
+      {/* <DragSourceDimmer panelId={panel.id} /> */}
     </>
   ) : null;
 

src/workspaces/components/Workspace/WorkspaceView.tsx

@@ -4,7 +4,8 @@ import type { DropPosition } from './layout-utils';
 import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels } from './layout-utils';
 import { WorkspaceProvider } from './WorkspaceContext';
 import { WorkspaceRenderer } from './WorkspaceRenderer';
-import { DragOverlay } from './DragOverlay';
+// TODO: re-enable when drag-to-reposition is polished
+// import { DragOverlay } from './DragOverlay';
 
 type WorkspaceViewProps = {
   workspace: WorkspaceDefinition | null;
@@ -104,7 +105,7 @@ export const WorkspaceView = ({ workspace, layout, onLayoutChange, registry }: W
         onRemove={handleRemove}
         onResized={handleResized}
       />
-      <DragOverlay />
+      {/* <DragOverlay /> */}
     </WorkspaceProvider>
   );
 };