Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -41,6 +41,7 @@ type Annotation = {
   category: AnnotationCategory;
   comment?: string;
   correction?: string;
+  createdBy?: string;
   createdAt: number;
   updatedAt: number;
 };
@@ -1873,6 +1874,24 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     return () => window.removeEventListener('beforeunload', handler);
   }, [dirty]);
   const showToast = (msg: string) => { setToastMsg(msg); setTimeout(()=>setToastMsg(''), 1800); };
+  // Tutorial admin: choose which user's highlights to display to avoid clashes.
+  const ADMIN_ANNO_VIEW_CLEAN = '__clean__';
+  const ADMIN_ANNO_VIEW_EDIT = '__edit__';
+  const ADMIN_ANNO_VIEW_LEGACY = '__legacy__';
+  const [adminAnnoView, setAdminAnnoView] = React.useState<string>(ADMIN_ANNO_VIEW_CLEAN);
+  const [annoCreators, setAnnoCreators] = React.useState<string[]>([]);
+  const isTutorialMode = (() => { try { return localStorage.getItem('refinityMode') === 'tutorial'; } catch { return false; } })();
+  const currentUserLower = String(username || '').toLowerCase();
+  const isAdminUser = (() => {
+    try { return String(JSON.parse(localStorage.getItem('user') || '{}')?.role || '').toLowerCase() === 'admin'; } catch { return false; }
+  })();
+  const adminCanEditAnnotations = !(isTutorialMode && isAdminUser && adminAnnoView !== ADMIN_ANNO_VIEW_EDIT);
+
+  // Default admin view to clean on each version to avoid accidental carry-over.
+  React.useEffect(() => {
+    if (isTutorialMode && isAdminUser) setAdminAnnoView(ADMIN_ANNO_VIEW_CLEAN);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [versionId]);
   const ANNO_STORE_KEY = 'refinity_annotations_v1';
   type Ann = Annotation;
   const loadAnnotations = React.useCallback((): Ann[] => {
@@ -1881,7 +1900,20 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const saveAnnotations = React.useCallback((list: Ann[]) => { try { localStorage.setItem(ANNO_STORE_KEY, JSON.stringify(list)); } catch {} }, []);
   const [annotations, setAnnotations] = React.useState<Ann[]>(() => loadAnnotations());
   React.useEffect(() => { saveAnnotations(annotations); }, [annotations, saveAnnotations]);
-  const versionAnnotations = React.useMemo(() => annotations.filter(a => a.versionId === versionId), [annotations, versionId]);
+  const versionAnnotations = React.useMemo(() => {
+    const base = annotations.filter(a => a.versionId === versionId);
+    if (isTutorialMode) {
+      if (isAdminUser) {
+        if (adminAnnoView === ADMIN_ANNO_VIEW_CLEAN) return [];
+        if (adminAnnoView === ADMIN_ANNO_VIEW_EDIT) return base.filter(a => String(a.createdBy || '').toLowerCase() === currentUserLower);
+        if (adminAnnoView === ADMIN_ANNO_VIEW_LEGACY) return base.filter(a => !a.createdBy);
+        return base.filter(a => String(a.createdBy || '').toLowerCase() === String(adminAnnoView || '').toLowerCase());
+      }
+      // Student (or non-admin): be defensive and only show own (or legacy) highlights.
+      return base.filter(a => !a.createdBy || String(a.createdBy || '').toLowerCase() === currentUserLower);
+    }
+    return base;
+  }, [annotations, versionId, isTutorialMode, isAdminUser, adminAnnoView, currentUserLower]);
   const addAnnotation = (a: Ann) => setAnnotations(prev => [...prev, a]);
   const updateAnnotation = (a: Ann) => setAnnotations(prev => prev.map(x => x.id === a.id ? a : x));
   const deleteAnnotationById = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
@@ -1929,6 +1961,18 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
             // Only show annotations that either don't have createdBy (legacy) or were created by current user
             filteredRows = rows.filter((r: any) => !r.createdBy || r.createdBy.toLowerCase() === currentUsername);
           }
+
+          // For tutorial admin, capture the list of creators for the dropdown.
+          if (isTutorial && isAdmin) {
+            const creators = Array.from(new Set(
+              rows
+                .map((r: any) => (r?.createdBy ? String(r.createdBy).toLowerCase() : ''))
+                .filter(Boolean)
+            )).sort();
+            setAnnoCreators(creators);
+          } else {
+            setAnnoCreators([]);
+          }
           
           setAnnotations(prev => {
             const others = prev.filter(a => a.versionId !== versionId);
@@ -1941,7 +1985,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                 end: r.end,
                 category: r.category,
                 comment: r.comment,
-                correction: existing?.correction,
+                correction: (r.correction !== undefined ? r.correction : existing?.correction),
+                createdBy: (r.createdBy !== undefined ? r.createdBy : existing?.createdBy),
                 createdAt: r.createdAt,
                 updatedAt: r.updatedAt,
               } as Ann;
@@ -2328,7 +2373,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     const base = initialTranslation || '';
     if (!versionAnnotations.length) return base;
     const anns = versionAnnotations
-      .filter(a => typeof a.correction === 'string' && a.correction.trim().length > 0)
+      // Include deletions: we represent them as empty-string corrections.
+      // (Previously we filtered out empty corrections, which caused deletions to be ignored on save.)
+      .filter(a => typeof a.correction === 'string')
       .slice()
       .sort((a, b) => a.start - b.start || a.end - b.end);
     if (!anns.length) return base;
@@ -2445,6 +2492,25 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           <div className="mb-2 text-gray-700 text-sm flex items-center justify-between">
             <span>Translation</span>
             <div className="flex items-center gap-2">
+              {isTutorialMode && isAdminUser && !onSaveEdit && (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-gray-700">Highlights</span>
+                  <select
+                    value={adminAnnoView}
+                    onChange={(e)=>setAdminAnnoView(e.target.value)}
+                    className="h-8 px-2 text-sm rounded-lg border border-gray-300 bg-white"
+                    title="Select which user's highlights to display (admin-only)"
+                  >
+                    <option value={ADMIN_ANNO_VIEW_CLEAN}>Clean (none)</option>
+                    <option value={ADMIN_ANNO_VIEW_EDIT}>Edit (my highlights)</option>
+                    {annoCreators.length > 0 && <option disabled>──────────</option>}
+                    {annoCreators.map(u => (
+                      <option key={u} value={u}>{u}</option>
+                    ))}
+                    <option value={ADMIN_ANNO_VIEW_LEGACY}>Legacy (unknown)</option>
+                  </select>
+                </div>
+              )}
               {!isFullscreen && (
                 <button onClick={onToggleFullscreen} className="inline-flex items-center px-2 py-1 text-xs rounded-xl bg-white/60 ring-1 ring-gray-200 text-gray-800 hover:bg-white">
                   Full Screen
@@ -2511,7 +2577,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                         const selected = text.slice(hit.start, hit.end);
                         setModalSelectedText(selected);
                         setModalCorrection(hit.correction ?? selected);
-                        setModalIsDeletion(false);
+                        // If correction is empty-string, treat it as a deletion annotation.
+                        setModalIsDeletion(typeof hit.correction === 'string' && hit.correction.trim() === '');
                         setModalSourceSnippet(
                           computeSourceSnippetForOffset(source, text, hit.start)
                         );
@@ -2522,6 +2589,12 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                       setPopover(null);
                       return;
                     }
+                    if (!adminCanEditAnnotations) {
+                      // View-only mode: allow inspecting existing highlights (handled above),
+                      // but do not allow creating new highlights via selection.
+                      setPopover(null);
+                      return;
+                    }
                     updateSelectionPopover();
                   }, 10);
                 }}
@@ -2539,6 +2612,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                 <button
                   type="button"
                   onClick={()=>{
+                    if (!adminCanEditAnnotations) { showToast('Switch “Highlights” to Edit (my highlights) to add.'); return; }
                     setEditingAnn(null);
                     setModalCategory('distortion');
                     setModalComment('');
@@ -2559,6 +2633,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                     setShowSourcePane(false);
                     setModalOpen(true);
                   }}
+                  disabled={!adminCanEditAnnotations}
                   className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-emerald-700 active:translate-y-0.5 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%)]" />
@@ -2568,7 +2643,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               </div>
             )}
           </div>
-          <div className="mt-4 flex gap-3 relative">
+          <div className="mt-4 flex gap-3 relative items-center">
             <button
               onClick={() => { setDirty(false); save(); showToast('Saved'); }}
               disabled={saving}
@@ -2830,12 +2905,24 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
             </div>
             <div className="mt-6 flex items-center justify-between">
               {editingAnn && (
-                <button onClick={async()=>{ await persistDelete(editingAnn.id); deleteAnnotationById(editingAnn.id); setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false); }} className="px-3 py-1.5 text-sm rounded-lg text-white bg-red-600 hover:bg-red-700">Delete</button>
+                <button
+                  onClick={async()=>{
+                    if (!adminCanEditAnnotations) { showToast('Switch “Highlights” to Edit (my highlights) to modify.'); return; }
+                    await persistDelete(editingAnn.id);
+                    deleteAnnotationById(editingAnn.id);
+                    setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false);
+                  }}
+                  disabled={!adminCanEditAnnotations}
+                  className={`px-3 py-1.5 text-sm rounded-lg text-white ${adminCanEditAnnotations ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-400 cursor-not-allowed'}`}
+                >
+                  Delete
+                </button>
               )}
               <div className="ml-auto flex gap-2">
                 <button onClick={()=>{ setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false); }} className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 text-gray-700 bg-white hover:bg-gray-50">Cancel</button>
                 <button
                   onClick={async ()=>{
+                    if (!adminCanEditAnnotations) { showToast('Switch “Highlights” to Edit (my highlights) to save changes.'); return; }
                     // Allow empty correction only if deletion is checked
                     if (!modalIsDeletion && !modalCorrection.trim()) {
                       alert('Please enter a correction for this highlighted text, or check "Delete this text" to mark it for deletion.');
@@ -2868,7 +2955,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                     }
                     setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false);
                   }}
-                  className="px-3 py-1.5 text-sm rounded-lg text-white bg-indigo-600 hover:bg-indigo-700"
+                  disabled={!adminCanEditAnnotations}
+                  className={`px-3 py-1.5 text-sm rounded-lg text-white ${adminCanEditAnnotations ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-gray-400 cursor-not-allowed'}`}
                 >
                   Save
                 </button>