refactor: replace raw fetch with useWorkspacesQuery in knowledge header

Remove useState + useEffect + fetch anti-pattern for loading workspaces.
Use useWorkspacesQuery from React Query with inline filter for write/admin
permissions. Eliminates ~30 lines of manual state management, any casts,
and the Pick type workaround.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { AlertTriangle, LibraryBig, MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
@@ -17,9 +17,7 @@ import { ChevronDown } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { filterButtonClass } from '@/app/workspace/[workspaceId]/knowledge/components/constants'
 import { useUpdateKnowledgeBase } from '@/hooks/queries/kb/knowledge'
-import type { Workspace } from '@/hooks/queries/workspace'
-
-type WorkspaceOption = Pick<Workspace, 'id' | 'name'> & { permissions: string }
+import { useWorkspacesQuery } from '@/hooks/queries/workspace'
 
 const logger = createLogger('KnowledgeHeader')
 
@@ -54,43 +52,15 @@ interface KnowledgeHeaderProps {
 export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps) {
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false)
   const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false)
-  const [workspaces, setWorkspaces] = useState<WorkspaceOption[]>([])
-  const [isLoadingWorkspaces, setIsLoadingWorkspaces] = useState(false)
-
-  const updateKnowledgeBase = useUpdateKnowledgeBase()
 
-  useEffect(() => {
-    if (!options?.knowledgeBaseId) return
-
-    const fetchWorkspaces = async () => {
-      try {
-        setIsLoadingWorkspaces(true)
-
-        const response = await fetch('/api/workspaces')
-        if (!response.ok) {
-          throw new Error('Failed to fetch workspaces')
-        }
-
-        const data = await response.json()
-
-        const availableWorkspaces = data.workspaces
-          .filter((ws: any) => ws.permissions === 'write' || ws.permissions === 'admin')
-          .map((ws: any) => ({
-            id: ws.id,
-            name: ws.name,
-            permissions: ws.permissions,
-          }))
-
-        setWorkspaces(availableWorkspaces)
-      } catch (err) {
-        logger.error('Error fetching workspaces:', err)
-      } finally {
-        setIsLoadingWorkspaces(false)
-      }
-    }
+  const { data: allWorkspaces = [], isLoading: isLoadingWorkspaces } = useWorkspacesQuery(
+    !!options?.knowledgeBaseId
+  )
+  const workspaces = allWorkspaces.filter(
+    (ws) => ws.permissions === 'write' || ws.permissions === 'admin'
+  )
 
-    fetchWorkspaces()
-  }, [options?.knowledgeBaseId])
+  const updateKnowledgeBase = useUpdateKnowledgeBase()
 
   const handleWorkspaceChange = async (workspaceId: string | null) => {
     if (updateKnowledgeBase.isPending || !options?.knowledgeBaseId) return