From e9db858dcc2d4a5a46bb3c03b03050420c160cb9 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Tue, 16 Jun 2026 05:50:44 -0400
Subject: [PATCH] feat(web): unified header for settings dialog, shorter
 sidebar labels

- Add a shared section header (icon + title + description) with right
  padding so the dialog close X no longer overlaps panel content, and
  every tab now shares the same top layout for a consistent look.
- Shorten inner sidebar nav labels (Models/API/Storage/Account) via new
  settingsDialog.nav.* i18n keys across all 8 locales.
- Add common.apiIntegrationDescription and account.settingsDescription
  for the new header.
---
 .../settings-dialog/SettingsDialog.tsx        | 37 +++++++++++++++----
 web/src/i18n/locales/en-US.ts                 |  9 +++++
 web/src/i18n/locales/es-ES.ts                 |  9 +++++
 web/src/i18n/locales/ja-JP.ts                 |  9 +++++
 web/src/i18n/locales/ru-RU.ts                 |  9 +++++
 web/src/i18n/locales/th-TH.ts                 |  9 +++++
 web/src/i18n/locales/vi-VN.ts                 |  9 +++++
 web/src/i18n/locales/zh-Hans.ts               |  8 ++++
 web/src/i18n/locales/zh-Hant.ts               |  8 ++++
 9 files changed, 100 insertions(+), 7 deletions(-)

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: <Sparkles className="size-4" />,
     },
     {
       id: 'apiIntegration',
-      label: t('common.apiIntegration'),
+      label: t('settingsDialog.nav.api'),
+      title: t('common.apiIntegration'),
+      description: t('common.apiIntegrationDescription'),
       icon: <KeyRound className="size-4" />,
     },
     {
       id: 'storageAnalysis',
-      label: t('storageAnalysis.title'),
+      label: t('settingsDialog.nav.storage'),
+      title: t('storageAnalysis.title'),
+      description: t('storageAnalysis.description'),
       icon: <HardDrive className="size-4" />,
     },
     {
       id: 'account',
-      label: t('account.settings'),
+      label: t('settingsDialog.nav.account'),
+      title: t('account.settings'),
+      description: t('account.settingsDescription'),
       icon: <Settings className="size-4" />,
     },
   ];
 
-  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 (
     <Dialog
@@ -177,6 +186,20 @@ export default function SettingsDialog({
               ))}
             </div>
 
+            {/* Unified section header (shared across all tabs). The extra
+                right padding keeps the title clear of the dialog's close X. */}
+            <div className="flex shrink-0 flex-col gap-0.5 border-b px-6 py-4 pr-12">
+              <h2 className="flex items-center gap-2 text-base font-semibold">
+                {activeItem?.icon}
+                {activeItem?.title}
+              </h2>
+              {activeItem?.description && (
+                <p className="text-sm text-muted-foreground">
+                  {activeItem.description}
+                </p>
+              )}
+            </div>
+
             <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
               {section === 'models' && (
                 <ModelsPanel
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index f65a477f..902c749b 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -122,6 +122,8 @@ const enUS = {
     changePasswordFailed:
       'Failed to change password, please check your current password',
     apiIntegration: 'API Integration',
+    apiIntegrationDescription:
+      'Manage API keys and webhooks for external access',
     apiKeys: 'API Keys',
     manageApiIntegration: 'Manage API Integration',
     manageApiKeys: 'Manage API Keys',
@@ -1149,6 +1151,7 @@ const enUS = {
   },
   account: {
     settings: 'Account Settings',
+    settingsDescription: 'Manage your password and linked accounts',
     setPassword: 'Set Password',
     passwordSetSuccess: 'Password set successfully',
     passwordStatus: 'Local Password',
@@ -1388,6 +1391,12 @@ const enUS = {
   },
   settingsDialog: {
     title: 'Settings',
+    nav: {
+      models: 'Models',
+      api: 'API',
+      storage: 'Storage',
+      account: 'Account',
+    },
   },
   storageAnalysis: {
     title: 'Storage Analysis',
diff --git a/web/src/i18n/locales/es-ES.ts b/web/src/i18n/locales/es-ES.ts
index 50b2dc2e..b9148616 100644
--- a/web/src/i18n/locales/es-ES.ts
+++ b/web/src/i18n/locales/es-ES.ts
@@ -126,6 +126,8 @@ const esES = {
     changePasswordFailed:
       'Error al cambiar la contraseña, por favor verifica tu contraseña actual',
     apiIntegration: 'Integración API',
+    apiIntegrationDescription:
+      'Gestiona las claves API y los webhooks para el acceso externo',
     apiKeys: 'Claves API',
     manageApiIntegration: 'Gestionar integración API',
     manageApiKeys: 'Gestionar claves API',
@@ -1178,6 +1180,7 @@ const esES = {
   },
   account: {
     settings: 'Configuración de la cuenta',
+    settingsDescription: 'Gestiona tu contraseña y las cuentas vinculadas',
     setPassword: 'Establecer contraseña',
     passwordSetSuccess: 'Contraseña establecida correctamente',
     passwordStatus: 'Contraseña local',
@@ -1421,6 +1424,12 @@ const esES = {
   },
   settingsDialog: {
     title: 'Configuración',
+    nav: {
+      models: 'Modelos',
+      api: 'API',
+      storage: 'Almacenamiento',
+      account: 'Cuenta',
+    },
   },
   storageAnalysis: {
     title: 'Análisis de almacenamiento',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index 9769fa5c..d61d65a0 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -124,6 +124,8 @@ const jaJP = {
     changePasswordFailed:
       'パスワードの変更に失敗しました。現在のパスワードを確認してください',
     apiIntegration: 'API統合',
+    apiIntegrationDescription:
+      '外部アクセス用の API キーと Webhook を管理します',
     apiKeys: 'API キー',
     manageApiIntegration: 'API統合の管理',
     manageApiKeys: 'API キーの管理',
@@ -1153,6 +1155,7 @@ const jaJP = {
   },
   account: {
     settings: 'アカウント設定',
+    settingsDescription: 'パスワードと連携アカウントを管理します',
     setPassword: 'パスワードを設定',
     passwordSetSuccess: 'パスワードの設定に成功しました',
     passwordStatus: 'ローカルパスワード',
@@ -1394,6 +1397,12 @@ const jaJP = {
   },
   settingsDialog: {
     title: '設定',
+    nav: {
+      models: 'モデル',
+      api: 'API',
+      storage: 'ストレージ',
+      account: 'アカウント',
+    },
   },
   storageAnalysis: {
     title: 'ストレージ分析',
diff --git a/web/src/i18n/locales/ru-RU.ts b/web/src/i18n/locales/ru-RU.ts
index f2829f77..988ab7ca 100644
--- a/web/src/i18n/locales/ru-RU.ts
+++ b/web/src/i18n/locales/ru-RU.ts
@@ -122,6 +122,8 @@ const ruRU = {
     changePasswordFailed:
       'Не удалось изменить пароль, проверьте текущий пароль',
     apiIntegration: 'API-интеграция',
+    apiIntegrationDescription:
+      'Управление API-ключами и вебхуками для внешнего доступа',
     apiKeys: 'API-ключи',
     manageApiIntegration: 'Управление API-интеграцией',
     manageApiKeys: 'Управление API-ключами',
@@ -1156,6 +1158,7 @@ const ruRU = {
   },
   account: {
     settings: 'Настройки аккаунта',
+    settingsDescription: 'Управление паролем и связанными аккаунтами',
     setPassword: 'Установить пароль',
     passwordSetSuccess: 'Пароль успешно установлен',
     passwordStatus: 'Локальный пароль',
@@ -1397,6 +1400,12 @@ const ruRU = {
   },
   settingsDialog: {
     title: 'Настройки',
+    nav: {
+      models: 'Модели',
+      api: 'API',
+      storage: 'Хранилище',
+      account: 'Аккаунт',
+    },
   },
   storageAnalysis: {
     title: 'Анализ хранилища',
diff --git a/web/src/i18n/locales/th-TH.ts b/web/src/i18n/locales/th-TH.ts
index 924e99c6..b172e420 100644
--- a/web/src/i18n/locales/th-TH.ts
+++ b/web/src/i18n/locales/th-TH.ts
@@ -120,6 +120,8 @@ const thTH = {
     changePasswordSuccess: 'เปลี่ยนรหัสผ่านสำเร็จ',
     changePasswordFailed: 'เปลี่ยนรหัสผ่านล้มเหลว กรุณาตรวจสอบรหัสผ่านปัจจุบัน',
     apiIntegration: 'การเชื่อมต่อ API',
+    apiIntegrationDescription:
+      'จัดการ API key และ webhook สำหรับการเข้าถึงจากภายนอก',
     apiKeys: 'คีย์ API',
     manageApiIntegration: 'จัดการการเชื่อมต่อ API',
     manageApiKeys: 'จัดการคีย์ API',
@@ -1130,6 +1132,7 @@ const thTH = {
   },
   account: {
     settings: 'การตั้งค่าบัญชี',
+    settingsDescription: 'จัดการรหัสผ่านและบัญชีที่เชื่อมโยงของคุณ',
     setPassword: 'ตั้งรหัสผ่าน',
     passwordSetSuccess: 'ตั้งรหัสผ่านสำเร็จ',
     passwordStatus: 'รหัสผ่านท้องถิ่น',
@@ -1366,6 +1369,12 @@ const thTH = {
   },
   settingsDialog: {
     title: 'การตั้งค่า',
+    nav: {
+      models: 'โมเดล',
+      api: 'API',
+      storage: 'พื้นที่จัดเก็บ',
+      account: 'บัญชี',
+    },
   },
   storageAnalysis: {
     title: 'วิเคราะห์พื้นที่จัดเก็บ',
diff --git a/web/src/i18n/locales/vi-VN.ts b/web/src/i18n/locales/vi-VN.ts
index 55bb82c3..504cfb51 100644
--- a/web/src/i18n/locales/vi-VN.ts
+++ b/web/src/i18n/locales/vi-VN.ts
@@ -123,6 +123,8 @@ const viVN = {
     changePasswordFailed:
       'Đổi mật khẩu thất bại, vui lòng kiểm tra mật khẩu hiện tại',
     apiIntegration: 'Tích hợp API',
+    apiIntegrationDescription:
+      'Quản lý API key và webhook cho truy cập từ bên ngoài',
     apiKeys: 'Khóa API',
     manageApiIntegration: 'Quản lý tích hợp API',
     manageApiKeys: 'Quản lý khóa API',
@@ -1150,6 +1152,7 @@ const viVN = {
   },
   account: {
     settings: 'Cài đặt tài khoản',
+    settingsDescription: 'Quản lý mật khẩu và các tài khoản liên kết của bạn',
     setPassword: 'Đặt mật khẩu',
     passwordSetSuccess: 'Đặt mật khẩu thành công',
     passwordStatus: 'Mật khẩu cục bộ',
@@ -1390,6 +1393,12 @@ const viVN = {
   },
   settingsDialog: {
     title: 'Cài đặt',
+    nav: {
+      models: 'Mô hình',
+      api: 'API',
+      storage: 'Lưu trữ',
+      account: 'Tài khoản',
+    },
   },
   storageAnalysis: {
     title: 'Phân tích lưu trữ',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 590578e7..bb72de0f 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -116,6 +116,7 @@ const zhHans = {
     changePasswordSuccess: '密码修改成功',
     changePasswordFailed: '密码修改失败，请检查当前密码是否正确',
     apiIntegration: 'API 集成',
+    apiIntegrationDescription: '管理用于外部访问的 API 密钥和 Webhook',
     apiKeys: 'API 密钥',
     manageApiIntegration: '管理 API 集成',
     manageApiKeys: '管理 API 密钥',
@@ -1096,6 +1097,7 @@ const zhHans = {
   },
   account: {
     settings: '账户设置',
+    settingsDescription: '管理你的密码和关联账户',
     setPassword: '设置密码',
     passwordSetSuccess: '密码设置成功',
     passwordStatus: '本地密码',
@@ -1330,6 +1332,12 @@ const zhHans = {
   },
   settingsDialog: {
     title: '设置',
+    nav: {
+      models: '模型',
+      api: 'API',
+      storage: '存储',
+      account: '账户',
+    },
   },
   storageAnalysis: {
     title: '存储分析',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index 4a8b3138..9dcbb085 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -116,6 +116,7 @@ const zhHant = {
     changePasswordSuccess: '密碼修改成功',
     changePasswordFailed: '密碼修改失敗，請檢查當前密碼是否正確',
     apiIntegration: 'API 整合',
+    apiIntegrationDescription: '管理用於外部存取的 API 金鑰和 Webhook',
     apiKeys: 'API 金鑰',
     manageApiIntegration: '管理 API 整合',
     manageApiKeys: '管理 API 金鑰',
@@ -1095,6 +1096,7 @@ const zhHant = {
   },
   account: {
     settings: '帳戶設定',
+    settingsDescription: '管理你的密碼和關聯帳戶',
     setPassword: '設定密碼',
     passwordSetSuccess: '密碼設定成功',
     passwordStatus: '本地密碼',
@@ -1329,6 +1331,12 @@ const zhHant = {
   },
   settingsDialog: {
     title: '設定',
+    nav: {
+      models: '模型',
+      api: 'API',
+      storage: '儲存',
+      account: '帳戶',
+    },
   },
   storageAnalysis: {
     title: '儲存分析',