From 51c546fa5d9e2fc334a33a0f2cfa92e26e0e8e16 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 1 Dec 2025 18:35:51 -0800
Subject: [PATCH] slight redesign to list config menu

---
 src/i18n/locales/en.json                      |  5 +-
 .../shared/components/grid-config.tsx         | 21 ++++++-
 .../shared/components/list-config-menu.tsx    | 59 +++++++++----------
 .../shared/components/table-config.tsx        | 23 +++++++-
 4 files changed, 72 insertions(+), 36 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 10ef8ae63..328e97c48 100644
--- a/src/i18n/locales/en.json
+++ b/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)",
diff --git a/src/renderer/features/shared/components/grid-config.tsx b/src/renderer/features/shared/components/grid-config.tsx
index 09829679f..4980d4bb5 100644
--- a/src/renderer/features/shared/components/grid-config.tsx
+++ b/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}
diff --git a/src/renderer/features/shared/components/list-config-menu.tsx b/src/renderer/features/shared/components/list-config-menu.tsx
index f350fea0d..0e1e13abe 100644
--- a/src/renderer/features/shared/components/list-config-menu.tsx
+++ b/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
-            data={[
-                {
-                    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%"
-        />
+        <Group justify="flex-end" w="100%">
+            <Switch checked={value} onChange={(e) => onChange(e.currentTarget.checked)} />
+        </Group>
     );
 };
 
@@ -147,17 +131,30 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
                 size="lg"
                 title={t('common.configure', { postProcess: 'sentenceCase' })}
             >
-                <Stack>
-                    <SegmentedControl
-                        data={availableDisplayTypes}
-                        fullWidth
-                        onChange={(value) => {
-                            setList(props.listKey, {
-                                display: value as ListDisplayType,
-                            });
-                        }}
-                        value={displayType}
-                        withItemsBorders={false}
+                <Stack gap="xs">
+                    <ListConfigTable
+                        options={[
+                            {
+                                component: (
+                                    <SegmentedControl
+                                        data={availableDisplayTypes}
+                                        fullWidth
+                                        onChange={(value) => {
+                                            setList(props.listKey, {
+                                                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>
diff --git a/src/renderer/features/shared/components/table-config.tsx b/src/renderer/features/shared/components/table-config.tsx
index 71de783ee..bd9b24182 100644
--- a/src/renderer/features/shared/components/table-config.tsx
+++ b/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}