Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../services/api';
 import { 
@@ -63,6 +63,14 @@ 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}>({});
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
+  const [isWeekHidden, setIsWeekHidden] = useState<boolean>(false);
+  const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
+  const [selectedGroups, setSelectedGroups] = useState<{[key: string]: number}>({});
+  const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
+  const [lockedCardHeights, setLockedCardHeights] = useState<{[key: string]: number}>({});
+  const cardRefs = useRef<{[key: string]: HTMLDivElement | null}>({});
 
   // 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') => {
@@ -111,8 +119,7 @@ const TutorialTasks: React.FC = () => {
       console.error('Reorder failed', error);
     }
   };
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
+
   const [isWeekHidden, setIsWeekHidden] = useState<boolean>(false);
   const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
   const [selectedGroups, setSelectedGroups] = useState<{[key: string]: number}>({});
@@ -1106,6 +1113,25 @@ const TutorialTasks: React.FC = () => {
 
   // Remove intrusive loading screen - just show content with loading state
 
+  const lockCardHeight = (taskId: string) => {
+    try {
+      const el = cardRefs.current[taskId];
+      if (!el) return;
+      const h = el.getBoundingClientRect().height;
+      if (h && h > 0) {
+        setLockedCardHeights(prev => ({ ...prev, [taskId]: Math.ceil(h) }));
+      }
+    } catch {}
+  };
+
+  const unlockCardHeight = (taskId: string) => {
+    setLockedCardHeights(prev => {
+      const next = { ...prev } as any;
+      delete next[taskId];
+      return next;
+    });
+  };
+
   return (
     <div className="min-h-screen bg-white py-8">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -1640,7 +1666,12 @@ const TutorialTasks: React.FC = () => {
             </div>
           ) : (
             tutorialTasks.map((task) => (
-              <div key={task._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
+              <div
+                key={task._id}
+                ref={(el) => { (cardRefs.current[task._id] = el); }}
+                className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300"
+                style={lockedCardHeights[task._id] ? { height: lockedCardHeights[task._id], overflow: 'hidden' } : undefined}
+              >
                 <div className="mb-6">
                   <div className="flex items-center justify-between mb-4">
                     <div className="flex items-center space-x-3">
@@ -1852,7 +1883,9 @@ const TutorialTasks: React.FC = () => {
                                       <label className="block text-xs font-medium text-gray-700 mb-1">Select Your Group</label>
                                       <select
                                         value={selectedGroups[task._id] || ''}
-                                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                                        onFocus={() => lockCardHeight(task._id)}
+                                        onChange={(e) => { lockCardHeight(task._id); setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) }); }}
+                                        onBlur={() => unlockCardHeight(task._id)}
                                         className="w-40 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-xs"
                                       >
                                         <option value="">Choose...</option>
@@ -1867,14 +1900,17 @@ const TutorialTasks: React.FC = () => {
                                       <textarea
                                         id={`tutorial-translation-${task._id}`}
                                         value={translationText[task._id] || ''}
+                                        onFocus={() => lockCardHeight(task._id)}
+                                        onInput={() => lockCardHeight(task._id)}
                                         onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                                        onBlur={() => unlockCardHeight(task._id)}
                                         className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                                         style={{ height: sourceHeights[task._id] ? `${sourceHeights[task._id]}px` : 'auto' }}
                                         rows={4}
                                         placeholder="Enter your group's translation here..."
                                       />
                                     <div className="flex justify-end mt-2">
-                                      <button onClick={() => handleSubmitTranslation(task._id)} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
+                                      <button onClick={() => { lockCardHeight(task._id); handleSubmitTranslation(task._id).finally(() => setTimeout(() => unlockCardHeight(task._id), 300)); }} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
                                     </div>
                                   </div>
                                 )}
@@ -2037,7 +2073,9 @@ const TutorialTasks: React.FC = () => {
                       </label>
                       <select
                         value={selectedGroups[task._id] || ''}
-                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                        onFocus={() => lockCardHeight(task._id)}
+                        onChange={(e) => { lockCardHeight(task._id); setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) }); }}
+                        onBlur={() => unlockCardHeight(task._id)}
                         className="w-48 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm"
                         required
                       >
@@ -2062,15 +2100,19 @@ const TutorialTasks: React.FC = () => {
                       <textarea
                         id={`tutorial-translation-${task._id}`}
                         value={translationText[task._id] || ''}
+                        onFocus={() => lockCardHeight(task._id)}
+                        onInput={() => lockCardHeight(task._id)}
                         onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                        onBlur={() => unlockCardHeight(task._id)}
                         className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        style={{ height: sourceHeights[task._id] ? `${sourceHeights[task._id]}px` : 'auto' }}
                         rows={4}
                         placeholder="Enter your group's translation here..."
                       />
                     </div>
 
                     <button
-                      onClick={() => handleSubmitTranslation(task._id)}
+                      onClick={() => { lockCardHeight(task._id); handleSubmitTranslation(task._id).finally(() => setTimeout(() => unlockCardHeight(task._id), 300)); }}
                       disabled={submitting[task._id]}
                       className="relative inline-flex items-center justify-center gap-2 px-4 py-2 rounded-2xl text-sm font-medium text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] bg-sky-600/70 disabled:bg-gray-400"
                     >