refactor: consolidate breadcrumbs to single TopBar instance
Remove duplicate in-page breadcrumbs (ExchangeDetail, AgentHealth scope trail) and improve the global TopBar breadcrumb with semantic labels and a context-based override for pages with richer navigation data. - Add BreadcrumbProvider from design system v0.1.12 - LayoutShell: label map prettifies URL segments (apps→Applications, etc.) - ExchangeDetail: uses useBreadcrumb() to set semantic trail via context - AgentHealth: remove scope trail, keep live-count badge standalone Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router';
|
||||
import { AppShell, Sidebar, TopBar, CommandPalette, CommandPaletteProvider, GlobalFilterProvider, ToastProvider, useCommandPalette } from '@cameleer/design-system';
|
||||
import { AppShell, Sidebar, TopBar, CommandPalette, CommandPaletteProvider, GlobalFilterProvider, ToastProvider, BreadcrumbProvider, useCommandPalette } from '@cameleer/design-system';
|
||||
import type { SidebarApp, SearchResult } from '@cameleer/design-system';
|
||||
import { useRouteCatalog } from '../api/queries/catalog';
|
||||
import { useAgents } from '../api/queries/agents';
|
||||
@@ -143,10 +143,23 @@ function LayoutContent() {
|
||||
}, [catalogData, exchangeResults]);
|
||||
|
||||
const breadcrumb = useMemo(() => {
|
||||
const LABELS: Record<string, string> = {
|
||||
apps: 'Applications',
|
||||
agents: 'Agents',
|
||||
exchanges: 'Exchanges',
|
||||
routes: 'Routes',
|
||||
admin: 'Admin',
|
||||
'api-docs': 'API Docs',
|
||||
rbac: 'Users & Roles',
|
||||
audit: 'Audit Log',
|
||||
oidc: 'OIDC',
|
||||
database: 'Database',
|
||||
opensearch: 'OpenSearch',
|
||||
};
|
||||
const parts = location.pathname.split('/').filter(Boolean);
|
||||
return parts.map((part, i) => ({
|
||||
label: part,
|
||||
href: '/' + parts.slice(0, i + 1).join('/'),
|
||||
label: LABELS[part] ?? part,
|
||||
...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
|
||||
}));
|
||||
}, [location.pathname]);
|
||||
|
||||
@@ -195,7 +208,9 @@ export function LayoutShell() {
|
||||
<ToastProvider>
|
||||
<CommandPaletteProvider>
|
||||
<GlobalFilterProvider>
|
||||
<LayoutContent />
|
||||
<BreadcrumbProvider>
|
||||
<LayoutContent />
|
||||
</BreadcrumbProvider>
|
||||
</GlobalFilterProvider>
|
||||
</CommandPaletteProvider>
|
||||
</ToastProvider>
|
||||
|
||||
Reference in New Issue
Block a user