1 files changed, 14 insertions, 23 deletions
diff --git a/modern/src/settings/DeviceConnectionsPage.jsx b/modern/src/settings/DeviceConnectionsPage.jsx
index 88d47872..c711d719 100644
--- a/modern/src/settings/DeviceConnectionsPage.jsx
+++ b/modern/src/settings/DeviceConnectionsPage.jsx
@@ -7,7 +7,6 @@ import {
   Typography,
   Container,
 } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import LinkField from '../common/components/LinkField';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -15,21 +14,10 @@ import SettingsMenu from './components/SettingsMenu';
 import { formatNotificationTitle } from '../common/util/formatter';
 import PageLayout from '../common/components/PageLayout';
 import useFeatures from '../common/util/useFeatures';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-  },
-  details: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    paddingBottom: theme.spacing(3),
-  },
-}));
+import useSettingsStyles from './common/useSettingsStyles';
 
 const DeviceConnectionsPage = () => {
-  const classes = useStyles();
+  const classes = useSettingsStyles();
   const t = useTranslation();
 
   const { id } = useParams();
@@ -73,6 +61,7 @@ const DeviceConnectionsPage = () => {
                 baseId={id}
                 keyBase="deviceId"
                 keyLink="driverId"
+                titleGetter={(it) => `${it.name} (${it.uniqueId})`}
                 label={t('sharedDrivers')}
               />
             )}
@@ -87,15 +76,17 @@ const DeviceConnectionsPage = () => {
                 label={t('sharedComputedAttributes')}
               />
             )}
-            <LinkField
-              endpointAll="/api/commands"
-              endpointLinked={`/api/commands?deviceId=${id}`}
-              baseId={id}
-              keyBase="deviceId"
-              keyLink="commandId"
-              titleGetter={(it) => it.description}
-              label={t('sharedSavedCommands')}
-            />
+            {!features.disableSavedCommands && (
+              <LinkField
+                endpointAll="/api/commands"
+                endpointLinked={`/api/commands?deviceId=${id}`}
+                baseId={id}
+                keyBase="deviceId"
+                keyLink="commandId"
+                titleGetter={(it) => it.description}
+                label={t('sharedSavedCommands')}
+              />
+            )}
             {!features.disableMaintenance && (
               <LinkField
                 endpointAll="/api/maintenance"