Upload folder using huggingface_hub

client/src/components/Layout.tsx

@@ -168,8 +168,8 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       {/* Shell: Sidebar + Content */}
       <div className="flex">
         {/* Sidebar */}
-        <aside className="hidden md:flex md:flex-col w-60 min-h-[calc(100vh-56px)] border-r border-ui-border bg-ui-panel">
-          <nav className="p-4 space-y-2 flex-1">
+        <aside className="hidden md:flex md:flex-col w-60 sticky top-14 h-[calc(100vh-56px)] border-r border-ui-border bg-ui-panel self-start">
+          <nav className="p-4 space-y-2 flex-1 overflow-auto">
             {navigation.map((item) => {
               const isActive = location.pathname === item.href;
               return (
@@ -177,7 +177,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                   key={item.name}
                   to={item.href}
                   className={`flex items-center px-3 py-2 rounded-lg text-[0.95rem] font-medium transition-colors ${
-                    isActive ? 'bg-ui-bg text-ui-text shadow-[0_0_6px_rgba(20,163,255,0.35)]' : 'text-ui-text/80 hover:bg-ui-panel/60'
+                    isActive ? 'bg-transparent text-ui-text ring-1 ring-ui-neonBlue/35 shadow-[0_0_10px_rgba(14,165,233,0.45)]' : 'text-ui-text/80 hover:ring-1 hover:ring-ui-neonBlue/20'
                   }`}
                 >
                   <item.icon className="h-5 w-5 mr-3 text-ui-neonCyan" />
@@ -186,7 +186,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
               );
             })}
           </nav>
-          <div className="p-3 border-t border-ui-border">
+          <div className="p-3 border-t border-ui-border mt-auto">
             {user ? (
               <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-text/80 hover:bg-ui-panel/60">
                 <PowerIcon className="h-4 w-4 mr-2" />
@@ -216,7 +216,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           </div>
         </div>
       )}
-      <HitokotoBar />
+      {/* <HitokotoBar /> */}
     </div>
   );
 };

client/src/pages/Dashboard.tsx

@@ -167,7 +167,7 @@ const Dashboard: React.FC = () => {
               </p>
               <Link
                 to="/manage"
-                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-ui-neonBlue hover:bg-ui-neonBlue/90"
               >
                 Go to Manage
               </Link>

client/src/pages/TutorialTasks.tsx

@@ -1522,7 +1522,7 @@ const TutorialTasks: React.FC = () => {
                       <div className="flex space-x-3">
                         <button
                           onClick={startAddingTask}
-                          className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                          className="btn-primary px-6 py-3 flex items-center space-x-2 shadow-sm"
                         >
                           <PlusIcon className="h-5 w-5" />
                           <span className="font-medium">Add Task</span>
@@ -1530,7 +1530,7 @@ const TutorialTasks: React.FC = () => {
                         {selectedWeek >= 3 && (
                           <button
                             onClick={startAddingImage}
-                            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                            className="btn-primary px-6 py-3 flex items-center space-x-2 shadow-sm"
                           >
                             <PlusIcon className="h-5 w-5" />
                             <span className="font-medium">Add Image</span>
@@ -1780,7 +1780,7 @@ const TutorialTasks: React.FC = () => {
                                         placeholder="Enter your group's translation here..."
                                       />
                                     <div className="flex justify-end mt-2">
-                                      <button onClick={() => handleSubmitTranslation(task._id)} disabled={submitting[task._id]} className="bg-indigo-500 hover:bg-indigo-600 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
+                                      <button onClick={() => handleSubmitTranslation(task._id)} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
                                     </div>
                                   </div>
                                 )}