improvement(ui): reuse shared product status pages (#8089)

* improvement(ui): reuse shared product status pages

* fix(ui): preserve the existing chat recovery button

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

Author: BillLeoutsakosvl346

apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from '@sim/emcn'
+import { Button, StatusPageContent } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
@@ -13,19 +13,16 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
 
   return (
     <div className='flex flex-1 items-center justify-center px-4 py-16 text-center'>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          Chat Unavailable
-        </h1>
-        <p className='text-[var(--text-muted)] text-lg'>{error}</p>
+      <StatusPageContent title='Chat Unavailable' description={error}>
         <Button
+          type='button'
           variant='primary'
-          onClick={() => router.push(APP_ENTRY_PATH)}
           className='h-[32px] w-full gap-2 px-2.5 text-sm'
+          onClick={() => router.push(APP_ENTRY_PATH)}
         >
           Open Sim
         </Button>
-      </div>
+      </StatusPageContent>
     </div>
   )
 }

apps/sim/app/oauth/credential-connected/page.tsx

@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, StatusPageContent } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
@@ -22,19 +22,18 @@ export default async function CredentialConnectedPage({
 
   return (
     <LogoShell center>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3 text-center'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          {connected ? 'Credential connected' : 'Connection failed'}
-        </h1>
-        <p className='text-pretty text-[var(--text-muted)] text-lg'>
-          {connected
+      <StatusPageContent
+        title={connected ? 'Credential connected' : 'Connection failed'}
+        description={
+          connected
             ? 'The credential is ready to use. You can close this tab and return to the app that started the connection.'
-            : 'The credential could not be connected. Return to the app that started the connection and try again.'}
-        </p>
-        <ChipLink variant='primary' href={APP_ENTRY_PATH} className='mt-3'>
+            : 'The credential could not be connected. Return to the app that started the connection and try again.'
+        }
+      >
+        <ChipLink variant='primary' href={APP_ENTRY_PATH}>
           Open Sim
         </ChipLink>
-      </div>
+      </StatusPageContent>
     </LogoShell>
   )
 }

packages/emcn/src/components/status-page/status-page.tsx

@@ -29,7 +29,7 @@ export function StatusPageContent({
         {title}
       </h1>
       <p className='text-[var(--text-body)] text-lg'>{description}</p>
-      <div className='mt-3 flex flex-wrap items-center justify-center gap-2'>{children}</div>
+      <div className='mt-3 flex w-full flex-wrap items-center justify-center gap-2'>{children}</div>
       {detail}
     </div>
   )