Cleanup panel groups (#9783)

- Hide label if panel is not expanded
- Add a visual divider

Author: SchrodingersGat

src/frontend/src/components/panels/PanelGroup.tsx

@@ -218,13 +218,16 @@ function BasePanelGroup({
             {groupedPanels.map((group) => (
               <Box key={`group-${group.id}`} w={'100%'}>
                 <Text
-                  fs={'italic'}
-                  ml={'1rem'}
+                  hidden={!group.label || !expanded}
                   c={vars.colors.primaryColors[7]}
                   key={`group-label-${group.id}`}
+                  style={{
+                    paddingLeft: '10px'
+                  }}
                 >
                   {group.label}
                 </Text>
+                {group.label && <Divider c={vars.colors.primaryColors[7]} />}
                 {group.panels?.map(
                   (panel) =>
                     !panel.hidden && (

src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx

@@ -256,11 +256,6 @@ export default function AdminCenter() {
         label: t`Reporting`,
         panelIDs: ['labels', 'reports']
       },
-      {
-        id: 'extend',
-        label: t`Extend / Integrate`,
-        panelIDs: ['plugin', 'machine']
-      },
       {
         id: 'plm',
         label: t`PLM`,
@@ -270,6 +265,11 @@ export default function AdminCenter() {
           'location-types',
           'stocktake'
         ]
+      },
+      {
+        id: 'extend',
+        label: t`Extend / Integrate`,
+        panelIDs: ['plugin', 'machine']
       }
     ];
   }, []);