4bnode 4.1.9 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4bnode",
-  "version": "4.1.9",
+  "version": "4.2.0",
   "description": "4bnode is a CLI-powered backend development platform with a built-in visual dashboard to generate, manage, and test Node.js/Express APIs faster.",
   "main": "index.js",
   "type": "module",

package/skeleton/.4bnode/assets/js/pages/DiscoveryPage.js

@@ -15,6 +15,7 @@ export function DiscoveryPage() {
   const [info, setInfo] = useState(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [toggling, setToggling] = useState(false);
   const [name, setName] = useState("");
   const [type, setType] = useState("http");
   const [enabled, setEnabled] = useState(true);
@@ -41,6 +42,24 @@ export function DiscoveryPage() {
     loadInfo();
   }, []);
 
+  // Flip Bonjour on/off immediately — no "Save" step. The dashboard runs in the
+  // same process as the advertiser, so the server re-publishes / unpublishes live
+  // and persists BONJOUR_ENABLED to .env in one call.
+  async function handleToggle(e) {
+    const next = e.target.checked;
+    setEnabled(next); // optimistic
+    setToggling(true);
+    try {
+      await api("/discovery/config", { method: "POST", body: { enabled: next } });
+      toast(next ? "Bonjour enabled" : "Bonjour disabled", "success");
+      loadInfo();
+    } catch (err) {
+      setEnabled(!next); // revert on failure
+      toast(err.message, "error");
+    }
+    setToggling(false);
+  }
+
   async function handleSave() {
     setSaving(true);
     try {
@@ -114,6 +133,20 @@ export function DiscoveryPage() {
                   </div>
                 </div>`
               : html`<div>
+                  <!-- Enable / disable — applies instantly, no restart -->
+                  <div style=${{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", padding: "10px 12px", border: "1px solid var(--border)", borderRadius: "8px", marginBottom: "14px" }}>
+                    <div>
+                      <div style=${{ fontSize: "13px", fontWeight: 600 }}>Advertise on local network</div>
+                      <div className="text-muted" style=${{ fontSize: "12px" }}>
+                        ${enabled ? "On — this app is discoverable via Bonjour/mDNS" : "Off — not broadcasting on the network"}
+                      </div>
+                    </div>
+                    <label className="form-toggle">
+                      <input type="checkbox" checked=${enabled} disabled=${toggling} onChange=${handleToggle} />
+                      <span className="slider"></span>
+                    </label>
+                  </div>
+
                   ${status === "advertising"
                     ? html`<div style=${{ display: "grid", gridTemplateColumns: "90px 1fr", gap: "6px 12px", fontSize: "13px", marginBottom: "12px" }}>
                         <span className="text-muted">Name</span><span>${self.name}</span>
@@ -135,11 +168,7 @@ export function DiscoveryPage() {
 
                   <div style=${{ borderTop: "1px solid var(--border)", margin: "4px 0 14px" }}></div>
 
-                  <label className="form-label" style=${{ display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", marginBottom: "12px" }}>
-                    <input type="checkbox" checked=${enabled} onChange=${(e) => setEnabled(e.target.checked)} />
-                    Advertise this app on the local network
-                  </label>
-                  <div className="form-group">
+                  <div className="form-group" style=${{ opacity: enabled ? 1 : 0.55 }}>
                     <label className="form-label">Service name</label>
                     <input className="form-input" value=${name} placeholder="My App (auto: app + hostname)" onInput=${(e) => setName(e.target.value)} />
                   </div>