added back integrations page, reverted secrets page back to old UI

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/[section]/error.tsx

@@ -10,14 +10,12 @@ export default function SettingsSectionError({
   reset: () => void
 }) {
   return (
-    <div className='flex h-full items-center justify-center'>
-      <ErrorState
-        error={error}
-        reset={reset}
-        title='Something went wrong'
-        description='An unexpected error occurred. Please try again or refresh the page.'
-        loggerName='SettingsSectionError'
-      />
-    </div>
+    <ErrorState
+      error={error}
+      reset={reset}
+      title='Something went wrong'
+      description='An unexpected error occurred. Please try again or refresh the page.'
+      loggerName='SettingsSectionError'
+    />
   )
 }

apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx

@@ -7,7 +7,8 @@ import { SettingsPage } from './settings'
 
 const SECTION_TITLES: Record<string, string> = {
   general: 'General',
-  credentials: 'Secrets',
+  integrations: 'Integrations',
+  secrets: 'Secrets',
   'template-profile': 'Template Profile',
   'access-control': 'Access Control',
   apikeys: 'Sim Keys',

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx

@@ -41,6 +41,13 @@ const General = dynamic(
     ),
   { loading: () => <GeneralSkeleton /> }
 )
+const Integrations = dynamic(
+  () =>
+    import('@/app/workspace/[workspaceId]/settings/components/integrations/integrations').then(
+      (m) => m.Integrations
+    ),
+  { loading: () => <CredentialsSkeleton /> }
+)
 const Credentials = dynamic(
   () =>
     import('@/app/workspace/[workspaceId]/settings/components/credentials/credentials').then(
@@ -148,7 +155,8 @@ export function SettingsPage({ section }: SettingsPageProps) {
     <div>
       <h2 className='mb-[28px] font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
       {effectiveSection === 'general' && <General />}
-      {effectiveSection === 'credentials' && <Credentials />}
+      {effectiveSection === 'integrations' && <Integrations />}
+      {effectiveSection === 'secrets' && <Credentials />}
       {effectiveSection === 'template-profile' && <TemplateProfile />}
       {effectiveSection === 'credential-sets' && <CredentialSets />}
       {effectiveSection === 'access-control' && <AccessControl />}

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx

@@ -1,39 +1,43 @@
 import { Skeleton } from '@/components/emcn'
 
+const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-center'
+
 /**
- * Skeleton component for credential list items.
- * Includes an icon placeholder for OAuth credentials.
+ * Skeleton component for a single secret row in the grid layout.
  */
 export function CredentialSkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <div className='flex min-w-0 items-center gap-[10px]'>
-        <Skeleton className='h-8 w-8 flex-shrink-0 rounded-[6px]' />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-[14px] w-[100px]' />
-          <Skeleton className='h-[13px] w-[200px]' />
-        </div>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-[4px]'>
-        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
-        <Skeleton className='h-[30px] w-[50px] rounded-[4px]' />
+    <div className={GRID_COLS}>
+      <Skeleton className='h-9 rounded-[6px]' />
+      <div />
+      <Skeleton className='h-9 rounded-[6px]' />
+      <div className='ml-[8px] flex items-center gap-0'>
+        <Skeleton className='h-9 w-9 rounded-[6px]' />
+        <Skeleton className='h-9 w-9 rounded-[6px]' />
       </div>
     </div>
   )
 }
 
 /**
- * Skeleton for the Credentials section shown during dynamic import loading.
+ * Skeleton for the Secrets section shown during dynamic import loading.
  */
 export function CredentialsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-[16px]'>
       <div className='flex items-center gap-[8px]'>
         <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+        <Skeleton className='h-[30px] w-[56px] rounded-[6px]' />
+        <Skeleton className='h-[30px] w-[50px] rounded-[6px]' />
       </div>
       <div className='flex flex-col gap-[8px]'>
-        <CredentialSkeleton />
+        <Skeleton className='h-5 w-[70px]' />
+        <div className='text-[13px] text-[var(--text-muted)]'>
+          <Skeleton className='h-5 w-[160px]' />
+        </div>
+      </div>
+      <div className='flex flex-col gap-[8px]'>
+        <Skeleton className='h-5 w-[55px]' />
         <CredentialSkeleton />
         <CredentialSkeleton />
       </div>