refactor(ui): migrate settings & workspace UI to chip design system

Migrate modals to ChipModal (showDivider, hint, resizable, size, leading,
ChipModalTabs), standardize Chip variants, add ChipCombobox wrapper, and apply
chip inputs/dropdowns across settings, knowledge, logs, tables, inbox, EE tabs.
Render ChipModalTabs as a ChipSwitch segmented control. Align /settings/secrets
detail with /integrations, refresh whitelabeling, and restore file-editor
autofocus and CSV import error toasts.

Author: waleedlatif1

apps/docs/app/api/og/route.tsx

@@ -33,7 +33,7 @@ const OG_FOOTER_STYLE = {
   width: '100%',
 } satisfies CSSProperties
 const OG_DOMAIN_STYLE = {
-  fontSize: 20,
+  fontSize: 24,
   fontWeight: 400,
   color: '#71717a',
 } satisfies CSSProperties
@@ -84,7 +84,7 @@ async function loadGoogleFont(font: string, weights: string, text: string): Prom
  */
 function SimLogoFull() {
   return (
-    <svg height='28' viewBox='720 440 1020 320' fill='none'>
+    <svg height='34' viewBox='720 440 1020 320' fill='none'>
       {/* Green icon - top left shape with cutout */}
       <path
         fillRule='evenodd'

apps/docs/app/favicon.ico

@@ -45,6 +45,7 @@ export const metadata = {
   classification: 'Developer Documentation',
   manifest: '/favicon/site.webmanifest',
   icons: {
+    icon: [{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' }],
     apple: '/favicon/apple-touch-icon.png',
   },
   appleWebApp: {

apps/docs/app/layout.tsx

@@ -381,11 +381,11 @@ export default function LoginPage({
                 className={cn(
                   showEmailValidationError &&
                     emailErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500'
+                    'border-[var(--text-error)] focus:border-[var(--text-error)]'
                 )}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
                   {emailErrors.map((error) => (
                     <p key={error}>{error}</p>
                   ))}
@@ -419,7 +419,7 @@ export default function LoginPage({
                     'pr-10',
                     showValidationError &&
                       passwordErrors.length > 0 &&
-                      'border-red-500 focus:border-red-500'
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
                 />
                 <button
@@ -432,7 +432,7 @@ export default function LoginPage({
                 </button>
               </div>
               {showValidationError && passwordErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
                   {passwordErrors.map((error) => (
                     <p key={error}>{error}</p>
                   ))}
@@ -448,7 +448,7 @@ export default function LoginPage({
           )}
 
           {formError && (
-            <div className='text-red-400 text-xs'>
+            <div className='text-[var(--text-error)] text-xs'>
               <p>{formError}</p>
             </div>
           )}

apps/docs/public/icon.svg

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import {
-  Combobox,
+  ChipCombobox,
   Input,
   Modal,
   ModalBody,
@@ -56,7 +56,7 @@ const INITIAL_FORM_STATE: DemoRequestFormState = {
 }
 
 const LANDING_INPUT =
-  'h-[32px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 font-[430] font-season text-[13.5px] text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none'
+  'rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 font-[430] font-season text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none'
 
 async function submitDemoRequest(payload: DemoRequestPayload) {
   return requestJson(submitDemoRequestContract, { body: payload })
@@ -161,6 +161,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                   <LandingField htmlFor='firstName' label='First name' error={errors.firstName}>
                     <Input
                       id='firstName'
+                      variant='chip'
                       value={form.firstName}
                       onChange={(event) => updateField('firstName', event.target.value)}
                       placeholder='First'
@@ -170,6 +171,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                   <LandingField htmlFor='lastName' label='Last name' error={errors.lastName}>
                     <Input
                       id='lastName'
+                      variant='chip'
                       value={form.lastName}
                       onChange={(event) => updateField('lastName', event.target.value)}
                       placeholder='Last'
@@ -185,6 +187,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                 >
                   <Input
                     id='companyEmail'
+                    variant='chip'
                     type='email'
                     value={form.companyEmail}
                     onChange={(event) => updateField('companyEmail', event.target.value)}
@@ -201,6 +204,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                 >
                   <Input
                     id='phoneNumber'
+                    variant='chip'
                     type='tel'
                     value={form.phoneNumber}
                     onChange={(event) => updateField('phoneNumber', event.target.value)}
@@ -210,7 +214,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                 </LandingField>
 
                 <LandingField htmlFor='companySize' label='Company size' error={errors.companySize}>
-                  <Combobox
+                  <ChipCombobox
                     options={COMBOBOX_COMPANY_SIZES}
                     value={form.companySize}
                     selectedValue={form.companySize}
@@ -220,7 +224,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                     placeholder='Select'
                     editable={false}
                     filterOptions={false}
-                    className='h-[32px] rounded-[5px] px-2.5 font-[430] font-season text-[13.5px]'
+                    className='rounded-[5px] px-2.5 font-[430] font-season'
                   />
                 </LandingField>
 

apps/sim/app/(auth)/login/login-form.tsx

@@ -58,6 +58,7 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
             <path d='m21 21-4.35-4.35' />
           </svg>
           <Input
+            variant='chip'
             type='search'
             placeholder='Search integrations, tools, or triggers…'
             value={query}

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

@@ -38,7 +38,11 @@ export function buildFilterConditions(params: AuditLogFilterParams): SQL<unknown
   const conditions: SQL<unknown>[] = []
 
   if (params.action) conditions.push(eq(auditLog.action, params.action))
-  if (params.resourceType) conditions.push(eq(auditLog.resourceType, params.resourceType))
+  if (params.resourceType) {
+    const types = params.resourceType.split(',').filter(Boolean)
+    if (types.length === 1) conditions.push(eq(auditLog.resourceType, types[0]))
+    else if (types.length > 1) conditions.push(inArray(auditLog.resourceType, types))
+  }
   if (params.resourceId) conditions.push(eq(auditLog.resourceId, params.resourceId))
   if (params.workspaceId) conditions.push(eq(auditLog.workspaceId, params.workspaceId))
   if (params.actorId) conditions.push(eq(auditLog.actorId, params.actorId))

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

@@ -6,7 +6,7 @@
  *
  * Query Parameters:
  *   - action: string (optional) - Filter by action (e.g., "workflow.created")
- *   - resourceType: string (optional) - Filter by resource type (e.g., "workflow")
+ *   - resourceType: string (optional) - Filter by resource type(s), comma-separated (e.g., "workflow,api_key")
  *   - resourceId: string (optional) - Filter by resource ID
  *   - workspaceId: string (optional) - Filter by workspace ID
  *   - actorId: string (optional) - Filter by actor user ID (must be an org member)

apps/sim/app/api/v1/audit-logs/query.ts

@@ -5,4 +5,4 @@ export type {
   SearchTag,
   SortConfig,
 } from './resource-options-bar'
-export { ResourceOptionsBar } from './resource-options-bar'
+export { ResourceOptionsBar, SortDropdown } from './resource-options-bar'