From ce3da9b7e033448cc99b09d342c987b4f03f2876 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 28 Jan 2025 19:49:41 -0800
Subject: [PATCH] Added toolbar block search

---
 app/w/components/toolbar/toolbar.tsx | 40 ++++++++++++++++++++++++----
 blocks/index.ts                      |  5 +++-
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/app/w/components/toolbar/toolbar.tsx b/app/w/components/toolbar/toolbar.tsx
index 70fbce9a0..d6abe1c5e 100644
--- a/app/w/components/toolbar/toolbar.tsx
+++ b/app/w/components/toolbar/toolbar.tsx
@@ -1,21 +1,51 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
+import { Input } from '@/components/ui/input'
+import { Search } from 'lucide-react'
 import { ToolbarTabs } from './components/toolbar-tabs/toolbar-tabs'
 import { ToolbarBlock } from './components/toolbar-block/toolbar-block'
-import { getBlocksByCategory } from '../../../../blocks'
-import { BlockCategory } from '../../../../blocks/types'
+import { getBlocksByCategory, getAllBlocks } from '../../../../blocks'
+import { BlockCategory, BlockConfig } from '../../../../blocks/types'
 
 export function Toolbar() {
   const [activeTab, setActiveTab] = useState<BlockCategory>('basic')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const blocks = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return getBlocksByCategory(activeTab)
+    }
+
+    const query = searchQuery.toLowerCase()
+    return getAllBlocks().filter(
+      (block) =>
+        block.toolbar.title.toLowerCase().includes(query) ||
+        block.toolbar.description.toLowerCase().includes(query)
+    )
+  }, [searchQuery, activeTab])
 
   return (
     <div className="fixed left-14 top-0 z-1 hidden h-full w-64 border-r bg-background sm:block">
-      <ToolbarTabs activeTab={activeTab} onTabChange={setActiveTab} />
+      <div className="px-4 pt-4">
+        <div className="relative">
+          <Search className="absolute left-3 top-[50%] h-4 w-4 -translate-y-[50%] text-muted-foreground" />
+          <Input
+            placeholder="Search blocks..."
+            className="pl-9"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {!searchQuery && (
+        <ToolbarTabs activeTab={activeTab} onTabChange={setActiveTab} />
+      )}
 
       <div className="p-4">
         <div className="flex flex-col gap-3">
-          {getBlocksByCategory(activeTab).map((block) => (
+          {blocks.map((block) => (
             <ToolbarBlock key={block.type} config={block} />
           ))}
         </div>
diff --git a/blocks/index.ts b/blocks/index.ts
index d84cf7fcf..4bb63d299 100644
--- a/blocks/index.ts
+++ b/blocks/index.ts
@@ -37,4 +37,7 @@ export const getAllBlockTypes = (): string[] =>
   Object.keys(blocks)
 
 export const isValidBlockType = (type: string): type is string =>
-  type in blocks
\ No newline at end of file
+  type in blocks
+
+export const getAllBlocks = (): BlockConfig[] =>
+  Object.values(blocks)
\ No newline at end of file