mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-04 22:32:12 +03:00
feat: add dashboard i18n with next-intl (EN + PT-BR), language selector in header
This commit is contained in:
diegosouzapw
@@ -2,6 +2,8 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/shared/components/ThemeProvider";
|
||||
import "@/lib/initCloudSync"; // Auto-initialize cloud sync
|
||||
import { NextIntlClientProvider } from "next-intl";
|
||||
import { getMessages, getLocale } from "next-intl/server";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
@@ -18,9 +20,12 @@ export const metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
export default async function RootLayout({ children }) {
|
||||
const locale = await getLocale();
|
||||
const messages = await getMessages();
|
||||
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
@@ -37,7 +42,9 @@ export default function RootLayout({ children }) {
|
||||
>
|
||||
Skip to content
|
||||
</a>
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
15
src/i18n/config.ts
Normal file
15
src/i18n/config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export const LOCALES = ["en", "pt-BR"] as const;
|
||||
export type Locale = (typeof LOCALES)[number];
|
||||
export const DEFAULT_LOCALE: Locale = "en";
|
||||
|
||||
export const LANGUAGES: readonly {
|
||||
code: Locale;
|
||||
label: string;
|
||||
name: string;
|
||||
flag: string;
|
||||
}[] = [
|
||||
{ code: "en", label: "EN", name: "English", flag: "🇺🇸" },
|
||||
{ code: "pt-BR", label: "PT", name: "Português", flag: "🇧🇷" },
|
||||
] as const;
|
||||
|
||||
export const LOCALE_COOKIE = "NEXT_LOCALE";
|
||||
74
src/i18n/messages/en.json
Normal file
74
src/i18n/messages/en.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"loading": "Loading...",
|
||||
"error": "An error occurred",
|
||||
"success": "Success",
|
||||
"confirm": "Are you sure?",
|
||||
"refresh": "Refresh",
|
||||
"close": "Close",
|
||||
"add": "Add",
|
||||
"edit": "Edit",
|
||||
"search": "Search",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"submit": "Submit",
|
||||
"reset": "Reset",
|
||||
"copy": "Copy",
|
||||
"copied": "Copied!",
|
||||
"enabled": "Enabled",
|
||||
"disabled": "Disabled",
|
||||
"active": "Active",
|
||||
"inactive": "Inactive",
|
||||
"noData": "No data available"
|
||||
},
|
||||
"sidebar": {
|
||||
"home": "Home",
|
||||
"dashboard": "Dashboard",
|
||||
"providers": "Providers",
|
||||
"combos": "Combos",
|
||||
"usage": "Usage",
|
||||
"analytics": "Analytics",
|
||||
"costs": "Costs",
|
||||
"health": "Health",
|
||||
"limits": "Limits & Quotas",
|
||||
"cliTools": "CLI Tools",
|
||||
"settings": "Settings",
|
||||
"translator": "Translator",
|
||||
"docs": "Docs",
|
||||
"issues": "Issues",
|
||||
"endpoint": "Endpoint",
|
||||
"apiManager": "API Manager",
|
||||
"logs": "Logs",
|
||||
"auditLog": "Audit Log",
|
||||
"shutdown": "Shutdown",
|
||||
"restart": "Restart",
|
||||
"shutdownConfirm": "Shut down OmniRoute?",
|
||||
"restartConfirm": "Restart OmniRoute?",
|
||||
"version": "v{version}"
|
||||
},
|
||||
"header": {
|
||||
"logout": "Logout",
|
||||
"language": "Language",
|
||||
"providers": "Providers",
|
||||
"providerDescription": "Manage your AI provider connections",
|
||||
"combos": "Combos",
|
||||
"comboDescription": "Model combos with fallback",
|
||||
"usage": "Usage & Analytics",
|
||||
"usageDescription": "Monitor your API usage, token consumption, and request logs",
|
||||
"analytics": "Analytics",
|
||||
"analyticsDescription": "Charts, trends, and evaluation insights",
|
||||
"cliTools": "CLI Tools",
|
||||
"cliToolsDescription": "Configure CLI tools",
|
||||
"home": "Home",
|
||||
"homeDescription": "Welcome to OmniRoute",
|
||||
"endpoint": "Endpoint",
|
||||
"endpointDescription": "API endpoint configuration",
|
||||
"settings": "Settings",
|
||||
"settingsDescription": "Manage your preferences",
|
||||
"openaiCompatible": "OpenAI Compatible",
|
||||
"anthropicCompatible": "Anthropic Compatible"
|
||||
}
|
||||
}
|
||||
74
src/i18n/messages/pt-BR.json
Normal file
74
src/i18n/messages/pt-BR.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Salvar",
|
||||
"cancel": "Cancelar",
|
||||
"delete": "Excluir",
|
||||
"loading": "Carregando...",
|
||||
"error": "Ocorreu um erro",
|
||||
"success": "Sucesso",
|
||||
"confirm": "Tem certeza?",
|
||||
"refresh": "Atualizar",
|
||||
"close": "Fechar",
|
||||
"add": "Adicionar",
|
||||
"edit": "Editar",
|
||||
"search": "Pesquisar",
|
||||
"back": "Voltar",
|
||||
"next": "Próximo",
|
||||
"submit": "Enviar",
|
||||
"reset": "Resetar",
|
||||
"copy": "Copiar",
|
||||
"copied": "Copiado!",
|
||||
"enabled": "Ativado",
|
||||
"disabled": "Desativado",
|
||||
"active": "Ativo",
|
||||
"inactive": "Inativo",
|
||||
"noData": "Nenhum dado disponível"
|
||||
},
|
||||
"sidebar": {
|
||||
"home": "Início",
|
||||
"dashboard": "Painel",
|
||||
"providers": "Provedores",
|
||||
"combos": "Combos",
|
||||
"usage": "Uso",
|
||||
"analytics": "Análises",
|
||||
"costs": "Custos",
|
||||
"health": "Saúde",
|
||||
"limits": "Limites e Cotas",
|
||||
"cliTools": "Ferramentas CLI",
|
||||
"settings": "Configurações",
|
||||
"translator": "Tradutor",
|
||||
"docs": "Documentação",
|
||||
"issues": "Problemas",
|
||||
"endpoint": "Endpoint",
|
||||
"apiManager": "Gerenciador API",
|
||||
"logs": "Logs",
|
||||
"auditLog": "Log de Auditoria",
|
||||
"shutdown": "Desligar",
|
||||
"restart": "Reiniciar",
|
||||
"shutdownConfirm": "Desligar o OmniRoute?",
|
||||
"restartConfirm": "Reiniciar o OmniRoute?",
|
||||
"version": "v{version}"
|
||||
},
|
||||
"header": {
|
||||
"logout": "Sair",
|
||||
"language": "Idioma",
|
||||
"providers": "Provedores",
|
||||
"providerDescription": "Gerencie suas conexões de provedores de IA",
|
||||
"combos": "Combos",
|
||||
"comboDescription": "Combos de modelos com fallback",
|
||||
"usage": "Uso e Análises",
|
||||
"usageDescription": "Monitore seu uso de API, consumo de tokens e logs de requisições",
|
||||
"analytics": "Análises",
|
||||
"analyticsDescription": "Gráficos, tendências e insights de avaliação",
|
||||
"cliTools": "Ferramentas CLI",
|
||||
"cliToolsDescription": "Configurar ferramentas de linha de comando",
|
||||
"home": "Início",
|
||||
"homeDescription": "Bem-vindo ao OmniRoute",
|
||||
"endpoint": "Endpoint",
|
||||
"endpointDescription": "Configuração de endpoint da API",
|
||||
"settings": "Configurações",
|
||||
"settingsDescription": "Gerencie suas preferências",
|
||||
"openaiCompatible": "Compatível com OpenAI",
|
||||
"anthropicCompatible": "Compatível com Anthropic"
|
||||
}
|
||||
}
|
||||
28
src/i18n/request.ts
Normal file
28
src/i18n/request.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { getRequestConfig } from "next-intl/server";
|
||||
import { cookies, headers } from "next/headers";
|
||||
import { LOCALES, DEFAULT_LOCALE, LOCALE_COOKIE } from "./config";
|
||||
import type { Locale } from "./config";
|
||||
|
||||
export default getRequestConfig(async () => {
|
||||
// 1. Try cookie
|
||||
const cookieStore = await cookies();
|
||||
let locale: string = cookieStore.get(LOCALE_COOKIE)?.value || "";
|
||||
|
||||
// 2. Try custom header (set by middleware)
|
||||
if (!locale) {
|
||||
const headerStore = await headers();
|
||||
locale = headerStore.get("x-locale") || "";
|
||||
}
|
||||
|
||||
// 3. Validate & fallback
|
||||
if (!LOCALES.includes(locale as Locale)) {
|
||||
locale = DEFAULT_LOCALE;
|
||||
}
|
||||
|
||||
const messages = (await import(`./messages/${locale}.json`)).default;
|
||||
|
||||
return {
|
||||
locale,
|
||||
messages,
|
||||
};
|
||||
});
|
||||
@@ -6,6 +6,8 @@ import Image from "next/image";
|
||||
import PropTypes from "prop-types";
|
||||
import { ThemeToggle } from "@/shared/components";
|
||||
import TokenHealthBadge from "./TokenHealthBadge";
|
||||
import LanguageSelector from "./LanguageSelector";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
OAUTH_PROVIDERS,
|
||||
APIKEY_PROVIDERS,
|
||||
@@ -14,7 +16,9 @@ import {
|
||||
ANTHROPIC_COMPATIBLE_PREFIX,
|
||||
} from "@/shared/constants/providers";
|
||||
|
||||
const getPageInfo = (pathname) => {
|
||||
function usePageInfo(pathname: string | null) {
|
||||
const t = useTranslations("header");
|
||||
|
||||
if (!pathname) return { title: "", description: "", breadcrumbs: [] };
|
||||
|
||||
// Provider detail page: /dashboard/providers/[id]
|
||||
@@ -29,7 +33,7 @@ const getPageInfo = (pathname) => {
|
||||
title: providerInfo.name,
|
||||
description: "",
|
||||
breadcrumbs: [
|
||||
{ label: "Providers", href: "/dashboard/providers" },
|
||||
{ label: t("providers"), href: "/dashboard/providers" },
|
||||
{ label: providerInfo.name, image: `/providers/${providerInfo.id}.png` },
|
||||
],
|
||||
};
|
||||
@@ -37,22 +41,22 @@ const getPageInfo = (pathname) => {
|
||||
|
||||
if (providerId.startsWith(OPENAI_COMPATIBLE_PREFIX)) {
|
||||
return {
|
||||
title: "OpenAI Compatible",
|
||||
title: t("openaiCompatible"),
|
||||
description: "",
|
||||
breadcrumbs: [
|
||||
{ label: "Providers", href: "/dashboard/providers" },
|
||||
{ label: "OpenAI Compatible", image: "/providers/oai-cc.png" },
|
||||
{ label: t("providers"), href: "/dashboard/providers" },
|
||||
{ label: t("openaiCompatible"), image: "/providers/oai-cc.png" },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
if (providerId.startsWith(ANTHROPIC_COMPATIBLE_PREFIX)) {
|
||||
return {
|
||||
title: "Anthropic Compatible",
|
||||
title: t("anthropicCompatible"),
|
||||
description: "",
|
||||
breadcrumbs: [
|
||||
{ label: "Providers", href: "/dashboard/providers" },
|
||||
{ label: "Anthropic Compatible", image: "/providers/anthropic-m.png" },
|
||||
{ label: t("providers"), href: "/dashboard/providers" },
|
||||
{ label: t("anthropicCompatible"), image: "/providers/anthropic-m.png" },
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -60,40 +64,41 @@ const getPageInfo = (pathname) => {
|
||||
|
||||
if (pathname.includes("/providers"))
|
||||
return {
|
||||
title: "Providers",
|
||||
description: "Manage your AI provider connections",
|
||||
title: t("providers"),
|
||||
description: t("providerDescription"),
|
||||
breadcrumbs: [],
|
||||
};
|
||||
if (pathname.includes("/combos"))
|
||||
return { title: "Combos", description: "Model combos with fallback", breadcrumbs: [] };
|
||||
return { title: t("combos"), description: t("comboDescription"), breadcrumbs: [] };
|
||||
if (pathname.includes("/usage"))
|
||||
return {
|
||||
title: "Usage & Analytics",
|
||||
description: "Monitor your API usage, token consumption, and request logs",
|
||||
title: t("usage"),
|
||||
description: t("usageDescription"),
|
||||
breadcrumbs: [],
|
||||
};
|
||||
if (pathname.includes("/analytics"))
|
||||
return {
|
||||
title: "Analytics",
|
||||
description: "Charts, trends, and evaluation insights",
|
||||
title: t("analytics"),
|
||||
description: t("analyticsDescription"),
|
||||
breadcrumbs: [],
|
||||
};
|
||||
if (pathname.includes("/cli-tools"))
|
||||
return { title: "CLI Tools", description: "Configure CLI tools", breadcrumbs: [] };
|
||||
return { title: t("cliTools"), description: t("cliToolsDescription"), breadcrumbs: [] };
|
||||
if (pathname === "/dashboard")
|
||||
return { title: "Home", description: "Welcome to OmniRoute", breadcrumbs: [] };
|
||||
return { title: t("home"), description: t("homeDescription"), breadcrumbs: [] };
|
||||
if (pathname.includes("/endpoint"))
|
||||
return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
|
||||
return { title: t("endpoint"), description: t("endpointDescription"), breadcrumbs: [] };
|
||||
if (pathname.includes("/profile"))
|
||||
return { title: "Settings", description: "Manage your preferences", breadcrumbs: [] };
|
||||
return { title: t("settings"), description: t("settingsDescription"), breadcrumbs: [] };
|
||||
|
||||
return { title: "", description: "", breadcrumbs: [] };
|
||||
};
|
||||
}
|
||||
|
||||
export default function Header({ onMenuClick, showMenuButton = true }) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { title, description, breadcrumbs } = getPageInfo(pathname);
|
||||
const t = useTranslations("header");
|
||||
const { title, description, breadcrumbs } = usePageInfo(pathname);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
@@ -175,6 +180,9 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
|
||||
|
||||
{/* Right actions */}
|
||||
<div className="flex items-center gap-3 ml-auto">
|
||||
{/* Language selector */}
|
||||
<LanguageSelector />
|
||||
|
||||
{/* Theme toggle */}
|
||||
<ThemeToggle />
|
||||
|
||||
@@ -185,7 +193,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-red-500 hover:bg-red-500/10 transition-all"
|
||||
title="Logout"
|
||||
title={t("logout")}
|
||||
>
|
||||
<span className="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
|
||||
90
src/shared/components/LanguageSelector.tsx
Normal file
90
src/shared/components/LanguageSelector.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { LANGUAGES, LOCALE_COOKIE } from "@/i18n/config";
|
||||
import type { Locale } from "@/i18n/config";
|
||||
import { useLocale } from "next-intl";
|
||||
|
||||
/** Persist locale preference in cookie + localStorage (outside component scope for ESLint) */
|
||||
function persistLocale(code: Locale) {
|
||||
document.cookie = `${LOCALE_COOKIE}=${code};path=/;max-age=${365 * 24 * 60 * 60};samesite=lax`;
|
||||
try {
|
||||
localStorage.setItem(LOCALE_COOKIE, code);
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
export default function LanguageSelector() {
|
||||
const locale = useLocale();
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const currentLang = LANGUAGES.find((l) => l.code === locale) || LANGUAGES[0];
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, []);
|
||||
|
||||
const handleSelect = (code: Locale) => {
|
||||
if (code === locale) {
|
||||
setOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
persistLocale(code);
|
||||
setOpen(false);
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
{/* Trigger button */}
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm font-medium text-text-main hover:bg-surface-hover transition-all border border-transparent hover:border-border"
|
||||
title={currentLang.name}
|
||||
>
|
||||
<span className="text-base leading-none">{currentLang.flag}</span>
|
||||
<span className="text-xs font-semibold tracking-wide">{currentLang.label}</span>
|
||||
<span
|
||||
className={`material-symbols-outlined text-[14px] text-text-muted transition-transform ${open ? "rotate-180" : ""}`}
|
||||
>
|
||||
expand_more
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Dropdown */}
|
||||
{open && (
|
||||
<div className="absolute right-0 top-full mt-1 w-40 rounded-xl border border-border bg-bg shadow-xl z-50 overflow-hidden animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
{LANGUAGES.map((lang) => (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => handleSelect(lang.code)}
|
||||
className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-sm transition-colors ${
|
||||
lang.code === locale
|
||||
? "bg-primary/10 text-primary font-semibold"
|
||||
: "text-text-main hover:bg-surface-hover"
|
||||
}`}
|
||||
>
|
||||
<span className="text-base leading-none">{lang.flag}</span>
|
||||
<span className="flex-1 text-left">{lang.name}</span>
|
||||
{lang.code === locale && (
|
||||
<span className="material-symbols-outlined text-[16px] text-primary">check</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,31 +10,32 @@ import OmniRouteLogo from "./OmniRouteLogo";
|
||||
import Button from "./Button";
|
||||
import { ConfirmModal } from "./Modal";
|
||||
import CloudSyncStatus from "./CloudSyncStatus";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/dashboard", label: "Home", icon: "home", exact: true },
|
||||
{ href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
|
||||
{ href: "/dashboard/api-manager", label: "API Manager", icon: "vpn_key" },
|
||||
{ href: "/dashboard/providers", label: "Providers", icon: "dns" },
|
||||
{ href: "/dashboard/combos", label: "Combos", icon: "layers" },
|
||||
{ href: "/dashboard/logs", label: "Logs", icon: "description" },
|
||||
{ href: "/dashboard/costs", label: "Costs", icon: "account_balance_wallet" },
|
||||
{ href: "/dashboard/analytics", label: "Analytics", icon: "analytics" },
|
||||
{ href: "/dashboard/limits", label: "Limits & Quotas", icon: "tune" },
|
||||
{ href: "/dashboard/health", label: "Health", icon: "health_and_safety" },
|
||||
{ href: "/dashboard/cli-tools", label: "CLI Tools", icon: "terminal" },
|
||||
// Nav items use i18n keys resolved inside the component
|
||||
const navItemDefs = [
|
||||
{ href: "/dashboard", i18nKey: "home", icon: "home", exact: true },
|
||||
{ href: "/dashboard/endpoint", i18nKey: "endpoint", icon: "api" },
|
||||
{ href: "/dashboard/api-manager", i18nKey: "apiManager", icon: "vpn_key" },
|
||||
{ href: "/dashboard/providers", i18nKey: "providers", icon: "dns" },
|
||||
{ href: "/dashboard/combos", i18nKey: "combos", icon: "layers" },
|
||||
{ href: "/dashboard/logs", i18nKey: "logs", icon: "description" },
|
||||
{ href: "/dashboard/costs", i18nKey: "costs", icon: "account_balance_wallet" },
|
||||
{ href: "/dashboard/analytics", i18nKey: "analytics", icon: "analytics" },
|
||||
{ href: "/dashboard/limits", i18nKey: "limits", icon: "tune" },
|
||||
{ href: "/dashboard/health", i18nKey: "health", icon: "health_and_safety" },
|
||||
{ href: "/dashboard/cli-tools", i18nKey: "cliTools", icon: "terminal" },
|
||||
];
|
||||
|
||||
// Debug items (only show when ENABLE_REQUEST_LOGS=true)
|
||||
const debugItems = [{ href: "/dashboard/translator", label: "Translator", icon: "translate" }];
|
||||
const debugItemDefs = [{ href: "/dashboard/translator", i18nKey: "translator", icon: "translate" }];
|
||||
|
||||
const systemItems = [{ href: "/dashboard/settings", label: "Settings", icon: "settings" }];
|
||||
const systemItemDefs = [{ href: "/dashboard/settings", i18nKey: "settings", icon: "settings" }];
|
||||
|
||||
const helpItems = [
|
||||
{ href: "/docs", label: "Docs", icon: "menu_book" },
|
||||
const helpItemDefs = [
|
||||
{ href: "/docs", i18nKey: "docs", icon: "menu_book" },
|
||||
{
|
||||
href: "https://github.com/diegosouzapw/OmniRoute/issues",
|
||||
label: "Issues",
|
||||
i18nKey: "issues",
|
||||
icon: "bug_report",
|
||||
external: true,
|
||||
},
|
||||
@@ -50,6 +51,8 @@ export default function Sidebar({
|
||||
onToggleCollapse?: any;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const t = useTranslations("sidebar");
|
||||
const tc = useTranslations("common");
|
||||
const [showShutdownModal, setShowShutdownModal] = useState(false);
|
||||
const [showRestartModal, setShowRestartModal] = useState(false);
|
||||
const [isShuttingDown, setIsShuttingDown] = useState(false);
|
||||
@@ -100,6 +103,13 @@ export default function Sidebar({
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// Resolve i18n keys → labels
|
||||
const resolveItems = (defs) => defs.map((d) => ({ ...d, label: t(d.i18nKey) }));
|
||||
const navItems = resolveItems(navItemDefs);
|
||||
const debugItems = resolveItems(debugItemDefs);
|
||||
const systemItems = resolveItems(systemItemDefs);
|
||||
const helpItems = resolveItems(helpItemDefs);
|
||||
|
||||
const renderNavLink = (item) => {
|
||||
const active = !item.external && isActive(item.href, item.exact);
|
||||
const className = cn(
|
||||
@@ -271,7 +281,7 @@ export default function Sidebar({
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowRestartModal(true)}
|
||||
title="Restart server"
|
||||
title={t("restart")}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 rounded-lg font-medium transition-all",
|
||||
"text-amber-500 hover:bg-amber-500/10 border border-amber-500/20 hover:border-amber-500/40",
|
||||
@@ -279,11 +289,11 @@ export default function Sidebar({
|
||||
)}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">restart_alt</span>
|
||||
{!collapsed && "Restart"}
|
||||
{!collapsed && t("restart")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowShutdownModal(true)}
|
||||
title="Shutdown server"
|
||||
title={t("shutdown")}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 rounded-lg font-medium transition-all",
|
||||
"text-red-500 hover:bg-red-500/10 border border-red-500/20 hover:border-red-500/40",
|
||||
@@ -291,7 +301,7 @@ export default function Sidebar({
|
||||
)}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">power_settings_new</span>
|
||||
{!collapsed && "Shutdown"}
|
||||
{!collapsed && t("shutdown")}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -301,10 +311,10 @@ export default function Sidebar({
|
||||
isOpen={showShutdownModal}
|
||||
onClose={() => setShowShutdownModal(false)}
|
||||
onConfirm={handleShutdown}
|
||||
title="Close Proxy"
|
||||
message="Are you sure you want to close the proxy server?"
|
||||
confirmText="Close"
|
||||
cancelText="Cancel"
|
||||
title={t("shutdown")}
|
||||
message={t("shutdownConfirm")}
|
||||
confirmText={t("shutdown")}
|
||||
cancelText={tc("cancel")}
|
||||
variant="danger"
|
||||
loading={isShuttingDown}
|
||||
/>
|
||||
@@ -314,10 +324,10 @@ export default function Sidebar({
|
||||
isOpen={showRestartModal}
|
||||
onClose={() => setShowRestartModal(false)}
|
||||
onConfirm={handleRestart}
|
||||
title="Restart Proxy"
|
||||
message="Are you sure you want to restart the proxy server? It will be back online in a few seconds."
|
||||
confirmText="Restart"
|
||||
cancelText="Cancel"
|
||||
title={t("restart")}
|
||||
message={t("restartConfirm")}
|
||||
confirmText={t("restart")}
|
||||
cancelText={tc("cancel")}
|
||||
variant="warning"
|
||||
loading={isRestarting}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user