Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Swiper as SwiperRoot, SwiperSlide } from 'swiper/react';
 import type { Swiper as SwiperInstance } from 'swiper';
-import { EffectCoverflow, Navigation, A11y } from 'swiper/modules';
+import { EffectCoverflow, Navigation, Pagination, A11y } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/effect-coverflow';
 import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import { api } from '../services/api';
 
 type Stage = 'task' | 'flow' | 'preview' | 'editor';
@@ -368,26 +369,32 @@ const Refinity: React.FC = () => {
           </div>
           <div className="relative">
             <SwiperRoot
-              modules={[EffectCoverflow, Navigation, A11y]}
+              modules={[EffectCoverflow, Navigation, Pagination, A11y]}
               effect="coverflow"
               onSlideChange={(s: SwiperInstance)=> setFlowIndex(s.activeIndex)}
               onAfterInit={(s: SwiperInstance)=> setFlowIndex(s.activeIndex)}
               navigation
+              pagination={{ clickable: true }}
               centeredSlides
-              slidesPerView={1.2}
-              spaceBetween={24}
-              coverflowEffect={{ rotate: 0, stretch: 40, depth: 80, modifier: 1, slideShadows: false }}
-              className="!px-8"
+              slidesPerView={'auto'}
+              spaceBetween={16}
+              breakpoints={{ 640: { spaceBetween: 16 }, 1024: { spaceBetween: 24 }, 1536: { spaceBetween: 32 } }}
+              grabCursor
+              coverflowEffect={{ rotate: 0, stretch: 0, depth: 120, modifier: 1, slideShadows: false }}
+              className="!px-6"
+              style={{ height: 'clamp(420px, 70vh, 820px)' }}
             >
               {taskVersions.map((v, idx) => {
                 const snippet = (v.content || '').slice(0, 220) + ((v.content || '').length > 220 ? '…' : '');
                 const isCenter = idx === flowIndex;
                 return (
-                  <SwiperSlide key={v.id} style={{ width: 560 }}>
-                    <div className="relative rounded-xl p-5 bg-white ring-1 ring-gray-200 shadow-lg text-base">
+                  <SwiperSlide key={v.id} style={{ width: 'clamp(320px, 56vw, 720px)' }}>
+                    <div className="relative h-full rounded-2xl p-5 bg-white ring-1 ring-gray-200 shadow-xl text-base">
+                      <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),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-30" />
                       <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="text-gray-900 whitespace-pre-wrap break-words leading-relaxed max-h-[calc(100%-56px)] overflow-auto pr-1">{snippet}</div>
                       {isCenter && (
                         <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">Full Text</button>