Upload components/Toolbar.js with huggingface_hub

components/Toolbar.js

@@ -1,90 +1,120 @@
 import { useState } from 'react'
-import { Layers, Database, Activity, Filter, Settings, ChevronDown } from 'lucide-react'
+import { 
+  Database, Layers, Activity, Filter, Settings, ChevronDown, 
+  Image, Type, Hash, Share2, Brain, Zap, BarChart3 
+} from 'lucide-react'
 
 const toolbarItems = [
   {
     category: 'Input',
     icon: Database,
     color: 'text-blue-600',
-    items: ['Input Layer', 'Embedding', 'Data Augmentation']
+    bgColor: 'bg-blue-50',
+    items: [
+      { name: 'Input Layer', icon: Image, desc: 'Input data layer' },
+      { name: 'Embedding', icon: Type, desc: 'Embedding layer' },
+      { name: 'Data Augmentation', icon: Zap, desc: 'Augment training data' }
+    ]
   },
   {
     category: 'Core',
     icon: Layers,
     color: 'text-purple-600',
-    items: ['Dense', 'Convolution', 'Recurrent', 'Transformer']
+    bgColor: 'bg-purple-50',
+    items: [
+      { name: 'Dense', icon: BarChart3, desc: 'Fully connected layer' },
+      { name: 'Convolution', icon: Filter, desc: 'Conv2D layer' },
+      { name: 'Recurrent', icon: Share2, desc: 'LSTM/GRU layer' },
+      { name: 'Transformer', icon: Brain, desc: 'Attention layer' }
+    ]
   },
   {
     category: 'Activation',
     icon: Activity,
     color: 'text-green-600',
-    items: ['ReLU', 'Sigmoid', 'Tanh', 'Softmax']
+    bgColor: 'bg-green-50',
+    items: [
+      { name: 'ReLU', icon: Zap, desc: 'Rectified Linear Unit' },
+      { name: 'Sigmoid', icon: Activity, desc: 'Sigmoid activation' },
+      { name: 'Tanh', icon: BarChart3, desc: 'Hyperbolic tangent' },
+      { name: 'Softmax', icon: Layers, desc: 'Softmax activation' }
+    ]
   },
   {
     category: 'Regularization',
     icon: Filter,
     color: 'text-orange-600',
-    items: ['Dropout', 'Batch Norm', 'Layer Norm']
+    bgColor: 'bg-orange-50',
+    items: [
+      { name: 'Dropout', icon: Filter, desc: 'Dropout regularization' },
+      { name: 'Batch Norm', icon: BarChart3, desc: 'Batch normalization' },
+      { name: 'Layer Norm', icon: Layers, desc: 'Layer normalization' }
+    ]
   },
   {
     category: 'Output',
     icon: Settings,
     color: 'text-red-600',
-    items: ['Output Layer', 'Loss Function', 'Metric']
+    bgColor: 'bg-red-50',
+    items: [
+      { name: 'Output Layer', icon: Share2, desc: 'Final output layer' },
+      { name: 'Loss Function', icon: Activity, desc: 'Loss/metric' },
+      { name: 'Metric', icon: BarChart3, desc: 'Evaluation metric' }
+    ]
   }
 ]
 
-export default function Toolbar() {
-  const [expandedCategory, setExpandedCategory] = useState(null)
+export default function Toolbar({ sidebarOpen, setSidebarOpen }) {
+  const [expandedCategory, setExpandedCategory] = useState('Core')
 
   const handleDragStart = (e, itemType) => {
     e.dataTransfer.setData('node-type', itemType)
+    e.dataTransfer.effectAllowed = 'copy'
   }
 
   return (
-    <div className="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto" data-tutorial-target="toolbar">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">Layers & Nodes</h2>
+    <>
+      {/* Mobile Sidebar */}
+      <div className={`fixed inset-0 z-40 lg:relative lg:inset-auto ${sidebarOpen ? 'block' : 'hidden'}`}>
+        <div className="absolute inset-0 bg-black bg-opacity-50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+        <div className="absolute left-0 top-0 h-full w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto z-50 lg:relative lg:z-auto">
+          <ToolbarContent 
+            expandedCategory={expandedCategory} 
+            setExpandedCategory={setExpandedCategory}
+            handleDragStart={handleDragStart}
+          />
+        </div>
+      </div>
+
+      {/* Desktop Toolbar */}
+      <div className="hidden lg:block w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto" data-tutorial-target="toolbar">
+        <ToolbarContent 
+          expandedCategory={expandedCategory} 
+          setExpandedCategory={setExpandedCategory}
+          handleDragStart={handleDragStart}
+        />
+      </div>
+    </>
+  )
+}
+
+function ToolbarContent({ expandedCategory, setExpandedCategory, handleDragStart }) {
+  return (
+    <>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold text-gray-900">Layers & Nodes</h2>
+        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+      </div>
       <div className="space-y-2">
         {toolbarItems.map((category) => {
           const Icon = category.icon
           const isExpanded = expandedCategory === category.category
           
           return (
-            <div key={category.category} className="border border-gray-200 rounded-lg overflow-hidden">
+            <div key={category.category} className="border border-gray-200 rounded-lg overflow-hidden transition-all">
               <button
                 onClick={() => setExpandedCategory(isExpanded ? null : category.category)}
-                className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors"
+                className={`w-full px-4 py-3 flex items-center justify-between transition-colors ${isExpanded ? category.bgColor : 'hover:bg-gray-50'}`}
               >
                 <div className="flex items-center space-x-3">
-                  <Icon className={`w-5 h-5 ${category.color}`} />
-                  <span className="font-medium text-gray-900">{category.category}</span>
-                </div>
-                <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
-              </button>
-              
-              {isExpanded && (
-                <div className="bg-gray-50 p-2 space-y-1">
-                  {category.items.map((item) => (
-                    <div
-                      key={item}
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, item)}
-                      className="px-4 py-2 text-sm text-gray-700 hover:bg-white rounded-lg cursor-move transition-colors border border-transparent hover:border-gray-300"
-                    >
-                      {item}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        })}
-      </div>
-      
-      <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
-        <h3 className="font-semibold text-blue-900 mb-2">Quick Tip</h3>
-        <p className="text-sm text-blue-800">Drag any layer onto the canvas to start building your architecture!</p>
-      </div>
-    </div>
-  )
-}
+                  <Icon className={`w-5 h