fix

app/srv/ws/sync/actions/site_update.ts

@@ -33,7 +33,7 @@ export const site_update: SAction["site"]["update"] = async function (
         if (ws)
           sendWS(ws, {
             type: SyncType.Event,
-            event: "site_js_updated",
+            event: "site_updated",
             data: site,
           });
       }

app/web/src/render/ed/logic/ed-sync.tsx

@@ -108,7 +108,7 @@ export const edInitSync = (p: PG) => {
           p.site = site;
           p.render();
         },
-        site_js_updated(site) {
+        site_updated(site) {
           for (const [k, v] of Object.entries(site)) {
             if (k === "js" || k === "js_compiled") {
               p.site[k] = decoder.decode(decompress(v as any));

app/web/src/render/ed/panel/header/left/api.tsx

@@ -6,7 +6,7 @@ export const EdApi = () => {
     <TopBtn
       style="slim"
       className="font-bold font-mono text-[10px]"
-      popover={<EdApiServer />}
+      popover={(popover) => <EdApiServer popover={popover} />}
       placement="right"
     >
       <div className="h-[26px] flex items-center justify-center">API</div>

app/web/src/render/ed/panel/header/top-btn.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { Popover } from "../../../../utils/ui/popover";
 import { Placement } from "@floating-ui/react";
+import { useLocal } from "web-utils";
 
 export const TopBtn = ({
   children,
@@ -18,9 +19,10 @@ export const TopBtn = ({
   underlight?: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   style?: "slim" | "normal";
-  popover?: ReactElement;
+  popover?: ReactElement | ((popover: { onClose: () => void }) => ReactElement);
   placement?: Placement;
 }) => {
+  const local = useLocal({ open: false, onClose: () => {} });
   const result = (
     <div
       className={cx(
@@ -39,7 +41,15 @@ export const TopBtn = ({
           `,
         className
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        if (popover) {
+          local.open = true;
+          local.render();
+        }
+        if (onClick) {
+          onClick(e);
+        }
+      }}
     >
       {underlight && (
         <div
@@ -59,7 +69,13 @@ export const TopBtn = ({
     return (
       <Popover
         autoFocus={false}
-        content={popover}
+        content={typeof popover === "function" ? popover(local) : popover}
+        open={local.open}
+        onOpenChange={(open) => {
+          if (!open) local.onClose();
+          local.open = open;
+          local.render();
+        }}
         placement={placement}
       >
         {result}

app/web/src/render/ed/panel/popup/api/api-server.tsx

@@ -1,9 +1,14 @@
 import { forwardRef } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EDGlobal, PG } from "../../../logic/ed-global";
+import { EDGlobal } from "../../../logic/ed-global";
-import { checkAPI, dev } from "./api-utils";
+import { apiUrl, checkAPI, dev } from "./api-utils";
 
-export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
+export const EdApiServer = forwardRef<
+  HTMLDivElement,
+  {
+    popover: { onClose: () => void };
+  }
+>(({ popover }, ref) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal(
     {
@@ -26,6 +31,8 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
     }
   );
 
+  const url = apiUrl(p);
+
   const check = () => {
     local.status = "checking";
     local.render();
@@ -42,6 +49,15 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
       local.render();
     }
   };
+  const update = async () => {
+    p.site.config.api_url = local.api_url;
+    await p.sync.site.update(p.site.id, {
+      config: { api_url: local.api_url },
+    });
+    check();
+  };
+  popover.onClose = update;
+
   return (
     <div
       ref={ref}
@@ -49,21 +65,27 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
     >
       <div className="flex justify-between items-center pr-1">
         <div className="p-1">Server URL:</div>
-        <div className="text-[12px]">
+        {url && (
-          {local.status === "online" && (
+          <div className="text-[12px]">
-            <div className="bg-green-700 px-2 text-white">ONLINE</div>
+            {local.status === "online" && (
-          )}
+              <div className="bg-green-700 px-2 text-white">ONLINE</div>
-          {local.status === "offline" && (
+            )}
-            <div className="text-white px-2 bg-slate-500">OFFLINE</div>
+            {local.status === "offline" && (
-          )}
+              <div className="text-white px-2 bg-slate-500">OFFLINE</div>
-          {local.status === "checking" && (
+            )}
-            <div className="text-blue-500">Checking...</div>
+            {local.status === "checking" && (
-          )}
+              <div className="text-blue-500">Checking...</div>
-        </div>
+            )}
+          </div>
+        )}
+        {!url && (
+          <div className="text-[12px] text-slate-500">INVALID SERVER</div>
+        )}
       </div>
       <div className="flex border-y">
         <div className="flex flex-1 p-1 ">
           <input
+            spellCheck={false}
             value={local.api_url}
             onChange={(e) => {
               local.api_url = e.currentTarget.value;
@@ -85,7 +107,7 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
                 e.currentTarget.blur();
               }
             }}
-            onBlur={check}
+            onBlur={update}
             placeholder="https://..."
           />
         </div>
@@ -107,6 +129,7 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
             dev.enabled = !dev.enabled;
             localStorage.setItem("prasi-dev", JSON.stringify(dev));
             local.render();
+            check();
           }}
         >
           <span>DEV</span>{" "}
@@ -116,6 +139,7 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
 
         <input
           type="text"
+          spellCheck={false}
           className={cx(
             "px-1 m-1 border flex-1 font-mono text-[11px] outline-none focus:border-blue-500",
             dev.enabled && "border-green-700"

app/web/src/render/ed/panel/popup/api/api-utils.ts

@@ -3,13 +3,34 @@ import { PG } from "../../../logic/ed-global";
 export const dev = JSON.parse(localStorage.getItem("prasi-dev") || "{}") as {
   enabled: boolean;
   url: string;
+  lastURL: { valid: boolean; url: string };
 };
 
 export const apiUrl = function (p: PG): string {
   if (dev.enabled) {
     return dev.url;
   }
-  return p.site.config.api_url;
+
+  if (!dev.lastURL) {
+    dev.lastURL = { valid: false, url: "" };
+  }
+
+  if (!dev.lastURL.valid || dev.lastURL.url !== p.site.config.api_url) {
+    try {
+      const url = new URL(p.site.config.api_url);
+      if (url && url.hostname && url.protocol.startsWith("http")) {
+        dev.lastURL.valid = true;
+        return url.toString();
+      }
+      dev.lastURL.valid = false;
+    } catch (e) {
+      dev.lastURL.valid = false;
+    }
+  }
+
+  if (dev.lastURL.valid) return p.site.config.api_url;
+
+  return "";
 };
 
 export const checkAPI = (p: PG) => {

app/web/src/utils/sync/ws-client.ts

@@ -82,7 +82,7 @@ export const clientStartSync = async (arg: {
       id: string;
       sv_local: Uint8Array;
     }) => void;
-    site_js_updated: (
+    site_updated: (
       arg: Partial<
         Omit<ESite, "js" | "js_compiled"> & {
           js: Uint8Array;