From 3605298a0dc3cc273df2d61ae66ebc7d534f4189 Mon Sep 17 00:00:00 2001
From: Shir Goldberg <3937986+shirgoldbird@users.noreply.github.com>
Date: Thu, 16 Jul 2026 17:34:36 -0400
Subject: [PATCH] Distinguish create-vs-apply customizations for variants in
 language table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Glossaries and style rules are created for a root language (e.g. EN) but
apply when translating into its variants (e.g. EN-GB); you can't create
them for a variant code. On variant rows, render glossary/style-rule
support as a "Translation: ..." badge (matching the existing
"Translation: Target Only" convention) with a tooltip, instead of the
plain green badge that implies the customization can be created for the
variant.

The change lives entirely in the FeatureBadges component, outside the
BEGIN/END GENERATED markers, so the /v3/languages generator and daily
sync workflow won't overwrite it.

Carries forward the intent of the closed PR #327 into the generated-table
world introduced by #395.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 snippets/language-table.jsx | 38 ++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/snippets/language-table.jsx b/snippets/language-table.jsx
index 52f8730a..c523e292 100644
--- a/snippets/language-table.jsx
+++ b/snippets/language-table.jsx
@@ -218,13 +218,22 @@ export const LanguageTable = () => {
     }
 
     const FeatureBadges = ({ lang }) => {
+        // Orange badges flag things specific to translating *into* a variant.
+        // Green badges are features the language supports natively.
+        const variantBadgeClass = "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-200"
+        const badgeClass = "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200"
+
+        // appliesViaRoot: glossaries and style rules are created for the root
+        // language (e.g. EN) and applied when translating into the variant; they
+        // can't be created for a variant code. On variant rows we surface that
+        // with a "Translation: ..." badge instead of the plain green one.
         const features = [
-            { key: 'translation', label: 'Translation', variant: lang.isVariant },
-            { key: 'glossaries', label: 'Glossaries' },
+            { key: 'translation', label: 'Translation' },
+            { key: 'glossaries', label: 'Glossaries', appliesViaRoot: true },
             { key: 'tagHandling', label: 'Tag Handling' },
             { key: 'textImprovement', label: 'Text Improvement' },
             { key: 'translationMemory', label: 'Translation Memory' },
-            { key: 'styleRules', label: 'Style Rules' },
+            { key: 'styleRules', label: 'Style Rules', appliesViaRoot: true },
         ]
         return (
             <div className="flex flex-wrap gap-1.5">
@@ -237,25 +246,36 @@ export const LanguageTable = () => {
                     </span>
                 )}
                 {features.map(f => {
-                    if (f.variant) {
+                    if (f.key === 'translation' && lang.isVariant) {
                         return (
                             <span
                                 key={f.key}
-                                className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-200"
+                                className={variantBadgeClass}
                                 title="This language variant can only be used as a target language, not as a source. For example, use EN as the source and EN-GB as the target."
                             >
                                 Translation: Target Only
                             </span>
                         )
                     }
-                    if (lang[f.key]) {
+                    if (!lang[f.key]) {
+                        return null
+                    }
+                    if (f.appliesViaRoot && lang.isVariant) {
                         return (
-                            <span key={f.key} className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200">
-                                {f.label}
+                            <span
+                                key={f.key}
+                                className={variantBadgeClass}
+                                title={`${f.label} are created for the root language (for example, EN) and apply when translating into this variant. You can't create ${f.label.toLowerCase()} for a variant code.`}
+                            >
+                                Translation: {f.label}
                             </span>
                         )
                     }
-                    return null
+                    return (
+                        <span key={f.key} className={badgeClass}>
+                            {f.label}
+                        </span>
+                    )
                 })}
             </div>
         )