From 4205ad63176b43e2550f32acf90afa167dbc8594 Mon Sep 17 00:00:00 2001
From: mesalogo <pettygay757@gmail.com>
Date: Fri, 9 Oct 2026 20:54:23 +0800
Subject: [PATCH] feat(settings): add category icons

---
 src/renderer/src/SettingsPanel.tsx           |  1 +
 src/renderer/src/settings-categories.test.ts |  6 +++
 src/renderer/src/settings-categories.ts      | 46 +++++++++++++++-----
 src/renderer/src/styles.css                  |  8 +++-
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/SettingsPanel.tsx b/src/renderer/src/SettingsPanel.tsx
index affa9655..77e4d4ce 100644
--- a/src/renderer/src/SettingsPanel.tsx
+++ b/src/renderer/src/SettingsPanel.tsx
@@ -2181,6 +2181,7 @@ function SettingsPanelView({
                   tabIndex={activeTab === category.id ? 0 : -1}
                   type="button"
                 >
+                  <category.icon aria-hidden="true" size={16} strokeWidth={1.8} />
                   <strong>
                     {t(`categories.${category.translationKey}.label`)}
                   </strong>
diff --git a/src/renderer/src/settings-categories.test.ts b/src/renderer/src/settings-categories.test.ts
index d85d04fa..4efc0b3d 100644
--- a/src/renderer/src/settings-categories.test.ts
+++ b/src/renderer/src/settings-categories.test.ts
@@ -2,6 +2,12 @@ import { describe, expect, it } from 'vitest'
 import { getSettingsCategoryList } from './settings-categories'
 
 describe('getSettingsCategoryList', () => {
+  it('defines an icon for every settings category', () => {
+    expect(
+      getSettingsCategoryList(true).every(({ icon }) => icon != null)
+    ).toBe(true)
+  })
+
   it('hides SSH hosts while Remote Projects is disabled', () => {
     expect(
       getSettingsCategoryList(false).map(({ id }) => id)
diff --git a/src/renderer/src/settings-categories.ts b/src/renderer/src/settings-categories.ts
index 7b8fe75e..54a66c42 100644
--- a/src/renderer/src/settings-categories.ts
+++ b/src/renderer/src/settings-categories.ts
@@ -1,60 +1,84 @@
 import i18n from './i18n'
+import {
+  Bot,
+  FileText,
+  Gauge,
+  Info,
+  Palette,
+  Radio,
+  Server,
+  SlidersHorizontal,
+  Terminal,
+  Users,
+  Wrench
+} from 'lucide-react'
 
 export const settingsCategoryList = [
   {
     id: 'appearance',
     group: 'general',
-    translationKey: 'appearance'
+    translationKey: 'appearance',
+    icon: Palette
   },
   {
     id: 'platform-features',
     group: 'general',
-    translationKey: 'platformFeatures'
+    translationKey: 'platformFeatures',
+    icon: SlidersHorizontal
   },
   {
     id: 'model',
     group: 'execution',
-    translationKey: 'model'
+    translationKey: 'model',
+    icon: Bot
   },
   {
     id: 'context-control',
     group: 'execution',
-    translationKey: 'contextControl'
+    translationKey: 'contextControl',
+    icon: Gauge
   },
   {
     id: 'runtime',
     group: 'execution',
-    translationKey: 'runtime'
+    translationKey: 'runtime',
+    icon: Terminal
   },
   {
     id: 'ssh-hosts',
     group: 'execution',
-    translationKey: 'sshHosts'
+    translationKey: 'sshHosts',
+    icon: Server
   },
   {
     id: 'document-parsing',
     group: 'extensions',
-    translationKey: 'documentParsing'
+    translationKey: 'documentParsing',
+    icon: FileText
   },
   {
     id: 'channels',
     group: 'extensions',
-    translationKey: 'channels'
+    translationKey: 'channels',
+    icon: Radio
   },
   {
     id: 'roles',
     group: 'extensions',
-    translationKey: 'roles'
+    translationKey: 'roles',
+    icon: Users
   },
   {
     id: 'capabilities',
     group: 'extensions',
-    translationKey: 'capabilities'
+    translationKey: 'capabilities',
+    icon: Wrench
   },
   {
     id: 'about',
     group: 'system',
-    translationKey: 'about'
+    translationKey: 'about',
+    icon: Info
   }
 ] as const
 
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 5c23bdf2..61f90f0f 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -9361,6 +9361,10 @@ button > svg {
   font-weight: 500;
 }
 
+.settings-tabs button > svg {
+  flex: 0 0 auto;
+}
+
 .settings-tabs button:hover {
   background: var(--surface-muted);
   color: var(--text-primary);
@@ -9680,8 +9684,10 @@ button > svg {
   min-height: 40px;
   padding: var(--space-2) var(--space-3);
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
   text-align: left;
+  flex-direction: row;
+  gap: var(--space-2);
 }
 
 .settings-page .settings-tabs button strong,