From 1450dbdaf8d7aa8b5f2b015ca2689d262a02a8bd Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 13 Jan 2025 15:35:59 -0800
Subject: [PATCH] Set up scaffolding for connections

---
 .../connection/connection-point.tsx           | 21 +++++++++++++++++++
 .../sub-block/components/code.tsx             |  0
 .../sub-block/components/dropdown.tsx         |  0
 .../sub-block/components/long-input.tsx       |  0
 .../sub-block/components/short-input.tsx      |  0
 .../sub-block/components/slider-input.tsx     |  0
 .../sub-block/components/table.tsx            |  0
 .../{ => components}/sub-block/sub-block.tsx  |  0
 .../workflow-block/workflow-block.tsx         |  9 ++++++--
 9 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/code.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/dropdown.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/long-input.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/short-input.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/slider-input.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/components/table.tsx (100%)
 rename app/w/components/blocks/components/workflow-block/{ => components}/sub-block/sub-block.tsx (100%)

diff --git a/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx b/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx
new file mode 100644
index 0000000000..0e6b1d47c4
--- /dev/null
+++ b/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils'
+
+interface ConnectionPointProps {
+  position: 'top' | 'bottom'
+}
+
+export function ConnectionPoint({ position }: ConnectionPointProps) {
+  return (
+    <div
+      className={cn(
+        'absolute left-1/2 -translate-x-1/2 w-3 h-3',
+        'bg-white rounded-full border opacity-0 group-hover:opacity-100',
+        'transition-opacity duration-200 cursor-crosshair hover:border-blue-500',
+        'hover:scale-110 hover:shadow-sm',
+        position === 'top'
+          ? '-translate-y-1/2 top-0'
+          : 'translate-y-1/2 bottom-0'
+      )}
+    />
+  )
+}
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/code.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/code.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/code.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/code.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/dropdown.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/dropdown.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/dropdown.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/dropdown.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/long-input.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/long-input.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/long-input.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/long-input.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/short-input.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/short-input.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/slider-input.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/slider-input.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/slider-input.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/slider-input.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/table.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/components/table.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/components/table.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/components/table.tsx
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx b/app/w/components/blocks/components/workflow-block/components/sub-block/sub-block.tsx
similarity index 100%
rename from app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx
rename to app/w/components/blocks/components/workflow-block/components/sub-block/sub-block.tsx
diff --git a/app/w/components/blocks/components/workflow-block/workflow-block.tsx b/app/w/components/blocks/components/workflow-block/workflow-block.tsx
index 5816af773c..60ff927764 100644
--- a/app/w/components/blocks/components/workflow-block/workflow-block.tsx
+++ b/app/w/components/blocks/components/workflow-block/workflow-block.tsx
@@ -1,8 +1,9 @@
 import { Card } from '@/components/ui/card'
 import { BlockConfig, SubBlockConfig } from '../../types/block'
 import { cn } from '@/lib/utils'
-import { SubBlock } from './sub-block/sub-block'
+import { SubBlock } from './components/sub-block/sub-block'
 import { useCallback, useState, MouseEvent, useEffect } from 'react'
+import { ConnectionPoint } from './components/connection/connection-point'
 
 export interface WorkflowBlockProps {
   id: string
@@ -109,7 +110,7 @@ export function WorkflowBlock({
   return (
     <Card
       className={cn(
-        'absolute w-[320px] shadow-md cursor-move select-none',
+        'absolute w-[320px] shadow-md cursor-move select-none group',
         'transform -translate-x-1/2 -translate-y-1/2',
         isDragging && 'pointer-events-none'
       )}
@@ -119,6 +120,8 @@ export function WorkflowBlock({
       }}
       onMouseDown={handleMouseDown}
     >
+      <ConnectionPoint position="top" />
+
       <div className="flex items-center gap-3 p-3 border-b">
         <div
           className="flex items-center justify-center w-7 h-7 rounded"
@@ -146,6 +149,8 @@ export function WorkflowBlock({
           </div>
         ))}
       </div>
+
+      <ConnectionPoint position="bottom" />
     </Card>
   )
 }