fix(frontend): wrap lesson tree sibling groups in SortableContext for drag feedback

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">
+      <SortableContext items={filtered.map((n) => n.id)} strategy={verticalListSortingStrategy}>
-        {filtered.map((n) => <TreeRow key={n.id} n={n} depth={0} />)}
+        <ul className="space-y-1">
-      </ul>
+          {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">
+        <SortableContext items={n.children.map((c) => c.id)} strategy={verticalListSortingStrategy}>
-          {n.children.map((c) => <TreeRow key={c.id} n={c} depth={depth + 1} />)}
+          <ul className="space-y-1">
-        </ul>
+            {n.children.map((c) => <TreeRow key={c.id} n={c} depth={depth + 1} />)}
+          </ul>
+        </SortableContext>
       )}
     </li>
   );