fix: swagger-ui no longer working

apps/nextjs/package.json

@@ -57,6 +57,7 @@
     "@mantine/modals": "^8.3.9",
     "@mantine/tiptap": "^8.3.9",
     "@million/lint": "1.0.14",
+    "@scalar/api-reference-react": "^0.8.11",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
@@ -87,7 +88,6 @@
     "react-simple-code-editor": "^0.14.1",
     "sass": "^1.94.2",
     "superjson": "2.2.6",
-    "swagger-ui-react": "^5.30.3",
     "use-deep-compare-effect": "^1.8.1",
     "zod": "^4.1.13"
   },
@@ -100,7 +100,6 @@
     "@types/prismjs": "^1.26.5",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@types/swagger-ui-react": "^5.18.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.1",
     "node-loader": "^2.1.0",

apps/nextjs/src/app/[locale]/manage/tools/api/components/swagger-ui.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import type { OpenAPIObject } from "openapi3-ts/oas31";
-import SwaggerUI from "swagger-ui-react";
-
-// 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";
-
-interface SwaggerUIClientProps {
-  document: OpenAPIObject;
-}
-
-export const SwaggerUIClient = ({ document }: SwaggerUIClientProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const requestInterceptor = (req: Record<string, any>) => {
-    req.credentials = "omit";
-    return req;
-  };
-
-  return <SwaggerUI requestInterceptor={requestInterceptor} spec={document} />;
-};

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

@@ -1,6 +1,7 @@
 import { headers } from "next/headers";
 import { notFound } from "next/navigation";
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from "@mantine/core";
+import { ApiReferenceReact } from "@scalar/api-reference-react";
 
 import { openApiDocument } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -8,10 +9,11 @@ import { auth } from "@homarr/auth/next";
 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";
 
+import "@scalar/api-reference-react/style.css";
+
 export async function generateMetadata() {
   const session = await auth();
   if (!session?.user || !session.user.permissions.includes("admin")) {
@@ -45,7 +47,20 @@ export default async function ApiPage() {
           <ApiKeysManagement apiKeys={apiKeys} />
         </TabsPanel>
         <TabsPanel value={"documentation"}>
-          <SwaggerUIClient document={document} />
+          <ApiReferenceReact
+            configuration={{
+              content: document,
+              layout: "classic",
+              showSidebar: false,
+              hideDarkModeToggle: true,
+              showDeveloperTools: "never",
+              hiddenClients: true,
+              darkMode: session.user.colorScheme === "dark",
+              authentication: {
+                preferredSecurityScheme: "apikey",
+              },
+            }}
+          />
         </TabsPanel>
       </Tabs>
     </Stack>

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

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