From d63a9f8ce773afd3bff126285675b85f3e0cd3b4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 14:26:36 +0100
Subject: [PATCH] fix(ui): move scope trail into TopBar breadcrumb instead of
 separate element

---
 ui/src/components/LayoutShell.tsx | 56 ++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index e0a6b62a..e35ad12a 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -7,7 +7,6 @@ import { useSearchExecutions } from '../api/queries/executions';
 import { useAuthStore } from '../auth/auth-store';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { ContentTabs } from './ContentTabs';
-import { ScopeTrail } from './ScopeTrail';
 import { useScope } from '../hooks/useScope';
 
 function healthToColor(health: string): string {
@@ -166,22 +165,38 @@ function LayoutContent() {
 
   const isAdminPage = location.pathname.startsWith('/admin');
   const breadcrumb = useMemo(() => {
-    if (!isAdminPage) return [];
-    const LABELS: Record<string, string> = {
-      admin: 'Admin',
-      rbac: 'Users & Roles',
-      audit: 'Audit Log',
-      oidc: 'OIDC',
-      database: 'Database',
-      opensearch: 'OpenSearch',
-      appconfig: 'App Config',
-    };
-    const parts = location.pathname.split('/').filter(Boolean);
-    return parts.map((part, i) => ({
-      label: LABELS[part] ?? part,
-      ...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
-    }));
-  }, [location.pathname, isAdminPage]);
+    if (isAdminPage) {
+      const LABELS: Record<string, string> = {
+        admin: 'Admin',
+        rbac: 'Users & Roles',
+        audit: 'Audit Log',
+        oidc: 'OIDC',
+        database: 'Database',
+        opensearch: 'OpenSearch',
+        appconfig: 'App Config',
+      };
+      const parts = location.pathname.split('/').filter(Boolean);
+      return parts.map((part, i) => ({
+        label: LABELS[part] ?? part,
+        ...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
+      }));
+    }
+    // Scope trail as breadcrumb items
+    const items: { label: string; href?: string }[] = [
+      { label: 'All Applications', href: `/${scope.tab}` },
+    ];
+    if (scope.appId) {
+      items.push({ label: scope.appId, href: `/${scope.tab}/${scope.appId}` });
+    }
+    if (scope.routeId) {
+      items.push({ label: scope.routeId });
+    }
+    // Last item has no href (current location)
+    if (items.length > 0 && !scope.routeId && !scope.appId) {
+      delete items[items.length - 1].href;
+    }
+    return items;
+  }, [location.pathname, isAdminPage, scope.tab, scope.appId, scope.routeId]);
 
   const handleLogout = useCallback(() => {
     logout();
@@ -250,12 +265,7 @@ function LayoutContent() {
       />
 
       {!isAdminPage && (
-        <>
-          <ContentTabs active={scope.tab} onChange={setTab} />
-          <div style={{ padding: '0 1.5rem', paddingTop: '0.5rem' }}>
-            <ScopeTrail scope={scope} onNavigate={(path) => navigate(path)} />
-          </div>
-        </>
+        <ContentTabs active={scope.tab} onChange={setTab} />
       )}
 
       <main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : '0.75rem 1.5rem' }}>