Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Swiper as SwiperRoot, SwiperSlide } from 'swiper/react';
 import type { Swiper as SwiperInstance } from 'swiper';
@@ -766,6 +767,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const [diffHtml, setDiffHtml] = React.useState<string>('');
   const [showDiff, setShowDiff] = React.useState<boolean>(false);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);
+  const [revMenuPos, setRevMenuPos] = React.useState<{ left: number; top: number } | null>(null);
+  const revBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const sourceRef = React.useRef<HTMLDivElement>(null);
   const [textareaHeight, setTextareaHeight] = React.useState('420px');
 
@@ -825,8 +828,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
         <div className="w-1/2">
           <div className="mb-2 text-gray-700 text-sm">Source</div>
           <div className="relative rounded-lg overflow-hidden">
-            <div className="absolute inset-0 rounded-lg" style={{ background: 'radial-gradient(120%_120%_at_0%_0%, #e0e7ff 0%, #ffffff 55%, #eef2ff 100%)' }} />
-            <div ref={sourceRef} className="relative rounded-lg bg-white/70 backdrop-blur-md ring-1 ring-inset ring-indigo-200 shadow p-4 min-h-[420px] whitespace-pre-wrap text-gray-900">
+            <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">
               {source}
             </div>
           </div>
@@ -846,12 +849,12 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           <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>
             <div className="relative inline-block align-top">
-              <button onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); setRevDownloadOpen(v=>!v); }} className="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">Download ▾</button>
-              {revDownloadOpen && (
-                <div className="absolute right-0 translate-y-2 w-44 rounded-md border border-gray-200 bg-white shadow-lg z-50 text-left">
+              <button ref={revBtnRef} onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); const r=(e.currentTarget as HTMLElement).getBoundingClientRect(); setRevMenuPos({ left: r.left, top: r.bottom + 8 }); setRevDownloadOpen(v=>!v); }} className="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">Download ▾</button>
+              {revDownloadOpen && revMenuPos && createPortal(
+                <div onClick={(e)=>e.stopPropagation()} style={{ position: 'fixed', left: revMenuPos.left, top: revMenuPos.top, zIndex: 10000 }} className="w-44 rounded-md border border-gray-200 bg-white shadow-lg text-left">
                   <button onClick={(e)=>{ e.preventDefault(); setRevDownloadOpen(false); downloadWithTrackChanges(); }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Track Changes</button>
                   <button onClick={(e)=>{ e.preventDefault(); setRevDownloadOpen(false); compareNow(); }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Inline Diff (Preview)</button>
-                </div>
+                </div>, document.body
               )}
             </div>
             <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>