Upload folder using huggingface_hub

client/src/index.css

@@ -105,6 +105,15 @@
   }
 }
 
+/* Minimal toggle switch (based on W3Schools How-To: Toggle Switch) */
+/* https://www.w3schools.com/howto/howto_css_switch.asp */
+.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: .2s; border-radius: 9999px; }
+.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 9999px; }
+input:checked + .slider { background-color: #10b981; }
+input:checked + .slider:before { transform: translateX(20px); }
+
 /* Chrome-only performance and alignment tweaks (gated) */
 html.is-chrome body, html.is-chrome #root {
   will-change: scroll-position;

client/src/pages/TutorialTasks.tsx

@@ -1129,20 +1129,20 @@ const TutorialTasks: React.FC = () => {
             })}
           </div>
           {isAdmin && (
-            <div className="mt-2">
-              <button
-                onClick={async()=>{
+            <div className="mt-2 flex items-center gap-2">
+              <span className="text-xs text-ui-text/70">Visibility</span>
+              <label className="switch">
+                <input type="checkbox" checked={!(tutorialWeek && tutorialWeek.tasks && tutorialWeek.tasks.length)} onChange={async(e)=>{
                   try {
                     const base = (((api.defaults as any)?.baseURL as string)||'').replace(/\/$/,'');
-                    const cur = await fetch(`${base}/api/admin/weeks/tutorial/${selectedWeek}/visibility`, { headers:{ 'Authorization': localStorage.getItem('token')?`Bearer ${localStorage.getItem('token')}`:'', 'user-role':'admin' } });
-                    const curJson = await cur.json().catch(()=>({}));
-                    const nextHidden = !(curJson?.week?.hidden);
+                    const nextHidden = e.currentTarget.checked;
                     await fetch(`${base}/api/admin/weeks/tutorial/${selectedWeek}/visibility`,{ method:'PUT', headers:{ 'Content-Type':'application/json', 'Authorization': localStorage.getItem('token')?`Bearer ${localStorage.getItem('token')}`:'', 'user-role':'admin' }, body: JSON.stringify({ hidden: nextHidden }) });
                     await fetchTutorialTasks(true);
-                  } catch (e) { console.error(e);} 
-                }}
-                className="inline-flex items-center px-3 py-1.5 text-xs rounded-md border border-ui-border bg-white/70"
-              >{(tutorialWeek && tutorialWeek.tasks && tutorialWeek.tasks.length)?'Hide this week from students':'Show this week to students'}</button>
+                  } catch (err) { console.error(err);} 
+                }}/>
+                <span className="slider" />
+              </label>
+              <span className="text-xs">{(tutorialWeek && tutorialWeek.tasks && tutorialWeek.tasks.length)? 'Shown' : 'Hidden'}</span>
             </div>
           )}
         </div>

client/src/pages/WeeklyPractice.tsx

@@ -1460,20 +1460,21 @@ const WeeklyPractice: React.FC = () => {
             })}
           </div>
           {isAdmin && (
-            <div className="mt-2">
-              <button
-                onClick={async()=>{
+            <div className="mt-2 flex items-center gap-2">
+              <span className="text-xs text-ui-text/70">Visibility</span>
+              <label className="switch">
+                <input type="checkbox" checked={!(weeklyPractice && weeklyPractice.length)} onChange={async(e)=>{
                   try {
                     const base = (((api.defaults as any)?.baseURL as string)||'').replace(/\/$/,'');
-                    const cur = await fetch(`${base}/api/admin/weeks/weekly-practice/${selectedWeek}/visibility`, { headers:{ 'Authorization': localStorage.getItem('token')?`Bearer ${localStorage.getItem('token')}`:'', 'user-role':'admin' } });
-                    const curJson = await cur.json().catch(()=>({}));
-                    const nextHidden = !(curJson?.week?.hidden);
+                    // when checked => Hidden, unchecked => Shown
+                    const nextHidden = e.currentTarget.checked;
                     await fetch(`${base}/api/admin/weeks/weekly-practice/${selectedWeek}/visibility`,{ method:'PUT', headers:{ 'Content-Type':'application/json', 'Authorization': localStorage.getItem('token')?`Bearer ${localStorage.getItem('token')}`:'', 'user-role':'admin' }, body: JSON.stringify({ hidden: nextHidden }) });
                     await fetchWeeklyPractice(true);
-                  } catch (e) { console.error(e);} 
-                }}
-                className="inline-flex items-center px-3 py-1.5 text-xs rounded-md border border-ui-border bg-white/70"
-              >{(()=>{ return (weeklyPractice && weeklyPractice.length)? 'Hide this week from students' : 'Show this week to students'; })()}</button>
+                  } catch (err) { console.error(err);} 
+                }}/>
+                <span className="slider" />
+              </label>
+              <span className="text-xs">{(weeklyPractice && weeklyPractice.length)? 'Shown' : 'Hidden'}</span>
             </div>
           )}
         </div>