Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -125,6 +125,7 @@ const Refinity: React.FC = () => {
       const newVersion: Version = { id: saved._id, taskId: saved.taskId, originalAuthor: saved.originalAuthor, revisedBy: saved.revisedBy, versionNumber: saved.versionNumber, content: saved.content, parentVersionId: saved.parentVersionId };
       setVersions(prev => [...prev, newVersion]);
       setCurrentVersionId(newVersion.id);
+      setCurrentVersionId(null);
       setStage('flow');
     } finally {
       setUploading(false);
@@ -185,6 +186,7 @@ const Refinity: React.FC = () => {
       setVersions(prev => [...prev, newVersion]);
       setCurrentVersionId(newVersion.id);
       setPastedTranslation('');
+      setCurrentVersionId(null);
       setStage('flow');
     } catch {}
   };
@@ -221,6 +223,7 @@ const Refinity: React.FC = () => {
       };
       setVersions(prev => [...prev, v]);
       setCurrentVersionId(v.id);
+      setCurrentVersionId(null);
       setStage('flow');
     } catch {
       // no-op; keep user in editor if needed
@@ -387,13 +390,13 @@ const Refinity: React.FC = () => {
                 const offset = idx - focusedIndex;
                 const abs = Math.abs(offset);
                 const isCenter = abs === 0;
-                const translateX = offset * 260; // spacing between cards
-                const rotateY = -offset * 45; // angle for side cards
-                const translateZ = -abs * 140; // push side cards back a bit
-                const scale = isCenter ? 1.08 : 0.9;
+                const translateX = offset * 300; // spacing between cards (wider)
+                const rotateY = -offset * 35; // gentler angle
+                const translateZ = -abs * 120; // less depth to avoid squish
+                const scale = isCenter ? 1.02 : 1.0; // minimal size change
                 const opacity = isCenter ? 1 : Math.max(0.6, 1 - abs * 0.15);
                 const zIndex = 100 - abs;
-                const snippet = (v.content || '').slice(0, 140) + ((v.content || '').length > 140 ? '…' : '');
+                const snippet = (v.content || '').slice(0, 180) + ((v.content || '').length > 180 ? '…' : '');
                 return (
                   <div
                     key={v.id}
@@ -403,9 +406,9 @@ const Refinity: React.FC = () => {
                       opacity,
                       zIndex,
                     }}
-                    onClick={() => { if (!isCenter) setFlowIndex(idx); }}
+                    onClick={() => { if (!isCenter) setFlowIndex(idx); else setPreviewVersionId(v.id); }}
                   >
-                    <div className="relative w-[520px] rounded-xl p-5 bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[0_20px_40px_rgba(0,0,0,0.15),inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]">
+                    <div className="relative w-[520px] rounded-xl p-5 bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[0_20px_40px_rgba(0,0,0,0.15),inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] text-base">
                       <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
                       <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
                       <div className="text-gray-900 whitespace-pre-wrap break-words min-h-[100px]">{snippet}</div>
@@ -429,6 +432,11 @@ const Refinity: React.FC = () => {
                           <button onClick={()=>{ setPreviewVersionId(v.id); setShowPreviewDiff(true); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">Compare</button>
                         </div>
                       )}
+                      {!isCenter && (
+                        <div className="mt-4 text-center">
+                          <button onClick={()=> setFlowIndex(idx)} className="text-sm text-indigo-700 hover:underline">Center</button>
+                        </div>
+                      )}
                     </div>
                   </div>
                 );