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

app/src/ui/routes/settings/components/Setting.tsx

@@ -107,8 +107,8 @@ export function Setting<Schema extends s.ObjectSchema = s.ObjectSchema>({
       return;
    });
 
-   const deleteAllowed = options?.allowDelete?.(config) ?? true;
-   const editAllowed = options?.allowEdit?.(config) ?? true;
+   const deleteAllowed = (options?.allowDelete?.(config) ?? true) && !readonly;
+   const editAllowed = (options?.allowEdit?.(config) ?? true) && !readonly;
    const showAlert = options?.showAlert?.(config) ?? undefined;
 
    console.log("--setting", { schema, config, prefix, path, exclude });
@@ -120,14 +120,14 @@ export function Setting<Schema extends s.ObjectSchema = s.ObjectSchema>({
       extractedKeys.find((key) => window.location.pathname.endsWith(key)) ?? extractedKeys[0];
 
    const onToggleEdit = useEvent(() => {
-      if (!editAllowed || readonly) return;
+      if (!editAllowed) return;
 
       setEditing((prev) => !prev);
       //formRef.current?.cancel();
    });
 
    const onSave = useEvent(async () => {
-      if (!editAllowed || !editing || readonly) return;
+      if (!editAllowed || !editing) return;
 
       if (formRef.current?.validateForm()) {
          setSubmitting(true);
@@ -215,14 +215,14 @@ export function Setting<Schema extends s.ObjectSchema = s.ObjectSchema>({
                   >
                      <IconButton Icon={TbSettings} />
                   </Dropdown>
-                  <Button onClick={onToggleEdit} disabled={!editAllowed || readonly}>
+                  <Button onClick={onToggleEdit} disabled={!editAllowed}>
                      {editing ? "Cancel" : "Edit"}
                   </Button>
                   {editing && (
                      <Button
                         variant="primary"
                         onClick={onSave}
-                        disabled={submitting || !editAllowed || readonly}
+                        disabled={submitting || !editAllowed}
                      >
                         {submitting ? "Save..." : "Save"}
                      </Button>

app/src/ui/routes/settings/components/SettingNewModal.tsx

@@ -30,7 +30,7 @@ export const SettingNewModal = ({
    const [location, navigate] = useLocation();
    const [formSchema, setFormSchema] = useState(schema);
    const [submitting, setSubmitting] = useState(false);
-   const { actions } = useBknd();
+   const { actions, readonly } = useBknd();
    const [opened, { open, close }] = useDisclosure(false);
    const isGeneratedKey = generateKey !== undefined;
    const isStaticGeneratedKey = typeof generateKey === "string";
@@ -98,15 +98,17 @@ export const SettingNewModal = ({
 
    return (
       <>
-         <div className="flex flex-row">
-            {isAnyOf ? (
-               <Dropdown position="top-start" items={anyOfItems} itemsClassName="gap-3">
-                  <Button>Add new</Button>
-               </Dropdown>
-            ) : (
-               <Button onClick={open}>Add new</Button>
-            )}
-         </div>
+         {!readonly && (
+            <div className="flex flex-row">
+               {isAnyOf ? (
+                  <Dropdown position="top-start" items={anyOfItems} itemsClassName="gap-3">
+                     <Button>Add new</Button>
+                  </Dropdown>
+               ) : (
+                  <Button onClick={open}>Add new</Button>
+               )}
+            </div>
+         )}
 
          <Modal
             open={opened}

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

@@ -67,7 +67,7 @@ export const DataSettings = ({
    schema,
    config,
 }: { schema: ModuleSchemas["data"]; config: ModuleConfigs["data"] }) => {
-   const { app } = useBknd();
+   const { app, readonly } = useBknd();
    const prefix = app.getAbsolutePath("settings");
    const entities = Object.keys(config.entities ?? {});
 
@@ -105,7 +105,7 @@ export const DataSettings = ({
                         options={{
                            showAlert: (config: any) => {
                               // it's weird, but after creation, the config is not set (?)
-                              if (config?.type === "primary") {
+                              if (config?.type === "primary" && !readonly) {
                                  return "Modifying the primary field may result in strange behaviors.";
                               }
                               return;
@@ -137,7 +137,7 @@ export const DataSettings = ({
                         config={config.entities?.[entity] as any}
                         options={{
                            showAlert: (config: any) => {
-                              if (config.type === "system") {
+                              if (config.type === "system" && !readonly) {
                                  return "Modifying the system entities may result in strange behaviors.";
                               }
                               return;