feat: add dynamic breadcrumb (#706)

* feat: add dynamic breadcrumb

* feat: pr feedback

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx

@@ -4,6 +4,7 @@ import { api } from "@homarr/api/server";
 import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { IntegrationAvatar } from "../../_integration-avatar";
 import { EditIntegrationForm } from "./_integration-edit-form";
 
@@ -16,14 +17,17 @@ export default async function EditIntegrationPage({ params }: EditIntegrationPag
   const integration = await api.integration.byId({ id: params.id });
 
   return (
-    <Container>
-      <Stack>
-        <Group align="center">
-          <IntegrationAvatar kind={integration.kind} size="md" />
-          <Title>{t("title", { name: getIntegrationName(integration.kind) })}</Title>
-        </Group>
-        <EditIntegrationForm integration={integration} />
-      </Stack>
-    </Container>
+    <>
+      <DynamicBreadcrumb dynamicMappings={new Map([[params.id, integration.name]])} nonInteractable={["edit"]} />
+      <Container>
+        <Stack>
+          <Group align="center">
+            <IntegrationAvatar kind={integration.kind} size="md" />
+            <Title>{t("title", { name: getIntegrationName(integration.kind) })}</Title>
+          </Group>
+          <EditIntegrationForm integration={integration} />
+        </Stack>
+      </Container>
+    </>
   );
 }

apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx

@@ -7,6 +7,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 import type { validation } from "@homarr/validation";
 import { z } from "@homarr/validation";
 
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { IntegrationAvatar } from "../_integration-avatar";
 import { NewIntegrationForm } from "./_integration-new-form";
 
@@ -28,14 +29,17 @@ export default async function IntegrationsNewPage({ searchParams }: NewIntegrati
   const currentKind = result.data;
 
   return (
-    <Container>
-      <Stack>
-        <Group align="center">
-          <IntegrationAvatar kind={currentKind} size="md" />
-          <Title>{t("title", { name: getIntegrationName(currentKind) })}</Title>
-        </Group>
-        <NewIntegrationForm searchParams={searchParams} />
-      </Stack>
-    </Container>
+    <>
+      <DynamicBreadcrumb />
+      <Container>
+        <Stack>
+          <Group align="center">
+            <IntegrationAvatar kind={currentKind} size="md" />
+            <Title>{t("title", { name: getIntegrationName(currentKind) })}</Title>
+          </Group>
+          <NewIntegrationForm searchParams={searchParams} />
+        </Stack>
+      </Container>
+    </>
   );
 }

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -37,6 +37,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { CountBadge } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { IntegrationAvatar } from "./_integration-avatar";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
@@ -54,6 +55,7 @@ export default async function IntegrationsPage({ searchParams }: IntegrationsPag
 
   return (
     <ManageContainer>
+      <DynamicBreadcrumb />
       <Stack>
         <Group justify="space-between" align="center">
           <Title>{t("page.list.title")}</Title>