feat: initial ChatUI modular con arbol de temas, chat n8n y KeyNotes editables

src/components/keynotes/KeyNotesDropZone.tsx

@@ -0,0 +1,50 @@
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+  useSensor,
+  useSensors,
+  PointerSensor,
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import { useTreeStore } from '../../store/store'
+import type { KeyNote } from '../../types'
+import { KeyNoteCard } from './KeyNoteCard'
+
+interface Props {
+  subThemeId: string
+  notes: KeyNote[]
+}
+
+export function KeyNotesDropZone({ subThemeId, notes }: Props) {
+  const reorderKeyNotes = useTreeStore((s) => s.reorderKeyNotes)
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))
+
+  function onDragEnd(e: DragEndEvent) {
+    const { active, over } = e
+    if (!over || active.id === over.id) return
+    const ids = notes.map((n) => n.id)
+    const from = ids.indexOf(String(active.id))
+    const to = ids.indexOf(String(over.id))
+    if (from === -1 || to === -1) return
+    const next = [...ids]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    reorderKeyNotes(subThemeId, next)
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+      <SortableContext items={notes.map((n) => n.id)} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-3">
+          {notes.map((n) => (
+            <KeyNoteCard key={n.id} subThemeId={subThemeId} note={n} />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  )
+}