feat(profiles): highlight current extension step

src/components/profile/enhance-hint.tsx

@@ -1,5 +1,5 @@
-import { Alert, Typography } from '@mui/material'
-import { useTranslation } from 'react-i18next'
+import { Alert, Box, Typography } from '@mui/material'
+import { Trans, useTranslation } from 'react-i18next'
 
 const stageHints = {
   globalMerge: 'profiles.modals.editor.enhance.globalMerge',
@@ -14,12 +14,36 @@ interface Props {
 
 export const EnhanceHint = ({ stage }: Props) => {
   const { t } = useTranslation()
+  const orderComponents = Object.fromEntries(
+    Object.keys(stageHints).map((key) => [
+      key,
+      <Box
+        key={key}
+        component={key === stage ? 'strong' : 'span'}
+        sx={
+          key === stage
+            ? {
+                fontWeight: 'bold',
+                color: 'primary.contrastText',
+                bgcolor: 'primary.main',
+                borderRadius: 0.5,
+                px: 0.5,
+                boxDecorationBreak: 'clone',
+              }
+            : undefined
+        }
+      />,
+    ]),
+  )
 
   return (
     <Alert severity="info" sx={{ mb: 1.5, flexShrink: 0 }}>
       <Typography variant="body2">{t(stageHints[stage])}</Typography>
       <Typography variant="body2" sx={{ mt: 0.5 }}>
-        {t('profiles.modals.editor.enhance.order')}
+        <Trans
+          defaults={t('profiles.modals.editor.enhance.order')}
+          components={orderComponents}
+        />
       </Typography>
       <Typography variant="body2" sx={{ mt: 0.5 }}>
         {t('profiles.modals.editor.enhance.settingsPriority')}