feat(ui): add sidebar item subtitles for confusing navigation items

Add subtitleKey to SidebarItemDefinition and render subtitles under
sidebar labels for: Endpoints, API Manager, Combos, Batch, Caveman,
RTK, and Webhooks. Helps non-technical users understand navigation.
This commit is contained in:
oyi77
2026-05-17 05:56:05 +07:00
parent 8afaca4b9f
commit 13ca2cc62a
3 changed files with 58 additions and 7 deletions

View File

@@ -677,9 +677,16 @@
"docs": "Docs",
"issues": "Issues",
"endpoints": "Endpoints",
"endpointsSubtitle": "Your AI connection URLs",
"apiManager": "API Manager",
"apiManagerSubtitle": "Manage API keys and access",
"logs": "Logs",
"webhooks": "Webhooks",
"webhooksSubtitle": "Get notified of events",
"combosSubtitle": "Group providers for failover",
"batchSubtitle": "Process multiple requests",
"contextCavemanSubtitle": "Prompt compression",
"contextRtkSubtitle": "Output filtering",
"auditLog": "Audit Log",
"shutdown": "Shutdown",
"restart": "Restart",

View File

@@ -131,7 +131,11 @@ export default function Sidebar({
...section,
title: getSidebarLabel(section.titleKey, section.titleFallback),
items: section.items
.map((item) => ({ ...item, label: t(item.i18nKey) }))
.map((item) => ({
...item,
label: t(item.i18nKey),
subtitle: item.subtitleKey ? t(item.subtitleKey) : undefined,
}))
.filter((item) => !hiddenSidebarSet.has(item.id)),
}))
.filter((section) => section.items.length > 0);
@@ -156,7 +160,14 @@ export default function Sidebar({
const content = (
<>
<span className={iconClassName}>{item.icon}</span>
{!collapsed && <span className="text-sm font-medium">{item.label}</span>}
{!collapsed && (
<div className="flex flex-col min-w-0">
<span className="text-sm font-medium">{item.label}</span>
{item.subtitle && (
<span className="text-[10px] text-text-muted/60 truncate">{item.subtitle}</span>
)}
</div>
)}
</>
);

View File

@@ -40,6 +40,7 @@ export interface SidebarItemDefinition {
id: HideableSidebarItemId;
href: string;
i18nKey: string;
subtitleKey?: string;
icon: string;
exact?: boolean;
external?: boolean;
@@ -56,11 +57,35 @@ export interface SidebarSectionDefinition {
const PRIMARY_SIDEBAR_ITEMS: readonly SidebarItemDefinition[] = [
{ id: "home", href: "/dashboard", i18nKey: "home", icon: "home", exact: true },
{ id: "endpoints", href: "/dashboard/endpoint", i18nKey: "endpoints", icon: "api" },
{ id: "api-manager", href: "/dashboard/api-manager", i18nKey: "apiManager", icon: "vpn_key" },
{
id: "endpoints",
href: "/dashboard/endpoint",
i18nKey: "endpoints",
subtitleKey: "endpointsSubtitle",
icon: "api",
},
{
id: "api-manager",
href: "/dashboard/api-manager",
i18nKey: "apiManager",
subtitleKey: "apiManagerSubtitle",
icon: "vpn_key",
},
{ id: "providers", href: "/dashboard/providers", i18nKey: "providers", icon: "dns" },
{ id: "combos", href: "/dashboard/combos", i18nKey: "combos", icon: "layers" },
{ id: "batch", href: "/dashboard/batch", i18nKey: "batch", icon: "view_list" },
{
id: "combos",
href: "/dashboard/combos",
i18nKey: "combos",
subtitleKey: "combosSubtitle",
icon: "layers",
},
{
id: "batch",
href: "/dashboard/batch",
i18nKey: "batch",
subtitleKey: "batchSubtitle",
icon: "view_list",
},
{ id: "costs", href: "/dashboard/costs", i18nKey: "costs", icon: "account_balance_wallet" },
{ id: "analytics", href: "/dashboard/analytics", i18nKey: "analytics", icon: "analytics" },
{ id: "cache", href: "/dashboard/cache", i18nKey: "cache", icon: "cached" },
@@ -82,12 +107,14 @@ const CONTEXT_SIDEBAR_ITEMS: readonly SidebarItemDefinition[] = [
id: "context-caveman",
href: "/dashboard/context/caveman",
i18nKey: "contextCaveman",
subtitleKey: "contextCavemanSubtitle",
icon: "compress",
},
{
id: "context-rtk",
href: "/dashboard/context/rtk",
i18nKey: "contextRtk",
subtitleKey: "contextRtkSubtitle",
icon: "filter_alt",
},
{
@@ -112,7 +139,13 @@ const DEBUG_SIDEBAR_ITEMS: readonly SidebarItemDefinition[] = [
const SYSTEM_SIDEBAR_ITEMS: readonly SidebarItemDefinition[] = [
{ id: "logs", href: "/dashboard/logs", i18nKey: "logs", icon: "description" },
{ id: "audit", href: "/dashboard/audit", i18nKey: "auditLog", icon: "policy" },
{ id: "webhooks", href: "/dashboard/webhooks", i18nKey: "webhooks", icon: "webhook" },
{
id: "webhooks",
href: "/dashboard/webhooks",
i18nKey: "webhooks",
subtitleKey: "webhooksSubtitle",
icon: "webhook",
},
{ id: "health", href: "/dashboard/health", i18nKey: "health", icon: "health_and_safety" },
{ id: "proxy", href: "/dashboard/system/proxy", i18nKey: "proxy", icon: "dns" },
{ id: "settings", href: "/dashboard/settings", i18nKey: "settings", icon: "settings" },