fix(integrations): resolve Server Components crash on the integration detail page

Root cause (confirmed via staging server logs, digest 783665031): the [block] page.tsx is a server component whose Suspense fallback rendered <ChipLink leftIcon={ArrowLeft}> — passing the lucide icon (a function) across the server->client boundary, which React rejects ("Functions cannot be passed directly to Client Components"). This surfaced as the integrations error boundary / "Failed to load integrations" on soft navigation to a detail page. Move the fallback into a client component so the icon never crosses the boundary.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail-fallback.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { ChipLink } from '@sim/emcn'
+import { ArrowLeft } from 'lucide-react'
+
+interface IntegrationBlockDetailFallbackProps {
+  workspaceId: string
+}
+
+/**
+ * Suspense fallback for the integration detail page — the back-link chrome
+ * shown while {@link IntegrationBlockDetail} hydrates.
+ *
+ * This MUST be a client component. The lucide `ArrowLeft` passed as `ChipLink`'s
+ * `leftIcon` is a function, and functions cannot cross the server→client
+ * boundary as props. Rendering the fallback from the server `page.tsx` directly
+ * threw a React Server Components error ("Functions cannot be passed directly to
+ * Client Components") that surfaced as the integrations error boundary. Keeping
+ * the icon inside a client component avoids the boundary crossing entirely.
+ */
+export function IntegrationBlockDetailFallback({
+  workspaceId,
+}: IntegrationBlockDetailFallbackProps) {
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+        <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
+          Integrations
+        </ChipLink>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx

@@ -1,10 +1,9 @@
 import { Suspense } from 'react'
-import { ChipLink } from '@sim/emcn'
-import { ArrowLeft } from 'lucide-react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { INTEGRATIONS } from '@/lib/integrations'
 import { IntegrationBlockDetail } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail'
+import { IntegrationBlockDetailFallback } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail-fallback'
 
 export async function generateMetadata({
   params,
@@ -28,17 +27,7 @@ export default async function IntegrationBlockPage({
   if (!integration) notFound()
 
   return (
-    <Suspense
-      fallback={
-        <div className='flex h-full flex-col bg-[var(--bg)]'>
-          <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-            <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
-              Integrations
-            </ChipLink>
-          </div>
-        </div>
-      }
-    >
+    <Suspense fallback={<IntegrationBlockDetailFallback workspaceId={workspaceId} />}>
       <IntegrationBlockDetail integration={integration} workspaceId={workspaceId} />
     </Suspense>
   )