Sync widget copy translations on save

public/admin.css

@@ -244,6 +244,36 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   display: grid;
   align-items: stretch;
 }
+.settings-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.settings-save-status {
+  min-height: 18px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+.settings-save-status.saving::before,
+.settings-save-status.translating::before {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  border: 2px solid rgba(15, 143, 111, .25);
+  border-top-color: var(--brand);
+  border-radius: 50%;
+  vertical-align: -2px;
+  animation: mfSpin .8s linear infinite;
+}
+.settings-save-status.saved { color: var(--brand); }
+.settings-save-status.warning { color: #b7791f; }
+.settings-save-status.error { color: #b42318; }
+@keyframes mfSpin {
+  to { transform: rotate(360deg); }
+}
 .ai-help {
   margin: 0;
   color: var(--muted);

public/admin.html

@@ -164,7 +164,10 @@
                 <label><input name="messageLabel" type="checkbox"> kratky stitek</label>
                 <label><input name="messageWiggle" type="checkbox"> zhoupnuti</label>
               </fieldset>
-              <button type="submit">Ulozit</button>
+              <div class="settings-actions">
+                <button type="submit">Uložit</button>
+                <span id="settingsSaveStatus" class="settings-save-status" aria-live="polite"></span>
+              </div>
             </form>
             <h3>GTM snippet</h3>
             <pre id="snippet"></pre>

public/admin.js

@@ -128,6 +128,8 @@ $("#onlineToggle").addEventListener("change", async () => {
 
 $("#settingsForm").addEventListener("submit", async (event) => {
   event.preventDefault();
+  const submitButton = event.currentTarget.querySelector("button[type='submit']");
+  setSettingsSaveStatus("saving", "Ukládám...");
   const form = new FormData(event.currentTarget);
   const settings = structuredClone(state.site.settings);
   const defaultLanguage = form.get("defaultLanguage") || "cs";
@@ -148,10 +150,10 @@ $("#settingsForm").addEventListener("submit", async (event) => {
     onlineLabel: form.get("copyOnlineLabel") || "",
     offlineLabel: settings.widgetCopy[defaultLanguage]?.offlineLabel || "Offline",
     newReplyLabel: form.get("copyNewReplyLabel") || "",
-    typingLabel: settings.widgetCopy[defaultLanguage]?.typingLabel || "Operator pise...",
+    typingLabel: settings.widgetCopy[defaultLanguage]?.typingLabel || "Operátor píše...",
     infoTitle: settings.widgetCopy[defaultLanguage]?.infoTitle || "GDPR informace",
     infoText: form.get("copyInfoText") || "",
-    closeLabel: settings.widgetCopy[defaultLanguage]?.closeLabel || "Zmensit chat",
+    closeLabel: settings.widgetCopy[defaultLanguage]?.closeLabel || "Zmenšit chat",
     operatorReplyLabel: form.get("copyOperatorReplyLabel") || ""
   };
   syncLegacyWidgetCopy(settings);
@@ -173,8 +175,25 @@ $("#settingsForm").addEventListener("submit", async (event) => {
   settings.notifications.badgeOnAdminReply = form.get("messageBadge") === "on";
   settings.notifications.labelOnAdminReply = form.get("messageLabel") === "on";
   settings.notifications.wiggleOnAdminReply = form.get("messageWiggle") === "on";
-  await saveSite({ settings, isOnline: state.site.isOnline });
-  $("#settingsPanel").classList.add("hidden");
+  submitButton.disabled = true;
+  try {
+    setSettingsSaveStatus("translating", "Překládám...");
+    const data = await saveSite({ settings, isOnline: state.site.isOnline });
+    renderWidgetCopyFields(state.site.settings.widgetLanguage?.defaultLanguage || defaultLanguage);
+    const sync = data.widgetCopySync;
+    if (sync?.errors?.length) {
+      const failedLanguages = [...new Set(sync.errors.map((item) => item.language?.toUpperCase()).filter(Boolean))];
+      setSettingsSaveStatus("warning", `Uloženo, překlad selhal: ${failedLanguages.join(", ") || "AI"}`);
+      return;
+    }
+    if (sync?.translated) setSettingsSaveStatus("saved", `✓ Uloženo a přeloženo`);
+    else setSettingsSaveStatus("saved", "✓ Uloženo");
+    setTimeout(() => $("#settingsPanel").classList.add("hidden"), 700);
+  } catch (error) {
+    setSettingsSaveStatus("error", "Akce se nepodařila.");
+  } finally {
+    submitButton.disabled = false;
+  }
 });
 
 $("#replyForm").addEventListener("submit", async (event) => {
@@ -493,16 +512,16 @@ function defaultWidgetCopy(language) {
     };
   }
   return {
-    title: "Potrebujete poradit?",
-    intro: "Napiste nam. Odpovime co nejdrive.",
-    offlineIntro: "Ted nejsme online, ale zpravu nam muzete nechat.",
-    placeholder: "Napiste zpravu...",
+    title: "Potřebujete poradit?",
+    intro: "Napište nám. Odpovíme co nejdříve.",
+    offlineIntro: "Teď nejsme online, ale zprávu nám můžete nechat.",
+    placeholder: "Napište zprávu...",
     sendLabel: "Odeslat",
-    dropzoneLabel: "Pridat fotku nebo pretahnout",
+    dropzoneLabel: "Přidat fotku nebo přetáhnout",
     onlineLabel: "Jsme online",
-    newReplyLabel: "Nova odpoved",
-    infoText: "Zpravu a technicke udaje relace zpracujeme jen pro odpoved na vas dotaz.",
-    operatorReplyLabel: "odpovida"
+    newReplyLabel: "Nová odpověď",
+    infoText: "Zprávu a technické údaje relace zpracujeme jen pro odpověď na váš dotaz.",
+    operatorReplyLabel: "odpovídá"
   };
 }
 
@@ -1230,6 +1249,14 @@ async function saveSite(patch) {
   state.site = data.site;
   state.snippet = data.snippet;
   renderSite();
+  return data;
+}
+
+function setSettingsSaveStatus(type, text) {
+  const status = $("#settingsSaveStatus");
+  if (!status) return;
+  status.className = `settings-save-status ${type || ""}`.trim();
+  status.textContent = text || "";
 }
 
 function notify() {