chore: add devtools middleware to search modal store

apps/sim/stores/modals/search/store.ts

@@ -1,5 +1,6 @@
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
 import { getToolOperationsIndex } from '@/lib/search/tool-operations'
 import { getTriggersForSidebar } from '@/lib/workflows/triggers/trigger-utils'
 import { getAllBlocks } from '@/blocks'
@@ -20,132 +21,137 @@ const initialData: SearchData = {
   isInitialized: false,
 }
 
-export const useSearchModalStore = create<SearchModalState>((set, get) => ({
-  isOpen: false,
-  data: initialData,
+export const useSearchModalStore = create<SearchModalState>()(
+  devtools(
+    (set, get) => ({
+      isOpen: false,
+      data: initialData,
 
-  setOpen: (open: boolean) => {
-    set({ isOpen: open })
-  },
+      setOpen: (open: boolean) => {
+        set({ isOpen: open })
+      },
 
-  open: () => {
-    set({ isOpen: true })
-  },
+      open: () => {
+        set({ isOpen: true })
+      },
 
-  close: () => {
-    set({ isOpen: false })
-  },
+      close: () => {
+        set({ isOpen: false })
+      },
 
-  initializeData: (filterBlocks) => {
-    if (get().data.isInitialized) return
+      initializeData: (filterBlocks) => {
+        if (get().data.isInitialized) return
 
-    const allBlocks = getAllBlocks()
-    const filteredAllBlocks = filterBlocks(allBlocks) as typeof allBlocks
+        const allBlocks = getAllBlocks()
+        const filteredAllBlocks = filterBlocks(allBlocks) as typeof allBlocks
 
-    const regularBlocks: SearchBlockItem[] = []
-    const tools: SearchBlockItem[] = []
-    const docs: SearchDocItem[] = []
+        const regularBlocks: SearchBlockItem[] = []
+        const tools: SearchBlockItem[] = []
+        const docs: SearchDocItem[] = []
 
-    for (const block of filteredAllBlocks) {
-      if (block.hideFromToolbar) continue
+        for (const block of filteredAllBlocks) {
+          if (block.hideFromToolbar) continue
 
-      const searchItem: SearchBlockItem = {
-        id: block.type,
-        name: block.name,
-        description: block.description || '',
-        icon: block.icon,
-        bgColor: block.bgColor || '#6B7280',
-        type: block.type,
-      }
+          const searchItem: SearchBlockItem = {
+            id: block.type,
+            name: block.name,
+            description: block.description || '',
+            icon: block.icon,
+            bgColor: block.bgColor || '#6B7280',
+            type: block.type,
+          }
 
-      if (block.category === 'blocks' && block.type !== 'starter') {
-        regularBlocks.push(searchItem)
-      } else if (block.category === 'tools') {
-        tools.push(searchItem)
-      }
+          if (block.category === 'blocks' && block.type !== 'starter') {
+            regularBlocks.push(searchItem)
+          } else if (block.category === 'tools') {
+            tools.push(searchItem)
+          }
 
-      if (block.docsLink) {
-        docs.push({
-          id: `docs-${block.type}`,
-          name: block.name,
-          icon: block.icon,
-          href: block.docsLink,
+          if (block.docsLink) {
+            docs.push({
+              id: `docs-${block.type}`,
+              name: block.name,
+              icon: block.icon,
+              href: block.docsLink,
+            })
+          }
+        }
+
+        const specialBlocks: SearchBlockItem[] = [
+          {
+            id: 'loop',
+            name: 'Loop',
+            description: 'Create a Loop',
+            icon: RepeatIcon,
+            bgColor: '#2FB3FF',
+            type: 'loop',
+          },
+          {
+            id: 'parallel',
+            name: 'Parallel',
+            description: 'Parallel Execution',
+            icon: SplitIcon,
+            bgColor: '#FEE12B',
+            type: 'parallel',
+          },
+        ]
+
+        const blocks = [...regularBlocks, ...(filterBlocks(specialBlocks) as SearchBlockItem[])]
+
+        const allTriggers = getTriggersForSidebar()
+        const filteredTriggers = filterBlocks(allTriggers) as typeof allTriggers
+        const priorityOrder = ['Start', 'Schedule', 'Webhook']
+
+        const sortedTriggers = [...filteredTriggers].sort((a, b) => {
+          const aIndex = priorityOrder.indexOf(a.name)
+          const bIndex = priorityOrder.indexOf(b.name)
+          const aHasPriority = aIndex !== -1
+          const bHasPriority = bIndex !== -1
+
+          if (aHasPriority && bHasPriority) return aIndex - bIndex
+          if (aHasPriority) return -1
+          if (bHasPriority) return 1
+          return a.name.localeCompare(b.name)
         })
-      }
-    }
 
-    const specialBlocks: SearchBlockItem[] = [
-      {
-        id: 'loop',
-        name: 'Loop',
-        description: 'Create a Loop',
-        icon: RepeatIcon,
-        bgColor: '#2FB3FF',
-        type: 'loop',
+        const triggers = sortedTriggers.map(
+          (block): SearchBlockItem => ({
+            id: block.type,
+            name: block.name,
+            description: block.description || '',
+            icon: block.icon,
+            bgColor: block.bgColor || '#6B7280',
+            type: block.type,
+            config: block,
+          })
+        )
+
+        const allowedBlockTypes = new Set(tools.map((t) => t.type))
+        const toolOperations: SearchToolOperationItem[] = getToolOperationsIndex()
+          .filter((op) => allowedBlockTypes.has(op.blockType))
+          .map((op) => ({
+            id: op.id,
+            name: op.operationName,
+            searchValue: `${op.serviceName} ${op.operationName}`,
+            icon: op.icon,
+            bgColor: op.bgColor,
+            blockType: op.blockType,
+            operationId: op.operationId,
+            keywords: op.aliases,
+          }))
+
+        set({
+          data: {
+            blocks,
+            tools,
+            triggers,
+            toolOperations,
+            docs,
+            isInitialized: true,
+          },
+        })
       },
-      {
-        id: 'parallel',
-        name: 'Parallel',
-        description: 'Parallel Execution',
-        icon: SplitIcon,
-        bgColor: '#FEE12B',
-        type: 'parallel',
-      },
-    ]
-
-    const blocks = [...regularBlocks, ...(filterBlocks(specialBlocks) as SearchBlockItem[])]
-
-    const allTriggers = getTriggersForSidebar()
-    const filteredTriggers = filterBlocks(allTriggers) as typeof allTriggers
-    const priorityOrder = ['Start', 'Schedule', 'Webhook']
-
-    const sortedTriggers = [...filteredTriggers].sort((a, b) => {
-      const aIndex = priorityOrder.indexOf(a.name)
-      const bIndex = priorityOrder.indexOf(b.name)
-      const aHasPriority = aIndex !== -1
-      const bHasPriority = bIndex !== -1
-
-      if (aHasPriority && bHasPriority) return aIndex - bIndex
-      if (aHasPriority) return -1
-      if (bHasPriority) return 1
-      return a.name.localeCompare(b.name)
-    })
-
-    const triggers = sortedTriggers.map(
-      (block): SearchBlockItem => ({
-        id: block.type,
-        name: block.name,
-        description: block.description || '',
-        icon: block.icon,
-        bgColor: block.bgColor || '#6B7280',
-        type: block.type,
-        config: block,
-      })
-    )
-
-    const allowedBlockTypes = new Set(tools.map((t) => t.type))
-    const toolOperations: SearchToolOperationItem[] = getToolOperationsIndex()
-      .filter((op) => allowedBlockTypes.has(op.blockType))
-      .map((op) => ({
-        id: op.id,
-        name: op.operationName,
-        searchValue: `${op.serviceName} ${op.operationName}`,
-        icon: op.icon,
-        bgColor: op.bgColor,
-        blockType: op.blockType,
-        operationId: op.operationId,
-        keywords: op.aliases,
-      }))
-
-    set({
-      data: {
-        blocks,
-        tools,
-        triggers,
-        toolOperations,
-        docs,
-        isInitialized: true,
-      },
-    })
-  },
-}))
+    }),
+    { name: 'search-modal-store' }
+  )
+)