Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -825,6 +825,8 @@ const Refinity: React.FC = () => {
           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)}
         />
       )}
       </div>
@@ -832,7 +834,7 @@ const Refinity: React.FC = () => {
   );
 };
 
-const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void; taskTitle: string; username: string; nextVersionNumber: number }>=({ source, initialTranslation, onBack, onSave, taskTitle, username, nextVersionNumber })=>{
+const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void; taskTitle: string; username: string; nextVersionNumber: number; isFullscreen: boolean; onToggleFullscreen: ()=>void }>=({ source, initialTranslation, onBack, onSave, taskTitle, username, nextVersionNumber, isFullscreen, onToggleFullscreen })=>{
   const [text, setText] = React.useState<string>(initialTranslation);
   const [saving, setSaving] = React.useState(false);
   const [diffHtml, setDiffHtml] = React.useState<string>('');
@@ -842,6 +844,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const revBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const sourceRef = React.useRef<HTMLDivElement>(null);
   const [textareaHeight, setTextareaHeight] = React.useState('420px');
+  const [commentsOpen, setCommentsOpen] = React.useState(false);
+  const [newComment, setNewComment] = React.useState('');
+  const [comments, setComments] = React.useState<Array<{ id: string; text: string; ts: number }>>([]);
 
   React.useEffect(() => {
     if (sourceRef.current) {
@@ -906,7 +911,12 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           </div>
         </div>
         <div className="w-1/2">
-          <div className="mb-2 text-gray-700 text-sm">Translation</div>
+          <div className="mb-2 text-gray-700 text-sm flex items-center justify-between">
+            <span>Translation</span>
+            <button onClick={onToggleFullscreen} className="inline-flex items-center px-2 py-1 text-xs rounded-xl bg-white/60 ring-1 ring-gray-200 text-gray-800 hover:bg-white">
+              {isFullscreen ? 'Windowed' : 'Full Screen'}
+            </button>
+          </div>
           <textarea 
             value={text} 
             onChange={(e)=>setText(e.target.value)} 
@@ -922,8 +932,25 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
             <div className="relative inline-block align-top">
               <button ref={revBtnRef} onClick={async (e)=>{ e.preventDefault(); e.stopPropagation(); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${(taskTitle||'Task').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}_${(username||'User').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}.docx`; const body={ current: text||'', filename }; const resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); const url=window.URL.createObjectURL(blob); const link=document.createElement('a'); link.href=url; link.download=filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);} catch {} }} 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>
             </div>
+            <button onClick={()=>setCommentsOpen(o=>!o)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 hover:bg-white/50 transition-all duration-200">Comments</button>
             <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>
           </div>
+          {commentsOpen && (
+            <div className="mt-3 rounded-xl border border-gray-200 bg-white/60 p-3">
+              <div className="text-sm text-gray-800 mb-2">Add a brief comment (optional)</div>
+              <div className="flex gap-2">
+                <input value={newComment} onChange={(e)=>setNewComment(e.target.value)} className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm" placeholder="Your comment…" />
+                <button onClick={()=>{ const t=newComment.trim(); if(t){ setComments(prev=>[{ id: String(Date.now()), text: t, ts: Date.now() }, ...prev]); setNewComment(''); } }} className="px-3 py-2 text-xs rounded-xl bg-indigo-600/70 text-white hover:bg-indigo-700">Add</button>
+              </div>
+              {comments.length>0 && (
+                <div className="mt-3 space-y-2 max-h-40 overflow-auto">
+                  {comments.map(c=>(
+                    <div key={c.id} className="text-xs text-gray-700 bg-white rounded-lg border border-gray-200 p-2">{c.text}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
           {showDiff && (
             <div className="mt-6 relative rounded-xl">
               <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />