Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -85,9 +85,11 @@ const TutorialTasks: React.FC = () => {
       try {
         const y = window.scrollY;
         fn();
-        // Restore immediately after next paint
+        // Restore scroll position after DOM updates
         requestAnimationFrame(() => {
-          window.scrollTo(0, y);
+          requestAnimationFrame(() => {
+            window.scrollTo(0, y);
+          });
         });
       } catch {
         fn();

client/src/pages/WeeklyPractice.tsx

@@ -1760,8 +1760,251 @@ const WeeklyPractice: React.FC = () => {
               </div>
             )}
             {weeklyPractice.length > 0 ? weeklyPractice.map((practice) => (
-              <div key={practice._id} className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
-                <div className="text-gray-900 whitespace-pre-wrap mb-2">{renderFormatted(practice.content)}</div>
+              <div key={practice._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
+                <div className="mb-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-pink-100 rounded-full p-2">
+                        <DocumentTextIcon className="h-5 w-5 text-pink-600" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">Source Text #{weeklyPractice.indexOf(practice) + 1}</h3>
+                      </div>
+                    </div>
+                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
+                        <div className="flex items-center space-x-2">
+                        {editingPractice === practice._id ? (
+                          <>
+                            <button
+                              onClick={savePractice}
+                              disabled={saving}
+                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              {saving ? (
+                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                              ) : (
+                                <CheckIcon className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              onClick={cancelEditing}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                          <button
+                            onClick={() => startEditing(practice)}
+                            className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                          >
+                            <PencilIcon className="h-4 w-4" />
+                          </button>
+                            <button
+                              onClick={() => deletePractice(practice._id)}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <TrashIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content - Gradient underlay + glass overlay */}
+                  <div className="relative rounded-xl mb-6 p-0 border border-pink-200/60">
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-pink-200/45 via-rose-200/40 to-pink-300/45" />
+                    <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-6">
+                      <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl" style={{ background: 'radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%)' }} />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl bg-pink-500/10 mix-blend-overlay opacity-25" />
+                    {editingPractice === practice._id ? (
+                      <div className="space-y-4">
+                        <textarea
+                          value={editForm.content}
+                          onChange={(e) => setEditForm({...editForm, content: e.target.value})}
+                          className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 bg-white"
+                          rows={5}
+                          placeholder="Enter source text..."
+                        />
+                        {selectedWeek >= 2 && (
+                          <div className="space-y-3">
+                            <div>
+                              <label className="block text-sm font-medium text-orange-700 mb-1">Image URL</label>
+                              <input
+                                type="text"
+                                value={editForm.imageUrl}
+                                onChange={(e) => setEditForm({...editForm, imageUrl: e.target.value})}
+                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                                placeholder="Enter image URL..."
+                              />
+                            </div>
+                            <div>
+                              <label className="block text-sm font-medium text-orange-700 mb-1">Image Alt Text</label>
+                              <input
+                                type="text"
+                                value={editForm.imageAlt}
+                                onChange={(e) => setEditForm({...editForm, imageAlt: e.target.value})}
+                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                                placeholder="Enter alt text for accessibility..."
+                              />
+                            </div>
+                            <div>
+                              <label className="block text-sm font-medium text-orange-700 mb-1">Upload Local Image</label>
+                              <input
+                                type="file"
+                                accept="image/*"
+                                onChange={async (e) => {
+                                  const file = e.target.files?.[0];
+                                  if (file) {
+                                    try {
+                                      const imageUrl = await handleFileUpload(file);
+                                      setEditForm({ ...editForm, imageUrl });
+                                    } catch (error) {
+                                      console.error('Error uploading file:', error);
+                                    }
+                                  }
+                                }}
+                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                              />
+                              {uploading && (
+                                <div className="mt-2 text-sm text-orange-600">
+                                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600 inline-block mr-2"></div>
+                                  Uploading...
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div>
+                        {practice.imageUrl ? (
+                          selectedWeek >= 4 && practice.imageAlignment === 'portrait-split' ? (
+                            // Portrait split layout
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                              <div className="w-full flex justify-center">
+                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ maxHeight: '520px', objectFit: 'contain' }} />
+                                </div>
+                              </div>
+                              <div className="w-full">
+                                <div className="mb-4 text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
+                                {localStorage.getItem('token') && (
+                                  <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
+                                    <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                                    <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                                    <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
+                                    <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
+                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
+                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
+                                      <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
+                                    </div>
+                                    <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
+                                    <div className="relative z-10 flex justify-end mt-2">
+                                      <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] transition-all duration-200">
+                                        <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                                        <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                                        {submitting[practice._id] ? (
+                                          <>
+                                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                            Submitting...
+                                          </>
+                                        ) : (
+                                          <>
+                                            <CheckIcon className="h-4 w-4" />
+                                            Submit Translation
+                                          </>
+                                        )}
+                                      </button>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          ) : (
+                            // Regular image layout
+                            <div className="space-y-4">
+                              <div className="flex justify-center">
+                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ maxHeight: '400px', objectFit: 'contain' }} />
+                                </div>
+                              </div>
+                              <div className="text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
+                              {localStorage.getItem('token') && (
+                                <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
+                                  <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                                  <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                                  <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
+                                  <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
+                                    <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
+                                    <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
+                                    <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
+                                  </div>
+                                  <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
+                                  <div className="relative z-10 flex justify-end mt-2">
+                                    <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] transition-all duration-200">
+                                      <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                                      <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                                      {submitting[practice._id] ? (
+                                        <>
+                                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                          Submitting...
+                                        </>
+                                      ) : (
+                                        <>
+                                          <CheckIcon className="h-4 w-4" />
+                                          Submit Translation
+                                        </>
+                                      )}
+                                    </button>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          )
+                        ) : (
+                          // Text-only layout
+                          <div className="mb-4 text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
+                        )}
+                        {localStorage.getItem('token') && !practice.imageUrl && (
+                          <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
+                            <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                            <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                            <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
+                            <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
+                              <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
+                              <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
+                              <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
+                            </div>
+                            <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
+                            <div className="relative z-10 flex justify-end mt-2">
+                              <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] transition-all duration-200">
+                                <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                                <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                                {submitting[practice._id] ? (
+                                  <>
+                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                    Submitting...
+                                  </>
+                                ) : (
+                                  <>
+                                    <CheckIcon className="h-4 w-4" />
+                                    Submit Translation
+                                  </>
+                                )}
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    </div>
+                  </div>
+                </div>
               </div>
             )) : (
               <div className="text-gray-600">No practice items for Week 2 yet.</div>
@@ -1968,7 +2211,6 @@ const WeeklyPractice: React.FC = () => {
           )}
           </div>
         ) : (
-          /* Weekly Practice */
         <div className="space-y-6">
           {/* Add Practice Button for Admin */}
           {(() => {