From 2890e199537b560595848ca2ede8ce9327d42212 Mon Sep 17 00:00:00 2001
From: Bert Hausmans <bert@hausmans.nl>
Date: Thu, 21 May 2026 07:27:12 +0200
Subject: [PATCH] fix(frontend): wrap lesson tree sibling groups in
 SortableContext for drag feedback

---
 .../frontend/src/components/LessonTree.tsx     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/LessonTree.tsx b/packages/frontend/src/components/LessonTree.tsx
index 59318a6..56fe5d4 100644
--- a/packages/frontend/src/components/LessonTree.tsx
+++ b/packages/frontend/src/components/LessonTree.tsx
@@ -8,7 +8,7 @@ import {
   DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,
   type DragEndEvent,
 } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
 function filterTree(nodes: LessonTreeNode[], q: string): LessonTreeNode[] {
@@ -60,9 +60,11 @@ export function LessonTree({ nodes, filter = '' }: { nodes: LessonTreeNode[]; fi
 
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <ul className="space-y-1">
-        {filtered.map((n) => <TreeRow key={n.id} n={n} depth={0} />)}
-      </ul>
+      <SortableContext items={filtered.map((n) => n.id)} strategy={verticalListSortingStrategy}>
+        <ul className="space-y-1">
+          {filtered.map((n) => <TreeRow key={n.id} n={n} depth={0} />)}
+        </ul>
+      </SortableContext>
     </DndContext>
   );
 }
@@ -149,9 +151,11 @@ function TreeRow({ n, depth }: { n: LessonTreeNode; depth: number }) {
         </div>
       )}
       {n.children.length > 0 && (
-        <ul className="space-y-1">
-          {n.children.map((c) => <TreeRow key={c.id} n={c} depth={depth + 1} />)}
-        </ul>
+        <SortableContext items={n.children.map((c) => c.id)} strategy={verticalListSortingStrategy}>
+          <ul className="space-y-1">
+            {n.children.map((c) => <TreeRow key={c.id} n={c} depth={depth + 1} />)}
+          </ul>
+        </SortableContext>
       )}
     </li>
   );