[UI] Fix settings rendering (#11987)

- Do not duplicate global plugin settings

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

@@ -70,10 +70,12 @@ function PluginSettingGroupItem({
 export default function PluginSettingsGroup({
   mixin,
   message,
+  includeBaseSettings,
   global
 }: {
   global: boolean;
   message?: string;
+  includeBaseSettings?: boolean;
   mixin?: string;
 }) {
   const mixins: string = useMemo(() => {
@@ -99,6 +101,7 @@ export default function PluginSettingsGroup({
 
   return (
     <Stack gap='xs'>
+      {includeBaseSettings == true && (
         <Accordion defaultValue='plugin-settings'>
           <Accordion.Item value='plugin-settings'>
             <Accordion.Control>
@@ -109,6 +112,7 @@ export default function PluginSettingsGroup({
             </Accordion.Panel>
           </Accordion.Item>
         </Accordion>
+      )}
       <Alert color='blue' icon={<IconInfoCircle />}>
         <Text>
           {message ??

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

@@ -15,7 +15,7 @@ import {
   IconShoppingCart,
   IconTruckDelivery
 } from '@tabler/icons-react';
-import { lazy, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { PluginPanelKey } from '@lib/enums/ModelType';
 import type { PanelType } from '@lib/types/Panel';
@@ -25,13 +25,9 @@ import PageTitle from '../../../components/nav/PageTitle';
 import { SettingsHeader } from '../../../components/nav/SettingsHeader';
 import { PanelGroup } from '../../../components/panels/PanelGroup';
 import { GlobalSettingList } from '../../../components/settings/SettingList';
-import { Loadable } from '../../../functions/loading';
 import { useServerApiState } from '../../../states/ServerApiState';
 import { useUserState } from '../../../states/UserState';
-
+import PluginSettingsGroup from './PluginSettingsGroup';
-const PluginSettingsGroup = Loadable(
-  lazy(() => import('./PluginSettingsGroup'))
-);
 
 /**
  * System settings page
@@ -371,7 +367,9 @@ export default function SystemSettings() {
         name: 'plugins',
         label: t`Plugins`,
         icon: <IconPlugConnected />,
-        content: <PluginSettingsGroup global={true} />
+        content: (
+          <PluginSettingsGroup global={true} includeBaseSettings={true} />
+        )
       }
     ];
   }, []);

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

@@ -9,7 +9,7 @@ import {
   IconSearch,
   IconUserCircle
 } from '@tabler/icons-react';
-import { lazy, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { PluginPanelKey } from '@lib/enums/ModelType';
 import type { PanelType } from '@lib/types/Panel';
@@ -18,14 +18,10 @@ import PageTitle from '../../../components/nav/PageTitle';
 import { SettingsHeader } from '../../../components/nav/SettingsHeader';
 import { PanelGroup } from '../../../components/panels/PanelGroup';
 import { UserSettingList } from '../../../components/settings/SettingList';
-import { Loadable } from '../../../functions/loading';
 import { useUserState } from '../../../states/UserState';
 import { SecurityContent } from './AccountSettings/SecurityContent';
 import { AccountContent } from './AccountSettings/UserPanel';
-
+import PluginSettingsGroup from './PluginSettingsGroup';
-const PluginSettingsGroup = Loadable(
-  lazy(() => import('./PluginSettingsGroup'))
-);
 
 /**
  * User settings page
@@ -130,7 +126,9 @@ export default function UserSettings() {
         name: 'plugins',
         label: t`Plugin Settings`,
         icon: <IconPlugConnected />,
-        content: <PluginSettingsGroup global={false} />
+        content: (
+          <PluginSettingsGroup global={false} includeBaseSettings={true} />
+        )
       }
     ];
   }, []);