diff --git a/web/src/app/home/components/settings-dialog/SettingsDialog.tsx b/web/src/app/home/components/settings-dialog/SettingsDialog.tsx index 52b799c3..8984b643 100644 --- a/web/src/app/home/components/settings-dialog/SettingsDialog.tsx +++ b/web/src/app/home/components/settings-dialog/SettingsDialog.tsx @@ -79,33 +79,42 @@ export default function SettingsDialog({ const navItems: { id: SettingsSection; label: string; + title: string; + description: string; icon: React.ReactNode; }[] = [ { id: 'models', - label: t('models.title'), + label: t('settingsDialog.nav.models'), + title: t('models.title'), + description: t('models.description'), icon: , }, { id: 'apiIntegration', - label: t('common.apiIntegration'), + label: t('settingsDialog.nav.api'), + title: t('common.apiIntegration'), + description: t('common.apiIntegrationDescription'), icon: , }, { id: 'storageAnalysis', - label: t('storageAnalysis.title'), + label: t('settingsDialog.nav.storage'), + title: t('storageAnalysis.title'), + description: t('storageAnalysis.description'), icon: , }, { id: 'account', - label: t('account.settings'), + label: t('settingsDialog.nav.account'), + title: t('account.settings'), + description: t('account.settingsDescription'), icon: , }, ]; - const activeLabel = - navItems.find((item) => item.id === section)?.label ?? - t('settingsDialog.title'); + const activeItem = navItems.find((item) => item.id === section); + const activeLabel = activeItem?.title ?? t('settingsDialog.title'); return ( + {/* Unified section header (shared across all tabs). The extra + right padding keeps the title clear of the dialog's close X. */} +
+

+ {activeItem?.icon} + {activeItem?.title} +

+ {activeItem?.description && ( +

+ {activeItem.description} +

+ )} +
+
{section === 'models' && (