Reorder UX: stable swap via two position updates; add B/I toolbar to source text edit

client/src/pages/TutorialTasks.tsx

@@ -60,6 +60,36 @@ const TutorialTasks: React.FC = () => {
   const [tutorialWeek, setTutorialWeek] = useState<TutorialWeek | null>(null);
   const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
   const [sourceHeights, setSourceHeights] = useState<{[key: string]: number}>({});
+
+  // Move a task up or down by normalizing positions for the current visible list (weeks 4–6 only)
+  const moveTask = async (taskId: string, direction: 'up' | 'down') => {
+    try {
+      const isAdmin = JSON.parse(localStorage.getItem('user') || '{}').role === 'admin';
+      if (!isAdmin || selectedWeek < 4) return;
+      // Build ordered list for the current week from what is rendered
+      const current = tutorialTasks.filter(t => t.weekNumber === selectedWeek);
+      const index = current.findIndex(t => t._id === taskId);
+      if (index === -1) return;
+      const targetIndex = direction === 'up' ? index - 1 : index + 1;
+      if (targetIndex < 0 || targetIndex >= current.length) return;
+
+      // Normalize positions to 0..n-1 based on current screen order
+      const normalized = current.map((t, i) => ({ id: t._id, position: i }));
+      // Swap the two entries
+      const tmp = normalized[index].position;
+      normalized[index].position = normalized[targetIndex].position;
+      normalized[targetIndex].position = tmp;
+
+      // Only update the two affected tasks
+      const updates = [normalized[index], normalized[targetIndex]];
+      for (const u of updates) {
+        await api.put(`/api/auth/admin/tutorial-tasks/${u.id}/position`, { position: u.position });
+      }
+      await fetchTutorialTasks(false);
+    } catch (error) {
+      console.error('Reorder failed', error);
+    }
+  };
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
   const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
@@ -1329,24 +1359,12 @@ const TutorialTasks: React.FC = () => {
                             <span className="ml-2 inline-flex items-center space-x-1">
                               <button
                                 className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
-                                onClick={async () => {
-                                  try {
-                                    const newPos = Math.max(0, (task.position ?? tutorialTasks.indexOf(task)) - 1);
-                                    await api.put(`/api/auth/admin/tutorial-tasks/${task._id}/position`, { position: newPos });
-                                    await fetchTutorialTasks(false);
-                                  } catch (e) { console.error('Reorder up failed', e); }
-                                }}
+                                onClick={() => moveTask(task._id, 'up')}
                                 title="Move up"
                               >↑</button>
                               <button
                                 className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
-                                onClick={async () => {
-                                  try {
-                                    const newPos = (task.position ?? tutorialTasks.indexOf(task)) + 1;
-                                    await api.put(`/api/auth/admin/tutorial-tasks/${task._id}/position`, { position: newPos });
-                                    await fetchTutorialTasks(false);
-                                  } catch (e) { console.error('Reorder down failed', e); }
-                                }}
+                                onClick={() => moveTask(task._id, 'down')}
                                 title="Move down"
                               >↓</button>
                             </span>
@@ -1400,7 +1418,12 @@ const TutorialTasks: React.FC = () => {
                   <div className="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl p-6 mb-6 border border-indigo-200">
                     {editingTask === task._id ? (
                       <div className="space-y-4">
+                        <div className="flex items-center justify-end space-x-2 mb-2">
+                          <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                          <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        </div>
                         <textarea
+                          id="tutorial-newtask-input"
                           value={editForm.content}
                           onChange={(e) => setEditForm({...editForm, content: e.target.value})}
                           className="w-full px-4 py-3 border border-indigo-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"