feat: implement openapi (#482)

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -84,6 +84,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
           icon: IconBrandDocker,
           href: "/manage/tools/docker",
         },
+        {
+          label: t("items.tools.items.api"),
+          icon: IconPlug,
+          href: "/manage/tools/api",
+        },
         {
           label: t("items.tools.items.logs"),
           icon: IconLogs,

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

@@ -0,0 +1,28 @@
+import { getScopedI18n } from "@homarr/translation/server";
+
+// workaround for CSS that cannot be processed by next.js, https://github.com/swagger-api/swagger-ui/issues/10045
+import "./swagger-ui-dark.css";
+import "./swagger-ui-overrides.css";
+import "./swagger-ui.css";
+
+import { headers } from "next/headers";
+import SwaggerUI from "swagger-ui-react";
+
+import { openApiDocument } from "@homarr/api";
+import { extractBaseUrlFromHeaders } from "@homarr/common";
+
+import { createMetaTitle } from "~/metadata";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management");
+
+  return {
+    title: createMetaTitle(t("metaTitle")),
+  };
+}
+
+export default function ApiPage() {
+  const document = openApiDocument(extractBaseUrlFromHeaders(headers()));
+
+  return <SwaggerUI spec={document} />;
+}

apps/nextjs/src/app/[locale]/manage/tools/api/swagger-ui-overrides.css

@@ -0,0 +1,4 @@
+.swagger-ui .info {
+  margin: 0 !important;
+  margin-bottom: 20px !important;
+}