Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -157,6 +157,16 @@ const Refinity: React.FC = () => {
   const [compareMenuPos, setCompareMenuPos] = React.useState<{ left: number; top: number } | null>(null);
   const compareBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);
+  // Chrome-only UA flag for layout tweaks that should not affect Safari/Firefox/Edge
+  React.useEffect(() => {
+    try {
+      const ua = navigator.userAgent || '';
+      const isChrome = /Chrome\//.test(ua) && !/Edg\//.test(ua) && !/OPR\//.test(ua);
+      const root = document.documentElement;
+      if (isChrome) root.classList.add('is-chrome');
+      else root.classList.remove('is-chrome');
+    } catch {}
+  }, []);
   // --- Route persistence (hash-based) ---
   const restoringRef = React.useRef<boolean>(false);
   const appliedInitialRouteRef = React.useRef<boolean>(false);
@@ -751,7 +761,7 @@ const Refinity: React.FC = () => {
       };
       setVersions(prev => [...prev, v]);
       setCurrentVersionId(v.id);
-      setCurrentVersionId(null);
+      // Navigate to flow to view the new version without clearing selection
       setStage('flow');
     } catch {
       // no-op; keep user in editor if needed
@@ -1339,6 +1349,9 @@ const Refinity: React.FC = () => {
               .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next { top: 50% !important; transform: translateY(-50%); }
               .mySwiper .swiper-button-prev:after, .mySwiper .swiper-button-next:after { font-size: 18px; color: #94a3b8; }
               .mySwiper .swiper-pagination { bottom: 6px; }
+              /* Chrome-only: avoid half-line clipping at the bottom of slides */
+              .is-chrome .mySwiper .swiper-slide { padding-bottom: 6px; }
+              .is-chrome .mySwiper .swiper-slide .whitespace-pre-wrap { padding-bottom: 6px; }
               /* Ensure buttons inside slides are clickable */
               .mySwiper .swiper-slide button, .mySwiper .swiper-slide .action-row > * { 
                 pointer-events: auto !important; 
@@ -1490,6 +1503,54 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const wrapperRef = React.useRef<HTMLDivElement | null>(null);
   // Annotation layer state (revision mode only)
   const [showAnnotations, setShowAnnotations] = React.useState<boolean>(true);
+  // Comment-first workflow state (per-version; persisted in sessionStorage)
+  const [commentsSaved, setCommentsSaved] = React.useState<boolean>(false);
+  React.useEffect(() => {
+    try {
+      const v = sessionStorage.getItem(`refinity_comments_saved_${versionId}`) === '1';
+      setCommentsSaved(!!v);
+    } catch { setCommentsSaved(false); }
+  }, [versionId]);
+  const [toastMsg, setToastMsg] = React.useState<string>('');
+  const [dirty, setDirty] = React.useState<boolean>(false);
+  React.useEffect(() => { setDirty(false); }, [versionId, initialTranslation]);
+  React.useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (dirty) { e.preventDefault(); e.returnValue = ''; }
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [dirty]);
+  const showToast = (msg: string) => { setToastMsg(msg); setTimeout(()=>setToastMsg(''), 1800); };
+  const statusRef = React.useRef<HTMLDivElement | null>(null);
+  const [statusH, setStatusH] = React.useState<number>(0);
+  React.useLayoutEffect(() => {
+    const el = statusRef.current;
+    if (!el) { setStatusH(0); return; }
+    const compute = () => {
+      const h = el.offsetHeight || 0;
+      let mt = 0, mb = 0;
+      try {
+        const cs = window.getComputedStyle(el);
+        mt = parseFloat(cs.marginTop || '0') || 0;
+        mb = parseFloat(cs.marginBottom || '0') || 0;
+      } catch {}
+      setStatusH(h + mt + mb);
+    };
+    compute();
+    // Track dynamic changes without layout flicker
+    let ro: ResizeObserver | null = null;
+    try {
+      ro = new ResizeObserver(() => compute());
+      ro.observe(el);
+    } catch {}
+    const onResize = () => compute();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      if (ro) try { ro.disconnect(); } catch {}
+    };
+  }, [commentsSaved]);
   const ANNO_STORE_KEY = 'refinity_annotations_v1';
   type Ann = Annotation;
   const loadAnnotations = React.useCallback((): Ann[] => {
@@ -1713,6 +1774,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       <div className="flex items-start gap-6">
         <div className="w-1/2">
           <div className="mb-2 text-gray-700 text-sm">Source</div>
+          {/* Spacer to align with translation status bar (exact measured height) */}
+          <div style={{ height: Math.max(0, statusH) }} />
           <div className="relative rounded-lg overflow-hidden">
             <div className="absolute inset-0 rounded-lg" style={{ background: 'radial-gradient(120%_120%_at_0%_0%, #dbeafe 0%, #ffffff 50%, #c7d2fe 100%)' }} />
             <div ref={sourceRef} className="relative rounded-lg bg-white/60 backdrop-blur-md ring-1 ring-inset ring-indigo-300 shadow p-4 min-h-[420px] whitespace-pre-wrap text-gray-900">
@@ -1735,7 +1798,15 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               )}
             </div>
           </div>
-          <div ref={wrapperRef} className="relative overflow-hidden">
+          {/* Status bar */}
+          <div ref={statusRef} className="mb-2 text-xs">
+            {!commentsSaved ? (
+              <div className="rounded-md bg-amber-50 text-amber-900 ring-1 ring-amber-200 px-3 py-1">Step 1: Add comments. Save to continue to editing.</div>
+            ) : (
+              <div className="rounded-md bg-emerald-50 text-emerald-900 ring-1 ring-emerald-200 px-3 py-1">Comments saved. Editing unlocked.</div>
+            )}
+          </div>
+            <div ref={wrapperRef} className="relative overflow-hidden">
             {/* Overlay highlights rendered above, but non-interactive; textarea handles selection */}
             <div
               ref={overlayRef}
@@ -1746,7 +1817,13 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
             <textarea 
               ref={taRef}
               value={text} 
-              onChange={(e)=>setText(e.target.value)} 
+              readOnly={!commentsSaved}
+              onChange={async (e)=>{
+                const val = e.target.value;
+                if (!commentsSaved) return; // locked
+                setDirty(true);
+                setText(val);
+              }} 
               onMouseUp={()=>{
                 updateSelectionPopover();
                 // If caret inside an existing annotation, open edit modal
@@ -1773,7 +1850,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                 overflowY: 'auto',
                 background: 'transparent',
                 color: '#111827' as any,
-                caretColor: '#111827'
+                caretColor: '#111827',
+                opacity: !commentsSaved ? 0.85 : 1
               }} 
             />
             {/* + Comment popover */}
@@ -1797,7 +1875,23 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
             )}
           </div>
           <div className="mt-4 flex gap-3 relative">
-            <button onClick={save} disabled={saving} 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-indigo-600/70 disabled:bg-gray-400 active:translate-y-0.5 transition-all duration-200">{saving? 'Saving…':'Save'}</button>
+            <button
+              onClick={()=>{ 
+                setCommentsSaved(true); 
+                try { sessionStorage.setItem(`refinity_comments_saved_${versionId}`,'1'); } catch {}
+                showToast('Comments saved — you can now edit the text.');
+              }}
+              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-emerald-600/80 hover: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%)]" />
+              <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+              Save Comments
+            </button>
+            <button title={!commentsSaved ? 'Save comments to enable editing.' : undefined} onClick={() => { setDirty(false); save(); }} disabled={saving || !commentsSaved} 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-indigo-600/70 hover:bg-indigo-700 disabled:bg-gray-400 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%)]" />
+              <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+              {saving? 'Saving…':'Save Version'}
+            </button>
             <div className="relative inline-block align-top">
               <button
                 ref={revBtnRef}
@@ -1823,7 +1917,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               )}
             </div>
             {/* Comments button removed per request */}
-            <button onClick={onBack} className="ml-auto relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Back</button>
+            <button onClick={()=>{ if (!dirty || window.confirm('Discard unsaved changes?')) { setDirty(false); onBack(); } }} className="ml-auto relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Back</button>
           </div>
           {/* Inline comments drawer removed */}
           {showDiff && (
@@ -1838,6 +1932,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           )}
         </div>
       </div>
+      {toastMsg && (
+        <div className="fixed bottom-5 right-5 z-[6000] px-3 py-2 rounded-lg bg-black/80 text-white text-sm shadow-lg">{toastMsg}</div>
+      )}
       {/* Annotation modal */}
       {modalOpen && (
         <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black/40">