Revert "Update MCP Client UI slightly"

This reverts commit e8ee82e.

Author: dgageot

src/extension/ui/src/components/CatalogGrid.tsx

@@ -76,7 +76,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         justifyContent="center"
         sx={CATALOG_LAYOUT_SX}
       >
-        <Typography variant="h3">Docker MCP Catalog</Typography>
+        <Typography variant="h3">Docker MCP Toolkit</Typography>
         <Typography sx={{ color: 'text.secondary' }}>
           Browse the Docker MCP Catalog and connect Dockerized MCP servers to
           your favorite MCP Client

src/extension/ui/src/components/tabs/ToolCatalog.tsx

@@ -38,7 +38,6 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
         })
         : filteredItems;
   }, [catalogItems, search, sort]);
-
   const enabled = all.filter((item) => item.registered);
 
   return (

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -7,7 +7,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  Chip,
   CircularProgress,
   Collapse,
   Divider,
@@ -16,7 +15,6 @@ import {
   ListItem,
   ListItemText,
   Stack,
-  Theme,
   Typography
 } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -26,7 +24,6 @@ import ContinueIcon from '../../assets/continue.svg';
 import CursorIcon from '../../assets/cursor.svg';
 import GordonIcon from '../../assets/gordon-icon.png';
 import { CATALOG_LAYOUT_SX, DOCKER_MCP_COMMAND } from '../../Constants';
-import { LinkOffOutlined, LinkOutlined } from '@mui/icons-material';
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
@@ -42,16 +39,6 @@ const iconMap = {
   'Continue.dev': ContinueIcon,
 };
 
-const ConnectButtonStyle = (theme: Theme) => ({
-  fontSize: '1.3em',
-  p: 1,
-  alignItems: 'center',
-  justifyContent: 'center',
-  [theme.breakpoints.down('sm')]: {
-    fontSize: '1em',
-  },
-});
-
 const MCPClientSettings = ({ appProps }: MCPClientSettingsProps) => {
   // Extract all the values we need from appProps
   const { mcpClientStates, updateMCPClientStates } = appProps;
@@ -140,7 +127,6 @@ function ClientSetting({
   mcpClientState: any;
   appProps: any;
 }) {
-
   const [expanded, setExpanded] = useState(false);
 
   // Extract all the values we need from appProps
@@ -163,68 +149,75 @@ function ClientSetting({
             />
           )
         }
-        title={<Typography variant="subtitle2">{name}{mcpClientState.exists ? '' : <Chip sx={{ ml: 1 }} label="Not detected" color="error" size="small" />}</Typography>}
+        title={<Typography variant="subtitle2">{name}</Typography>}
         subheader={
-          < Typography
-            variant="body2"
-            sx={{
-              color: 'text.secondary',
-              alignItems: 'center',
-              display: 'flex',
-              cursor: 'pointer',
-            }}
-            onClick={() => setExpanded(!expanded)}
-          >
-            Manual configuration
-            {
-              expanded ? (
+          mcpClientState.exists ? (
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+                alignItems: 'center',
+                display: 'flex',
+                cursor: 'pointer',
+              }}
+              onClick={() => setExpanded(!expanded)}
+            >
+              Manual configuration
+              {expanded ? (
                 <KeyboardArrowDownIcon fontSize="small" />
               ) : (
                 <KeyboardArrowRightIcon fontSize="small" />
-              )
-            }
-          </Typography >
+              )}
+            </Typography>
+          ) : (
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              Client not installed
+            </Typography>
+          )
         }
         action={
-          < Stack direction="row" spacing={1} >
-            {
-              mcpClientState.exists && mcpClientState.configured && (
-                <Button
-                  onClick={async () => {
+          <Stack direction="row" spacing={1}>
+            {mcpClientState.exists && mcpClientState.configured && (
+              <Button
+                onClick={async () => {
+                  setButtonsLoading({
+                    ...buttonsLoading,
+                    [name]: true,
+                  });
+                  try {
+                    await disconnectClient(name);
+                  } finally {
                     setButtonsLoading({
                       ...buttonsLoading,
-                      [name]: true,
+                      [name]: false,
                     });
-                    try {
-                      await disconnectClient(name);
-                    } finally {
-                      setButtonsLoading({
-                        ...buttonsLoading,
-                        [name]: false,
-                      });
-                    }
-                  }}
-                  disabled={
-                    buttonsLoading[name] ||
-                    Boolean(mcpClientState.preventAutoConnectMessage)
                   }
-                >
-                  <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
-                    {(buttonsLoading[name] && (
-                      <>
-                        <Typography sx={{ fontSize: 12, width: 70 }}>
-                          Connect
-                        </Typography>
-                        <CircularProgress size={12} />
-                      </>
-                    )) || (
-                        <Typography sx={{ fontSize: 12, width: 90 }}>
-                          Disconnect
-                        </Typography>
-                      )}
-                  </Stack>
-                </Button>
-              )}
+                }}
+                disabled={buttonsLoading[name]}
+                color="warning"
+                size="small"
+              >
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  {(buttonsLoading[name] && (
+                    <>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>
+                        Connect
+                      </Typography>
+                      <CircularProgress size={12} />
+                    </>
+                  )) || (
+                      <Typography sx={{ fontSize: 12, width: 90 }}>
+                        Disconnect
+                      </Typography>
+                    )}
+                </Stack>
+              </Button>
+            )}
             {mcpClientState.exists && !mcpClientState.configured && (
               <Button
                 sx={{ fontSize: 12 }}
@@ -238,23 +231,15 @@ function ClientSetting({
                   } finally {
                     setButtonsLoading({
                       ...buttonsLoading,
-                      [name]: true,
+                      [name]: false,
                     });
-                    try {
-                      await connectClient(name);
-                    } finally {
-                      setButtonsLoading({
-                        ...buttonsLoading,
-                        [name]: false,
-                      });
-                    }
                   }
                 }}
                 disabled={buttonsLoading[name]}
                 color="primary"
                 size="small"
               >
-                <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
+                <Stack direction="row" alignItems="center" spacing={1}>
                   {(buttonsLoading[name] && (
                     <>
                       <Typography sx={{ fontSize: 12, width: 70 }}>
@@ -270,47 +255,46 @@ function ClientSetting({
                 </Stack>
               </Button>
             )}
-            {
-              !mcpClientState.exists && (
-                <Button
-                  sx={{ fontSize: 12 }}
-                  size="small"
-                  disabled
-                  onClick={async () => {
+            {!mcpClientState.exists && (
+              <Button
+                sx={{ fontSize: 12 }}
+                size="small"
+                disabled
+                onClick={async () => {
+                  setButtonsLoading({
+                    ...buttonsLoading,
+                    [name]: true,
+                  });
+                  try {
+                    await connectClient(name);
+                  } finally {
                     setButtonsLoading({
                       ...buttonsLoading,
-                      [name]: true,
+                      [name]: false,
                     });
-                    try {
-                      await connectClient(name);
-                    } finally {
-                      setButtonsLoading({
-                        ...buttonsLoading,
-                        [name]: true,
-                      });
-                    }
-                  }}
-                >
-                  <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
-                    {(buttonsLoading[name] && (
-                      <>
-                        <Typography sx={{ fontSize: 12, width: 70 }}>
-                          Disconnect
-                        </Typography>
-                        <CircularProgress size={12} />
-                      </>
-                    )) || (
-                        <Typography sx={{ fontSize: 12, width: 90 }}>
-                          Connect
-                        </Typography>
-                      )}
-                  </Stack>
-                </Button>
-              )}
-          </Stack >
+                  }
+                }}
+              >
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  {(buttonsLoading[name] && (
+                    <>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>
+                        Disconnect
+                      </Typography>
+                      <CircularProgress size={12} />
+                    </>
+                  )) || (
+                      <Typography sx={{ fontSize: 12, width: 90 }}>
+                        Connect
+                      </Typography>
+                    )}
+                </Stack>
+              </Button>
+            )}
+          </Stack>
         }
       />
-      <Collapse in={expanded} timeout="auto" unmountOnExit >
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
           <Stack direction="column" justifyContent="center" spacing={1}>
             <Stack direction="row" alignItems="center" spacing={1}>
@@ -361,8 +345,8 @@ function ClientSetting({
             )}
           </List>
         </CardContent>
-      </Collapse >
-    </Card >
+      </Collapse>
+    </Card>
   );
 }