From 13ca2cc62a6520f2f59a4b2ad91141c108b3e127 Mon Sep 17 00:00:00 2001
From: oyi77 <oyi77@users.noreply.github.com>
Date: Sun, 17 May 2026 05:56:05 +0700
Subject: [PATCH] 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.
---
 src/i18n/messages/en.json                 |  7 ++++
 src/shared/components/Sidebar.tsx         | 15 ++++++--
 src/shared/constants/sidebarVisibility.ts | 43 ++++++++++++++++++++---
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index f865e59fb2..69d9652f50 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -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",
diff --git a/src/shared/components/Sidebar.tsx b/src/shared/components/Sidebar.tsx
index e42443f7dc..83ceb61bbe 100644
--- a/src/shared/components/Sidebar.tsx
+++ b/src/shared/components/Sidebar.tsx
@@ -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>
+        )}
       </>
     );
 
diff --git a/src/shared/constants/sidebarVisibility.ts b/src/shared/constants/sidebarVisibility.ts
index 68622a0aa3..04b514ad20 100644
--- a/src/shared/constants/sidebarVisibility.ts
+++ b/src/shared/constants/sidebarVisibility.ts
@@ -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" },