Split FeatureIdeaCloud helpers and nodes

src/components/FeatureIdeaCloud.tsx

@@ -26,6 +26,7 @@ import { toast } from 'sonner'
 import { FeatureIdea, IdeaGroup, IdeaEdgeData } from './FeatureIdeaCloud/types'
 import { SEED_IDEAS, CATEGORIES, PRIORITIES, STATUSES, CONNECTION_STYLE, GROUP_COLORS } from './FeatureIdeaCloud/constants'
 import { nodeTypes } from './FeatureIdeaCloud/nodes'
+import { dispatchConnectionCountUpdate } from './FeatureIdeaCloud/dispatchConnectionCountUpdate'
 
 export function FeatureIdeaCloud() {
   const [ideas, setIdeas] = useKV<FeatureIdea[]>('feature-ideas', SEED_IDEAS)
@@ -114,10 +115,7 @@ export function FeatureIdeaCloud() {
         bottom: connections.bottom.size,
       }
       
-      const event = new CustomEvent('updateConnectionCounts', {
-        detail: { nodeId, counts }
-      })
-      window.dispatchEvent(event)
+      dispatchConnectionCountUpdate(nodeId, counts)
     })
   }, [])
 

src/components/FeatureIdeaCloud/GroupNode.tsx

@@ -0,0 +1,44 @@
+import { NodeProps } from 'reactflow'
+import { Button } from '@/components/ui/button'
+import { DotsThree } from '@phosphor-icons/react'
+import { IdeaGroup } from './types'
+import { GROUP_COLORS } from './constants'
+import { dispatchEditGroup } from './dispatchEditGroup'
+
+export function GroupNode({ data, selected }: NodeProps<IdeaGroup>) {
+  const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0]
+
+  return (
+    <div
+      className="rounded-2xl backdrop-blur-sm transition-all"
+      style={{
+        width: 450,
+        height: 350,
+        backgroundColor: colorScheme.bg,
+        border: `3px dashed ${colorScheme.border}`,
+        boxShadow: selected ? `0 0 0 2px ${colorScheme.value}` : 'none',
+      }}
+    >
+      <div
+        className="absolute -top-3 left-4 px-3 py-1 rounded-full text-xs font-semibold shadow-md"
+        style={{
+          backgroundColor: colorScheme.value,
+          color: 'white',
+        }}
+      >
+        {data.label}
+      </div>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute -top-2 -right-2 h-7 w-7 rounded-full shadow-md bg-background hover:bg-destructive hover:text-destructive-foreground"
+        onClick={(e) => {
+          e.stopPropagation()
+          dispatchEditGroup(data)
+        }}
+      >
+        <DotsThree size={16} />
+      </Button>
+    </div>
+  )
+}

src/components/FeatureIdeaCloud/IdeaNode.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { NodeProps, Position } from 'reactflow'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { DotsThree } from '@phosphor-icons/react'
+import { FeatureIdea } from './types'
+import { PRIORITY_COLORS, STATUS_COLORS } from './constants'
+import { generateHandles } from './generateHandles'
+import { dispatchEditIdea } from './dispatchEditIdea'
+
+export function IdeaNode({ data, selected, id }: NodeProps<FeatureIdea> & { id: string }) {
+  const [connectionCounts, setConnectionCounts] = useState<Record<string, number>>({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  })
+
+  useEffect(() => {
+    const updateConnectionCounts = (event: CustomEvent) => {
+      const { nodeId, counts } = event.detail
+      if (nodeId === id) {
+        setConnectionCounts(counts)
+      }
+    }
+
+    window.addEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
+    return () => {
+      window.removeEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
+    }
+  }, [id])
+
+  return (
+    <div className="relative">
+      {generateHandles({ position: Position.Left, type: 'target', side: 'left', count: connectionCounts.left })}
+      {generateHandles({ position: Position.Right, type: 'source', side: 'right', count: connectionCounts.right })}
+      {generateHandles({ position: Position.Top, type: 'target', side: 'top', count: connectionCounts.top })}
+      {generateHandles({ position: Position.Bottom, type: 'source', side: 'bottom', count: connectionCounts.bottom })}
+
+      <Card className={`p-4 shadow-xl hover:shadow-2xl transition-all border-2 ${PRIORITY_COLORS[data.priority]} w-[240px] ${selected ? 'ring-2 ring-primary' : ''}`}>
+        <div className="space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="font-semibold text-sm line-clamp-2 flex-1">{data.title}</h3>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 shrink-0"
+              onClick={(e) => {
+                e.stopPropagation()
+                dispatchEditIdea(data)
+              }}
+            >
+              <DotsThree size={16} />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {data.description}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            <Badge variant="secondary" className="text-xs">
+              {data.category}
+            </Badge>
+            <Badge className={`text-xs ${STATUS_COLORS[data.status]}`}>
+              {data.status}
+            </Badge>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

src/components/FeatureIdeaCloud/dispatchConnectionCountUpdate.ts

@@ -0,0 +1,6 @@
+export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
+  const event = new CustomEvent('updateConnectionCounts', {
+    detail: { nodeId, counts }
+  })
+  window.dispatchEvent(event)
+}

src/components/FeatureIdeaCloud/dispatchEditGroup.ts

@@ -0,0 +1,6 @@
+import { IdeaGroup } from './types'
+
+export function dispatchEditGroup(group: IdeaGroup) {
+  const event = new CustomEvent('editGroup', { detail: group })
+  window.dispatchEvent(event)
+}

src/components/FeatureIdeaCloud/dispatchEditIdea.ts

@@ -0,0 +1,6 @@
+import { FeatureIdea } from './types'
+
+export function dispatchEditIdea(idea: FeatureIdea) {
+  const event = new CustomEvent('editIdea', { detail: idea })
+  window.dispatchEvent(event)
+}

src/components/FeatureIdeaCloud/generateHandles.tsx

@@ -11,7 +11,7 @@ interface GenerateHandlesProps {
 export function generateHandles({ position, type, side, count }: GenerateHandlesProps): ReactElement[] {
   const totalHandles = Math.max(2, count + 1)
   const handles: ReactElement[] = []
-  
+
   for (let i = 0; i < totalHandles; i++) {
     const handleId = `${side}-${i}`
     const isVertical = position === Position.Top || position === Position.Bottom
@@ -20,7 +20,7 @@ export function generateHandles({ position, type, side, count }: GenerateHandles
     const positionStyle = isVertical
       ? { left: `${leftPercent}%` }
       : { top: `${topPercent}%` }
-    
+
     const element = (
       <Handle
         key={handleId}
@@ -36,23 +36,6 @@ export function generateHandles({ position, type, side, count }: GenerateHandles
     )
     handles.push(element)
   }
-  
+
   return handles
 }
-
-export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
-  const event = new CustomEvent('updateConnectionCounts', {
-    detail: { nodeId, counts }
-  })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditIdea(idea: any) {
-  const event = new CustomEvent('editIdea', { detail: idea })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditGroup(group: any) {
-  const event = new CustomEvent('editGroup', { detail: group })
-  window.dispatchEvent(event)
-}

src/components/FeatureIdeaCloud/nodes.tsx

@@ -1,143 +1,5 @@
-import { useState, useEffect, ReactElement } from 'react'
-import { NodeProps, Handle, Position } from 'reactflow'
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { DotsThree } from '@phosphor-icons/react'
-import { FeatureIdea, IdeaGroup } from './types'
-import { PRIORITY_COLORS, STATUS_COLORS, GROUP_COLORS } from './constants'
-
-export function GroupNode({ data, selected }: NodeProps<IdeaGroup>) {
-  const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0]
-  
-  return (
-    <div 
-      className="rounded-2xl backdrop-blur-sm transition-all"
-      style={{
-        width: 450,
-        height: 350,
-        backgroundColor: colorScheme.bg,
-        border: `3px dashed ${colorScheme.border}`,
-        boxShadow: selected ? `0 0 0 2px ${colorScheme.value}` : 'none',
-      }}
-    >
-      <div 
-        className="absolute -top-3 left-4 px-3 py-1 rounded-full text-xs font-semibold shadow-md"
-        style={{
-          backgroundColor: colorScheme.value,
-          color: 'white',
-        }}
-      >
-        {data.label}
-      </div>
-      <Button
-        size="icon"
-        variant="ghost"
-        className="absolute -top-2 -right-2 h-7 w-7 rounded-full shadow-md bg-background hover:bg-destructive hover:text-destructive-foreground"
-        onClick={(e) => {
-          e.stopPropagation()
-          const event = new CustomEvent('editGroup', { detail: data })
-          window.dispatchEvent(event)
-        }}
-      >
-        <DotsThree size={16} />
-      </Button>
-    </div>
-  )
-}
-
-export function IdeaNode({ data, selected, id }: NodeProps<FeatureIdea> & { id: string }) {
-  const [connectionCounts, setConnectionCounts] = useState<Record<string, number>>({
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  })
-
-  useEffect(() => {
-    const updateConnectionCounts = (event: CustomEvent) => {
-      const { nodeId, counts } = event.detail
-      if (nodeId === id) {
-        setConnectionCounts(counts)
-      }
-    }
-
-    window.addEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
-    return () => {
-      window.removeEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
-    }
-  }, [id])
-
-  const generateHandles = (position: Position, type: 'source' | 'target', side: string) => {
-    const count = connectionCounts[side] || 0
-    const totalHandles = Math.max(2, count + 1)
-    const handles: ReactElement[] = []
-    
-    for (let i = 0; i < totalHandles; i++) {
-      const handleId = `${side}-${i}`
-      const isVertical = position === Position.Top || position === Position.Bottom
-      const positionStyle = isVertical
-        ? { left: `${((i + 1) / (totalHandles + 1)) * 100}%` }
-        : { top: `${((i + 1) / (totalHandles + 1)) * 100}%` }
-      
-      handles.push(
-        <Handle
-          key={handleId}
-          type={type}
-          position={position}
-          id={handleId}
-          className="w-3 h-3 !bg-primary border-2 border-background transition-all hover:scale-125"
-          style={{
-            ...positionStyle,
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      )
-    }
-    
-    return handles
-  }
-
-  return (
-    <div className="relative">
-      {generateHandles(Position.Left, 'target', 'left')}
-      {generateHandles(Position.Right, 'source', 'right')}
-      {generateHandles(Position.Top, 'target', 'top')}
-      {generateHandles(Position.Bottom, 'source', 'bottom')}
-      
-      <Card className={`p-4 shadow-xl hover:shadow-2xl transition-all border-2 ${PRIORITY_COLORS[data.priority]} w-[240px] ${selected ? 'ring-2 ring-primary' : ''}`}>
-        <div className="space-y-2">
-          <div className="flex items-start justify-between gap-2">
-            <h3 className="font-semibold text-sm line-clamp-2 flex-1">{data.title}</h3>
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-6 w-6 shrink-0"
-              onClick={(e) => {
-                e.stopPropagation()
-                const event = new CustomEvent('editIdea', { detail: data })
-                window.dispatchEvent(event)
-              }}
-            >
-              <DotsThree size={16} />
-            </Button>
-          </div>
-          <p className="text-xs text-muted-foreground line-clamp-2">
-            {data.description}
-          </p>
-          <div className="flex flex-wrap gap-1">
-            <Badge variant="secondary" className="text-xs">
-              {data.category}
-            </Badge>
-            <Badge className={`text-xs ${STATUS_COLORS[data.status]}`}>
-              {data.status}
-            </Badge>
-          </div>
-        </div>
-      </Card>
-    </div>
-  )
-}
+import { GroupNode } from './GroupNode'
+import { IdeaNode } from './IdeaNode'
 
 export const nodeTypes = {
   ideaNode: IdeaNode,

src/components/FeatureIdeaCloud/utils.ts

@@ -1,16 +0,0 @@
-export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
-  const event = new CustomEvent('updateConnectionCounts', {
-    detail: { nodeId, counts }
-  })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditIdea(idea: any) {
-  const event = new CustomEvent('editIdea', { detail: idea })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditGroup(group: any) {
-  const event = new CustomEvent('editGroup', { detail: group })
-  window.dispatchEvent(event)
-}