improvement(landing): SSR-friendly URL-state filters + cleanup pass + polish (#5298)

* chore(landing): cleanup pass — size-* shorthand, drop redundant refs/memos, changelog useInfiniteQuery

- emcn: collapse 29 square h-N w-N pairs to size-* across models/integrations/blog/faq/landing-preview
- landing-preview: remove redundant animationKeyRef (functional setState) + dead isDesktopRef
- model-directory: hoist static provider options to a module const
- auth-modal: drop useMemo over the cheap getBrandConfig() call
- changelog: replace useState+fetch pagination with a co-located useInfiniteQuery hook (first page stays SSR-seeded via initialData)

* feat(landing): URL-state filters via nuqs (SSR-friendly) + stars fallback bump

- integrations grid, models directory: search + category/provider filters now
  live in the URL (nuqs useQueryStates), server-parsed via createSearchParamsCache
  so filtered views render server-side (crawlable, shareable) — mirrors the blog
  index SSR pattern. Search URL writes debounced; in-memory filtering stays instant.
- pricing: billing-period toggle moves to ?billing=annual (shareable, no flash).
- co-located search-params.ts per page as the single source of truth (server + client).
- stars: bump fallback floor 28800 -> 28900 to track the current count.

* fix(landing): use the light sim mark (not green) in the integration CTA

Replace brandbook/logo/small.png — referenced only by the 'Start automating
{service} today' CTA on integration pages — with the black-on-light sim mark so
the tile reads as a neutral brand mark beside the partner icon instead of a green
block.

* fix(landing): calmer release-timeline dot hover

Drop the scale-150 + brightness-75 hover (a 50% size jump plus a muddy darken)
for an understated opacity-fill (0.85 -> 1) with a slight scale-110, matching the
comparison chart's opacity-driven hover language.

* fix(landing): keep changelog load-more when initial page is empty; drop inline comments

- changelog: getNextPageParam no longer treats an empty server-seeded page 1 as
  end-of-feed, so a failed/empty initial GitHub fetch still surfaces 'Show more'
  (addresses Cursor Bugbot).
- replace the inline comments added in this branch with TSDoc on the search-param
  caches (documents the dynamic-render → SSR-filtered behavior), per the
  codebase's TSDoc-only convention.

* revert(landing): keep the original changelog timeline (drop useInfiniteQuery)

The React Query conversion of an SSR-seeded, cross-origin, infrequently-changing
paginated list introduced caching edge cases (empty-seed load-more, singleton
cache serving stale page 1 on client-side nav) without real benefit. Restore the
original useState(initialEntries)+fetch timeline, which is simpler, correct, and
already review-clean from #5181.

Author: waleedlatif1

apps/sim/app/(landing)/blog/[slug]/share-button.tsx

@@ -41,21 +41,21 @@ export function ShareButton({ url, title }: ShareButtonProps) {
           className='flex items-center gap-1.5 text-[var(--text-muted)] text-sm hover:text-[var(--text-primary)]'
           aria-label='Share this post'
         >
-          <Share2 className='h-4 w-4' />
+          <Share2 className='size-4' />
           <span>Share</span>
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         <DropdownMenuItem onSelect={handleCopyLink}>
-          <Duplicate className='h-4 w-4' />
+          <Duplicate className='size-4' />
           {copied ? 'Copied!' : 'Copy link'}
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={handleShareTwitter}>
-          <XIcon className='h-4 w-4' />
+          <XIcon className='size-4' />
           Share on X
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={handleShareLinkedIn}>
-          <LinkedInIcon className='h-4 w-4' />
+          <LinkedInIcon className='size-4' />
           Share on LinkedIn
         </DropdownMenuItem>
       </DropdownMenuContent>

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   Loader,
   Modal,
@@ -69,7 +69,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
   const [view, setView] = useState<AuthView>(defaultView)
   const [providerStatus, setProviderStatus] = useState<ProviderStatus | null>(null)
   const [socialLoading, setSocialLoading] = useState<'github' | 'google' | 'microsoft' | null>(null)
-  const brand = useMemo(() => getBrandConfig(), [])
+  const brand = getBrandConfig()
 
   useEffect(() => {
     fetchProviderStatus().then(setProviderStatus)

apps/sim/app/(landing)/components/landing-faq/landing-faq.tsx

@@ -61,7 +61,7 @@ export function LandingFAQ({ faqs }: LandingFAQProps) {
                   </span>
                   <ChevronDown
                     className={cn(
-                      'h-3 w-3 shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+                      'size-3 shrink-0 text-[var(--text-muted)] transition-transform duration-200',
                       isOpen ? 'rotate-180' : 'rotate-0'
                     )}
                     aria-hidden='true'

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx

@@ -196,8 +196,8 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         onClick={() => setToolsExpanded((p) => !p)}
                         className='flex cursor-pointer items-center gap-2'
                       >
-                        <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-                          <Blimp className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+                        <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+                          <Blimp className='size-[16px] text-[var(--text-icon)]' />
                         </div>
                         <span className='text-[var(--text-body)] text-sm'>Sim</span>
                         <ChevronDown
@@ -218,9 +218,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         <div className='overflow-hidden'>
                           <div className='flex flex-col gap-1.5 pt-0.5'>
                             <ToolCallRow
-                              icon={
-                                <Table className='h-[15px] w-[15px] text-[var(--text-muted)]' />
-                              }
+                              icon={<Table className='size-[15px] text-[var(--text-muted)]' />}
                               title='Read Customer Leads'
                             />
                           </div>
@@ -343,7 +341,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
 function ToolCallRow({ icon, title }: { icon: React.ReactNode; title: string }) {
   return (
     <div className='flex items-center gap-[8px] pl-[24px]'>
-      <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>{icon}</div>
+      <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>{icon}</div>
       <span className='text-[13px] text-[var(--text-muted)]'>{title}</span>
     </div>
   )
@@ -390,7 +388,7 @@ function MiniTablePanel() {
   return (
     <div className='flex h-full w-full flex-col bg-[var(--surface-2)]'>
       <div className='flex items-center gap-2 border-[var(--border)] border-b px-3 py-2'>
-        <Table className='h-[14px] w-[14px] text-[var(--text-icon)]' />
+        <Table className='size-[14px] text-[var(--text-icon)]' />
         <span className='font-medium text-[var(--text-primary)] text-sm'>Customer Leads</span>
       </div>
       <div className='min-h-0 flex-1 overflow-auto'>
@@ -410,7 +408,7 @@ function MiniTablePanel() {
                     className='border-[var(--border-1)] border-r border-b bg-[var(--surface-1)] p-0 text-left'
                   >
                     <div className='flex items-center gap-1 px-2 py-1.5'>
-                      <Icon className='h-3 w-3 shrink-0 text-[var(--text-icon)]' />
+                      <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
                       <span className='font-medium text-[11px] text-[var(--text-primary)]'>
                         {col.label}
                       </span>

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx

@@ -248,7 +248,7 @@ export function LandingPreviewLogs() {
                     )}
                   >
                     {label}
-                    {sortKey === key && <ArrowUpDown className='h-[10px] w-[10px] opacity-60' />}
+                    {sortKey === key && <ArrowUpDown className='size-[10px] opacity-60' />}
                   </button>
                 </th>
               ))}

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx

@@ -83,7 +83,7 @@ const MODEL_PROVIDER_ICONS: Array<{
   { prefix: 'o4', icon: OpenAIIcon },
   { prefix: 'claude-', icon: AnthropicIcon },
   { prefix: 'gemini-', icon: GeminiIcon },
-  { prefix: 'grok-', icon: xAIIcon, size: 'h-[17px] w-[17px]' },
+  { prefix: 'grok-', icon: xAIIcon, size: 'size-[17px]' },
   { prefix: 'mistral-', icon: MistralIcon },
 ]
 
@@ -219,7 +219,7 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
                       <span className='flex min-w-0 flex-1 items-center justify-end gap-2 font-normal text-[14px] text-[var(--text-primary)]'>
                         {ModelIcon && (
                           <ModelIcon
-                            className={`inline-block flex-shrink-0 text-[var(--text-primary)] ${modelEntry.size ?? 'h-[14px] w-[14px]'}`}
+                            className={`inline-block flex-shrink-0 text-[var(--text-primary)] ${modelEntry.size ?? 'size-[14px]'}`}
                           />
                         )}
                         <span className='truncate'>{row.value}</span>

apps/sim/app/(landing)/components/landing-preview/landing-preview.tsx

@@ -121,15 +121,13 @@ export function LandingPreview({
 }: LandingPreviewProps) {
   const [activeView, setActiveView] = useState<SidebarView>(view)
   const [activeWorkflowId, setActiveWorkflowId] = useState(workflowId)
-  const animationKeyRef = useRef(0)
   const [animationKey, setAnimationKey] = useState(0)
   const [autoTypeHome, setAutoTypeHome] = useState(false)
   const [isDesktop, setIsDesktop] = useState(true)
 
   const demoIndexRef = useRef(0)
   const demoTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const autoCycleActiveRef = useRef(true)
-  const isDesktopRef = useRef(true)
 
   const clearDemoTimer = useCallback(() => {
     if (demoTimerRef.current) {
@@ -144,8 +142,7 @@ export function LandingPreview({
     if (step.type === 'workflow' && step.workflowId) {
       setActiveWorkflowId(step.workflowId)
       setActiveView('workflow')
-      animationKeyRef.current += 1
-      setAnimationKey(animationKeyRef.current)
+      setAnimationKey((k) => k + 1)
     } else if (step.type === 'home') {
       setActiveView('home')
       setAutoTypeHome(true)
@@ -168,7 +165,6 @@ export function LandingPreview({
 
   useEffect(() => {
     const desktop = window.matchMedia('(min-width: 1024px)').matches
-    isDesktopRef.current = desktop
     setIsDesktop(desktop)
     if (!desktop) return
     if (!autoplay) return
@@ -188,8 +184,7 @@ export function LandingPreview({
       setAutoTypeHome(false)
       setActiveWorkflowId(id)
       setActiveView('workflow')
-      animationKeyRef.current += 1
-      setAnimationKey(animationKeyRef.current)
+      setAnimationKey((k) => k + 1)
     },
     [stopAutoCycle]
   )

apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx

@@ -403,7 +403,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             name={name}
             Icon={IconComponent}
             className='size-12 rounded-xl border border-[var(--border-1)]'
-            iconClassName='h-6 w-6'
+            iconClassName='size-6'
             fallbackClassName='text-[20px]'
             aria-hidden='true'
           />
@@ -745,7 +745,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                         Icon={ToolIcon}
                         as='span'
                         className='size-6 rounded-[4px]'
-                        iconClassName='h-3.5 w-3.5'
+                        iconClassName='size-3.5'
                         fallbackClassName='text-[10px]'
                         aria-hidden='true'
                       />
@@ -935,7 +935,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
               name={name}
               Icon={IconComponent}
               className='size-14 rounded-xl'
-              iconClassName='h-7 w-7'
+              iconClassName='size-7'
               fallbackClassName='text-[22px]'
               aria-hidden='true'
             />

apps/sim/app/(landing)/integrations/(shell)/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import type { SearchParams } from 'nuqs/server'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import {
   blockTypeToIconMap,
@@ -11,6 +12,7 @@ import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
 import { IntegrationCard } from '@/app/(landing)/integrations/components/integration-card'
 import { IntegrationGrid } from '@/app/(landing)/integrations/components/integration-grid'
 import { RequestIntegrationModal } from '@/app/(landing)/integrations/components/request-integration-modal'
+import { integrationsSearchParamsCache } from '@/app/(landing)/integrations/search-params'
 
 const allIntegrations = INTEGRATIONS
 const INTEGRATION_COUNT = allIntegrations.length
@@ -87,7 +89,13 @@ export const metadata: Metadata = {
   alternates: { canonical: `${baseUrl}/integrations` },
 }
 
-export default function IntegrationsPage() {
+export default async function IntegrationsPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  await integrationsSearchParamsCache.parse(searchParams)
+
   const breadcrumbJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',

apps/sim/app/(landing)/integrations/components/integration-card.tsx

@@ -61,7 +61,7 @@ export function IntegrationRow({ integration, IconComponent }: IntegrationItemPr
           name={name}
           Icon={IconComponent}
           className='size-8 shrink-0 rounded-xl border border-[var(--border-1)]'
-          iconClassName='h-4 w-4'
+          iconClassName='size-4'
           fallbackClassName='text-[13px]'
           aria-hidden='true'
         />