feat: Extend App pages with tabs and data

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

@@ -0,0 +1,24 @@
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import Dialog from '@mui/material/Dialog';
+
+type AddAppConnectionProps = {
+  onClose: (value: string) => void;
+};
+
+export default function AddAppConnection(props: AddAppConnectionProps){
+  const { onClose } = props;
+
+  return (
+    <Dialog open={true} onClose={onClose}>
+      <DialogTitle>Add connection</DialogTitle>
+
+      <DialogContent>
+        <DialogContentText tabIndex={-1}>
+          Here comes the "add connection" dialog
+        </DialogContentText>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,15 @@
+import Avatar from '@mui/material/Avatar';
+
+type AppIconProps = {
+  name: string;
+  url: string;
+  color?: string;
+};
+
+export default function AppIcon(props: AppIconProps) {
+  const { color = '#00adef', name, url } = props;
+
+  return (
+    <Avatar component="span" variant="square" sx={{ bgcolor: color }} src={url} alt={name} />
+  );
+};

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

@@ -41,13 +41,13 @@ function AppRow(props: AppRowProps) {
 
             <Box sx={{ px: 2 }}>
               <Typography variant="body2">
-                {formatMessage('app.connections', { count: countTranslation(Math.round(Math.random() * 100)) })}
+                {formatMessage('app.connectionCount', { count: countTranslation(Math.round(Math.random() * 100)) })}
               </Typography>
             </Box>
 
             <Box sx={{ px: 2 }}>
               <Typography variant="body2">
-                {formatMessage('app.flows', { count: countTranslation(Math.round(Math.random() * 100)) })}
+                {formatMessage('app.flowCount', { count: countTranslation(Math.round(Math.random() * 100)) })}
               </Typography>
             </Box>
 

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

@@ -0,0 +1,19 @@
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export default function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      {...other}
+    >
+      {value === index && children}
+    </div>
+  );
+};