Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -367,75 +367,33 @@ const Refinity: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative overflow-hidden py-10">
+          <div className="relative py-4">
             <div className="absolute left-2 top-1/2 -translate-y-1/2 z-10">
               <button onClick={()=> setFlowIndex((i)=> Math.max(i-1, 0))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">‹</button>
             </div>
             <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
               <button onClick={()=> setFlowIndex((i)=> Math.min(i+1, Math.max(taskVersions.length-1, 0)))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">›</button>
             </div>
-            <div
-              className="relative h-[360px] px-16"
-              onWheel={(e)=>{
-                if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
-                  if (e.deltaX > 0) setFlowIndex(i => Math.min(i+1, Math.max(taskVersions.length-1,0)));
-                  else setFlowIndex(i => Math.max(i-1, 0));
-                } else {
-                  if (e.deltaY > 0) setFlowIndex(i => Math.min(i+1, Math.max(taskVersions.length-1,0)));
-                  else setFlowIndex(i => Math.max(i-1, 0));
-                }
-              }}
-            >
-              {taskVersions.map((v, idx) => {
-                const offset = idx - focusedIndex;
-                const abs = Math.abs(offset);
-                const isCenter = abs === 0;
-                const delta = 580; // card width + gap
-                const translateX = offset * delta;
-                const scale = isCenter ? 1.02 : 1.0;
-                const opacity = isCenter ? 1 : Math.max(0.6, 1 - abs * 0.15);
-                const zIndex = 100 - abs;
-                const snippet = (v.content || '').slice(0, 180) + ((v.content || '').length > 180 ? '…' : '');
-                return (
-                  <div
-                    key={v.id}
-                    className="transition-transform duration-300 cursor-pointer absolute top-0 left-1/2"
-                    style={{
-                      transform: `translateX(${translateX - 260}px) translateX(-50%) scale(${scale})`,
-                      opacity,
-                      zIndex,
-                    }}
-                    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)] 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>
-                      {/* No reflection to preserve clarity */}
-                      {isCenter && (
+            <div className="overflow-x-auto px-16">
+              <div className="inline-flex gap-6 pb-2">
+                {taskVersions.map((v, idx) => {
+                  const snippet = (v.content || '').slice(0, 200) + ((v.content || '').length > 200 ? '…' : '');
+                  return (
+                    <div key={v.id} className="snap-center flex-shrink-0 w-[560px]">
+                      <div className="relative 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.08),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 leading-relaxed">{snippet}</div>
                         <div className="mt-4 flex gap-3">
-                          <button onClick={()=>{ setPreviewVersionId(v.id); 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">
-                            <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" />
-                            <span className="relative z-10">Full Text</span>
-                          </button>
-                          <button onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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 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" />
-                            <span className="relative z-10">Revise</span>
-                          </button>
+                          <button onClick={()=>{ setPreviewVersionId(v.id); 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">Full Text</button>
+                          <button onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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 active:translate-y-0.5 transition-all duration-200">Revise</button>
                           <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>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>