Apply the cleanup passes: step-back focus, one failure notice, fewer comments

Author: waleedlatif1

apps/sim/platform/app/(shell)/_components/sidebar/section-status.tsx

@@ -1,6 +1,6 @@
 import type { ShellQueryStatus } from '@/platform/app/(shell)/_components/model'
 import styles from '@/platform/app/(shell)/_components/sidebar/sidebar-collections.module.css'
-import { Button, InlineNotice } from '@/platform/design-system/components'
+import { FailureNotice } from '@/platform/design-system/components'
 
 interface SectionStatusProps {
   /** Absent means the rows are simply there, so nothing here applies. */
@@ -19,20 +19,7 @@ export function SectionStatus({
   failureLabel,
   onRetry,
 }: SectionStatusProps) {
-  if (status === 'error')
-    return (
-      <InlineNotice
-        intent='danger'
-        message={failureLabel}
-        action={
-          onRetry && (
-            <Button size='compact' variant='quiet' onClick={onRetry}>
-              Retry
-            </Button>
-          )
-        }
-      />
-    )
+  if (status === 'error') return <FailureNotice message={failureLabel} onRetry={onRetry} />
   if (status === 'success' && isEmpty)
     return (
       <p className={styles.message} data-type='T052'>

apps/sim/platform/app/(shell)/people/_components/directory-sync/directory-sync-modal.tsx

@@ -7,6 +7,7 @@ import styles from '@/platform/app/(shell)/people/_components/directory-sync/dir
 import { canUseProvisioning } from '@/platform/app/(shell)/people/_components/import/import-modal'
 import {
   Button,
+  FailureNotice,
   InlineNotice,
   Modal,
   PropertyList,
@@ -368,14 +369,10 @@ export function DirectorySyncModal({ organization, onClose }: DirectorySyncModal
           Loading directory connection…
         </p>
       ) : directory.loadError ? (
-        <InlineNotice
-          intent='danger'
+        <FailureNotice
           message={directory.loadError.message}
-          action={
-            <Button size='compact' disabled={directory.fetching} onClick={directory.retry}>
-              Retry connection
-            </Button>
-          }
+          retrying={directory.fetching}
+          onRetry={directory.retry}
         />
       ) : mode === 'disconnect' && sync ? (
         <>

apps/sim/platform/app/(shell)/settings/_components/section-parts/saved-settings.tsx

@@ -30,7 +30,6 @@ interface BooleanRowProps {
   description: string
 }
 
-/** A saved on-or-off preference. */
 export function BooleanRow({ setting, label, description }: BooleanRowProps) {
   const { checked, disabled, set } = useBooleanSetting(setting)
   return (

apps/sim/platform/app/(shell)/settings/_components/section-parts/section-parts.module.css

@@ -114,7 +114,7 @@
   display: block;
   block-size: var(--spacing-12);
   border-radius: var(--radius-4);
-  background: var(--ui-hover);
+  background: var(--control-muted-fill);
 }
 
 .skeletonLabel {

apps/sim/platform/app/(shell)/settings/_components/section-parts/section-parts.tsx

@@ -142,7 +142,6 @@ interface SectionSkeletonProps {
   rows?: number
 }
 
-/** A section's own heading over its loading rows. */
 export function SectionSkeleton({ title, rows }: SectionSkeletonProps) {
   return (
     <SettingsSection title={title}>

apps/sim/platform/app/(shell)/settings/_components/sections/data-drains/drain-create.tsx

@@ -13,7 +13,7 @@ import {
 import {
   Button,
   Checkbox,
-  FailureNotice,
+  InlineNotice,
   SecretField,
   SelectField,
   TextAreaField,
@@ -203,7 +203,9 @@ export function DrainCreate({ organizationId, onBack, onCreated }: DrainCreatePr
                 }}
               />
             ))}
-            {createDrain.error && <FailureNotice message={toError(createDrain.error).message} />}
+            {createDrain.error && (
+              <InlineNotice intent='danger' message={toError(createDrain.error).message} />
+            )}
           </FieldStack>
         </SettingsSection>
         <ActionRow>

apps/sim/platform/app/(shell)/settings/_components/settings-screen/settings-screen.module.css

@@ -75,5 +75,5 @@
   block-size: var(--spacing-32);
   inline-size: var(--spacing-128);
   border-radius: var(--radius-4);
-  background: var(--ui-hover);
+  background: var(--control-muted-fill);
 }

apps/sim/platform/design-system/components/button/control-row.tsx

@@ -56,7 +56,7 @@ export function ControlRow({
       ),
     },
   })
-  if (!action) return control
+  if (!action && !status) return control
   return (
     <div
       className={styles.chipRow}
@@ -65,7 +65,7 @@ export function ControlRow({
     >
       {control}
       {status && <span className={styles.chipStatus}>{status}</span>}
-      <span className={styles.chipAction}>{action}</span>
+      {action && <span className={styles.chipAction}>{action}</span>}
     </div>
   )
 }

apps/sim/platform/design-system/components/modal/modal.tsx

@@ -72,6 +72,8 @@ function ModalSurface({
   const [index, setIndex] = useState(0)
   const [pending, setPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  /** A step back within one step still moves focus, so a repeated Enter cannot reach Cancel. */
+  const [backs, setBacks] = useState(0)
   const open = controlled ?? internal
   const step = steps[index]
   const last = index === steps.length - 1
@@ -115,7 +117,7 @@ function ModalSurface({
         open={open}
         title={title}
         description={step.description}
-        step={index}
+        step={index + backs}
         presentation={presentation}
         busy={pending}
         onClose={dismiss}
@@ -144,8 +146,10 @@ function ModalSurface({
           onPrevious={() => {
             setError(null)
             if (index > 0) setIndex(index - 1)
-            else if (onBack) onBack()
-            else dismiss()
+            else if (onBack) {
+              onBack()
+              setBacks(backs + 1)
+            } else dismiss()
           }}
           cancelLabel={index > 0 || onBack ? 'Back' : cancelLabel}
           disabled={pending || (last && confirmDisabled)}

apps/sim/platform/lib/data/server-request.ts

@@ -38,7 +38,6 @@ export async function serverRequestJson<C extends AnyApiRouteContract>(
   return readContractResponse(contract, response)
 }
 
-/** A first-paint read, which gives up its seat quickly because the client can always fetch it. */
 export function prefetchRequestJson<C extends AnyApiRouteContract>(
   contract: C,
   input: ApiClientRequest<C>