fix(ios): make ordering question drag-and-drop work on iOS Safari

frontend/app/components/quiz/questions/Ordering.tsx

@@ -1,5 +1,22 @@
 'use client';
 
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
 import { useState } from 'react';
 
@@ -19,6 +36,69 @@ interface OrderingProps {
   onSubmit?: (order: number[]) => void;
 }
 
+interface OrderedItem {
+  text: string;
+  origIdx: number;
+}
+
+function SortableRow({
+  item,
+  position,
+}: {
+  item: OrderedItem;
+  position: number;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.origIdx });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        'flex w-full items-center gap-3 rounded-2xl px-4 py-3.5',
+        isDragging
+          ? 'relative z-10 border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
+          : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
+      )}
+    >
+      <button
+        ref={setActivatorNodeRef}
+        type="button"
+        aria-label="Przeciągnij, aby zmienić kolejność"
+        className="flex cursor-grab touch-none items-center active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical
+          size={18}
+          className={cn(
+            isDragging ? 'text-[var(--orange)]' : 'text-[var(--text-muted)]',
+          )}
+        />
+      </button>
+      <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
+        {position}
+      </span>
+      <span
+        className={cn(
+          'text-sm text-[var(--text-dark)]',
+          isDragging ? 'font-semibold' : 'font-medium',
+        )}
+      >
+        {item.text}
+      </span>
+    </div>
+  );
+}
+
 export default function Ordering({
   questionNumber,
   totalQuestions,
@@ -28,16 +108,25 @@ export default function Ordering({
   items,
   onSubmit,
 }: OrderingProps) {
-  const [ordered, setOrdered] = useState(() =>
+  const [ordered, setOrdered] = useState<OrderedItem[]>(() =>
     items.map((text, origIdx) => ({ text, origIdx })),
   );
-  const [dragging, setDragging] = useState<number | null>(null);
 
-  const moveItem = (from: number, to: number) => {
-    const next = [...ordered];
-    const [item] = next.splice(from, 1);
-    next.splice(to, 0, item);
-    setOrdered(next);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (over && active.id !== over.id) {
+      setOrdered((prev) => {
+        const oldIndex = prev.findIndex((o) => o.origIdx === active.id);
+        const newIndex = prev.findIndex((o) => o.origIdx === over.id);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
   };
 
   return (
@@ -48,52 +137,22 @@ export default function Ordering({
     >
       <QuestionCard question={question} hint={hint} />
 
-      <div className="flex flex-col gap-2.5">
-        {ordered.map(({ text, origIdx }, i) => {
-          const isDragging = dragging === i;
-          return (
-            <div
-              key={origIdx}
-              draggable
-              onDragStart={() => setDragging(i)}
-              onDragOver={(e) => {
-                e.preventDefault();
-                if (dragging !== null && dragging !== i) {
-                  moveItem(dragging, i);
-                  setDragging(i);
-                }
-              }}
-              onDragEnd={() => setDragging(null)}
-              className={cn(
-                'flex w-full cursor-grab items-center gap-3 rounded-2xl px-4 py-3.5 transition-all',
-                isDragging
-                  ? 'border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
-                  : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
-              )}
-            >
-              <GripVertical
-                size={18}
-                className={cn(
-                  isDragging
-                    ? 'text-[var(--orange)]'
-                    : 'text-[var(--text-muted)]',
-                )}
-              />
-              <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
-                {i + 1}
-              </span>
-              <span
-                className={cn(
-                  'text-sm text-[var(--text-dark)]',
-                  isDragging ? 'font-semibold' : 'font-medium',
-                )}
-              >
-                {text}
-              </span>
-            </div>
-          );
-        })}
-      </div>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={ordered.map((o) => o.origIdx)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="flex flex-col gap-2.5">
+            {ordered.map((item, i) => (
+              <SortableRow key={item.origIdx} item={item} position={i + 1} />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
 
       <SubmitButton
         label="Zatwierdź kolejność"

frontend/package.json

@@ -16,6 +16,9 @@
     "test": "pnpm exec tsx --test \"lib/**/*.{test,spec}.{ts,tsx}\" \"app/**/*.{test,spec}.{ts,tsx}\" \"components/**/*.{test,spec}.{ts,tsx}\" \"hooks/**/*.{test,spec}.{ts,tsx}\""
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",