i18n_feedback 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb6db4ee347586bcb037eaeedb37564d969e9d1395db2a8b6ca450710d943796
-  data.tar.gz: 4d9aeaa1a8ece352719e3019ae08049b7ad9103dc1ce61447e317149269451d3
+  metadata.gz: 8c389e87f5f47b445f94f6ea242e803159bb34b2e0847d2ccc87883d05b3a666
+  data.tar.gz: 62ef3573c3d1a2070b151bbd77848e6f3c2db2c3db2abe532b6c32f0e8afb78f
 SHA512:
-  metadata.gz: 48c4b5ac039436c560d5e667d7ed36f1474a784b1330e8efaea55376e306eecd0865d6ddb81fa8001cc20d1c790bfdb0668b8435322f3a8f13aca95b02a5a99e
-  data.tar.gz: cde3e82b0c34baf896c2d54c887bf581f48c8d00e65a74fe34d11e531b5264ed85c2267d69ab94c1715bd2abf5ba9ad102c22b746ec6f6d36721a61bf4b202d4
+  metadata.gz: 67b4232a078ccb30b36de48123023151659301f6036bbac5069ea46db65dabc094cdfff3f3bd6267d63efd43f98b2aaed6c7912d384fdff1da8979f5788c738c
+  data.tar.gz: 8f575349159537f6ee689d6abea8397ad425bfca692822c1ae93286934fa36bc8edba846b6a65572c5caf74e0fa6ce5ee752d29ad5e0c7df800329992355cae3

data/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 ## [Unreleased]
 
+## [0.3.0]
+
+- Localize the widget's own UI. Every string in the pill and the suggestion
+  popover now resolves through Rails I18n under the `i18n_feedback.*` scope and
+  follows the app's current `I18n.locale`, so the tool speaks the same language as
+  the app being proofread. Any key a host hasn't translated falls back to English
+  — so nothing goes blank in a locale you haven't fully covered. Override any
+  string by defining the matching key in your own locale files.
+- Ship translations out of the box for 20 languages in addition to English:
+  Arabic, Bengali, Chinese (Simplified), Dutch, French, German, Hindi, Indonesian,
+  Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Thai, Turkish,
+  Ukrainian, Urdu and Vietnamese.
+- Render the popover right-to-left for RTL locales (Arabic, Urdu, and other RTL
+  scripts), detected from the active locale's language subtag. The i18n key stays
+  left-to-right, since it's a code identifier rather than prose.
+- `config.pill_label` now defaults to `nil`, meaning "use the localized default".
+  Setting it to a string still overrides the pill text as before.
+- The widget now follows the operating system's light/dark/system appearance via
+  `prefers-color-scheme`. The pill and popover render with a dark surface when the
+  reviewer's system is in dark mode, with no configuration required.
+
+## [0.2.2]
+
+- Fix suggest mode desyncing under a nonce-based CSP on Turbo visits. The runtime
+  config now rides in a `<script type="application/json">` block (data, not code)
+  that the widget re-reads on every `turbo:load`, instead of an executable
+  `<script>` the browser refuses to re-run when Turbo re-evaluates it with a stale
+  nonce. Only the widget code carries the CSP nonce now.
+- Treat `?i18n_feedback=true|false` as a one-shot command: the middleware sets the
+  cookie and redirects (303) to the same URL without the parameter. The cookie is
+  now the single source of truth, so the parameter no longer sticks in the address
+  bar and the pill's reload can turn suggest mode off.
+- Let a host's own toggle link work while suggest mode is active. Suggest mode
+  freezes navigation so a stray click can't leave the page mid-proofread, but that
+  also froze a `?i18n_feedback=false` link in your own nav — so the only way out
+  was the pill. Links carrying the toggle parameter are now exempt from the freeze.
+
 ## [0.2.1]
 
 - Keep the suggest pill and active-mode highlighting working across Turbo Drive

data/README.md

@@ -1,5 +1,10 @@
 # i18n_feedback
 
+[![Gem Version](https://img.shields.io/gem/v/i18n_feedback)](https://rubygems.org/gems/i18n_feedback)
+[![Downloads](https://img.shields.io/gem/dt/i18n_feedback)](https://rubygems.org/gems/i18n_feedback)
+[![CI](https://github.com/yshmarov/i18n-feedback/actions/workflows/ci.yml/badge.svg)](https://github.com/yshmarov/i18n-feedback/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](MIT-LICENSE)
+
 In-context translation proofreading for Rails.
 
 `i18n_feedback` renders every translated string alongside its i18n key in the
@@ -7,6 +12,13 @@ environments you choose, lets a reviewer click any string in the running app and
 suggest a better wording, and stores those suggestions for a developer to apply.
 It is meant for development and staging, never production.
 
+![Click any string in your running app and suggest a better wording](i18n-feedback-demo.gif)
+
+<video src="https://github.com/yshmarov/i18n-feedback/raw/main/i18n-feedback-demo-640-high.mp4" controls muted playsinline width="640">
+  Your browser can't play this video —
+  <a href="https://github.com/yshmarov/i18n-feedback/raw/main/i18n-feedback-demo-640-high.mp4">download it here</a>.
+</video>
+
 - **Zero UI dependencies.** The widget is plain JavaScript and styles itself. No
   Tailwind, no daisyUI, no Stimulus, no importmap, no build step.
 - **Zero layout changes.** The widget is injected into HTML responses
@@ -28,6 +40,13 @@ It is meant for development and staging, never production.
 4. Suggestions are `POST`ed to the mounted engine and stored in the
    `i18n_feedback_suggestions` table for you to review and apply.
 
+## Turbo
+
+Works with Turbo Drive out of the box. Turbo replaces `<body>` on every visit,
+which would take the pill and the active-mode highlighting with it, so the
+widget registers its document-level listeners once and re-renders on
+`turbo:load`. The pill survives navigation without a full reload.
+
 ## Requirements
 
 - Ruby >= 3.2
@@ -102,20 +121,41 @@ end
 
 ### Toggling suggest mode from your own link
 
-Prefer a menu item over the floating pill? Hide the pill and link to the toggle
-parameter from anywhere in your UI:
+Prefer a menu item over the floating pill? You can drive suggest mode from any
+link in your own UI — a nav item, a sidebar entry, a footer — and optionally hide
+the pill (the two can also coexist):
 
 ```ruby
-config.show_pill = false
+config.show_pill = false # optional
 ```
 
+A one-way "turn it on" link is just the toggle parameter:
+
 ```erb
 <%= link_to "Proofread translations", "?i18n_feedback=true" %>
 ```
 
-`?i18n_feedback=true` turns suggest mode on and `?i18n_feedback=false` turns it
-off. The choice is remembered in a cookie, so the rest of the app stays in
-suggest mode without the parameter; `Esc` also exits.
+For a single control that flips both ways, read the current state from the
+`i18n_feedback` cookie and point at the opposite state:
+
+```erb
+<% on = cookies[:i18n_feedback].present? %>
+<%= link_to (on ? "Disable translations editing" : "Enable translations editing"),
+            "?i18n_feedback=#{!on}" %>
+```
+
+Good to know:
+
+- `?i18n_feedback=true` turns suggest mode on, `false` turns it off. The state is
+  stored in the `i18n_feedback` cookie, and the middleware then redirects to the
+  same URL without the parameter — so it never sticks in the address bar and the
+  cookie stays the single source of truth. `Esc` (or the pill) also exits.
+- These links keep working **while suggest mode is active**. The widget freezes
+  ordinary navigation during proofreading (so a stray click can't leave the page
+  mid-edit), but any link carrying the toggle parameter is exempt — so a "Disable"
+  item in your nav always gets you out.
+- **Don't** run the label through `I18n.t`: the tool would then mark its own
+  control as an editable string. Keep the label a plain literal.
 
 ### Gating examples
 
@@ -137,6 +177,49 @@ Set `config.auto_inject = false` and drop the helper at the end of your layout:
 
 It renders nothing unless the tool is available for the request.
 
+### Localizing the widget UI
+
+The pill and the suggestion popover speak the app's language: every string
+resolves through Rails I18n under the `i18n_feedback.*` scope and follows the
+current `I18n.locale`. Translations ship out of the box for English plus 20 more
+languages — Arabic, Bengali, Chinese (Simplified), Dutch, French, German, Hindi,
+Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish,
+Thai, Turkish, Ukrainian, Urdu and Vietnamese — so the tool is already localized
+for most apps. RTL locales (Arabic, Urdu, …) render the popover right-to-left
+automatically.
+
+Any key you haven't translated falls back to English, so a partially translated
+locale never leaves a control blank. To add a language, or reword the bundled
+copy, define the keys in your own locale files (yours win over the gem's):
+
+```yaml
+# config/locales/fr.yml
+fr:
+  i18n_feedback:
+    pill: "Proposer des corrections"
+    pill_active: "En cours — appuyez pour quitter (Échap)"
+    title: "Proposer une correction de traduction"
+    current_text: "Texte actuel"
+    suggested_text: "Texte proposé"
+    comment: "Commentaire"
+    comment_placeholder: "Note facultative pour le développeur"
+    prior_title: "Déjà proposé (en attente)"
+    cancel: "Annuler"
+    save: "Envoyer la suggestion"
+    error_blank: "Veuillez saisir une suggestion."
+    error_save: "Impossible d'enregistrer la suggestion."
+```
+
+`config.pill_label` still overrides the pill text with a fixed string if you set
+it; leave it `nil` (the default) to use the localized `i18n_feedback.pill` key.
+
+### Light / dark / system appearance
+
+The widget follows the reviewer's operating-system appearance via
+`prefers-color-scheme` — no configuration needed. The pill and popover render on a
+dark surface when the system is in dark mode and a light surface otherwise; the
+blue accent stays the same in both.
+
 ## Reviewing suggestions
 
 Suggestions are ordinary records:
@@ -157,6 +240,12 @@ Each row stores `translation_key`, `locale`, `old_value`, `proposed_value`,
   `config.enabled` returns true.
 - Format and lookup namespaces (`number.*`, `date.*`, `*_html` formats, etc.) are
   never marked, so currency and date formatting are unaffected.
+- The injected widget code carries the request's Content-Security-Policy nonce
+  (the same one `ActionDispatch` emits), so it runs under a nonce-based
+  `script-src` policy — including `strict-dynamic` — with no configuration. It is
+  a no-op when the app sets no CSP nonce. The runtime config is shipped as a
+  `<script type="application/json">` block (data, not code), so it needs no nonce
+  and stays correct across Turbo visits.
 
 ## Development
 

data/app/assets/i18n_feedback/widget.js

@@ -1,7 +1,9 @@
 /*
  * i18n_feedback widget — self-contained, no framework, no build step.
  *
- * Reads window.__i18nFeedback = { endpoint, locale, active }.
+ * Reads its config from the <script type="application/json"
+ * data-i18n-feedback-config> the server injects — re-read on every render so a
+ * Turbo visit always reflects the current page's suggest state.
  *
  * A floating pill toggles "suggest mode", which is server state: the pill sets or
  * clears the i18n_feedback cookie and reloads, so the backend only prints the
@@ -14,7 +16,7 @@
 (function () {
   "use strict";
 
-  var config = window.__i18nFeedback;
+  var config = readConfig();
   if (!config || window.__i18nFeedbackLoaded) return;
   window.__i18nFeedbackLoaded = true;
 
@@ -43,8 +45,10 @@
 
   ready(function () {
     // Document-level listeners survive Turbo navigations, so register them once.
+    // handleClick is always attached and gates on the *current* config.active, so
+    // toggling suggest mode across a Turbo visit needs no re-registration.
     document.addEventListener("keydown", handleKeydown);
-    if (config.active) document.addEventListener("click", handleClick, true);
+    document.addEventListener("click", handleClick, true);
 
     // Everything else lives in <body>, which Turbo replaces on every visit —
     // taking the pill and the active-mode highlighting with it. Re-run the
@@ -55,13 +59,24 @@
     document.addEventListener("turbo:frame-load", strip);
   });
 
+  function readConfig() {
+    var el = document.querySelector("script[data-i18n-feedback-config]");
+    if (!el) return null;
+    try {
+      return JSON.parse(el.textContent);
+    } catch (e) {
+      return null;
+    }
+  }
+
   function render() {
+    // Re-read on each visit: the injected config is data (not an executed
+    // script), so it reflects the page Turbo just rendered.
+    config = readConfig() || config;
     injectStyles();
     if (config.showPill !== false) buildPill();
-    if (config.active) {
-      document.documentElement.classList.add("i18nf-active");
-      strip();
-    }
+    document.documentElement.classList.toggle("i18nf-active", !!config.active);
+    if (config.active) strip();
   }
 
   // --- suggest-mode toggle --------------------------------------------------
@@ -112,8 +127,13 @@
   // --- interaction ----------------------------------------------------------
 
   function handleClick(event) {
+    if (!config.active) return;
     if (overlay && overlay.contains(event.target)) return;
     if (event.target.closest && event.target.closest(".i18nf-pill")) return;
+    // Let a host's own suggest-mode toggle link through (e.g. "?i18n_feedback=false"
+    // in a nav menu); otherwise navigation-freezing would trap the user in suggest
+    // mode with no way out but the pill.
+    if (event.target.closest && event.target.closest('a[href*="' + config.toggleParam + '="]')) return;
 
     // Freeze navigation so a stray click can't leave the page mid-proofread.
     event.preventDefault();
@@ -138,13 +158,19 @@
     var pill = document.createElement("button");
     pill.type = "button";
     pill.className = "i18nf-pill" + (config.active ? " i18nf-pill-on" : "");
-    pill.textContent = config.active ? "✓ Suggesting — tap to exit (Esc)" : "✎ " + labelText();
+    pill.textContent = config.active ? "✓ " + t("pillActive", "Suggesting — tap to exit (Esc)") : "✎ " + labelText();
     pill.addEventListener("click", toggle);
     document.body.appendChild(pill);
   }
 
   function labelText() {
-    return (config.pillLabel || "Suggest edits");
+    return config.pillLabel || t("pill", "Suggest edits");
+  }
+
+  // Resolve a server-translated label, falling back to English if the config
+  // predates the labels payload (e.g. a cached page from an older gem version).
+  function t(name, fallback) {
+    return (config.labels && config.labels[name]) || fallback;
   }
 
   // --- popover --------------------------------------------------------------
@@ -158,18 +184,21 @@
     });
 
     var panel = el("div", "i18nf-panel");
+    // Mirror the popover for right-to-left locales (Arabic, Urdu, …). The i18n
+    // key stays LTR — it's a code identifier, not prose (see heading()).
+    panel.dir = config.rtl ? "rtl" : "ltr";
     panel.appendChild(heading(key));
 
     priorNode = el("div");
     panel.appendChild(priorNode);
 
-    panel.appendChild(field("Current text", readonly(currentValue)));
+    panel.appendChild(field(t("currentText", "Current text"), readonly(currentValue)));
 
     proposedInput = textarea(currentValue);
-    panel.appendChild(field("Suggested text", proposedInput));
+    panel.appendChild(field(t("suggestedText", "Suggested text"), proposedInput));
 
-    commentInput = input("Optional note for the developer");
-    panel.appendChild(field("Comment", commentInput));
+    commentInput = input(t("commentPlaceholder", "Optional note for the developer"));
+    panel.appendChild(field(t("comment", "Comment"), commentInput));
 
     errorNode = el("p", "i18nf-error");
     errorNode.style.display = "none";
@@ -209,7 +238,7 @@
 
     var box = el("div", "i18nf-prior");
     var title = el("p", "i18nf-prior-title");
-    title.textContent = "Already suggested (pending)";
+    title.textContent = t("priorTitle", "Already suggested (pending)");
     box.appendChild(title);
 
     var list = el("ul", "i18nf-prior-list");
@@ -230,12 +259,12 @@
 
     var cancel = el("button", "i18nf-btn i18nf-btn-ghost");
     cancel.type = "button";
-    cancel.textContent = "Cancel";
+    cancel.textContent = t("cancel", "Cancel");
     cancel.addEventListener("click", close);
 
     saveButton = el("button", "i18nf-btn i18nf-btn-primary");
     saveButton.type = "button";
-    saveButton.textContent = "Send suggestion";
+    saveButton.textContent = t("save", "Send suggestion");
     saveButton.addEventListener("click", function () {
       submit(key, currentValue);
     });
@@ -248,7 +277,7 @@
   function submit(key, currentValue) {
     var proposed = proposedInput.value.trim();
     if (!proposed) {
-      showError("Please enter a suggestion.");
+      showError(t("errorBlank", "Please enter a suggestion."));
       return;
     }
 
@@ -277,7 +306,7 @@
           close();
         } else {
           saveButton.disabled = false;
-          showError("Could not save the suggestion.");
+          showError(t("errorSave", "Could not save the suggestion."));
         }
       })
       .catch(function () {
@@ -296,8 +325,9 @@
   function heading(key) {
     var wrapper = el("div", "i18nf-heading");
     var title = el("p", "i18nf-title");
-    title.textContent = "Suggest a translation fix";
+    title.textContent = t("title", "Suggest a translation fix");
     var code = el("code", "i18nf-key");
+    code.dir = "ltr"; // the key is a code path, never RTL prose
     code.textContent = key;
     wrapper.appendChild(title);
     wrapper.appendChild(code);
@@ -385,6 +415,28 @@
       ".i18nf-btn-ghost { background: transparent; color: #111; }",
       ".i18nf-btn-primary { background: #2563eb; color: #fff; }",
       ".i18nf-btn[disabled] { opacity: .6; cursor: default; }",
+
+      // Follow the OS light/dark/system setting via prefers-color-scheme, so the
+      // widget matches whatever the reviewer's system is set to without any extra
+      // configuration. Only the surfaces that carry their own background/color
+      // above are overridden here — the blue accents stay the same in both themes.
+      "@media (prefers-color-scheme: dark) {",
+      "  .i18nf-pill { background: #1f1f23; color: #f4f4f5; border-color: rgba(255,255,255,.18);",
+      "    box-shadow: 0 4px 14px rgba(0,0,0,.5); }",
+      "  .i18nf-pill-on { background: #2563eb; color: #fff; border-color: #2563eb; }",
+      "  .i18nf-overlay { background: rgba(0,0,0,.65); }",
+      "  .i18nf-panel { background: #1f1f23; color: #f4f4f5;",
+      "    box-shadow: 0 20px 60px rgba(0,0,0,.7); }",
+      "  .i18nf-key { color: #a1a1aa; }",
+      "  .i18nf-label { color: #a1a1aa; }",
+      "  .i18nf-readonly { background: #2a2a30; }",
+      "  .i18nf-input { background: #2a2a30; color: #f4f4f5; border-color: #3f3f46; }",
+      "  .i18nf-input::placeholder { color: #71717a; }",
+      "  .i18nf-prior { background: #2a2a30; }",
+      "  .i18nf-prior-title { color: #d4d4d8; }",
+      "  .i18nf-error { color: #f87171; }",
+      "  .i18nf-btn-ghost { color: #f4f4f5; }",
+      "}",
     ].join("\n");
     document.head.appendChild(style);
   }

data/config/locales/i18n_feedback.ar.yml

@@ -0,0 +1,14 @@
+ar:
+  i18n_feedback:
+    pill: "اقترح تعديلات"
+    pill_active: "وضع الاقتراح — اضغط للخروج (Esc)"
+    title: "اقترح تصحيحًا للترجمة"
+    current_text: "النص الحالي"
+    suggested_text: "النص المقترح"
+    comment: "تعليق"
+    comment_placeholder: "ملاحظة اختيارية للمطور"
+    prior_title: "تم اقتراحه مسبقًا (قيد الانتظار)"
+    cancel: "إلغاء"
+    save: "إرسال الاقتراح"
+    error_blank: "يرجى إدخال اقتراح."
+    error_save: "تعذّر حفظ الاقتراح."

data/config/locales/i18n_feedback.bn.yml

@@ -0,0 +1,14 @@
+bn:
+  i18n_feedback:
+    pill: "সম্পাদনা প্রস্তাব করুন"
+    pill_active: "প্রস্তাব চলছে — বের হতে ট্যাপ করুন (Esc)"
+    title: "অনুবাদ সংশোধন প্রস্তাব করুন"
+    current_text: "বর্তমান লেখা"
+    suggested_text: "প্রস্তাবিত লেখা"
+    comment: "মন্তব্য"
+    comment_placeholder: "ডেভেলপারের জন্য ঐচ্ছিক নোট"
+    prior_title: "ইতিমধ্যে প্রস্তাবিত (অপেক্ষমাণ)"
+    cancel: "বাতিল"
+    save: "প্রস্তাব পাঠান"
+    error_blank: "অনুগ্রহ করে একটি প্রস্তাব লিখুন।"
+    error_save: "প্রস্তাব সংরক্ষণ করা যায়নি।"

data/config/locales/i18n_feedback.de.yml

@@ -0,0 +1,14 @@
+de:
+  i18n_feedback:
+    pill: "Änderungen vorschlagen"
+    pill_active: "Vorschlagsmodus — zum Beenden tippen (Esc)"
+    title: "Übersetzungskorrektur vorschlagen"
+    current_text: "Aktueller Text"
+    suggested_text: "Vorgeschlagener Text"
+    comment: "Kommentar"
+    comment_placeholder: "Optionale Notiz für die Entwicklung"
+    prior_title: "Bereits vorgeschlagen (ausstehend)"
+    cancel: "Abbrechen"
+    save: "Vorschlag senden"
+    error_blank: "Bitte gib einen Vorschlag ein."
+    error_save: "Der Vorschlag konnte nicht gespeichert werden."

data/config/locales/i18n_feedback.en.yml

@@ -0,0 +1,14 @@
+en:
+  i18n_feedback:
+    pill: "Suggest edits"
+    pill_active: "Suggesting — tap to exit (Esc)"
+    title: "Suggest a translation fix"
+    current_text: "Current text"
+    suggested_text: "Suggested text"
+    comment: "Comment"
+    comment_placeholder: "Optional note for the developer"
+    prior_title: "Already suggested (pending)"
+    cancel: "Cancel"
+    save: "Send suggestion"
+    error_blank: "Please enter a suggestion."
+    error_save: "Could not save the suggestion."

data/config/locales/i18n_feedback.es.yml

@@ -0,0 +1,14 @@
+es:
+  i18n_feedback:
+    pill: "Sugerir cambios"
+    pill_active: "Sugiriendo — toca para salir (Esc)"
+    title: "Sugerir una corrección de traducción"
+    current_text: "Texto actual"
+    suggested_text: "Texto sugerido"
+    comment: "Comentario"
+    comment_placeholder: "Nota opcional para el desarrollador"
+    prior_title: "Ya sugerido (pendiente)"
+    cancel: "Cancelar"
+    save: "Enviar sugerencia"
+    error_blank: "Introduce una sugerencia."
+    error_save: "No se pudo guardar la sugerencia."

data/config/locales/i18n_feedback.fr.yml

@@ -0,0 +1,14 @@
+fr:
+  i18n_feedback:
+    pill: "Proposer des corrections"
+    pill_active: "En cours — appuyez pour quitter (Échap)"
+    title: "Proposer une correction de traduction"
+    current_text: "Texte actuel"
+    suggested_text: "Texte proposé"
+    comment: "Commentaire"
+    comment_placeholder: "Note facultative pour le développeur"
+    prior_title: "Déjà proposé (en attente)"
+    cancel: "Annuler"
+    save: "Envoyer la suggestion"
+    error_blank: "Veuillez saisir une suggestion."
+    error_save: "Impossible d'enregistrer la suggestion."

data/config/locales/i18n_feedback.hi.yml

@@ -0,0 +1,14 @@
+hi:
+  i18n_feedback:
+    pill: "बदलाव सुझाएँ"
+    pill_active: "सुझाव मोड — बाहर निकलने के लिए टैप करें (Esc)"
+    title: "अनुवाद सुधार सुझाएँ"
+    current_text: "वर्तमान टेक्स्ट"
+    suggested_text: "सुझाया गया टेक्स्ट"
+    comment: "टिप्पणी"
+    comment_placeholder: "डेवलपर के लिए वैकल्पिक टिप्पणी"
+    prior_title: "पहले से सुझाया गया (लंबित)"
+    cancel: "रद्द करें"
+    save: "सुझाव भेजें"
+    error_blank: "कृपया एक सुझाव दर्ज करें।"
+    error_save: "सुझाव सहेजा नहीं जा सका।"

data/config/locales/i18n_feedback.id.yml

@@ -0,0 +1,14 @@
+id:
+  i18n_feedback:
+    pill: "Sarankan perubahan"
+    pill_active: "Menyarankan — ketuk untuk keluar (Esc)"
+    title: "Sarankan perbaikan terjemahan"
+    current_text: "Teks saat ini"
+    suggested_text: "Teks yang disarankan"
+    comment: "Komentar"
+    comment_placeholder: "Catatan opsional untuk pengembang"
+    prior_title: "Sudah disarankan (menunggu)"
+    cancel: "Batal"
+    save: "Kirim saran"
+    error_blank: "Silakan masukkan saran."
+    error_save: "Tidak dapat menyimpan saran."

data/config/locales/i18n_feedback.it.yml

@@ -0,0 +1,14 @@
+it:
+  i18n_feedback:
+    pill: "Suggerisci modifiche"
+    pill_active: "Suggerimento — tocca per uscire (Esc)"
+    title: "Suggerisci una correzione di traduzione"
+    current_text: "Testo attuale"
+    suggested_text: "Testo suggerito"
+    comment: "Commento"
+    comment_placeholder: "Nota facoltativa per lo sviluppatore"
+    prior_title: "Già suggerito (in sospeso)"
+    cancel: "Annulla"
+    save: "Invia suggerimento"
+    error_blank: "Inserisci un suggerimento."
+    error_save: "Impossibile salvare il suggerimento."

data/config/locales/i18n_feedback.ja.yml

@@ -0,0 +1,14 @@
+ja:
+  i18n_feedback:
+    pill: "修正を提案"
+    pill_active: "提案中 — タップで終了（Esc）"
+    title: "翻訳の修正を提案"
+    current_text: "現在のテキスト"
+    suggested_text: "提案するテキスト"
+    comment: "コメント"
+    comment_placeholder: "開発者への任意のメモ"
+    prior_title: "提案済み（保留中）"
+    cancel: "キャンセル"
+    save: "提案を送信"
+    error_blank: "提案を入力してください。"
+    error_save: "提案を保存できませんでした。"

data/config/locales/i18n_feedback.ko.yml

@@ -0,0 +1,14 @@
+ko:
+  i18n_feedback:
+    pill: "수정 제안"
+    pill_active: "제안 중 — 종료하려면 탭하세요 (Esc)"
+    title: "번역 수정 제안"
+    current_text: "현재 텍스트"
+    suggested_text: "제안 텍스트"
+    comment: "의견"
+    comment_placeholder: "개발자를 위한 선택 메모"
+    prior_title: "이미 제안됨 (대기 중)"
+    cancel: "취소"
+    save: "제안 보내기"
+    error_blank: "제안을 입력하세요."
+    error_save: "제안을 저장할 수 없습니다."

data/config/locales/i18n_feedback.nl.yml

@@ -0,0 +1,14 @@
+nl:
+  i18n_feedback:
+    pill: "Wijzigingen voorstellen"
+    pill_active: "Aan het voorstellen — tik om te sluiten (Esc)"
+    title: "Een vertaalcorrectie voorstellen"
+    current_text: "Huidige tekst"
+    suggested_text: "Voorgestelde tekst"
+    comment: "Opmerking"
+    comment_placeholder: "Optionele notitie voor de ontwikkelaar"
+    prior_title: "Al voorgesteld (in behandeling)"
+    cancel: "Annuleren"
+    save: "Suggestie versturen"
+    error_blank: "Voer een suggestie in."
+    error_save: "Kan de suggestie niet opslaan."

data/config/locales/i18n_feedback.pl.yml

@@ -0,0 +1,14 @@
+pl:
+  i18n_feedback:
+    pill: "Zaproponuj zmiany"
+    pill_active: "Tryb sugestii — dotknij, aby wyjść (Esc)"
+    title: "Zaproponuj poprawkę tłumaczenia"
+    current_text: "Bieżący tekst"
+    suggested_text: "Proponowany tekst"
+    comment: "Komentarz"
+    comment_placeholder: "Opcjonalna notatka dla programisty"
+    prior_title: "Już zaproponowano (oczekujące)"
+    cancel: "Anuluj"
+    save: "Wyślij sugestię"
+    error_blank: "Wprowadź sugestię."
+    error_save: "Nie udało się zapisać sugestii."

data/config/locales/i18n_feedback.pt.yml

@@ -0,0 +1,14 @@
+pt:
+  i18n_feedback:
+    pill: "Sugerir edições"
+    pill_active: "Sugerindo — toque para sair (Esc)"
+    title: "Sugerir uma correção de tradução"
+    current_text: "Texto atual"
+    suggested_text: "Texto sugerido"
+    comment: "Comentário"
+    comment_placeholder: "Nota opcional para o desenvolvedor"
+    prior_title: "Já sugerido (pendente)"
+    cancel: "Cancelar"
+    save: "Enviar sugestão"
+    error_blank: "Insira uma sugestão."
+    error_save: "Não foi possível salvar a sugestão."

data/config/locales/i18n_feedback.ru.yml

@@ -0,0 +1,14 @@
+ru:
+  i18n_feedback:
+    pill: "Предложить правки"
+    pill_active: "Режим предложений — нажмите, чтобы выйти (Esc)"
+    title: "Предложить исправление перевода"
+    current_text: "Текущий текст"
+    suggested_text: "Предлагаемый текст"
+    comment: "Комментарий"
+    comment_placeholder: "Необязательная заметка для разработчика"
+    prior_title: "Уже предложено (в ожидании)"
+    cancel: "Отмена"
+    save: "Отправить предложение"
+    error_blank: "Введите предложение."
+    error_save: "Не удалось сохранить предложение."

data/config/locales/i18n_feedback.th.yml

@@ -0,0 +1,14 @@
+th:
+  i18n_feedback:
+    pill: "แนะนำการแก้ไข"
+    pill_active: "กำลังแนะนำ — แตะเพื่อออก (Esc)"
+    title: "แนะนำการแก้ไขคำแปล"
+    current_text: "ข้อความปัจจุบัน"
+    suggested_text: "ข้อความที่แนะนำ"
+    comment: "ความคิดเห็น"
+    comment_placeholder: "หมายเหตุเพิ่มเติมสำหรับนักพัฒนา"
+    prior_title: "แนะนำไปแล้ว (รอดำเนินการ)"
+    cancel: "ยกเลิก"
+    save: "ส่งคำแนะนำ"
+    error_blank: "โปรดป้อนคำแนะนำ"
+    error_save: "ไม่สามารถบันทึกคำแนะนำได้"

data/config/locales/i18n_feedback.tr.yml

@@ -0,0 +1,14 @@
+tr:
+  i18n_feedback:
+    pill: "Düzenleme öner"
+    pill_active: "Öneri modu — çıkmak için dokun (Esc)"
+    title: "Çeviri düzeltmesi öner"
+    current_text: "Mevcut metin"
+    suggested_text: "Önerilen metin"
+    comment: "Yorum"
+    comment_placeholder: "Geliştirici için isteğe bağlı not"
+    prior_title: "Zaten önerildi (beklemede)"
+    cancel: "İptal"
+    save: "Öneriyi gönder"
+    error_blank: "Lütfen bir öneri girin."
+    error_save: "Öneri kaydedilemedi."

data/config/locales/i18n_feedback.uk.yml

@@ -0,0 +1,14 @@
+uk:
+  i18n_feedback:
+    pill: "Запропонувати зміни"
+    pill_active: "Режим пропозицій — торкніться, щоб вийти (Esc)"
+    title: "Запропонувати виправлення перекладу"
+    current_text: "Поточний текст"
+    suggested_text: "Запропонований текст"
+    comment: "Коментар"
+    comment_placeholder: "Необов’язкова примітка для розробника"
+    prior_title: "Уже запропоновано (очікує)"
+    cancel: "Скасувати"
+    save: "Надіслати пропозицію"
+    error_blank: "Будь ласка, введіть пропозицію."
+    error_save: "Не вдалося зберегти пропозицію."

data/config/locales/i18n_feedback.ur.yml

@@ -0,0 +1,14 @@
+ur:
+  i18n_feedback:
+    pill: "ترامیم تجویز کریں"
+    pill_active: "تجویز موڈ — باہر نکلنے کے لیے تھپتھپائیں (Esc)"
+    title: "ترجمے کی اصلاح تجویز کریں"
+    current_text: "موجودہ متن"
+    suggested_text: "تجویز کردہ متن"
+    comment: "تبصرہ"
+    comment_placeholder: "ڈویلپر کے لیے اختیاری نوٹ"
+    prior_title: "پہلے ہی تجویز کیا جا چکا (زیر التوا)"
+    cancel: "منسوخ کریں"
+    save: "تجویز بھیجیں"
+    error_blank: "براہ کرم ایک تجویز درج کریں۔"
+    error_save: "تجویز محفوظ نہیں ہو سکی۔"

data/config/locales/i18n_feedback.vi.yml

@@ -0,0 +1,14 @@
+vi:
+  i18n_feedback:
+    pill: "Đề xuất chỉnh sửa"
+    pill_active: "Đang đề xuất — chạm để thoát (Esc)"
+    title: "Đề xuất sửa bản dịch"
+    current_text: "Văn bản hiện tại"
+    suggested_text: "Văn bản đề xuất"
+    comment: "Nhận xét"
+    comment_placeholder: "Ghi chú tùy chọn cho nhà phát triển"
+    prior_title: "Đã đề xuất (đang chờ)"
+    cancel: "Hủy"
+    save: "Gửi đề xuất"
+    error_blank: "Vui lòng nhập một đề xuất."
+    error_save: "Không thể lưu đề xuất."

data/config/locales/i18n_feedback.zh-CN.yml

@@ -0,0 +1,14 @@
+zh-CN:
+  i18n_feedback:
+    pill: "建议修改"
+    pill_active: "建议中 — 点击退出（Esc）"
+    title: "建议翻译修正"
+    current_text: "当前文本"
+    suggested_text: "建议文本"
+    comment: "备注"
+    comment_placeholder: "给开发者的可选备注"
+    prior_title: "已提交建议（待处理）"
+    cancel: "取消"
+    save: "发送建议"
+    error_blank: "请输入建议。"
+    error_save: "无法保存建议。"

data/lib/i18n_feedback/configuration.rb

@@ -38,7 +38,8 @@ module I18nFeedback
     # from your own link instead (see #toggle_param).
     attr_accessor :show_pill
 
-    # Text on the floating toggle pill.
+    # Text on the floating toggle pill. Leave nil to use the localized default
+    # ("Suggest edits", translated via the `i18n_feedback.pill` I18n key).
     attr_accessor :pill_label
 
     # The query-string parameter that turns suggest mode on/off, so a host can
@@ -56,7 +57,7 @@ module I18nFeedback
       @auto_inject = true
       @mount_path = '/i18n_feedback'
       @show_pill = true
-      @pill_label = 'Suggest edits'
+      @pill_label = nil
       @toggle_param = 'i18n_feedback'
     end
 

data/lib/i18n_feedback/middleware.rb

@@ -18,17 +18,19 @@ module I18nFeedback
       request = Rack::Request.new(env)
       available = I18nFeedback.available?(request)
 
-      # A "?i18n_feedback=true|false" in the URL is a command: it overrides the
-      # cookie for this request and is remembered so the rest of the app stays in
-      # (or out of) suggest mode without the parameter.
-      override = available ? toggle_override(request) : nil
-      marking = available && (override.nil? ? cookie_on?(request) : override)
+      # "?i18n_feedback=true|false" is a one-shot command, not a sticky URL state:
+      # set the cookie and redirect to the same URL without the parameter. That
+      # keeps the cookie the single source of truth (so the pill's reload can turn
+      # suggest mode off) and stops the parameter from lingering in the address bar.
+      if available && request.get? && !(desired = toggle_override(request)).nil?
+        return toggle_redirect(request, desired)
+      end
+
+      marking = available && cookie_on?(request)
       Marking.enabled = marking
 
       status, headers, body = @app.call(env)
 
-      headers = persist_choice(headers, override) if available && !override.nil?
-
       if available && I18nFeedback.config.auto_inject && html?(headers) && !request.xhr?
         status, headers, body = inject(status, headers, body, marking, csp_nonce(env))
       end
@@ -44,6 +46,18 @@ module I18nFeedback
       !request.cookies[COOKIE].to_s.empty?
     end
 
+    def toggle_redirect(request, desired)
+      headers = persist_choice({ 'Content-Type' => 'text/html', 'Location' => url_without_toggle(request) }, desired)
+      [303, headers, []]
+    end
+
+    def url_without_toggle(request)
+      query = Rack::Utils.parse_query(request.query_string)
+      query.delete(I18nFeedback.config.toggle_param)
+      built = Rack::Utils.build_query(query)
+      built.empty? ? request.path : "#{request.path}?#{built}"
+    end
+
     # The request's CSP nonce, so the injected scripts run under a nonce-based
     # Content-Security-Policy. Reads the value Rails memoizes on the env, which is
     # the same nonce the CSP header uses. nil when the app sets no nonce.

data/lib/i18n_feedback/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module I18nFeedback
-  VERSION = '0.2.1'
+  VERSION = '0.3.0'
 end

data/lib/i18n_feedback/widget.rb

@@ -11,28 +11,74 @@ module I18nFeedback
   module Widget
     SOURCE = File.expand_path('../../app/assets/i18n_feedback/widget.js', __dir__)
 
+    # Right-to-left scripts, so the popover renders mirrored for those locales.
+    # Matched on the language subtag, so region variants ("ar-EG") count too.
+    RTL_LANGUAGES = %w[ar arc ckb dv fa ha he ks ku ps sd ug ur yi].freeze
+
     class << self
       def javascript
         @javascript ||= File.read(SOURCE)
       end
 
-      # The two <script> tags to place before </body>: one carrying the runtime
-      # config, one carrying the widget itself. `nonce:` stamps both tags so the
-      # widget runs under a nonce-based Content-Security-Policy (e.g. one using
-      # 'strict-dynamic'); pass nil when the app has no CSP nonce.
+      # The two <script> tags to place before </body>.
+      #
+      # The config rides in a `type="application/json"` block: it is *data*, not
+      # code, so the browser never executes it and Turbo never tries to re-run it
+      # on a soft visit — which means it needs no CSP nonce and, crucially, the
+      # widget can re-read the *current* page's config on every `turbo:load`
+      # instead of being stuck with whatever the last full load evaluated.
+      #
+      # `nonce:` stamps only the widget script (the code), so it runs under a
+      # nonce-based Content-Security-Policy; pass nil when the app has no nonce.
       def snippet(endpoint:, locale:, active:, nonce: nil)
         config = {
           endpoint: endpoint,
           locale: locale.to_s,
           active: active ? true : false,
           showPill: I18nFeedback.config.show_pill ? true : false,
-          pillLabel: I18nFeedback.config.pill_label
+          pillLabel: I18nFeedback.config.pill_label,
+          toggleParam: I18nFeedback.config.toggle_param,
+          labels: labels,
+          rtl: rtl?(locale)
         }
+        # Escape "</" so a value can't close the <script> block early.
+        json = config.to_json.gsub('</', '<\/')
         nonce_attr = nonce ? %( nonce="#{nonce}") : ''
 
-        %(<script data-i18n-feedback#{nonce_attr}>window.__i18nFeedback=#{config.to_json};</script>) +
+        %(<script type="application/json" data-i18n-feedback-config>#{json}</script>) +
           %(<script data-i18n-feedback-widget#{nonce_attr}>#{javascript}</script>)
       end
+
+      private
+
+      # Every user-facing string in the widget, resolved through Rails I18n so the
+      # popover follows the app's current locale. Each lookup carries an English
+      # default, so the widget stays fully worded even when the host app hasn't
+      # loaded the gem's locale file or is missing a key for the active locale.
+      def labels
+        {
+          pill: t(:pill, 'Suggest edits'),
+          pillActive: t(:pill_active, 'Suggesting — tap to exit (Esc)'),
+          title: t(:title, 'Suggest a translation fix'),
+          currentText: t(:current_text, 'Current text'),
+          suggestedText: t(:suggested_text, 'Suggested text'),
+          comment: t(:comment, 'Comment'),
+          commentPlaceholder: t(:comment_placeholder, 'Optional note for the developer'),
+          priorTitle: t(:prior_title, 'Already suggested (pending)'),
+          cancel: t(:cancel, 'Cancel'),
+          save: t(:save, 'Send suggestion'),
+          errorBlank: t(:error_blank, 'Please enter a suggestion.'),
+          errorSave: t(:error_save, 'Could not save the suggestion.')
+        }
+      end
+
+      def t(key, default)
+        I18n.t(key, scope: :i18n_feedback, default: default)
+      end
+
+      def rtl?(locale)
+        RTL_LANGUAGES.include?(locale.to_s.downcase.split(/[-_]/).first)
+      end
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: i18n_feedback
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -44,6 +44,27 @@ files:
 - app/helpers/i18n_feedback/tag_helper.rb
 - app/models/i18n_feedback/application_record.rb
 - app/models/i18n_feedback/suggestion.rb
+- config/locales/i18n_feedback.ar.yml
+- config/locales/i18n_feedback.bn.yml
+- config/locales/i18n_feedback.de.yml
+- config/locales/i18n_feedback.en.yml
+- config/locales/i18n_feedback.es.yml
+- config/locales/i18n_feedback.fr.yml
+- config/locales/i18n_feedback.hi.yml
+- config/locales/i18n_feedback.id.yml
+- config/locales/i18n_feedback.it.yml
+- config/locales/i18n_feedback.ja.yml
+- config/locales/i18n_feedback.ko.yml
+- config/locales/i18n_feedback.nl.yml
+- config/locales/i18n_feedback.pl.yml
+- config/locales/i18n_feedback.pt.yml
+- config/locales/i18n_feedback.ru.yml
+- config/locales/i18n_feedback.th.yml
+- config/locales/i18n_feedback.tr.yml
+- config/locales/i18n_feedback.uk.yml
+- config/locales/i18n_feedback.ur.yml
+- config/locales/i18n_feedback.vi.yml
+- config/locales/i18n_feedback.zh-CN.yml
 - config/routes.rb
 - lib/generators/i18n_feedback/install/install_generator.rb
 - lib/generators/i18n_feedback/install/templates/create_i18n_feedback_suggestions.rb.tt