fix(models, integrations): dedup ChevronArrow/provider colors, fix UT…

…C date rendering - Extract PROVIDER_COLORS and getProviderColor to model-colors.ts to eliminate identical definitions in model-comparison-charts and model-timeline-chart - Remove duplicate private ChevronArrow from integration-card; import the exported one from model-primitives instead - Add timeZone: 'UTC' to formatShortDate so ISO date-only strings (parsed as UTC midnight) render the correct calendar day in all timezones
simstudioai · waleedlatif1 · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026
commit 5ef97b2638b275665d7c88e856707070153ccf94
diff --git a/apps/sim/app/(landing)/integrations/components/integration-card.tsx b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
@@ -1,6 +1,7 @@
 import type { ComponentType, SVGProps } from 'react'
 import Link from 'next/link'
 import type { Integration } from '@/app/(landing)/integrations/data/types'
+import { ChevronArrow } from '@/app/(landing)/models/components/model-primitives'
 import { IntegrationIcon } from './integration-icon'
 
 interface IntegrationCardProps {
@@ -81,39 +82,3 @@ export function IntegrationRow({ integration, IconComponent }: IntegrationRowPro
     </>
   )
 }
-
-/**
- * Animated chevron arrow matching the footer/landing pattern.
- * Line scales in from left, chevron translates right on hover.
- */
-function ChevronArrow() {
-  return (
-    <svg
-      className='h-3 w-3 shrink-0 text-[var(--landing-text-subtle)]'
-      viewBox='0 0 10 10'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      aria-hidden='true'
-    >
-      <line
-        x1='0'
-        y1='5'
-        x2='9'
-        y2='5'
-        stroke='currentColor'
-        strokeWidth='1.33'
-        strokeLinecap='square'
-        className='origin-left scale-x-0 transition-transform duration-200 ease-out [transform-box:fill-box] group-hover/link:scale-x-100'
-      />
-      <path
-        d='M3.5 2L6.5 5L3.5 8'
-        stroke='currentColor'
-        strokeWidth='1.33'
-        strokeLinecap='square'
-        strokeLinejoin='miter'
-        fill='none'
-        className='transition-transform duration-200 ease-out group-hover/link:translate-x-[30%]'
-      />
-    </svg>
-  )
-}
diff --git a/apps/sim/app/(landing)/models/components/model-colors.ts b/apps/sim/app/(landing)/models/components/model-colors.ts
@@ -0,0 +1,18 @@
+export const PROVIDER_COLORS: Record<string, string> = {
+  anthropic: '#D97757',
+  openai: '#E8E8E8',
+  google: '#4285F4',
+  xai: '#555555',
+  mistral: '#F7D046',
+  groq: '#F55036',
+  cerebras: '#6D5BF7',
+  deepseek: '#4D6BFE',
+  fireworks: '#FF6D3A',
+  bedrock: '#FF9900',
+}
+
+const DEFAULT_COLOR = '#888888'
+
+export function getProviderColor(providerId: string): string {
+  return PROVIDER_COLORS[providerId] ?? DEFAULT_COLOR
+}
diff --git a/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx b/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx
@@ -3,32 +3,14 @@
 import type { ComponentType } from 'react'
 import { useMemo } from 'react'
 import Link from 'next/link'
+import { getProviderColor } from '@/app/(landing)/models/components/model-colors'
 import type { CatalogModel } from '@/app/(landing)/models/utils'
 import {
   formatPrice,
   formatTokenCount,
   MODEL_CATALOG_PROVIDERS,
 } from '@/app/(landing)/models/utils'
 
-const PROVIDER_COLORS: Record<string, string> = {
-  anthropic: '#D97757',
-  openai: '#E8E8E8',
-  google: '#4285F4',
-  xai: '#555555',
-  mistral: '#F7D046',
-  groq: '#F55036',
-  cerebras: '#6D5BF7',
-  deepseek: '#4D6BFE',
-  fireworks: '#FF6D3A',
-  bedrock: '#FF9900',
-}
-
-const DEFAULT_COLOR = '#888888'
-
-function getColor(providerId: string): string {
-  return PROVIDER_COLORS[providerId] ?? DEFAULT_COLOR
-}
-
 /** Providers that host other providers' models — deprioritized to avoid duplicates. */
 const RESELLER_PROVIDERS = new Set([
   'azure-openai',
@@ -128,7 +110,7 @@ function StackedCostChart({ models }: ChartProps) {
         {data.entries.map(({ model, input, output, total }) => {
           const totalPct = data.maxTotal > 0 ? (total / data.maxTotal) * 100 : 0
           const inputPct = total > 0 ? (input / total) * 100 : 0
-          const color = getColor(model.providerId)
+          const color = getProviderColor(model.providerId)
 
           return (
             <Link
@@ -201,7 +183,7 @@ function ContextWindowChart({ models }: ChartProps) {
       <div className='flex flex-col gap-1.5'>
         {data.entries.map(({ model, value }) => {
           const pct = data.maxValue > 0 ? (value / data.maxValue) * 100 : 0
-          const color = getColor(model.providerId)
+          const color = getProviderColor(model.providerId)
 
           return (
             <Link

diff --git a/apps/sim/app/(landing)/models/components/model-timeline-chart.tsx b/apps/sim/app/(landing)/models/components/model-timeline-chart.tsx
@@ -2,33 +2,16 @@
 
 import { useMemo } from 'react'
 import Link from 'next/link'
+import { getProviderColor } from '@/app/(landing)/models/components/model-colors'
 import type { CatalogModel } from '@/app/(landing)/models/utils'
 
-const PROVIDER_COLORS: Record<string, string> = {
-  anthropic: '#D97757',
-  openai: '#E8E8E8',
-  google: '#4285F4',
-  xai: '#555555',
-  mistral: '#F7D046',
-  groq: '#F55036',
-  cerebras: '#6D5BF7',
-  deepseek: '#4D6BFE',
-  fireworks: '#FF6D3A',
-  bedrock: '#FF9900',
-}
-
-const DEFAULT_COLOR = '#888888'
-
-function getColor(providerId: string): string {
-  return PROVIDER_COLORS[providerId] ?? DEFAULT_COLOR
-}
-
 function formatShortDate(date: string): string {
   try {
     return new Intl.DateTimeFormat('en-US', {
       month: 'short',
       day: 'numeric',
       year: 'numeric',
+      timeZone: 'UTC',
     }).format(new Date(date))
   } catch {
     return date
@@ -56,7 +39,7 @@ export function ModelTimelineChart({ models, providerId }: ModelTimelineChartPro
 
   if (entries.length === 0) return null
 
-  const color = getColor(providerId)
+  const color = getProviderColor(providerId)
 
   return (
     <section aria-labelledby='timeline-heading'>