Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -68,10 +68,31 @@ const Refinity: React.FC = () => {
     return 'task';
   });
   const [tasks, setTasks] = React.useState<Task[]>([]);
-  const [selectedTaskId, setSelectedTaskId] = React.useState<string>('');
+  const [selectedTaskId, setSelectedTaskId] = React.useState<string>(() => {
+    try {
+      const h = String(window.location.hash || '');
+      const q = h.includes('?') ? h.slice(h.indexOf('?') + 1) : '';
+      const params = new URLSearchParams(q);
+      return String(params.get('taskId') || '');
+    } catch { return ''; }
+  });
   const [versions, setVersions] = React.useState<Version[]>([]);
-  const [currentVersionId, setCurrentVersionId] = React.useState<string | null>(null);
-  const [previewVersionId, setPreviewVersionId] = React.useState<string | null>(null);
+  const [currentVersionId, setCurrentVersionId] = React.useState<string | null>(() => {
+    try {
+      const h = String(window.location.hash || '');
+      const q = h.includes('?') ? h.slice(h.indexOf('?') + 1) : '';
+      const params = new URLSearchParams(q);
+      return String(params.get('versionId') || '') || null;
+    } catch { return null; }
+  });
+  const [previewVersionId, setPreviewVersionId] = React.useState<string | null>(() => {
+    try {
+      const h = String(window.location.hash || '');
+      const q = h.includes('?') ? h.slice(h.indexOf('?') + 1) : '';
+      const params = new URLSearchParams(q);
+      return String(params.get('previewId') || '') || null;
+    } catch { return null; }
+  });
   const [isFullscreen, setIsFullscreen] = React.useState<boolean>(() => {
     try {
       const h = String(window.location.hash || '');
@@ -177,6 +198,10 @@ const Refinity: React.FC = () => {
   const task = React.useMemo(() => tasks.find(t => t.id === selectedTaskId) || tasks[0], [tasks, selectedTaskId]);
   const taskVersions = React.useMemo(() => versions.filter(v => v.taskId === (task?.id || '')), [versions, task?.id]);
   // Load tasks
+  // Simple session cache keys
+  const TASKS_CACHE_KEY = 'refinity_tasks_cache_v1';
+  const versionsCacheKey = React.useCallback((taskId: string) => `refinity_versions_cache_${taskId}_v1`, []);
+
   React.useEffect(() => {
     (async () => {
       try {
@@ -188,11 +213,27 @@ const Refinity: React.FC = () => {
           initialRouteRef.current = { stage: desiredStage, taskId: params.taskId, versionId: params.versionId, previewId: params.previewId, fullscreen };
           if (fullscreen) setIsFullscreen(true);
         }
+        // Hydrate from cache immediately
+        try {
+          const cached = JSON.parse(sessionStorage.getItem(TASKS_CACHE_KEY) || '[]');
+          if (Array.isArray(cached) && cached.length && tasks.length === 0) {
+            setTasks(cached);
+            if (!selectedTaskId) {
+              const initTaskId = initialRouteRef.current?.taskId;
+              if (initTaskId && cached.some((t:any)=>t.id===initTaskId)) {
+                setSelectedTaskId(initTaskId);
+              } else {
+                setSelectedTaskId(cached[0].id);
+              }
+            }
+          }
+        } catch {}
         const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
         const resp = await fetch(`${base}/api/refinity/tasks`);
         const data: any[] = await resp.json().catch(()=>[]);
         const normalized: Task[] = Array.isArray(data) ? data.map(d => ({ id: d._id, title: d.title, sourceText: d.sourceText, createdBy: d.createdBy })) : [];
         setTasks(normalized);
+        try { sessionStorage.setItem(TASKS_CACHE_KEY, JSON.stringify(normalized)); } catch {}
         // Apply initial route task selection if available
         const initTaskId = initialRouteRef.current?.taskId;
         if (normalized.length) {
@@ -211,11 +252,23 @@ const Refinity: React.FC = () => {
     (async () => {
       if (!task?.id) { setVersions([]); return; }
       try {
+        // Hydrate versions from cache for instant UI
+        try {
+          const cached = JSON.parse(sessionStorage.getItem(versionsCacheKey(task.id)) || '[]');
+          if (Array.isArray(cached) && cached.length) {
+            setVersions(cached);
+            // If versionId missing but stage requests editor, default to latest cached
+            if (stage === 'editor' && !currentVersionId) {
+              setCurrentVersionId(cached[cached.length - 1]?.id || null);
+            }
+          }
+        } catch {}
         const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
         const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(task.id)}/versions`);
         const data: any[] = await resp.json().catch(()=>[]);
         const normalized: Version[] = Array.isArray(data) ? data.map(d => ({ id: d._id, taskId: d.taskId, originalAuthor: d.originalAuthor, revisedBy: d.revisedBy, versionNumber: d.versionNumber, content: d.content, parentVersionId: d.parentVersionId })) : [];
         setVersions(normalized);
+        try { sessionStorage.setItem(versionsCacheKey(task.id), JSON.stringify(normalized)); } catch {}
         // Restore stage/version from initial route if present
         const init = initialRouteRef.current;
         if (init?.stage && normalized.length) {
@@ -227,18 +280,23 @@ const Refinity: React.FC = () => {
             } else if (init.stage === 'preview' && init.previewId && normalized.some(v => v.id === init.previewId)) {
               setPreviewVersionId(init.previewId);
               setStage('preview');
+            } else if (init.stage === 'editor') {
+              // Stay in editor; choose latest if specific version missing
+              setCurrentVersionId(normalized[normalized.length-1]?.id || null);
+              setStage('editor');
+            } else if (init.stage === 'preview') {
+              setPreviewVersionId(normalized[normalized.length-1]?.id || null);
+              setStage('preview');
             } else if (init.stage === 'flow') {
               setStage('flow');
-            } else {
-              setCurrentVersionId(normalized[normalized.length-1].id);
-              setStage('flow');
             }
           } finally {
             // small defer to avoid immediate hash writes during restore
             setTimeout(() => { restoringRef.current = false; }, 50);
           }
         } else {
-          setCurrentVersionId(normalized.length ? normalized[normalized.length-1].id : null);
+          // No init; do not force stage change if already 'editor' or 'preview'
+          if (!currentVersionId) setCurrentVersionId(normalized.length ? normalized[normalized.length-1].id : null);
         }
       } catch { setVersions([]); }
     })();
@@ -318,6 +376,8 @@ const Refinity: React.FC = () => {
     return Math.min(Math.max(taskVersions.length - 1, 0), flowIndex);
   }, [taskVersions, currentVersionId, flowIndex]);
   const centerVersionId = React.useMemo(() => (taskVersions[flowIndex]?.id) || '', [taskVersions, flowIndex]);
+  const currentVersion = React.useMemo(() => taskVersions.find(v => v.id === currentVersionId) || null, [taskVersions, currentVersionId]);
+  const previewVersion = React.useMemo(() => taskVersions.find(v => v.id === previewVersionId) || null, [taskVersions, previewVersionId]);
 
   // Keyboard navigation disabled per request (use arrow buttons only)
 
@@ -1290,29 +1350,43 @@ const Refinity: React.FC = () => {
 
       {/* Stage: Preview full text */}
       {stage === 'preview' && (
-        <PreviewPane
-          version={taskVersions.find(v => v.id === previewVersionId) || (flowIndex >= 0 ? (taskVersions[flowIndex] || null) : null)}
-          onBack={()=>setStage('flow')}
-          onEdit={()=>{ if (previewVersionId) { setCurrentVersionId(previewVersionId); setStage('editor'); } }}
-          compareInitially={showPreviewDiff}
-        />
+        <>
+          {!previewVersion && (
+            <div className="rounded-xl ring-1 ring-gray-200 shadow-sm overflow-hidden bg-white/60 min-h-[280px] animate-pulse" />
+          )}
+          {previewVersion && (
+            <PreviewPane
+              version={previewVersion || (flowIndex >= 0 ? (taskVersions[flowIndex] || null) : null)}
+              onBack={()=>setStage('flow')}
+              onEdit={()=>{ if (previewVersionId) { setCurrentVersionId(previewVersionId); setStage('editor'); } }}
+              compareInitially={showPreviewDiff}
+            />
+          )}
+        </>
       )}
 
       {/* Stage 3: Editor */}
       {stage === 'editor' && (
-        <EditorPane
-          source={task?.sourceText || ''}
-          initialTranslation={taskVersions.find(v => v.id === currentVersionId)?.content || ''}
-          onBack={()=>setStage('flow')}
-          onSave={handleSaveRevision}
-          onSaveEdit={editingVersionId ? ((text)=>saveEditedVersion(editingVersionId, text)) : undefined}
-          taskTitle={task?.title || 'Task'}
-          username={username}
-          nextVersionNumber={((versions.filter(v=>v.taskId===(task?.id||'')).slice(-1)[0]?.versionNumber) || 0) + 1}
-          isFullscreen={isFullscreen}
-          onToggleFullscreen={()=>setIsFullscreen(v=>!v)}
-          versionId={currentVersionId || ''}
-        />
+        <>
+          {(!currentVersion || !task?.sourceText) && (
+            <div className="rounded-xl ring-1 ring-gray-200 shadow-sm overflow-hidden bg-white/60 min-h-[520px] animate-pulse" />
+          )}
+          {currentVersion && task?.sourceText && (
+            <EditorPane
+              source={task?.sourceText || ''}
+              initialTranslation={currentVersion?.content || ''}
+              onBack={()=>setStage('flow')}
+              onSave={handleSaveRevision}
+              onSaveEdit={editingVersionId ? ((text)=>saveEditedVersion(editingVersionId, text)) : undefined}
+              taskTitle={task?.title || 'Task'}
+              username={username}
+              nextVersionNumber={((versions.filter(v=>v.taskId===(task?.id||'')).slice(-1)[0]?.versionNumber) || 0) + 1}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={()=>setIsFullscreen(v=>!v)}
+              versionId={currentVersionId || ''}
+            />
+          )}
+        </>
       )}
       </div>
     </div>
@@ -1322,6 +1396,10 @@ const Refinity: React.FC = () => {
 const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void; onSaveEdit?: (text: string)=>void; taskTitle: string; username: string; nextVersionNumber: number; isFullscreen: boolean; onToggleFullscreen: ()=>void; versionId: string }>=({ source, initialTranslation, onBack, onSave, onSaveEdit, taskTitle, username, nextVersionNumber, isFullscreen, onToggleFullscreen, versionId })=>{
   const [text, setText] = React.useState<string>(initialTranslation);
   const [saving, setSaving] = React.useState(false);
+  // Sync text with incoming props when version/context changes (e.g., refresh -> data loads)
+  React.useEffect(() => {
+    setText(initialTranslation || '');
+  }, [versionId, initialTranslation]);
   const [diffHtml, setDiffHtml] = React.useState<string>('');
   const [showDiff, setShowDiff] = React.useState<boolean>(false);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);