slight redesign to list config menu

src/i18n/locales/en.json

@@ -909,6 +909,7 @@
         },
         "config": {
             "general": {
+                "advancedSettings": "advanced settings",
                 "autoFitColumns": "auto fit columns",
                 "autosize": "autosize",
                 "moveUp": "move up",
@@ -934,9 +935,9 @@
                 "pagination_infinite": "infinite",
                 "pagination_paginate": "paginated",
                 "alternateRowColors": "alternate row colors",
-                "horizontalBorders": "horizontal borders",
+                "horizontalBorders": "row borders",
                 "rowHoverHighlight": "row hover highlight",
-                "verticalBorders": "vertical borders"
+                "verticalBorders": "column borders"
             },
             "label": {
                 "actions": "$t(common.action_other)",

src/renderer/features/shared/components/grid-config.tsx

@@ -24,6 +24,7 @@ import {
     useSettingsStore,
     useSettingsStoreActions,
 } from '/@/renderer/store';
+import { Accordion } from '/@/shared/components/accordion/accordion';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -246,7 +247,25 @@ export const GridConfig = ({
 
     return (
         <>
-            <ListConfigTable options={options} />
+            <Accordion
+                styles={{
+                    control: { padding: '0' },
+                    item: { border: 'none' },
+                }}
+            >
+                <Accordion.Item value="grid">
+                    <Accordion.Control>
+                        <Text size="sm">
+                            {t('table.config.general.advancedSettings', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </Text>
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                        <ListConfigTable options={options} />
+                    </Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
             <Divider />
             <GridRowConfig
                 data={gridRowsData}

src/renderer/features/shared/components/list-config-menu.tsx

@@ -13,6 +13,7 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { Modal } from '/@/shared/components/modal/modal';
 import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Stack } from '/@/shared/components/stack/stack';
+import { Switch } from '/@/shared/components/switch/switch';
 import { Table } from '/@/shared/components/table/table';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
@@ -56,26 +57,9 @@ export const ListConfigBooleanControl = ({
     value: boolean;
 }) => {
     return (
-        <SegmentedControl
+        <Group justify="flex-end" w="100%">
-            data={[
+            <Switch checked={value} onChange={(e) => onChange(e.currentTarget.checked)} />
-                {
+        </Group>
-                    label: i18n.t('common.enable', {
-                        postProcess: 'sentenceCase',
-                    }) as string,
-                    value: 'true',
-                },
-                {
-                    label: i18n.t('common.disable', {
-                        postProcess: 'sentenceCase',
-                    }) as string,
-                    value: 'false',
-                },
-            ]}
-            onChange={(value) => onChange(value === 'true' ? true : false)}
-            size="sm"
-            value={value ? 'true' : 'false'}
-            w="100%"
-        />
     );
 };
 
@@ -147,17 +131,30 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
                 size="lg"
                 title={t('common.configure', { postProcess: 'sentenceCase' })}
             >
-                <Stack>
+                <Stack gap="xs">
-                    <SegmentedControl
+                    <ListConfigTable
-                        data={availableDisplayTypes}
+                        options={[
-                        fullWidth
+                            {
-                        onChange={(value) => {
+                                component: (
-                            setList(props.listKey, {
+                                    <SegmentedControl
-                                display: value as ListDisplayType,
+                                        data={availableDisplayTypes}
-                            });
+                                        fullWidth
-                        }}
+                                        onChange={(value) => {
-                        value={displayType}
+                                            setList(props.listKey, {
-                        withItemsBorders={false}
+                                                display: value as ListDisplayType,
+                                            });
+                                        }}
+                                        size="sm"
+                                        value={displayType}
+                                        withItemsBorders={false}
+                                    />
+                                ),
+                                id: 'displayType',
+                                label: t('table.config.general.displayType', {
+                                    postProcess: 'sentenceCase',
+                                }),
+                            },
+                        ]}
                     />
                     <Config displayType={displayType} {...props} />
                 </Stack>

src/renderer/features/shared/components/table-config.tsx

@@ -22,6 +22,7 @@ import {
     ListConfigTable,
 } from '/@/renderer/features/shared/components/list-config-menu';
 import { ItemListSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import { Accordion } from '/@/shared/components/accordion/accordion';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -65,7 +66,7 @@ export const TableConfig = ({
     const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
     const { setList } = useSettingsStoreActions();
 
-    const options = useMemo(() => {
+    const advancedSettings = useMemo(() => {
         const allOptions = [
             {
                 component: (
@@ -248,7 +249,25 @@ export const TableConfig = ({
 
     return (
         <>
-            <ListConfigTable options={options} />
+            <Accordion
+                styles={{
+                    control: { padding: '0' },
+                    item: { border: 'none' },
+                }}
+            >
+                <Accordion.Item value="table">
+                    <Accordion.Control>
+                        <Text size="sm">
+                            {t('table.config.general.advancedSettings', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </Text>
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                        <ListConfigTable options={advancedSettings} />
+                    </Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
             <Divider />
             <TableColumnConfig
                 data={tableColumnsData}