feat: add used app icons in FlowRow

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

@@ -6,6 +6,7 @@ type AppIconProps = {
   name?: string;
   url?: string;
   color?: string;
+  variant?: AvatarProps['variant'];
 };
 
 const inlineImgStyle: React.CSSProperties = {
@@ -13,12 +14,12 @@ const inlineImgStyle: React.CSSProperties = {
 };
 
 export default function AppIcon(props: AppIconProps & AvatarProps): React.ReactElement {
-  const { name, url, color, sx = {}, ...restProps } = props;
+  const { name, url, color, sx = {}, variant = "square", ...restProps } = props;
 
   return (
     <Avatar
       component="span"
-      variant="square"
+      variant={variant}
       sx={{ bgcolor: color, display: 'flex', width: 50, height: 50, ...sx }}
       imgProps={{ style: inlineImgStyle }}
       src={url}

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

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
-import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
 import CardActionArea from '@mui/material/CardActionArea';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
 
 import type { IFlow } from '@automatisch/types';
+import AppIcon from 'components/AppIcon';
 import FlowContextMenu from 'components/FlowContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
-import { CardContent, Typography } from './style';
+import { Apps, CardContent, ContextMenu, Title, Typography } from './style';
 
 type FlowRowProps = {
   flow: IFlow;
@@ -45,10 +44,22 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
       <Card sx={{ mb: 1 }}>
         <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
           <CardContent>
-            <Stack
+            <Apps direction="row" gap={1} sx={{gridArea:"apps"}}>
+              {["Twitter", "+3", "Github"].map((app) => (
+                <AppIcon
+                  name={app}
+                  color="lightpink"
+                  variant="rounded"
+                  url="httpss://via.placeholder.com/50"
+                />
+              ))}
+            </Apps>
+
+            <Title
               justifyContent="center"
               alignItems="flex-start"
               spacing={1}
+              sx={{gridArea:"title"}}
             >
               <Typography variant="h6" noWrap>
                 {flow?.name}
@@ -58,9 +69,9 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
                 {isUpdated && formatMessage('flow.updatedAt', { datetime: relativeUpdatedAt })}
                 {!isUpdated && formatMessage('flow.createdAt', { datetime: relativeCreatedAt })}
               </Typography>
-            </Stack>
+            </Title>
 
-            <Box>
+            <ContextMenu>
               <IconButton
                 size="large"
                 edge="start"
@@ -71,7 +82,7 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
               >
                 <MoreHorizIcon />
               </IconButton>
-            </Box>
+            </ContextMenu>
           </CardContent>
         </CardActionArea>
       </Card>
@@ -83,4 +94,4 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
       />}
     </>
   );
-}
+}

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

@@ -1,20 +1,42 @@
 import { styled } from '@mui/material/styles';
+import MuiStack from '@mui/material/Stack';
+import MuiBox from '@mui/material/Box';
 import MuiCardContent from '@mui/material/CardContent';
 import MuiTypography from '@mui/material/Typography';
 
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   display: 'grid',
   gridTemplateRows: 'auto',
-  gridTemplateColumns: '1fr auto',
-  gridColumnGap: theme.spacing(2),
+  gridTemplateColumns: 'calc(50px * 3 + 8px * 2) minmax(0, auto) min-content',
+  gridGap: theme.spacing(2),
+  gridTemplateAreas: `
+    "apps title menu"
+  `,
   alignItems: 'center',
+  [theme.breakpoints.down('sm')]: {
+    gridTemplateAreas: `
+      "apps menu"
+      "title menu"
+    `,
+    gridTemplateColumns: 'minmax(0, auto) min-content',
+    gridTemplateRows: 'auto auto',
+  }
 }));
 
+export const Apps = styled(MuiStack)(() => ({
+  gridArea: 'apps',
+}));
+export const Title = styled(MuiStack)(() => ({
+  gridArea: 'title',
+}));
 
+export const ContextMenu = styled(MuiBox)(() => ({
+  gridArea: 'menu',
+}));
 export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
   width: '100%',
-  maxWidth: '70%',
+  maxWidth: '85%',
 }));
 
 export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({

packages/web/src/graphql/queries/get-flows.ts

@@ -17,4 +17,4 @@ export const GET_FLOWS = gql`
       }
     }
   }
-`;
+`;