feat: add api keys (#991)

* feat: add api keys

* chore: address pull request feedback

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

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

@@ -1,17 +1,14 @@
-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 { Stack, Tabs, TabsList, TabsPanel, TabsTab } from "@mantine/core";
 
 import { openApiDocument } from "@homarr/api";
+import { api } from "@homarr/api/server";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
+import { getScopedI18n } from "@homarr/translation/server";
 
+import { SwaggerUIClient } from "~/app/[locale]/manage/tools/api/components/swagger-ui";
 import { createMetaTitle } from "~/metadata";
+import { ApiKeysManagement } from "./components/api-keys";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -21,8 +18,25 @@ export async function generateMetadata() {
   };
 }
 
-export default function ApiPage() {
+export default async function ApiPage() {
   const document = openApiDocument(extractBaseUrlFromHeaders(headers()));
+  const apiKeys = await api.apiKeys.getAll();
+  const t = await getScopedI18n("management.page.tool.api.tab");
 
-  return <SwaggerUI spec={document} />;
+  return (
+    <Stack>
+      <Tabs defaultValue={"documentation"}>
+        <TabsList>
+          <TabsTab value={"documentation"}>{t("documentation.label")}</TabsTab>
+          <TabsTab value={"authentication"}>{t("apiKey.label")}</TabsTab>
+        </TabsList>
+        <TabsPanel value={"authentication"}>
+          <ApiKeysManagement apiKeys={apiKeys} />
+        </TabsPanel>
+        <TabsPanel value={"documentation"}>
+          <SwaggerUIClient document={document} />
+        </TabsPanel>
+      </Tabs>
+    </Stack>
+  );
 }