feat(ui): i18n for navbar notifications bell and user dropdown leftovers

This commit is contained in:
吹雪 2026-06-10 12:06:49 +09:00
parent 60f73e1eb6
commit bd289dc5e8
4 changed files with 40 additions and 13 deletions

View file

@ -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 />

View file

@ -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

View file

@ -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",

View file

@ -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": "登录",