feat: add intermediate step count in flow apps

packages/web/src/components/FlowRow/index.tsx

@@ -7,6 +7,7 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
 
 import type { IFlow } from '@automatisch/types';
+import IntermediateStepCount from 'components/IntermediateStepCount';
 import AppIcon from 'components/AppIcon';
 import FlowContextMenu from 'components/FlowContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -45,14 +46,21 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
         <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
           <CardContent>
             <Apps direction="row" gap={1} sx={{gridArea:"apps"}}>
-              {["Twitter", "+3", "Github"].map((app) => (
               <AppIcon
-                  name={app}
+                name="Twitter"
+                color="lightpink"
+                variant="rounded"
+                url="httpss://via.placeholder.com/50"
+              />
+
+              <IntermediateStepCount count={99} />
+
+              <AppIcon
+                name="Github"
                 color="lightpink"
                 variant="rounded"
                 url="httpss://via.placeholder.com/50"
               />
-              ))}
             </Apps>
 
             <Title

packages/web/src/components/IntermediateStepCount/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+import { Container } from './style';
+
+type IntermediateStepCountProps = {
+  count: number;
+}
+
+export default function IntermediateStepCount(props: IntermediateStepCountProps) {
+  const { count } = props;
+
+  return (
+    <Container>
+      <Typography variant="body2">
+        +{count}
+      </Typography>
+    </Container>
+  );
+}

packages/web/src/components/IntermediateStepCount/style.ts

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+
+export const Container = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minWidth: 50,
+  height: 50,
+  border: '1px solid #000',
+  borderRadius: theme.shape.borderRadius,
+}));