Merge pull request #218 from cameronapak/cp/216-fix-users-link

Fix Sidebar Users Route Links

app/src/modules/server/AdminController.tsx

@@ -11,6 +11,7 @@ import { css, Style } from "hono/css";
 import { Controller } from "modules/Controller";
 import * as SystemPermissions from "modules/permissions";
 import type { TApiUser } from "Api";
+import type { AppTheme } from "ui/client/use-theme";
 import type { Manifest } from "vite";
 
 const htmlBkndContextReplace = "<!-- BKND_CONTEXT -->";
@@ -20,7 +21,7 @@ export type AdminBkndWindowContext = {
    logout_route: string;
    admin_basepath: string;
    logo_return_path?: string;
-   theme?: "dark" | "light" | "system";
+   theme?: AppTheme;
 };
 
 // @todo: add migration to remove admin path from config
@@ -31,7 +32,7 @@ export type AdminControllerOptions = {
    html?: string;
    forceDev?: boolean | { mainPath: string };
    debugRerenders?: boolean;
-   theme?: "dark" | "light" | "system";
+   theme?: AppTheme;
    logoReturnPath?: string;
    manifest?: Manifest;
 };
@@ -122,7 +123,7 @@ export class AdminController extends Controller {
                const obj: AdminBkndWindowContext = {
                   user: c.get("auth")?.user,
                   logout_route: authRoutes.logout,
-                  admin_basepath: this.options.adminBasepath,
+                  admin_basepath: this.options.adminBasepath.replace(/\/+$/, ""),
                   theme: this.options.theme,
                   logo_return_path: this.options.logoReturnPath,
                };
@@ -304,7 +305,7 @@ const wrapperStyle = css`
    -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);

app/src/ui/client/utils/AppReduced.ts

@@ -22,7 +22,6 @@ export class AppReduced {
       protected appJson: AppType,
       protected _options: BkndAdminProps["config"] = {},
    ) {
-      //console.log("received appjson", appJson);
 
       this._entities = Object.entries(this.appJson.data.entities ?? {}).map(([name, entity]) => {
          return constructEntity(name, entity);
@@ -70,20 +69,27 @@ export class AppReduced {
 
    get options() {
       return {
-         basepath: "",
+         basepath: "/",
          logo_return_path: "/",
          ...this._options,
       };
    }
 
+   withBasePath(path: string | string[], absolute = false): string {
+      const paths = Array.isArray(path) ? path : [path];
+      return [absolute ? "~" : null, this.options.basepath, this.options.admin_basepath, ...paths]
+         .filter(Boolean)
+         .join("/")
+         .replace(/\/+/g, "/")
+         .replace(/\/$/, "");
+   }
+
    getSettingsPath(path: string[] = []): string {
-      const base = `~/${this.options.basepath}/settings`.replace(/\/+/g, "/");
-      return [base, ...path].join("/");
+      return this.withBasePath(["settings", ...path], true);
    }
 
    getAbsolutePath(path?: string): string {
-      const { basepath } = this.options;
-      return (path ? `~/${basepath}/${path}` : `~/${basepath}`).replace(/\/+/g, "/");
+      return this.withBasePath(path ?? [], true);
    }
 
    getAuthConfig() {

app/src/ui/routes/index.tsx

@@ -33,7 +33,7 @@ export function Routes({
 }) {
    const { theme } = useTheme();
    const ctx = useBkndWindowContext();
-   const actualBasePath = basePath || ctx.admin_basepath;
+   const actualBasePath = (basePath || ctx.admin_basepath).replace(/\/+$/, "");
 
    return (
       <div id="bknd-admin" className={theme + " antialiased"}>