Fix the rendering of the embedded API doc

frontend/knip.config.ts

@@ -8,7 +8,7 @@ import type { KnipConfig } from "knip";
 export default {
   entry: [
     "src/main.tsx",
-    "src/swagger.tsx",
+    "src/swagger.ts",
     "src/routes/*",
     "i18next-parser.config.ts",
   ],

frontend/src/swagger.ts

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist";
+import { SwaggerUIBundle } from "swagger-ui-dist";
 import "swagger-ui-dist/swagger-ui.css";
 
 type ApiConfig = {
@@ -14,6 +14,7 @@ type ApiConfig = {
 
 interface IWindow {
   API_CONFIG?: ApiConfig;
+  ui?: SwaggerUIBundle;
 }
 
 const config = typeof window !== "undefined" && (window as IWindow).API_CONFIG;
@@ -21,9 +22,10 @@ if (!config) {
   throw new Error("API_CONFIG is not defined");
 }
 
-SwaggerUIBundle({
-  url: "./spec.json",
+(window as IWindow).ui = SwaggerUIBundle({
+  url: config.openapiUrl,
+  oauth2RedirectUrl: config.callbackUrl,
   dom_id: "#swagger-ui",
   deepLinking: true,
-  presets: [SwaggerUIStandalonePreset],
+  presets: [SwaggerUIBundle.presets.apis],
 });

frontend/vite.config.ts

@@ -58,7 +58,7 @@ export default defineConfig((env) => ({
         resolve(__dirname, "src/main.tsx"),
         resolve(__dirname, "src/shared.css"),
         resolve(__dirname, "src/templates.css"),
-        resolve(__dirname, "src/swagger.tsx"),
+        resolve(__dirname, "src/swagger.ts"),
       ],
     },
   },

templates/swagger/doc.html

@@ -18,10 +18,10 @@ Please see LICENSE in the repository root for full details.
         callbackUrl: "{{ callback_url | add_slashes | safe }}",
       };
     </script>
-    {{ include_asset('src/swagger.tsx') | indent(4) | safe }}
+    {{ include_asset('src/swagger.ts') | indent(4) | safe }}
   </head>
 
   <body>
-    <div id="root"></div>
+    <div id="swagger-ui"></div>
   </body>
 </html>