improve settings

src/renderer/src/pages/settings/index.jsx

@@ -121,6 +121,37 @@ const SettingItem = (props) => {
     </div>
 }
 
+const SettingsList = ({ settings }) => {
+    return settings.map((setting, index) => {
+        const isGroup = Array.isArray(setting.children)
+
+        if (isGroup) {
+            return <div
+                id={setting.id}
+                className="app_settings-list-group"
+            >
+                <div className="app_settings-list-group_label">
+                    {
+                        setting.icon && <Icon icon={setting.icon} />
+                    }
+                    <h1>
+                        {setting.name}
+                    </h1>
+                </div>
+
+                <SettingsList
+                    settings={setting.children}
+                />
+            </div>
+        }
+
+        return <SettingItem
+            key={index}
+            setting={setting}
+        />
+    })
+}
+
 const Settings = () => {
     return <div className="app_settings">
         <div className="app_settings-header">
@@ -140,19 +171,11 @@ const Settings = () => {
         </div>
 
         <div className="app_settings-list">
-            {
+            <SettingsList
-                settingsList.map((setting, index) => {
+                settings={settingsList}
-                    return <SettingItem
+            />
-                        key={index}
-                        setting={setting}
-                    />
-                })
-            }
         </div>
 
-        <div className="software_info">
-
-        </div>
     </div>
 }
 

src/renderer/src/pages/settings/index.less

@@ -48,9 +48,31 @@
         display: flex;
         flex-direction: column;
 
-        background-color: var(--background-color-secondary);
+        gap: 10px;
 
-        border-radius: 12px;
+        .app_settings-list-group {
+            display: flex;
+            flex-direction: column;
+
+            gap: 10px;
+
+            padding: 10px 7px;
+
+            background-color: var(--background-color-secondary);
+
+            border-radius: 12px;
+
+            .app_settings-list-group_label {
+                display: inline-flex;
+                flex-direction: row;
+                align-items: center;
+
+                font-size: 1rem;
+                font-weight: 700;
+
+                gap: 7px;
+            }
+        }
 
         .app_settings-list-item {
             display: flex;
@@ -66,6 +88,8 @@
 
             padding: 10px;
 
+            opacity: 0.9;
+
             .app_settings-list-item-info {
                 display: flex;
                 flex-direction: column;