openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/settings.js

@@ -17,6 +17,7 @@ const Settings = (() => {
   function open() {
     _load();
     _loadMedia();
+    _initMediaOutputDir();
     _loadBrand();
     _loadBrowserStatus();
     _initNetworkSettings();
@@ -96,6 +97,10 @@ const Settings = (() => {
           <span class="model-card-grid-name">${_esc(displayName)}</span>
           ${isDefault ? `<span class="badge badge-default">${I18n.t("settings.models.badge.default")}</span>` : ""}
           ${isLite ? `<span class="badge badge-lite">${I18n.t("settings.models.badge.lite")}</span>` : ""}
+          ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default" style="margin-left:auto">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            <span>${I18n.t("settings.models.btn.setDefault")}</span>
+          </button>` : ""}
         </div>
         <div class="model-card-grid-provider">${_esc(providerName)}</div>
         ${model.api_key_masked ? `<div class="model-card-grid-model">${_esc(model.api_key_masked)}</div>` : ""}
@@ -104,10 +109,6 @@ const Settings = (() => {
         </div>
       </div>
       <div class="model-card-grid-actions">
-        ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-          <span>${I18n.t("settings.models.btn.setDefault")}</span>
-        </button>` : ""}
         <div class="model-card-grid-toolbar">
           <button class="btn-card-grid-action" data-index="${index}" data-action="test">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
@@ -123,12 +124,12 @@ const Settings = (() => {
           </button>` : ""}
         </div>
       </div>
-      ${websiteUrl ? `<div class="model-card-grid-footer">
-        <a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
+      <div class="model-card-grid-footer">
+        ${websiteUrl ? `<a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer" style="margin-left:auto">
           ${I18n.t("settings.models.link.topUp")}
           <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
-        </a>
-      </div>` : ""}
+        </a>` : ""}
+      </div>
     `;
 
     container.appendChild(card);
@@ -169,7 +170,14 @@ const Settings = (() => {
       document.getElementById("model-modal-baseurl").value = model.base_url || "";
       document.getElementById("model-modal-apikey").value = model.api_key_masked || "";
       document.getElementById("model-modal-default-field").style.display = "";
-      document.getElementById("model-modal-set-default").checked = (model.type === "default");
+      // Lock the checkbox when this is the only configured model: the system
+      // must always have one default (backend re-promotes on save), so
+      // unchecking would be a silent no-op. Force-checked + disabled makes
+      // the constraint visible without any extra copy.
+      const setDefaultCb = document.getElementById("model-modal-set-default");
+      const isOnlyModel = _models.length === 1;
+      setDefaultCb.checked = isOnlyModel ? true : (model.type === "default");
+      setDefaultCb.disabled = isOnlyModel;
 
       // Set provider dropdown value
       const matched = _findProviderByBaseUrl(model.base_url);
@@ -190,6 +198,9 @@ const Settings = (() => {
       // Default to checked for new models — most users want their first/new
       // model to take over as the default.
       document.getElementById("model-modal-set-default").checked = true;
+      // Reset disabled flag in case the previous open was edit-mode on the
+      // sole-model lock path.
+      document.getElementById("model-modal-set-default").disabled = false;
 
       // Reset provider dropdown
       _modalSelectedProviderId = null;
@@ -1261,6 +1272,89 @@ const Settings = (() => {
     }
   }
 
+  // ── Media output directory ────────────────────────────────────────────────────
+  //
+  // Single user-facing override for where /api/media/* writes generated files.
+  // Mirrors the proxy_url section above (same field-input + save/clear pair)
+  // because the data shape is identical (one optional string). Resolution
+  // priority lives server-side in Clacky::Media::OutputDir.resolve:
+  //   per-call output_dir → media_output_dir (this setting) → default_working_dir → Dir.pwd
+
+  async function _initMediaOutputDir() {
+    const input     = document.getElementById("settings-media-output-dir");
+    const browseBtn = document.getElementById("btn-browse-media-output-dir");
+    const clearBtn  = document.getElementById("btn-clear-media-output-dir");
+    const status    = document.getElementById("settings-media-output-dir-status");
+    if (!input || !browseBtn) return;
+
+    try {
+      const res  = await fetch("/api/config/media-output-dir");
+      const data = await res.json();
+      if (data.ok) {
+        input.value = data.value || "";
+        // Show the system fallback as a placeholder hint so the user sees
+        // where files would land if they leave the field blank.
+        if (data.default) input.placeholder = data.default;
+      }
+    } catch (_) { /* non-critical */ }
+
+    async function _patchMediaOutputDir(value, successKey) {
+      status.textContent = "";
+      status.className   = "model-test-result";
+      try {
+        const res  = await fetch("/api/config/media-output-dir", {
+          method:  "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ value: value })
+        });
+        const data = await res.json();
+        if (data.ok) {
+          status.textContent = I18n.t(successKey);
+          status.className   = "model-test-result success";
+          // Auto-hide the toast after a short delay so it doesn't linger
+          // forever (looks like a stuck banner). 2s is enough to read.
+          clearTimeout(_patchMediaOutputDir._hideTimer);
+          _patchMediaOutputDir._hideTimer = setTimeout(() => {
+            status.textContent = "";
+            status.className   = "model-test-result";
+          }, 2000);
+          // Server may have expanded `~` or normalized the path — reflect
+          // the canonical value back into the input so the user sees what
+          // was actually persisted.
+          input.value = data.value || "";
+        } else {
+          status.textContent = data.error || I18n.t("settings.media.output_dir.invalid");
+          status.className   = "model-test-result error";
+        }
+      } catch (e) {
+        status.textContent = e.message || I18n.t("settings.media.output_dir.invalid");
+        status.className   = "model-test-result error";
+      }
+    }
+
+    if (!browseBtn.dataset.bound) {
+      browseBtn.dataset.bound = "1";
+      browseBtn.addEventListener("click", async () => {
+        // Reuse the global directory picker in session-less mode (browses
+        // the real filesystem via /api/dirs). Picker resolves to an absolute
+        // path on confirm, or null on cancel.
+        const start  = (input.value || "").trim();
+        const picked = await window.openDirectoryPicker(start, null, I18n.t("settings.media.output_dir.picker"));
+        if (!picked) return;
+        // Persist immediately — no separate Save click needed.
+        await _patchMediaOutputDir(picked, "settings.media.output_dir.saved");
+      });
+    }
+
+    if (clearBtn && !clearBtn.dataset.bound) {
+      clearBtn.dataset.bound = "1";
+      clearBtn.addEventListener("click", () => {
+        input.value = "";
+        _patchMediaOutputDir("", "settings.media.output_dir.cleared");
+      });
+    }
+  }
+
   // ── Brand & License ───────────────────────────────────────────────────────────
 
   // Whether the server was started with --brand-test (relaxed key validation).
@@ -1463,22 +1557,24 @@ const Settings = (() => {
   // ── Init ──────────────────────────────────────────────────────────────────────
 
   function _initTabs() {
-    const tabs = document.querySelectorAll("#settings-tabs .settings-tab");
-    const contents = document.querySelectorAll("#settings-body .settings-tab-content");
-
-    tabs.forEach(tab => {
-      tab.addEventListener("click", () => {
-        const targetTab = tab.dataset.tab;
-
-        // Update tab buttons
-        tabs.forEach(t => t.classList.toggle("active", t.dataset.tab === targetTab));
-
-        // Update tab content panels
-        contents.forEach(c => {
-          const isActive = c.dataset.tabContent === targetTab;
-          c.classList.toggle("active", isActive);
-          c.style.display = isActive ? "" : "none";
-        });
+    const bar = document.getElementById("settings-tabs");
+    if (!bar) return;
+
+    // Delegated so extension tabs (mounted into the settings.tabs slot after
+    // this runs) switch correctly without re-binding.
+    bar.addEventListener("click", (e) => {
+      const tab = e.target.closest(".settings-tab");
+      if (!tab || !bar.contains(tab)) return;
+      const targetTab = tab.dataset.tab;
+      if (!targetTab) return;
+
+      document.querySelectorAll("#settings-tabs .settings-tab").forEach(t =>
+        t.classList.toggle("active", t.dataset.tab === targetTab));
+
+      document.querySelectorAll("#settings-body .settings-tab-content").forEach(c => {
+        const isActive = c.dataset.tabContent === targetTab;
+        c.classList.toggle("active", isActive);
+        c.style.display = isActive ? "" : "none";
       });
     });
   }