Switched from basic/advanced to blocks/tools and added toolbar tabs dynamic width calculation

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cursorrules
+.cursorrules

app/w/components/toolbar/components/toolbar-tabs/toolbar-tabs.tsx

@@ -1,29 +1,55 @@
 'use client'
 
+import { useRef, useEffect, useState } from 'react'
+
 interface ToolbarTabsProps {
-  activeTab: 'basic' | 'advanced'
+  activeTab: 'blocks' | 'tools'
-  onTabChange: (tab: 'basic' | 'advanced') => void
+  onTabChange: (tab: 'blocks' | 'tools') => void
 }
 
 export function ToolbarTabs({ activeTab, onTabChange }: ToolbarTabsProps) {
+  const blocksRef = useRef<HTMLButtonElement>(null)
+  const toolsRef = useRef<HTMLButtonElement>(null)
+  const [underlineStyle, setUnderlineStyle] = useState({
+    width: 0,
+    transform: '',
+  })
+
+  useEffect(() => {
+    const activeRef = activeTab === 'blocks' ? blocksRef : toolsRef
+    if (activeRef.current) {
+      const rect = activeRef.current.getBoundingClientRect()
+      const parentRect =
+        activeRef.current.parentElement?.getBoundingClientRect()
+      const offsetLeft = parentRect ? rect.left - parentRect.left : 0
+
+      setUnderlineStyle({
+        width: rect.width,
+        transform: `translateX(${offsetLeft}px)`,
+      })
+    }
+  }, [activeTab])
+
   return (
     <div className="relative pt-5">
       <div className="flex gap-8 px-6">
         <button
-          onClick={() => onTabChange('basic')}
+          ref={blocksRef}
+          onClick={() => onTabChange('blocks')}
           className={`text-sm font-medium transition-colors hover:text-black ${
-            activeTab === 'basic' ? 'text-black' : 'text-muted-foreground'
+            activeTab === 'blocks' ? 'text-black' : 'text-muted-foreground'
           }`}
         >
-          Basic
+          Blocks
         </button>
         <button
-          onClick={() => onTabChange('advanced')}
+          ref={toolsRef}
+          onClick={() => onTabChange('tools')}
           className={`text-sm font-medium transition-colors hover:text-black ${
-            activeTab === 'advanced' ? 'text-black' : 'text-muted-foreground'
+            activeTab === 'tools' ? 'text-black' : 'text-muted-foreground'
           }`}
         >
-          Advanced
+          Tools
         </button>
       </div>
 
@@ -32,10 +58,8 @@ export function ToolbarTabs({ activeTab, onTabChange }: ToolbarTabsProps) {
         <div
           className="absolute bottom-0 h-[1.5px] bg-black transition-transform duration-200"
           style={{
-            width: activeTab === 'advanced' ? '68px' : '38px',
+            width: `${underlineStyle.width}px`,
-            transform: `translateX(${
+            transform: underlineStyle.transform,
-              activeTab === 'advanced' ? '91px' : '23.75px'
-            })`,
           }}
         />
       </div>

app/w/components/toolbar/toolbar.tsx

@@ -15,7 +15,7 @@ import {
 import { ScrollArea } from '@/components/ui/scroll-area'
 
 export function Toolbar() {
-  const [activeTab, setActiveTab] = useState<BlockCategory>('basic')
+  const [activeTab, setActiveTab] = useState<BlockCategory>('blocks')
   const [searchQuery, setSearchQuery] = useState('')
   const [isCollapsed, setIsCollapsed] = useState(false)
 

blocks/blocks/agent.ts

@@ -10,7 +10,7 @@ export const AgentBlock: BlockConfig<ChatResponse> = {
     description: 'Use any LLM',
     bgColor: '#7F2FFF',
     icon: AgentIcon,
-    category: 'basic',
+    category: 'blocks',
   },
   tools: {
     access: ['openai.chat', 'anthropic.chat', 'google.chat', 'xai.chat', 'deepseek.chat', 'deepseek.reasoner'],

blocks/blocks/api.ts

@@ -9,7 +9,7 @@ export const ApiBlock: BlockConfig<RequestResponse> = {
     description: 'Use any API',
     bgColor: '#2F55FF',
     icon: ApiIcon,
-    category: 'basic',
+    category: 'blocks',
   },
   tools: {
     access: ['http.request']

blocks/blocks/crewai.ts

@@ -9,7 +9,7 @@ export const CrewAIVisionBlock: BlockConfig<VisionResponse> = {
     description: 'Analyze images with vision models',
     bgColor: '#FF5A50',
     icon: CrewAIIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['crewai.vision']

blocks/blocks/firecrawl.ts

@@ -9,7 +9,7 @@ export const FirecrawlScrapeBlock: BlockConfig<ScrapeResponse> = {
     description: 'Scrape website content',
     bgColor: '#FF613A',
     icon: FirecrawlIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['firecrawl.scrape']

blocks/blocks/function.ts

@@ -9,7 +9,7 @@ export const FunctionBlock: BlockConfig<CodeExecutionOutput> = {
     description: 'Add custom logic',
     bgColor: '#FF8D2F',
     icon: CodeIcon,
-    category: 'advanced',
+    category: 'blocks',
   },
   tools: {
     access: ['function.execute']

blocks/blocks/github.ts

@@ -9,7 +9,7 @@ export const GitHubBlock: BlockConfig<RepoInfoResponse> = {
     description: 'Fetch GitHub repository information and metadata',
     bgColor: '#ffffff',
     icon: GithubIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['github.repoinfo']

blocks/blocks/jina.ts

@@ -9,7 +9,7 @@ export const JinaBlock: BlockConfig<ReadUrlResponse> = {
     description: 'Convert website content into text',
     bgColor: '#333333',
     icon: JinaAIIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['jina.readurl']

blocks/blocks/slack.ts

@@ -9,7 +9,7 @@ export const SlackMessageBlock: BlockConfig<SlackMessageResponse> = {
     description: 'Send a message to Slack',
     bgColor: '#611f69',
     icon: SlackIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['slack.message']

blocks/blocks/translate.ts

@@ -19,7 +19,7 @@ export const TranslateBlock: BlockConfig<ChatResponse> = {
     description: 'Translate text to any language',
     bgColor: '#FF4B4B',
     icon: TranslateIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['openai.chat', 'anthropic.chat', 'google.chat'],

blocks/index.ts

@@ -50,7 +50,7 @@ export const getBlock = (type: string): BlockConfig | undefined =>
   blocks[type]
 
 
-export const getBlocksByCategory = (category: 'basic' | 'advanced'): BlockConfig[] =>
+export const getBlocksByCategory = (category: 'blocks' | 'tools'): BlockConfig[] =>
   Object.values(blocks).filter(block => block.toolbar.category === category)
 
 export const getAllBlockTypes = (): string[] =>

blocks/types.ts

@@ -4,7 +4,7 @@ import { ToolResponse } from '@/tools/types'
 import { ExtractToolOutput, ToolOutputToValueType } from './utils'
 
 export type BlockIcon = (props: SVGProps<SVGSVGElement>) => JSX.Element
-export type BlockCategory = 'basic' | 'advanced'
+export type BlockCategory = 'blocks' | 'tools'
 
 export type PrimitiveValueType = 'string' | 'number' | 'json' | 'boolean' | 'any'
 export type ValueType = PrimitiveValueType | Record<string, PrimitiveValueType>

serializer/__tests__/serializer.test.ts

@@ -55,7 +55,7 @@ describe('Serializer', () => {
           toolbar: {
             title: 'Agent Block',
             description: 'Use any LLM',
-            category: 'basic',
+            category: 'blocks',
             bgColor: '#7F2FFF'
           }
         }
@@ -87,7 +87,7 @@ describe('Serializer', () => {
           toolbar: {
             title: 'API Block',
             description: 'Make HTTP requests',
-            category: 'basic',
+            category: '',
             bgColor: '#00FF00'
           }
         }
@@ -359,7 +359,7 @@ describe('Serializer', () => {
             metadata: {
               title: 'Agent Block',
               description: 'Use any LLM',
-              category: 'basic',
+              category: 'blocks',
               color: '#7F2FFF',
               type: 'agent'
             },