ui: reflect readonly mode by hiding controls + various small styling fixes

app/src/ui/routes/auth/auth.roles.edit.$role.tsx

@@ -26,6 +26,7 @@ function AuthRolesEditInternal({ params }) {
    const roleName = params.role;
    const role = config.roles?.[roleName];
    const formRef = useRef<AuthRoleFormRef>(null);
+   const { readonly } = useBknd();
 
    async function handleUpdate() {
       console.log("data", formRef.current?.isValid());
@@ -57,7 +58,7 @@ function AuthRolesEditInternal({ params }) {
                                  absolute: true,
                               }),
                         },
-                        {
+                        !readonly && {
                            label: "Delete",
                            onClick: handleDelete,
                            destructive: true,
@@ -67,9 +68,11 @@ function AuthRolesEditInternal({ params }) {
                   >
                      <IconButton Icon={TbDots} />
                   </Dropdown>
+                  !readonly && (
                   <Button variant="primary" onClick={handleUpdate}>
                      Update
                   </Button>
+                  )
                </>
             }
             className="pl-3"

app/src/ui/routes/auth/auth.roles.tsx

@@ -11,10 +11,12 @@ import { Button } from "../../components/buttons/Button";
 import { CellValue, DataTable } from "../../components/table/DataTable";
 import * as AppShell from "../../layouts/AppShell/AppShell";
 import { routes, useNavigate } from "../../lib/routes";
+import { useBknd } from "ui/client/bknd";
 
 export function AuthRolesList() {
    const [navigate] = useNavigate();
    const { config, actions } = useBkndAuth();
+   const { readonly } = useBknd();
 
    const data = Object.values(
       transformObject(config.roles ?? {}, (role, name) => ({
@@ -30,6 +32,7 @@ export function AuthRolesList() {
    }
 
    function openCreateModal() {
+      if (readonly) return;
       bkndModals.open(
          "form",
          {
@@ -59,9 +62,11 @@ export function AuthRolesList() {
       <>
          <AppShell.SectionHeader
             right={
-               <Button variant="primary" onClick={openCreateModal}>
-                  Create new
-               </Button>
+               !readonly && (
+                  <Button variant="primary" onClick={openCreateModal}>
+                     Create new
+                  </Button>
+               )
             }
          >
             Roles & Permissions

app/src/ui/routes/auth/auth.settings.tsx

@@ -52,6 +52,7 @@ const formConfig = {
 
 function AuthSettingsInternal() {
    const { config, schema: _schema, actions, $auth } = useBkndAuth();
+   const { readonly } = useBknd();
    const schema = JSON.parse(JSON.stringify(_schema));
 
    schema.properties.jwt.required = ["alg"];
@@ -61,7 +62,13 @@ function AuthSettingsInternal() {
    }
 
    return (
-      <Form schema={schema} initialValues={config as any} onSubmit={onSubmit} {...formConfig}>
+      <Form
+         schema={schema}
+         initialValues={config as any}
+         onSubmit={onSubmit}
+         {...formConfig}
+         readOnly={readonly}
+      >
          <Subscribe
             selector={(state) => ({
                dirty: state.dirty,
@@ -73,13 +80,15 @@ function AuthSettingsInternal() {
                <AppShell.SectionHeader
                   className="pl-4"
                   right={
-                     <Button
-                        variant="primary"
-                        type="submit"
-                        disabled={!dirty || errors || submitting}
-                     >
-                        Update
-                     </Button>
+                     !readonly && (
+                        <Button
+                           variant="primary"
+                           type="submit"
+                           disabled={!dirty || errors || submitting}
+                        >
+                           Update
+                        </Button>
+                     )
                   }
                >
                   Settings

app/src/ui/routes/auth/auth.strategies.tsx

@@ -60,6 +60,7 @@ const formOptions = {
 };
 
 function AuthStrategiesListInternal() {
+   const { readonly } = useBknd();
    const $auth = useBkndAuth();
    const config = $auth.config.strategies;
    const schema = $auth.schema.properties.strategies;
@@ -80,6 +81,7 @@ function AuthStrategiesListInternal() {
          initialValues={config}
          onSubmit={handleSubmit}
          options={formOptions}
+         readOnly={readonly}
       >
          <Subscribe
             selector={(state) => ({
@@ -92,13 +94,15 @@ function AuthStrategiesListInternal() {
                <AppShell.SectionHeader
                   className="pl-4"
                   right={
-                     <Button
-                        variant="primary"
-                        type="submit"
-                        disabled={!dirty || errors || submitting}
-                     >
-                        Update
-                     </Button>
+                     !readonly && (
+                        <Button
+                           variant="primary"
+                           type="submit"
+                           disabled={!dirty || errors || submitting}
+                        >
+                           Update
+                        </Button>
+                     )
                   }
                >
                   Strategies