fix(nuqs): revert landing-page param migrations and tighten workspace URL-state

waleedlatif1 · waleedlatif1 · commit 0bbb633a3eab · 2026-06-21T09:58:57.000-07:00
- Revert integrations/models landing pages to static SEO HTML (drop nuqs migration + their search-params files)
- MCP settings: refresh tools only for an initial deep-linked server id, not on subsequent user selections
- Add a Suspense boundary with real chrome around the nuqs-using integration detail page
- Trim inaccurate "server component reads these params" TSDoc from search-params files (createSearchParamsCache is unused)
- Export mcpServerIdUrlKeys from the settings search-params file instead of inlining the options in mcp.tsx
- Convert two new relative imports (logs use-log-filters, tables loading) to absolute
- Wrap setSelectedCategory in useCallback; clear active skillId edit param when opening the create-skill form
diff --git a/apps/sim/app/(landing)/integrations/(shell)/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
@@ -1,4 +1,3 @@
-import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { Badge } from '@/components/emcn'
 import { SITE_URL } from '@/lib/core/utils/urls'
@@ -206,9 +205,7 @@ export default function IntegrationsPage() {
               All Integrations
             </h2>
           </div>
-          <Suspense fallback={null}>
-            <IntegrationGrid integrations={allIntegrations} />
-          </Suspense>
+          <IntegrationGrid integrations={allIntegrations} />
         </section>
 
         <div className='h-px w-full bg-[var(--landing-bg-elevated)]' />
diff --git a/apps/sim/app/(landing)/integrations/components/integration-grid.tsx b/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
@@ -1,15 +1,9 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
-import { useQueryStates } from 'nuqs'
+import { useState } from 'react'
 import { ChipInput, Search } from '@/components/emcn'
 import { blockTypeToIconMap, formatIntegrationType, type Integration } from '@/lib/integrations'
 import { IntegrationRow } from '@/app/(landing)/integrations/components/integration-card'
-import {
-  integrationsDirectoryParsers,
-  integrationsDirectoryUrlKeys,
-} from '@/app/(landing)/integrations/search-params'
-import { useDebounce } from '@/hooks/use-debounce'
 
 const PILL_BASE =
   'rounded-[5px] border border-[var(--landing-border-strong)] px-[9px] py-0.5 text-[13.5px] text-[var(--landing-text)] transition-colors' as const
@@ -21,29 +15,8 @@ interface IntegrationGridProps {
 }
 
 export function IntegrationGrid({ integrations }: IntegrationGridProps) {
-  const [{ search: urlQuery, category: urlCategory }, setDirectoryFilters] = useQueryStates(
-    integrationsDirectoryParsers,
-    integrationsDirectoryUrlKeys
-  )
-
-  const [query, setQuery] = useState(urlQuery)
-  const debouncedQuery = useDebounce(query, 300)
-
-  useEffect(() => {
-    setDirectoryFilters({ search: debouncedQuery.length > 0 ? debouncedQuery : null })
-  }, [debouncedQuery, setDirectoryFilters])
-
-  const lastSyncedUrlSearchRef = useRef(urlQuery)
-  useEffect(() => {
-    if (urlQuery === lastSyncedUrlSearchRef.current) return
-    lastSyncedUrlSearchRef.current = urlQuery
-    setQuery((current) => (current === urlQuery ? current : urlQuery))
-  }, [urlQuery])
-
-  const activeCategory = urlCategory.length > 0 ? urlCategory : null
-  const setActiveCategory = (category: string | null) => {
-    setDirectoryFilters({ category })
-  }
+  const [query, setQuery] = useState('')
+  const [activeCategory, setActiveCategory] = useState<string | null>(null)
 
   const counts = new Map<string, number>()
   for (const i of integrations) {
diff --git a/apps/sim/app/(landing)/integrations/search-params.ts b/apps/sim/app/(landing)/integrations/search-params.ts
diff --git a/apps/sim/app/(landing)/models/(shell)/page.tsx b/apps/sim/app/(landing)/models/(shell)/page.tsx
@@ -1,4 +1,3 @@
-import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { Badge } from '@/components/emcn'
 import { SITE_URL } from '@/lib/core/utils/urls'
@@ -226,9 +225,7 @@ export default function ModelsPage() {
                 All models
               </h2>
             </div>
-            <Suspense fallback={null}>
-              <ModelDirectory />
-            </Suspense>
+            <ModelDirectory />
           </section>
 
           <div className='h-px w-full bg-[var(--landing-bg-elevated)]' />
diff --git a/apps/sim/app/(landing)/models/components/model-directory.tsx b/apps/sim/app/(landing)/models/components/model-directory.tsx
@@ -1,11 +1,9 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useState } from 'react'
 import Link from 'next/link'
-import { useQueryStates } from 'nuqs'
 import { Input } from '@/components/emcn'
 import { ChevronArrow, ProviderIcon } from '@/app/(landing)/models/components/model-primitives'
-import { modelDirectoryParsers, modelDirectoryUrlKeys } from '@/app/(landing)/models/search-params'
 import {
   type CatalogModel,
   type CatalogProvider,
@@ -14,32 +12,10 @@ import {
   MODEL_PROVIDERS_WITH_CATALOGS,
   MODEL_PROVIDERS_WITH_DYNAMIC_CATALOGS,
 } from '@/app/(landing)/models/utils'
-import { useDebounce } from '@/hooks/use-debounce'
 
 export function ModelDirectory() {
-  const [{ search: urlQuery, provider: urlProvider }, setModelFilters] = useQueryStates(
-    modelDirectoryParsers,
-    modelDirectoryUrlKeys
-  )
-
-  const [query, setQuery] = useState(urlQuery)
-  const debouncedQuery = useDebounce(query, 300)
-
-  useEffect(() => {
-    setModelFilters({ search: debouncedQuery.length > 0 ? debouncedQuery : null })
-  }, [debouncedQuery, setModelFilters])
-
-  const lastSyncedUrlSearchRef = useRef(urlQuery)
-  useEffect(() => {
-    if (urlQuery === lastSyncedUrlSearchRef.current) return
-    lastSyncedUrlSearchRef.current = urlQuery
-    setQuery((current) => (current === urlQuery ? current : urlQuery))
-  }, [urlQuery])
-
-  const activeProviderId = urlProvider.length > 0 ? urlProvider : null
-  const setActiveProviderId = (providerId: string | null) => {
-    setModelFilters({ provider: providerId })
-  }
+  const [query, setQuery] = useState('')
+  const [activeProviderId, setActiveProviderId] = useState<string | null>(null)
 
   const providerOptions = useMemo(
     () =>
diff --git a/apps/sim/app/(landing)/models/search-params.ts b/apps/sim/app/(landing)/models/search-params.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/files/search-params.ts b/apps/sim/app/workspace/[workspaceId]/files/search-params.ts
@@ -15,9 +15,9 @@ const parseAsNewFlag = createParser<boolean>({
 })
 
 /**
- * Co-located, typed URL query-param definitions for the Files feature. Both the
- * client (`Files`) and any server component that reads these params consume this
- * single source of truth.
+ * Co-located, typed URL query-param definitions for the Files feature. The
+ * client (`Files`) consumes this typed param definition as the single source of
+ * truth.
  *
  * - `folderId` is the currently open folder; it is shareable, bookmarkable, and
  *   navigations between folders belong in the browser history (`history: 'push'`).
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx
@@ -1,5 +1,8 @@
+import { Suspense } from 'react'
+import { ArrowLeft } from 'lucide-react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { ChipLink } from '@/components/emcn'
 import { INTEGRATIONS } from '@/lib/integrations'
 import { IntegrationBlockDetail } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail'
 
@@ -24,5 +27,19 @@ export default async function IntegrationBlockPage({
   const integration = INTEGRATIONS.find((i) => i.slug === block)
   if (!integration) notFound()
 
-  return <IntegrationBlockDetail integration={integration} workspaceId={workspaceId} />
+  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>
+      }
+    >
+      <IntegrationBlockDetail integration={integration} workspaceId={workspaceId} />
+    </Suspense>
+  )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type ComponentType, useEffect, useMemo, useRef, useState } from 'react'
+import { type ComponentType, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
@@ -184,9 +184,12 @@ export function Integrations() {
     setSearchTerm((current) => (current === urlSearchTerm ? current : urlSearchTerm))
   }, [urlSearchTerm])
 
-  const setSelectedCategory = (category: string) => {
-    setIntegrationFilters({ category })
-  }
+  const setSelectedCategory = useCallback(
+    (category: string) => {
+      setIntegrationFilters({ category })
+    },
+    [setIntegrationFilters]
+  )
 
   const categoryOptions = [
     ALL_CATEGORY,
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/search-params.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/search-params.ts
@@ -2,8 +2,8 @@ import { parseAsInteger, parseAsString } from 'nuqs/server'
 
 /**
  * Co-located, typed URL query-param definitions for the knowledge document
- * (chunk list + inline chunk editor) page. Both the client (`Document`) and any
- * server component that reads these params consume this single source of truth.
+ * (chunk list + inline chunk editor) page. The client (`Document`) consumes this
+ * typed param definition as the single source of truth.
  *
  * - `page` is the chunk pagination page, shareable and bookmarkable. It defaults
  *   to 1 and clears from the URL at the default to keep links clean.
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/search-params.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/search-params.ts
@@ -3,8 +3,8 @@ import { ADD_CONNECTOR_SEARCH_PARAM } from '@/lib/credentials/client-state'
 
 /**
  * Co-located, typed URL query-param definitions for the knowledge base detail
- * page. Both the client (`KnowledgeBase`) and any server component that reads
- * these params consume this single source of truth.
+ * page. The client (`KnowledgeBase`) consumes this typed param definition as the
+ * single source of truth.
  *
  * `addConnector` is a deep-link that pre-opens the "add connector" modal. Its
  * presence (even as an empty string) opens the modal; its value seeds the
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -52,6 +52,7 @@ import type {
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
 import { Resource } from '@/app/workspace/[workspaceId]/components'
+import { useLogFilters } from '@/app/workspace/[workspaceId]/logs/hooks/use-log-filters'
 import { useSearchState } from '@/app/workspace/[workspaceId]/logs/hooks/use-search-state'
 import type { Suggestion } from '@/app/workspace/[workspaceId]/logs/types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -74,7 +75,6 @@ import { useDebounce } from '@/hooks/use-debounce'
 import { useFilterStore } from '@/stores/logs/filters/store'
 import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 import { Dashboard, ExecutionSnapshot, LogDetails, LogRowContextMenu } from './components'
-import { useLogFilters } from './hooks/use-log-filters'
 import {
   DELETED_WORKFLOW_LABEL,
   extractRetryInput,
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/search-params.ts b/apps/sim/app/workspace/[workspaceId]/logs/search-params.ts
@@ -7,9 +7,9 @@ import {
 } from '@/stores/logs/filters/types'
 
 /**
- * Co-located, typed URL query-param definitions for the logs feature. Both the
- * client (`useLogFilters`) and any server component that needs to read these
- * params consume this single source of truth.
+ * Co-located, typed URL query-param definitions for the logs feature. The
+ * client hook (`useLogFilters`) consumes this typed param definition as the
+ * single source of truth.
  *
  * The encoding here intentionally preserves the exact wire format the logs page
  * shipped before nuqs: `timeRange` uses kebab tokens, `level` / `workflowIds` /
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts b/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts
@@ -2,8 +2,8 @@ import { parseAsString } from 'nuqs/server'
 
 /**
  * Co-located, typed URL query-param definitions for the settings section pages.
- * Both the client (`SettingsPage`) and any server component that needs to read
- * these params consume this single source of truth.
+ * The client hook consumes this typed param definition as the single source of
+ * truth.
  *
  * `mcpServerId` deep-links the MCP settings tab to a specific server so the row
  * can be focused/opened from a shared link.
@@ -12,3 +12,9 @@ export const mcpServerIdParam = {
   key: 'mcpServerId',
   parser: parseAsString,
 } as const
+
+/** Opening a server is a destination → push to history; clear on close. */
+export const mcpServerIdUrlKeys = {
+  history: 'push',
+  clearOnDefault: true,
+} as const
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -26,7 +26,10 @@ import {
   type McpToolIssue,
 } from '@/lib/mcp/tool-validation'
 import type { McpTransport } from '@/lib/mcp/types'
-import { mcpServerIdParam } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
+import {
+  mcpServerIdParam,
+  mcpServerIdUrlKeys,
+} from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useMcpOauthPopup } from '@/hooks/mcp/use-mcp-oauth-popup'
 import {
@@ -184,18 +187,18 @@ export function MCP() {
 
   const [selectedServerId, setSelectedServerId] = useQueryState(mcpServerIdParam.key, {
     ...mcpServerIdParam.parser,
-    history: 'push',
-    clearOnDefault: true,
+    ...mcpServerIdUrlKeys,
   })
 
+  const initialServerIdRef = useRef(selectedServerId)
   const didDeepLinkRefreshRef = useRef(false)
   useEffect(() => {
     if (didDeepLinkRefreshRef.current) return
-    if (!selectedServerId) return
+    if (!initialServerIdRef.current) return
     didDeepLinkRefreshRef.current = true
     forceRefreshTools(workspaceId)
     refetchStoredTools()
-  }, [selectedServerId, workspaceId, forceRefreshTools, refetchStoredTools])
+  }, [workspaceId, forceRefreshTools, refetchStoredTools])
 
   const [expandedTools, setExpandedTools] = useState<Set<string>>(() => new Set())
 
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
@@ -121,13 +121,13 @@ export function Skills() {
 
   const showNoResults = searchTerm.trim() && filteredSkills.length === 0
 
+  const handleOpenAddForm = () => {
+    setEditingSkillId(null)
+    setShowAddForm(true)
+  }
+
   const addButton = (
-    <Chip
-      variant='primary'
-      onClick={() => setShowAddForm(true)}
-      disabled={isLoading}
-      leftIcon={Plus}
-    >
+    <Chip variant='primary' onClick={handleOpenAddForm} disabled={isLoading} leftIcon={Plus}>
       Add to Sim
     </Chip>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/page.tsx b/apps/sim/app/workspace/[workspaceId]/tables/page.tsx
@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
-import TablesLoading from './loading'
+import TablesLoading from '@/app/workspace/[workspaceId]/tables/loading'
 import { Tables } from './tables'
 
 export const metadata: Metadata = {
