give broadcasters live feedback as they edit the form whether the nam…

…e will be translated
lichess-org · ornicar · Feb 2, 2026 · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026
commit 6c5c493b4ef0cd26116df3a68c03ba787c2b0d30
diff --git a/modules/coreI18n/src/main/key.scala b/modules/coreI18n/src/main/key.scala
@@ -205,6 +205,7 @@ object I18nKey:
     val `liveboard`: I18nKey = "broadcast:liveboard"
     val `communityBroadcast`: I18nKey = "broadcast:communityBroadcast"
     val `createdAndManagedBy`: I18nKey = "broadcast:createdAndManagedBy"
+    val `automaticallyTranslated`: I18nKey = "broadcast:automaticallyTranslated"
     val `roundX`: I18nKey = "broadcast:roundX"
     val `defaultRoundNameHelp`: I18nKey = "broadcast:defaultRoundNameHelp"
     val `openTournament`: I18nKey = "broadcast:openTournament"

diff --git a/modules/relay/src/main/ui/RelayFormUi.scala b/modules/relay/src/main/ui/RelayFormUi.scala
@@ -92,6 +92,8 @@ final class RelayFormUi(helpers: Helpers, ui: RelayUi, pageMenu: RelayMenuUi):
       Page(title)
         .css("bits.relay.form")
         .js(List(Esm("bits.flatpickr"), Esm("bits.relayForm")).map(some))
+        .js(esmInit("bits.broadcastForm.i18nCheck"))
+        .i18n(_.broadcast)
         .wrap: body =>
           main(cls := "page page-menu")(
             navigationMenu(nav),
@@ -446,6 +448,8 @@ Hanna Marie ; Kozul, Zdenko"""),
       Page(title)
         .css("bits.relay.form")
         .js(Esm("bits.relayForm"))
+        .js(esmInit("bits.broadcastForm.i18nCheck"))
+        .i18n(_.broadcast)
         .wrap: body =>
           main(cls := "page page-menu")(
             menu.fold(pageMenu(_), navigationMenu),

diff --git a/translation/source/broadcast.xml b/translation/source/broadcast.xml
@@ -83,6 +83,7 @@
   <string name="liveboard">Live board</string>
   <string name="communityBroadcast">Community broadcast</string>
   <string name="createdAndManagedBy">Created and managed by %s.</string>
+  <string name="automaticallyTranslated">This name will be automatically translated.</string>
   <string name="roundX">Round %s</string>
   <string name="defaultRoundNameHelp">Keeping the default name will automatically translate it to all other languages.</string>
   <string name="openTournament">Open</string>

diff --git a/ui/@types/lichess/i18n.d.ts b/ui/@types/lichess/i18n.d.ts
@@ -237,6 +237,8 @@ interface I18n {
     allBroadcastsByMonth: string;
     /** All teams */
     allTeams: string;
+    /** This name will be automatically translated. */
+    automaticallyTranslated: string;
     /** Back to live move */
     backToLiveMove: string;
     /** Boards */

diff --git a/ui/bits/src/bits.broadcastForm.i18nCheck.ts b/ui/bits/src/bits.broadcastForm.i18nCheck.ts
@@ -0,0 +1,53 @@
+import { Checkmark } from 'lib/licon';
+export default function initModule(): void {
+  site.load.then(() => {
+    const nameInput = document.querySelector<HTMLInputElement>('#form3-name');
+    if (!nameInput) return;
+    const isRoundEdit = location.pathname.startsWith('/broadcast/round/');
+    const groupName = document.querySelector('.relay-form__subnav__group')?.textContent;
+
+    // Must be in sync with file://./../../../modules/relay/src/main/RelayI18n.scala
+    const regexes = [
+      /^Round (\d+)$/i,
+      /^Game (\d+)$/i,
+      /^blitz$/i,
+      /^rapid$/i,
+      /^classical$/i,
+      /^open$/i,
+      /^women$/i,
+      /^boys$/i,
+      /^girls$/i,
+      /^boys\s+u(\d+)$/i,
+      /^girls\s+u(\d+)$/i,
+      /^quarter[- ]?finals$/i,
+      /^semi[- ]?finals$/i,
+      /^finals$/i,
+      /^tiebreaks$/i,
+    ];
+    const helpEl = document.createElement('small');
+    helpEl.classList.add('form-help');
+    helpEl.innerHTML = `${i18n.broadcast.automaticallyTranslated}<br>`;
+    helpEl.setAttribute('data-icon', Checkmark);
+    nameInput.insertAdjacentElement('afterend', helpEl);
+    const checkAndToggle = (name: string) => {
+      const isTranslatable =
+        !!name && name.split(/\s+\|\s+/).every(token => regexes.some(re => re.test(token)));
+      isTranslatable ? (helpEl.style.visibility = 'visible') : (helpEl.style.visibility = 'hidden');
+    };
+    const getShortName = () =>
+      isRoundEdit
+        ? nameInput.value
+        : groupName
+          ? nameInput.value.startsWith(groupName)
+            ? nameInput.value.slice(groupName.length).replace(/^[^\da-z]*/i, '')
+            : nameInput.value
+          : false;
+    // Initial load
+    const shortName = getShortName();
+    !!shortName && checkAndToggle(shortName);
+    nameInput?.addEventListener('input', () => {
+      const shortName = getShortName();
+      !!shortName && checkAndToggle(shortName);
+    });
+  });
+}