Fix double breadcrumbs (#1346)

* fix double breadcrumbs on `/projects` error page

* fix double breadcrumbs on `/projects` error page

* format

* move

Author: dimaMachina

.changeset/stale-pugs-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+fix double breadcrumbs on `/projects` error page

agents-manage-ui/src/app/[tenantId]/projects/(index)/layout.tsx

@@ -1,5 +1,5 @@
 import { BodyTemplate } from '@/components/layout/body-template';
-import BaseSkeleton from '../(index)/loading';
+import { Skeleton } from '@/components/ui/skeleton';
 
 /**
  * Base loading skeleton for this route segment.
@@ -11,7 +11,13 @@ import BaseSkeleton from '../(index)/loading';
 export default function Loading() {
   return (
     <BodyTemplate breadcrumbs={[]}>
-      <BaseSkeleton />
+      <Skeleton className="h-7 mb-2" style={{ width: 70 }} />
+      <Skeleton className="h-5 mb-8" style={{ width: 420 }} />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-36 w-full rounded-lg" />
+        ))}
+      </div>
     </BodyTemplate>
   );
 }

agents-manage-ui/src/app/[tenantId]/projects/(index)/loading.tsx

@@ -0,0 +1 @@
+export { default } from './[projectId]/loading';

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/loading.tsx

@@ -1,5 +1,6 @@
 import { Plus } from 'lucide-react';
 import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
 import { PageHeader } from '@/components/layout/page-header';
 import { NewProjectDialog } from '@/components/projects/new-project-dialog';
@@ -14,7 +15,7 @@ async function ProjectsPage({ params }: PageProps<'/[tenantId]/projects'>) {
 
   try {
     const projects = await fetchProjects(tenantId);
-    return projects.data.length > 0 ? (
+    const content = projects.data.length ? (
       <>
         <PageHeader
           title="Projects"
@@ -44,6 +45,7 @@ async function ProjectsPage({ params }: PageProps<'/[tenantId]/projects'>) {
         }
       />
     );
+    return <BodyTemplate breadcrumbs={[]}>{content}</BodyTemplate>;
   } catch (error) {
     return <FullPageError errorCode={getErrorCode(error)} context="projects" />;
   }

agents-manage-ui/src/app/[tenantId]/projects/loading.tsx

@@ -1,7 +1,7 @@
 import { BodyTemplate } from '@/components/layout/body-template';
 import { PageHeader } from '@/components/layout/page-header';
 
-export default function Layout({ children }: LayoutProps<'/[tenantId]/projects'>) {
+export default function Layout({ children }: LayoutProps<'/[tenantId]/settings'>) {
   return (
     <BodyTemplate breadcrumbs={['Settings']}>
       <PageHeader title="Organization Settings" description="Manage your organization settings" />

…app/[tenantId]/projects/(index)/page.tsx …-ui/src/app/[tenantId]/projects/page.tsxagents-manage-ui/src/app/[tenantId]/projects/(index)/page.tsx renamed to agents-manage-ui/src/app/[tenantId]/projects/page.tsx agents-manage-ui/src/app/[tenantId]/projects/(index)/page.tsx renamed to agents-manage-ui/src/app/[tenantId]/projects/page.tsx

@@ -55,8 +55,8 @@ export function Breadcrumbs({ items }: BreadcrumbsProps) {
       <ol className="flex items-center gap-2">
         {allItems.map((label, idx, arr) => {
           const isLast = idx === arr.length - 1;
-          const item: { label: string; href?: string } =
-            typeof label === 'string' ? { label } : label;
+          const item = typeof label === 'string' ? { label } : label;
+
           return (
             <li
               key={`${item.label}-${idx}`}
@@ -65,7 +65,7 @@ export function Breadcrumbs({ items }: BreadcrumbsProps) {
                 !isLast && 'after:content-["›"] after:text-muted-foreground/60'
               )}
             >
-              {item.href && !isLast ? (
+              {'href' in item && !isLast ? (
                 <Link href={item.href} className="hover:text-foreground">
                   {item.label}
                 </Link>