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.
2026-06-16 10:46:03 +00:00 · 2026-06-16 05:50:44 -04:00
parent 2d6faf9d5e
commit e9db858dcc
9 changed files with 100 additions and 7 deletions
--- 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
--- 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',
--- 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',
--- 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: 'ストレージ分析',
--- 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: 'Анализ хранилища',
--- 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: 'วิเคราะห์พื้นที่จัดเก็บ',
--- 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ữ',
--- 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: '存储分析',
--- 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: '儲存分析',