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,6 +96,7 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
         ))}
       </ol>
 
+      {localeOptions.length > 1 && (
         <div className='rules-languages'>
           <label htmlFor='language-select'>
             <FormattedMessage
@@ -86,13 +109,14 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
               <option
                 key={option.value}
                 value={option.value}
-              selected={option.value === locale}
+                selected={option.value === selectedLocale}
               >
                 {option.text}
               </option>
             ))}
           </select>
         </div>
+      )}
     </Section>
   );
 };