UI tweak (#11871)

* [UI] Small visual tweaks for plugin settings panel

Co-authored-by: Copilot <copilot@github.com>

* Refactor common code

Co-authored-by: Copilot <copilot@github.com>

* Reduce code duplication

---------

Co-authored-by: Copilot <copilot@github.com>

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

@@ -19,6 +19,18 @@ const PluginErrorTable = Loadable(
   lazy(() => import('../../../../tables/plugin/PluginErrorTable'))
 );
 
+export const PLUGIN_SETTINGS_KEYS = [
+  'ENABLE_PLUGINS_SCHEDULE',
+  'ENABLE_PLUGINS_EVENTS',
+  'ENABLE_PLUGINS_INTERFACE',
+  'ENABLE_PLUGINS_URL',
+  'ENABLE_PLUGINS_NAVIGATION',
+  'ENABLE_PLUGINS_APP',
+  'ENABLE_PLUGINS_MAILS',
+  'PLUGIN_ON_STARTUP',
+  'PLUGIN_UPDATE_CHECK'
+];
+
 export default function PluginManagementPanel() {
   const pluginsEnabled = useServerApiState(
     useShallow((state) => state.server.plugins_enabled)
@@ -55,19 +67,7 @@ export default function PluginManagementPanel() {
             <StylishText size='lg'>{t`Plugin Settings`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
-            <GlobalSettingList
+            <GlobalSettingList keys={PLUGIN_SETTINGS_KEYS} />
-              keys={[
-                'ENABLE_PLUGINS_SCHEDULE',
-                'ENABLE_PLUGINS_EVENTS',
-                'ENABLE_PLUGINS_INTERFACE',
-                'ENABLE_PLUGINS_URL',
-                'ENABLE_PLUGINS_NAVIGATION',
-                'ENABLE_PLUGINS_APP',
-                'ENABLE_PLUGINS_MAILS',
-                'PLUGIN_ON_STARTUP',
-                'PLUGIN_UPDATE_CHECK'
-              ]}
-            />
           </Accordion.Panel>
         </Accordion.Item>
         {user.isSuperuser() && (

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

@@ -1,14 +1,16 @@
-import { ApiEndpoints } from '@lib/index';
+import { ApiEndpoints, StylishText } from '@lib/index';
 import type { SettingsStateProps } from '@lib/types/Settings';
 import { t } from '@lingui/core/macro';
 import { Accordion, Alert, Group, Stack, Text } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import {
+  GlobalSettingList,
   PluginSettingList,
   PluginUserSettingList
 } from '../../../components/settings/SettingList';
 import { useInstance } from '../../../hooks/UseInstance';
+import { PLUGIN_SETTINGS_KEYS } from './AdminCenter/PluginManagementPanel';
 
 function PluginSettingGroupItem({
   global,
@@ -39,9 +41,13 @@ function PluginSettingGroupItem({
       hidden={count === 0}
     >
       <Accordion.Control>
-        <Group>
+        <Group justify='space-between'>
           <Text size='lg'>{pluginName}</Text>
-          {pluginDescription && <Text size='sm'>{pluginDescription}</Text>}
+          {pluginDescription && (
+            <Text size='sm' style={{ paddingRight: 25 }}>
+              {pluginDescription}
+            </Text>
+          )}
         </Group>
       </Accordion.Control>
       <Accordion.Panel>
@@ -93,6 +99,16 @@ export default function PluginSettingsGroup({
 
   return (
     <Stack gap='xs'>
+      <Accordion defaultValue='plugin-settings'>
+        <Accordion.Item value='plugin-settings'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Plugin Settings`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <GlobalSettingList keys={PLUGIN_SETTINGS_KEYS} />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
       <Alert color='blue' icon={<IconInfoCircle />}>
         <Text>
           {message ??