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"
>
+
{t(`categories.${category.translationKey}.label`)}
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,