feat: SSG integration creation page (#2684)

The new path is /new/{kind} so that it can be used in SSG

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

@@ -3,49 +3,55 @@ import { Container, Group, Stack, Title } from "@mantine/core";
 import { z } from "zod";
 
 import { auth } from "@homarr/auth/next";
-import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import { IntegrationAvatar } from "@homarr/ui";
 import type { validation } from "@homarr/validation";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { NewIntegrationForm } from "./_integration-new-form";
+import { NewIntegrationForm } from "../_integration-new-form";
 
-interface NewIntegrationPageProps {
+interface NewIntegrationByIdPageProps {
-  searchParams: Promise<
+  params: {
-    Partial<z.infer<typeof validation.integration.create>> & {
+    id: string;
-      kind: IntegrationKind;
+  };
-    }
+  searchParams: Partial<z.infer<typeof validation.integration.create>>;
-  >;
 }
 
-export default async function IntegrationsNewPage(props: NewIntegrationPageProps) {
+export function generateStaticParams() {
-  const searchParams = await props.searchParams;
+  return integrationKinds.map((kind) => ({
+    id: kind,
+  }));
+}
+
+export default async function IntegrationNewByIdPage(props: NewIntegrationByIdPageProps) {
+  const { id } = props.params;
   const session = await auth();
+
   if (!session?.user.permissions.includes("integration-create")) {
     notFound();
   }
 
-  const result = z.enum(integrationKinds).safeParse(searchParams.kind);
+  const result = z.enum(integrationKinds).safeParse(id);
   if (!result.success) {
     notFound();
   }
 
   const tCreate = await getScopedI18n("integration.page.create");
-
   const currentKind = result.data;
 
+  const dynamicMappings = new Map<string, string>([[id, getIntegrationName(currentKind)]]);
+
   return (
     <>
-      <DynamicBreadcrumb />
+      <DynamicBreadcrumb dynamicMappings={dynamicMappings} nonInteractable={["new"]} />
       <Container>
         <Stack>
           <Group align="center">
             <IntegrationAvatar kind={currentKind} size="md" />
             <Title>{tCreate("title", { name: getIntegrationName(currentKind) })}</Title>
           </Group>
-          <NewIntegrationForm searchParams={searchParams} />
+          <NewIntegrationForm searchParams={{ kind: currentKind }} />
         </Stack>
       </Container>
     </>

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx

@@ -39,7 +39,7 @@ export const IntegrationCreateDropdownContent = () => {
       {filteredKinds.length > 0 ? (
         <ScrollArea.Autosize mah={384}>
           {filteredKinds.map((kind) => (
-            <Menu.Item component={Link} href={`/manage/integrations/new?kind=${kind}`} key={kind}>
+            <Menu.Item component={Link} href={`/manage/integrations/new/${kind}`} key={kind}>
               <Group>
                 <IntegrationAvatar kind={kind} size="sm" />
                 <Text size="sm">{getIntegrationName(kind)}</Text>