Update components/Sidebar.tsx

components/Sidebar.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+
+import React, { useState } from 'react';
 import { LAYER_DEFINITIONS } from '../constants';
 import { LayerType } from '../types';
-import { Box, Sparkles, LayoutTemplate, Circle } from 'lucide-react';
+import { Box, Sparkles, LayoutTemplate, Circle, Search, X } from 'lucide-react';
 
 interface SidebarProps {
   onOpenAIBuilder: () => void;
@@ -10,24 +11,40 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, isConnected }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
   const onDragStart = (event: React.DragEvent, layerType: LayerType) => {
     event.dataTransfer.setData('application/reactflow', layerType);
     event.dataTransfer.effectAllowed = 'move';
   };
 
   const categories = Array.from(new Set(Object.values(LAYER_DEFINITIONS).map(l => l.category)));
-  const categoryOrder = ['Core', 'Convolution', 'Recurrent', 'Transformer', 'Normalization', 'Utility'];
-  categories.sort((a, b) => categoryOrder.indexOf(a) - categoryOrder.indexOf(b));
+  const categoryOrder = ['Core', 'Convolution', 'Recurrent', 'Transformer', 'Normalization', 'GenAI', 'Utility', 'Merge'];
+  categories.sort((a, b) => {
+    const idxA = categoryOrder.indexOf(a);
+    const idxB = categoryOrder.indexOf(b);
+    if (idxA === -1) return 1;
+    if (idxB === -1) return -1;
+    return idxA - idxB;
+  });
+
+  const filteredLayers = Object.values(LAYER_DEFINITIONS).filter(layer => 
+    layer.label.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    layer.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    layer.type.toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
   return (
     <aside className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col h-full z-10">
-      <div className="p-4 border-b border-slate-800 bg-slate-900">
-        <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">
-          Architecture Agents
-        </h1>
-        <p className="text-xs text-slate-500 mt-1">AI-Powered Model Builder</p>
+      <div className="p-4 border-b border-slate-800 bg-slate-900 space-y-4">
+        <div>
+          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">
+            Architecture Agents
+          </h1>
+          <p className="text-xs text-slate-500 mt-1">AI-Powered Model Builder</p>
+        </div>
         
-        <div className="mt-4 grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-2 gap-2">
           <button 
             onClick={onOpenAIBuilder}
             className="flex flex-col items-center justify-center p-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-300 transition-colors group"
@@ -43,39 +60,94 @@ const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, is
             <span className="text-[10px] font-bold">Templates</span>
           </button>
         </div>
+
+        {/* Search Bar */}
+        <div className="relative">
+          <Search className="absolute left-3 top-2.5 text-slate-500" size={14} />
+          <input 
+            type="text" 
+            placeholder="Search layers..." 
+            className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-9 pr-8 py-2 text-xs text-slate-200 focus:outline-none focus:border-blue-500 transition-colors placeholder-slate-600"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          {searchQuery && (
+            <button 
+              onClick={() => setSearchQuery('')}
+              className="absolute right-2 top-2 text-slate-500 hover:text-slate-300"
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
       </div>
       
       <div className="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-thin scrollbar-thumb-slate-700">
-        {categories.map(category => (
-          <div key={category}>
-            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2">
-              {category}
-              <div className="h-px flex-1 bg-slate-800"></div>
+        
+        {searchQuery ? (
+          // Search Results View
+          <div className="space-y-2">
+            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3">
+              Search Results ({filteredLayers.length})
             </h3>
-            <div className="grid grid-cols-1 gap-2">
-              {Object.values(LAYER_DEFINITIONS)
-                .filter(l => l.category === category)
-                .map(layer => (
-                  <div
-                    key={layer.type}
-                    className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
-                    onDragStart={(event) => onDragStart(event, layer.type)}
-                    draggable
-                  >
-                    <div className="flex items-center gap-3 relative z-10">
-                      <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
-                        <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
-                      </div>
-                      <div>
-                        <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
-                        <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400">{layer.description}</div>
-                      </div>
+            {filteredLayers.length > 0 ? (
+              filteredLayers.map(layer => (
+                <div
+                  key={layer.type}
+                  className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
+                  onDragStart={(event) => onDragStart(event, layer.type)}
+                  draggable
+                >
+                  <div className="flex items-center gap-3 relative z-10">
+                    <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
+                      <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
+                      <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400 line-clamp-2">{layer.description}</div>
                     </div>
                   </div>
-                ))}
-            </div>
+                </div>
+              ))
+            ) : (
+              <div className="text-center text-slate-500 py-8 text-xs italic">
+                No layers found matching "{searchQuery}"
+              </div>
+            )}
           </div>
-        ))}
+        ) : (
+          // Categorized View
+          categories.map(category => (
+            <div key={category}>
+              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2">
+                {category}
+                <div className="h-px flex-1 bg-slate-800"></div>
+              </h3>
+              <div className="grid grid-cols-1 gap-2">
+                {Object.values(LAYER_DEFINITIONS)
+                  .filter(l => l.category === category)
+                  .map(layer => (
+                    <div
+                      key={layer.type}
+                      className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
+                      onDragStart={(event) => onDragStart(event, layer.type)}
+                      draggable
+                    >
+                      <div className="flex items-center gap-3 relative z-10">
+                        <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
+                          <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
+                        </div>
+                        <div>
+                          <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
+                          <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400">{layer.description}</div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))
+        )}
       </div>
       
       <div className="p-4 border-t border-slate-800 text-[10px] text-slate-500 text-center flex items-center justify-center gap-2">
@@ -86,4 +158,4 @@ const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, is
   );
 };
 
-export default Sidebar;
+export default Sidebar;