From bd289dc5e8d4d8344e51eda336212f4171504fc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B9=E9=9B=AA?= <2b@yorha.xyz>
Date: Wed, 10 Jun 2026 12:06:49 +0900
Subject: [PATCH] feat(ui): i18n for navbar notifications bell and user
 dropdown leftovers

---
 .../NotificationsBell/NotificationsBell.tsx       |  8 +++++---
 .../Navbar/UserDropdown/UserDropdown.tsx          | 15 +++++++++------
 ui/litellm-dashboard/src/locales/en.json          | 15 +++++++++++++--
 ui/litellm-dashboard/src/locales/zh-CN.json       | 15 +++++++++++++--
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
index a3b7678e1e7..3248043ecdf 100644
--- a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
@@ -8,10 +8,12 @@ import { emitLocalStorageChange, setLocalStorageItem } from "@/utils/localStorag
 import { BellOutlined } from "@ant-design/icons";
 import { Badge, Button, Popover, Typography } from "antd";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const AGENT_PLATFORM_URL = "https://github.com/BerriAI/litellm-agent-platform";
 
 export const NotificationsBell: React.FC = () => {
+  const { t } = useTranslation();
   const hidden = useHideAgentPlatformBanner();
   const hasUnread = !hidden;
   const [open, setOpen] = useState(false);
@@ -28,7 +30,7 @@ export const NotificationsBell: React.FC = () => {
         LiteLLM Agent Platform
       </Typography.Title>
       <Typography.Paragraph type="secondary" className="!mb-3 text-sm leading-snug">
-        Open-source agent infra — sandboxes, durable sessions, and workers on AWS Fargate.
+        {t("navbar.notificationsBell.agentPlatformDesc")}
       </Typography.Paragraph>
       <div className="flex flex-wrap items-center gap-2">
         <Button type="primary" size="small" href={AGENT_PLATFORM_URL} target="_blank" rel="noopener noreferrer">
@@ -36,7 +38,7 @@ export const NotificationsBell: React.FC = () => {
         </Button>
         {hasUnread ? (
           <Button type="link" size="small" className="!px-1" onClick={markDismissed}>
-            Mark as read
+            {t("navbar.notificationsBell.markAsRead")}
           </Button>
         ) : null}
       </div>
@@ -48,7 +50,7 @@ export const NotificationsBell: React.FC = () => {
       <Button
         type="text"
         className="!flex !h-9 !w-9 items-center justify-center !rounded-md text-gray-600 transition-colors hover:!bg-gray-100 hover:!text-gray-900"
-        aria-label="Notifications"
+        aria-label={t("navbar.notificationsBell.notifications")}
       >
         <Badge dot={hasUnread} color="#1677ff" size="small" offset={[8, 2]}>
           <BellOutlined className="text-base" aria-hidden />
diff --git a/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx b/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
index b52756e327f..9650d2529c3 100644
--- a/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
@@ -139,7 +139,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
               emitLocalStorageChange("disableShowNewBadge");
             }
           }}
-          aria-label="Toggle hide new feature indicators"
+          aria-label={t("user.toggleHideNewFeatureIndicators")}
         />
       </Space>
       <Space style={{ width: "100%", justifyContent: "space-between" }}>
@@ -156,7 +156,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
               emitLocalStorageChange("disableShowPrompts");
             }
           }}
-          aria-label="Toggle hide all prompts"
+          aria-label={t("user.toggleHideAllPrompts")}
         />
       </Space>
       <Space style={{ width: "100%", justifyContent: "space-between" }}>
@@ -173,7 +173,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
               emitLocalStorageChange("disableUsageIndicator");
             }
           }}
-          aria-label="Toggle hide usage indicator"
+          aria-label={t("user.toggleHideUsageIndicator")}
         />
       </Space>
       <Space style={{ width: "100%", justifyContent: "space-between" }}>
@@ -190,7 +190,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
               emitLocalStorageChange("disableBlogPosts");
             }
           }}
-          aria-label="Toggle hide blog posts"
+          aria-label={t("user.toggleHideBlogPosts")}
         />
       </Space>
       <Space style={{ width: "100%", justifyContent: "space-between" }}>
@@ -207,7 +207,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
               emitLocalStorageChange("disableBouncingIcon");
             }
           }}
-          aria-label="Toggle hide bouncing icon"
+          aria-label={t("user.toggleHideBouncingIcon")}
         />
       </Space>
     </Space>
@@ -235,7 +235,10 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout }) => {
       <Button
         type="text"
         className="!flex max-w-[min(200px,34vw)] items-center gap-2 !rounded-md !py-0.5 !pl-1 !pr-2 transition-colors hover:!bg-gray-100"
-        aria-label={`Account menu — ${userRole ?? "Unknown role"} — signed in as ${userEmail || userId || "unknown"}`}
+        aria-label={t("user.accountMenuAriaLabel", {
+          role: userRole ?? t("common.unknown"),
+          identity: userEmail || userId || t("common.unknown"),
+        })}
         aria-haspopup="menu"
       >
         <span
diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json
index bfa447889df..bdf85c947b3 100644
--- a/ui/litellm-dashboard/src/locales/en.json
+++ b/ui/litellm-dashboard/src/locales/en.json
@@ -61,7 +61,12 @@
     "slackCommunity": "LiteLLM Slack community",
     "joinSlack": "Join Slack",
     "githubRepo": "LiteLLM on GitHub",
-    "language": "Language"
+    "language": "Language",
+    "notificationsBell": {
+      "notifications": "Notifications",
+      "agentPlatformDesc": "Open-source agent infra — sandboxes, durable sessions, and workers on AWS Fargate.",
+      "markAsRead": "Mark as read"
+    }
   },
   "user": {
     "logout": "Logout",
@@ -74,7 +79,13 @@
     "hideAllPrompts": "Hide All Prompts",
     "hideUsageIndicator": "Hide Usage Indicator",
     "hideBlogPosts": "Hide Blog Posts",
-    "hideBouncingIcon": "Hide Bouncing Icon"
+    "hideBouncingIcon": "Hide Bouncing Icon",
+    "accountMenuAriaLabel": "Account menu — {{role}} — signed in as {{identity}}",
+    "toggleHideNewFeatureIndicators": "Toggle hide new feature indicators",
+    "toggleHideAllPrompts": "Toggle hide all prompts",
+    "toggleHideUsageIndicator": "Toggle hide usage indicator",
+    "toggleHideBlogPosts": "Toggle hide blog posts",
+    "toggleHideBouncingIcon": "Toggle hide bouncing icon"
   },
   "login": {
     "title": "Login",
diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json
index 5e2e1f8cddf..52b1c847c6e 100644
--- a/ui/litellm-dashboard/src/locales/zh-CN.json
+++ b/ui/litellm-dashboard/src/locales/zh-CN.json
@@ -61,7 +61,12 @@
     "slackCommunity": "LiteLLM Slack 社区",
     "joinSlack": "加入 Slack",
     "githubRepo": "LiteLLM 的 GitHub 仓库",
-    "language": "语言"
+    "language": "语言",
+    "notificationsBell": {
+      "notifications": "通知",
+      "agentPlatformDesc": "开源 Agent 基础设施 — 沙箱、持久会话以及运行在 AWS Fargate 上的 worker。",
+      "markAsRead": "标记为已读"
+    }
   },
   "user": {
     "logout": "退出登录",
@@ -74,7 +79,13 @@
     "hideAllPrompts": "隐藏所有提示",
     "hideUsageIndicator": "隐藏用量指示器",
     "hideBlogPosts": "隐藏博客文章",
-    "hideBouncingIcon": "隐藏跳动图标"
+    "hideBouncingIcon": "隐藏跳动图标",
+    "accountMenuAriaLabel": "账号菜单 — {{role}} — 已登录为 {{identity}}",
+    "toggleHideNewFeatureIndicators": "切换隐藏新功能标记",
+    "toggleHideAllPrompts": "切换隐藏所有提示",
+    "toggleHideUsageIndicator": "切换隐藏用量指示器",
+    "toggleHideBlogPosts": "切换隐藏博客文章",
+    "toggleHideBouncingIcon": "切换隐藏跳动图标"
   },
   "login": {
     "title": "登录",