Unify setup status block

resources/js/admin/mobile/components/SetupChecklist.tsx

@@ -22,32 +22,21 @@ export function SetupChecklist({
 }: {
   steps: ReadinessStep[];
   title: string;
-  variant?: 'card' | 'embedded';
+  variant?: 'card' | 'inline';
 }) {
   const theme = useAdminTheme();
   const { t } = useTranslation('dashboard');
   const navigate = useNavigate();
   const isAllComplete = steps.every(s => s.isComplete);
-  const [collapsed, setCollapsed] = React.useState(isAllComplete);
-  const isEmbedded = variant === 'embedded';
+  const [collapsed, setCollapsed] = React.useState(true);
+  const isInline = variant === 'inline';
 
   const completedCount = steps.filter(s => s.isComplete).length;
   const totalSteps = steps.length;
   const progressValue = totalSteps > 0 ? Math.round((completedCount / totalSteps) * 100) : 0;
 
-  return (
-    <Card
-      backgroundColor={theme.surface}
-      borderRadius={isEmbedded ? 16 : 20}
-      borderWidth={1}
-      borderColor={theme.border}
-      padding="$0"
-      overflow="hidden"
-      shadowColor={theme.shadow}
-      shadowOpacity={isEmbedded ? 0 : 0.16}
-      shadowRadius={isEmbedded ? 0 : 16}
-      shadowOffset={isEmbedded ? { width: 0, height: 0 } : { width: 0, height: 10 }}
-    >
+  const content = (
+    <YStack>
       <Pressable onPress={() => setCollapsed(!collapsed)}>
         <YStack padding="$3" paddingVertical="$2.5" space="$2">
           <XStack alignItems="center" justifyContent="space-between">
@@ -132,6 +121,27 @@ export function SetupChecklist({
           </YGroup>
         </YStack>
       )}
+    </YStack>
+  );
+
+  if (isInline) {
+    return content;
+  }
+
+  return (
+    <Card
+      backgroundColor={theme.surface}
+      borderRadius={20}
+      borderWidth={1}
+      borderColor={theme.border}
+      padding="$0"
+      overflow="hidden"
+      shadowColor={theme.shadow}
+      shadowOpacity={0.16}
+      shadowRadius={16}
+      shadowOffset={{ width: 0, height: 10 }}
+    >
+      {content}
     </Card>
   );
 }