Fix initially selected language in Rules panel, hide selector when no alternative translations exist (#36672)

app/javascript/mastodon/features/about/components/rules.tsx

@@ -32,16 +32,38 @@ interface Rule extends BaseRule {
   translations?: Record<string, BaseRule>;
 }
 
+function getDefaultSelectedLocale(
+  currentUiLocale: string,
+  localeOptions: SelectItem[],
+) {
+  const preciseMatch = localeOptions.find(
+    (option) => option.value === currentUiLocale,
+  );
+  if (preciseMatch) {
+    return preciseMatch.value;
+  }
+
+  const partialLocale = currentUiLocale.split('-')[0];
+  const partialMatch = localeOptions.find(
+    (option) => option.value.split('-')[0] === partialLocale,
+  );
+
+  return partialMatch?.value ?? 'default';
+}
+
 export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
   const intl = useIntl();
-  const [locale, setLocale] = useState(intl.locale);
-  const rules = useAppSelector((state) => rulesSelector(state, locale));
   const localeOptions = useAppSelector((state) =>
     localeOptionsSelector(state, intl),
   );
+  const [selectedLocale, setSelectedLocale] = useState(() =>
+    getDefaultSelectedLocale(intl.locale, localeOptions),
+  );
+  const rules = useAppSelector((state) => rulesSelector(state, selectedLocale));
+
   const handleLocaleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
     (e) => {
-      setLocale(e.currentTarget.value);
+      setSelectedLocale(e.currentTarget.value);
     },
     [],
   );
@@ -74,25 +96,27 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
         ))}
       </ol>
 
-      <div className='rules-languages'>
+      {localeOptions.length > 1 && (
-        <label htmlFor='language-select'>
+        <div className='rules-languages'>
-          <FormattedMessage
+          <label htmlFor='language-select'>
-            id='about.language_label'
+            <FormattedMessage
-            defaultMessage='Language'
+              id='about.language_label'
-          />
+              defaultMessage='Language'
-        </label>
+            />
-        <select onChange={handleLocaleChange} id='language-select'>
+          </label>
-          {localeOptions.map((option) => (
+          <select onChange={handleLocaleChange} id='language-select'>
-            <option
+            {localeOptions.map((option) => (
-              key={option.value}
+              <option
-              value={option.value}
+                key={option.value}
-              selected={option.value === locale}
+                value={option.value}
-            >
+                selected={option.value === selectedLocale}
-              {option.text}
+              >
-            </option>
+                {option.text}
-          ))}
+              </option>
-        </select>
+            ))}
-      </div>
+          </select>
+        </div>
+      )}
     </Section>
   );
 };