moved flash message, removed theme from admin controller

app/src/modules/server/AdminController.tsx

@@ -5,6 +5,7 @@ import { config, isDebug } from "core";
 import { addFlashMessage } from "core/server/flash";
 import { html } from "hono/html";
 import { Fragment } from "hono/jsx";
+import { css, Style } from "hono/css";
 import { Controller } from "modules/Controller";
 import * as SystemPermissions from "modules/permissions";
 import type { AppTheme } from "modules/server/AppServer";
@@ -23,7 +24,7 @@ export type AdminControllerOptions = {
 export class AdminController extends Controller {
    constructor(
       private readonly app: App,
-      private _options: AdminControllerOptions = {}
+      private _options: AdminControllerOptions = {},
    ) {
       super();
    }
@@ -36,7 +37,7 @@ export class AdminController extends Controller {
       return {
          ...this._options,
          basepath: this._options.basepath ?? "/",
-         assets_path: this._options.assets_path ?? config.server.assets_path
+         assets_path: this._options.assets_path ?? config.server.assets_path,
       };
    }
 
@@ -53,7 +54,7 @@ export class AdminController extends Controller {
       const hono = this.create().use(
          authMiddleware({
             //skip: [/favicon\.ico$/]
-         })
+         }),
       );
 
       const auth = this.app.module.auth;
@@ -66,14 +67,14 @@ export class AdminController extends Controller {
          success: configs.auth.cookie.pathSuccess ?? "/",
          loggedOut: configs.auth.cookie.pathLoggedOut ?? "/",
          login: "/auth/login",
-         logout: "/auth/logout"
+         logout: "/auth/logout",
       };
 
       hono.use("*", async (c, next) => {
          const obj = {
             user: c.get("auth")?.user,
             logout_route: this.withBasePath(authRoutes.logout),
-            color_scheme: configs.server.admin.color_scheme
+            color_scheme: configs.server.admin.color_scheme,
          };
          const html = await this.getHtml(obj);
          if (!html) {
@@ -97,11 +98,11 @@ export class AdminController extends Controller {
                      console.log("redirecting to success");
                      return c.redirect(authRoutes.success);
                   }
-               }
+               },
             }),
             async (c) => {
                return c.html(c.get("html")!);
-            }
+            },
          );
 
          hono.get(authRoutes.logout, async (c) => {
@@ -119,16 +120,16 @@ export class AdminController extends Controller {
 
                console.log("redirecting");
                return c.redirect(authRoutes.login);
-            }
+            },
          }),
          permission(SystemPermissions.schemaRead, {
             onDenied: async (c) => {
                addFlashMessage(c, "You not allowed to read the schema", "warning");
-            }
+            },
          }),
          async (c) => {
             return c.html(c.get("html")!);
-         }
+         },
       );
 
       return hono;
@@ -141,12 +142,12 @@ export class AdminController extends Controller {
          if (this.options.html.includes(htmlBkndContextReplace)) {
             return this.options.html.replace(
                htmlBkndContextReplace,
-               "<script>" + bknd_context + "</script>"
+               "<script>" + bknd_context + "</script>",
             );
          }
 
          console.warn(
-            `Custom HTML needs to include '${htmlBkndContextReplace}' to inject BKND context`
+            `Custom HTML needs to include '${htmlBkndContextReplace}' to inject BKND context`,
          );
          return this.options.html as string;
       }
@@ -160,27 +161,36 @@ export class AdminController extends Controller {
 
       const assets = {
          js: "main.js",
-         css: "styles.css"
+         css: "styles.css",
       };
 
       if (isProd) {
-         // @ts-ignore
-         const manifest = await import("bknd/dist/manifest.json", {
-            assert: { type: "json" }
-         });
+         let manifest: any;
+         if (this.options.assets_path.startsWith("http")) {
+            manifest = await fetch(this.options.assets_path + "manifest.json", {
+               headers: {
+                  Accept: "application/json",
+               },
+            }).then((res) => res.json());
+         } else {
+            // @ts-ignore
+            manifest = await import("bknd/dist/manifest.json", {
+               assert: { type: "json" },
+            }).then((res) => res.default);
+         }
+
          // @todo: load all marked as entry (incl. css)
-         assets.js = manifest.default["src/ui/main.tsx"].file;
-         assets.css = manifest.default["src/ui/main.tsx"].css[0] as any;
+         assets.js = manifest["src/ui/main.tsx"].file;
+         assets.css = manifest["src/ui/main.tsx"].css[0] as any;
       }
 
-      const theme = configs.server.admin.color_scheme ?? "light";
       const favicon = isProd ? this.options.assets_path + "favicon.ico" : "/favicon.ico";
 
       return (
          <Fragment>
             {/* dnd complains otherwise */}
             {html`<!DOCTYPE html>`}
-            <html lang="en" class={theme}>
+            <html lang="en">
                <head>
                   <meta charset="UTF-8" />
                   <meta
@@ -197,16 +207,8 @@ export class AdminController extends Controller {
                   )}
                   {isProd ? (
                      <Fragment>
-                        <script
-                           type="module"
-                           CrossOrigin
-                           src={this.options.assets_path + assets?.js}
-                        />
-                        <link
-                           rel="stylesheet"
-                           crossOrigin
-                           href={this.options.assets_path + assets?.css}
-                        />
+                        <script type="module" src={this.options.assets_path + assets?.js} />
+                        <link rel="stylesheet" href={this.options.assets_path + assets?.css} />
                      </Fragment>
                   ) : (
                      <Fragment>
@@ -217,7 +219,7 @@ export class AdminController extends Controller {
                               RefreshRuntime.injectIntoGlobalHook(window)
                               window.$RefreshReg$ = () => {}
                               window.$RefreshSig$ = () => (type) => type
-                              window.__vite_plugin_react_preamble_installed__ = true`
+                              window.__vite_plugin_react_preamble_installed__ = true`,
                            }}
                         />
                         <script type="module" src={"/@vite/client"} />
@@ -227,15 +229,14 @@ export class AdminController extends Controller {
                </head>
                <body>
                   <div id="root">
-                     <div id="loading" style={style(theme)}>
-                        <span style={{ opacity: 0.3, fontSize: 14, fontFamily: "monospace" }}>
-                           Initializing...
-                        </span>
+                     <Style />
+                     <div id="loading" className={wrapperStyle}>
+                        <span className={loaderStyle}>Initializing...</span>
                      </div>
                   </div>
                   <script
                      dangerouslySetInnerHTML={{
-                        __html: bknd_context
+                        __html: bknd_context,
                      }}
                   />
                   {!isProd && <script type="module" src={mainPath} />}
@@ -246,31 +247,27 @@ export class AdminController extends Controller {
    }
 }
 
-const style = (theme: AppTheme) => {
-   const base = {
-      margin: 0,
-      padding: 0,
-      height: "100vh",
-      width: "100vw",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      "-webkit-font-smoothing": "antialiased",
-      "-moz-osx-font-smoothing": "grayscale"
-   };
-   const styles = {
-      light: {
-         color: "rgb(9,9,11)",
-         backgroundColor: "rgb(250,250,250)"
-      },
-      dark: {
-         color: "rgb(250,250,250)",
-         backgroundColor: "rgb(30,31,34)"
-      }
-   };
+const wrapperStyle = css`
+   margin: 0;
+   padding: 0;
+   height: 100vh;
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   color: rgb(9,9,11);
+   background-color: rgb(250,250,250);
+   
+   @media (prefers-color-scheme: dark) {
+      color: rgb(250,250,250);
+      background-color: rgb(30,31,34);
+   }
+`;
 
-   return {
-      ...base,
-      ...styles[theme === "light" ? "light" : "dark"]
-   };
-};
+const loaderStyle = css`
+   opacity: 0.3;
+   font-size: 14px;
+   font-family: monospace;
+`;

app/src/ui/Admin.tsx

@@ -2,11 +2,10 @@ import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import type { ModuleConfigs } from "modules";
 import React from "react";
-import { BkndProvider, useBknd } from "ui/client/bknd";
+import { BkndProvider } from "ui/client/bknd";
 import { useTheme } from "ui/client/use-theme";
 import { Logo } from "ui/components/display/Logo";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
-import { FlashMessage } from "ui/modules/server/FlashMessage";
 import { ClientProvider, type ClientProviderProps } from "./client";
 import { createMantineTheme } from "./lib/mantine/theme";
 import { BkndModalsProvider } from "./modals";
@@ -21,7 +20,7 @@ export type BkndAdminProps = {
 export default function Admin({
    baseUrl: baseUrlOverride,
    withProvider = false,
-   config
+   config,
 }: BkndAdminProps) {
    const Component = (
       <BkndProvider adminOverride={config} fallback={<Skeleton theme={config?.color_scheme} />}>
@@ -45,8 +44,7 @@ function AdminInternal() {
 
    return (
       <MantineProvider {...createMantineTheme(theme as any)}>
-         <Notifications />
-         <FlashMessage />
+         <Notifications position="top-right" />
          <BkndModalsProvider>
             <Routes />
          </BkndModalsProvider>
@@ -54,9 +52,9 @@ function AdminInternal() {
    );
 }
 
-const Skeleton = ({ theme }: { theme?: string }) => {
-   const actualTheme =
-      (theme ?? document.querySelector("html")?.classList.contains("light")) ? "light" : "dark";
+const Skeleton = ({ theme }: { theme?: any }) => {
+   const t = useTheme();
+   const actualTheme = theme ?? t.theme;
 
    return (
       <div id="bknd-admin" className={actualTheme + " antialiased"}>

app/src/ui/modules/server/FlashMessage.tsx

@@ -7,7 +7,7 @@ import { Alert } from "ui/components/display/Alert";
  * @constructor
  */
 export function FlashMessage() {
-   const [flash, setFlash] = useState<any>();
+   const [flash, setFlash] = useState<ReturnType<typeof getFlashMessage>>();
 
    useEffect(() => {
       if (!flash) {

app/src/ui/routes/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy } from "react";
+import React, { Suspense, lazy } from "react";
 import { useBknd } from "ui/client/bknd";
 import { useTheme } from "ui/client/use-theme";
 import { Route, Router, Switch } from "wouter";
@@ -9,6 +9,7 @@ import FlowRoutes from "./flows";
 import MediaRoutes from "./media";
 import { Root, RootEmpty } from "./root";
 import SettingsRoutes from "./settings";
+import { FlashMessage } from "ui/modules/server/FlashMessage";
 
 // @ts-ignore
 const TestRoutes = lazy(() => import("./test"));
@@ -20,6 +21,7 @@ export function Routes() {
 
    return (
       <div id="bknd-admin" className={theme + " antialiased"}>
+         <FlashMessage />
          <Router base={basepath}>
             <Switch>
                <Route path="/auth/login" component={AuthLogin} />