finalize new media settings

app/src/ui/routes/media/_media.root.tsx

@@ -1,33 +1,17 @@
-import { IconPhoto } from "@tabler/icons-react";
+import { IconAlertHexagon } from "@tabler/icons-react";
 import { TbSettings } from "react-icons/tb";
 import { useBknd } from "ui/client/BkndProvider";
 import { IconButton } from "ui/components/buttons/IconButton";
-import { Empty } from "ui/components/display/Empty";
 import { Link } from "ui/components/wouter/Link";
 import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
-import { useLocation } from "wouter";
 
 export function MediaRoot({ children }) {
    const { app, config } = useBknd();
-   const [, navigate] = useLocation();
+   const mediaDisabled = !config.media.enabled;
    useBrowserTitle(["Media"]);
 
-   if (!config.media.enabled) {
-      return (
-         <Empty
-            Icon={IconPhoto}
-            title="Media not enabled"
-            description="Please enable media in the settings to continue."
-            primary={{
-               children: "Manage Settings",
-               onClick: () => navigate(app.getSettingsPath(["media"]))
-            }}
-         />
-      );
-   }
-
    return (
       <>
          <AppShell.Sidebar>
@@ -42,12 +26,13 @@ export function MediaRoot({ children }) {
             </AppShell.SectionHeader>
             <AppShell.Scrollable initialOffset={96}>
                <div className="flex flex-col flex-grow p-3 gap-3">
-                  {/*<div>
-                     <SearchInput placeholder="Search buckets" />
-                  </div>*/}
                   <nav className="flex flex-col flex-1 gap-1">
-                     <AppShell.SidebarLink as={Link} href={"/"}>
-                        Main Bucket
+                     <AppShell.SidebarLink
+                        as={Link}
+                        href={"/"}
+                        className="flex flex-row justify-between"
+                     >
+                        Main Bucket {mediaDisabled && <IconAlertHexagon className="size-5" />}
                      </AppShell.SidebarLink>
                      <AppShell.SidebarLink as={Link} href={"/settings"}>
                         Settings

app/src/ui/routes/media/media.index.tsx

@@ -1,10 +1,30 @@
+import { IconPhoto } from "@tabler/icons-react";
+import { useBknd } from "ui/client/BkndProvider";
+import { Empty } from "ui/components/display/Empty";
 import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { useLocation } from "wouter";
 
 export function MediaIndex() {
+   const { app, config } = useBknd();
+   const [, navigate] = useLocation();
    useBrowserTitle(["Media"]);
 
+   if (!config.media.enabled) {
+      return (
+         <Empty
+            Icon={IconPhoto}
+            title="Media not enabled"
+            description="Please enable media in the settings to continue."
+            primary={{
+               children: "Manage Settings",
+               onClick: () => navigate("/settings")
+            }}
+         />
+      );
+   }
+
    return (
       <AppShell.Scrollable>
          <div className="flex flex-1 p-3">

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

@@ -1,4 +1,5 @@
 import { IconBrandAws, IconCloud, IconServer } from "@tabler/icons-react";
+import { isDebug } from "core";
 import { autoFormatString } from "core/utils";
 import { twMerge } from "tailwind-merge";
 import { useBknd } from "ui/client/BkndProvider";
@@ -11,6 +12,7 @@ import {
    Field,
    Form,
    FormContextOverride,
+   FormDebug,
    ObjectField,
    Subscribe
 } from "ui/components/form/json-schema-form";
@@ -29,24 +31,23 @@ export function MediaSettings(props) {
    return <MediaSettingsInternal {...props} />;
 }
 
-const ignore = ["entity_name", "basepath"];
+const formConfig = {
+   ignoreKeys: ["entity_name", "basepath"],
+   options: { debug: isDebug(), keepEmpty: true }
+};
+
 function MediaSettingsInternal() {
-   const { config, schema } = useBkndMedia();
+   const { config, schema, actions } = useBkndMedia();
 
    async function onSubmit(data: any) {
       console.log("submit", data);
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await actions.config.patch(data);
+      //await new Promise((resolve) => setTimeout(resolve, 1000));
    }
 
    return (
       <>
-         <Form
-            schema={schema}
-            initialValues={config as any}
-            ignoreKeys={ignore}
-            onSubmit={onSubmit}
-            noValidate
-         >
+         <Form schema={schema} initialValues={config as any} onSubmit={onSubmit} {...formConfig}>
             <Subscribe>
                {({ dirty, errors, submitting }) => (
                   <AppShell.SectionHeader
@@ -79,11 +80,7 @@ function MediaSettingsInternal() {
                      <Adapters />
                   </AnyOf.Root>
                </div>
-               {/*<Subscribe>
-                  {({ data, errors }) => (
-                     <JsonViewer json={JSON.parse(JSON.stringify({ data, errors }))} expand={999} />
-                  )}
-               </Subscribe>*/}
+               <FormDebug />
             </AppShell.Scrollable>
          </Form>
       </>
@@ -105,7 +102,7 @@ function Adapters() {
       <Formy.Group>
          <Formy.Label className="flex flex-row items-center gap-1">
             <span className="font-bold">Media Adapter:</span>
-            {!ctx.selected && <span className="opacity-70"> (Choose one)</span>}
+            {ctx.selected === null && <span className="opacity-70"> (Choose one)</span>}
          </Formy.Label>
          <div className="flex flex-row gap-1 mb-2">
             {ctx.schemas?.map((schema: any, i) => (

app/src/ui/routes/test/tests/json-schema-form-react-test.tsx

@@ -23,8 +23,8 @@ export default function JsonSchemaFormReactTest() {
       <>
          <Form
             schema={schema}
-            onChange={setData}
-            onSubmit={setData}
+            /*onChange={setData}
+            onSubmit={setData}*/
             validator={validator}
             validationMode="change"
          >