Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -50,6 +50,7 @@ const Refinity: React.FC = () => {
   const [newTaskSource, setNewTaskSource] = React.useState<string>('');
   const addTaskFileRef = React.useRef<HTMLInputElement | null>(null);
   const [addingSourceUploading, setAddingSourceUploading] = React.useState<boolean>(false);
+  const [taskMenuOpen, setTaskMenuOpen] = React.useState<boolean>(false);
 
   const task = React.useMemo(() => tasks.find(t => t.id === selectedTaskId) || tasks[0], [tasks, selectedTaskId]);
   const taskVersions = React.useMemo(() => versions.filter(v => v.taskId === (task?.id || '')), [versions, task?.id]);
@@ -194,15 +195,28 @@ const Refinity: React.FC = () => {
             <div className="md:col-span-1">
               <label className="block text-sm text-gray-700 mb-1">Task</label>
               <div className="relative">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
-                <div className="relative rounded-2xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]">
-                  <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),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-45" />
-                  <select value={selectedTaskId} onChange={(e)=>setSelectedTaskId(e.target.value)} className="relative z-10 w-full px-4 py-2 pr-10 bg-transparent text-gray-900 rounded-2xl appearance-none focus:outline-none">
-                    {tasks.map(t => <option key={t.id} value={t.id}>{t.title}</option>)}
-                  </select>
-                  <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-700">▾</div>
-                </div>
+                <button type="button" onClick={()=>setTaskMenuOpen(o=>!o)} className="relative w-full text-left inline-flex items-center justify-between px-4 py-2 rounded-2xl ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30">
+                  <span className="truncate text-gray-900">{tasks.find(t=>t.id===selectedTaskId)?.title || 'Select a task'}</span>
+                  <span className="ml-3 text-gray-700">▾</span>
+                </button>
+                {taskMenuOpen && (
+                  <div className="absolute z-20 mt-2 w-full">
+                    <div className="relative rounded-2xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-lg overflow-hidden">
+                      <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),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-45" />
+                      <ul className="relative max-h-64 overflow-auto">
+                        {tasks.map(t => (
+                          <li key={t.id}>
+                            <button type="button" onClick={()=>{ setSelectedTaskId(t.id); setTaskMenuOpen(false); }} className={`w-full text-left px-4 py-2 text-gray-900 hover:bg-white/30 ${selectedTaskId===t.id ? 'bg-indigo-600/20' : ''}`}>{t.title}</button>
+                          </li>
+                        ))}
+                        {tasks.length===0 && (
+                          <li className="px-4 py-3 text-sm text-gray-600">No tasks yet</li>
+                        )}
+                      </ul>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
             <div className="md:col-span-2">