feat: finished breadcrumbs for all project types except secret manager

frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx

@@ -1,7 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 
@@ -42,12 +42,9 @@ export const SettingsPage = () => {
     <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="w-full max-w-7xl px-6">
-        <div className="my-6">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
+      <div className="w-full max-w-7xl">
+        <PageHeader title={t("settings.project.title")} />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs

frontend/src/pages/secret-manager/SettingsPage/route.tsx

@@ -5,5 +5,15 @@ import { SettingsPage } from "./SettingsPage";
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/layout.tsx

@@ -1,21 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { workspaceKeys } from "@app/hooks/api";
 import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
 import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";
-import { OrganizationLayout } from "@app/layouts/OrganizationLayout";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout"
 )({
-  component: () => (
-    <OrganizationLayout>
-      <ProjectLayout />
-    </OrganizationLayout>
-  ),
+  component: ProjectLayout,
   beforeLoad: async ({ params, context }) => {
-    await context.queryClient.ensureQueryData({
+    const project = await context.queryClient.ensureQueryData({
       queryKey: workspaceKeys.getWorkspaceById(params.projectId),
       queryFn: () => fetchWorkspaceById(params.projectId)
     });
@@ -26,5 +21,21 @@ export const Route = createFileRoute(
       }),
       queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
     });
+
+    return {
+      breadcrumbs: [
+        {
+          label: "Secret Managers",
+          link: linkOptions({ to: "/organization/secret-manager/overview" })
+        },
+        {
+          label: project.name,
+          link: linkOptions({
+            to: "/secret-manager/$projectId/overview",
+            params: { projectId: project.id }
+          })
+        }
+      ]
+    };
   }
 });