Pass user locale to localeCompare so sorts honor the selected language

localeCompare with no locale used the runtime default, mis-collating sorted
lists (community names, chat members, profile tags, language picker) for
non-English users. Pass useTranslation's i18n.language wherever available.
CommunitySearch sorts via useMemo so it re-sorts on locale change without
refetching. Fixes #8817.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kevinortiz43

app/web/features/communities/CommunitiesPage/CommunitySearch.tsx

@@ -12,7 +12,7 @@ import { COMMUNITIES } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import Sentry from "platform/sentry";
 import { CommunitySummary } from "proto/communities_pb";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { communityCreationFormURL, routeToCommunity } from "routes";
 import { listAllCommunities } from "service/communities";
 
@@ -31,7 +31,7 @@ const StyledAutocomplete = styled(
 }));
 
 export default function CommunitySearch() {
-  const { t } = useTranslation(COMMUNITIES);
+  const { t, i18n } = useTranslation(COMMUNITIES);
   const router = useRouter();
   const { data: accountInfo } = useAccountInfo();
   const [inputValue, setInputValue] = useState("");
@@ -60,28 +60,7 @@ export default function CommunitySearch() {
                 : "",
           }));
 
-        // Sort hierarchically: first by depth (number of parents), then by full parent path, then by name
-        const sortedCommunities = communitiesWithRegion.sort((a, b) => {
-          // First, sort by depth in hierarchy (fewer parents = higher in tree)
-          const depthCompare = a.parentsList.length - b.parentsList.length;
-          if (depthCompare !== 0) return depthCompare;
-
-          // Then sort by the full path through the hierarchy
-          const aPath = a.parentsList
-            .map((p) => p.community?.name || "")
-            .join("/");
-          const bPath = b.parentsList
-            .map((p) => p.community?.name || "")
-            .join("/");
-          const pathCompare = aPath.localeCompare(bPath);
-          if (pathCompare !== 0) return pathCompare;
-
-          // Finally sort by community name
-          return a.name.localeCompare(b.name);
-        });
-
-        setAllCommunities(sortedCommunities);
-        setFilteredOptions(sortedCommunities);
+        setAllCommunities(communitiesWithRegion);
       } catch (error) {
         Sentry.captureException(error, {
           tags: {
@@ -99,22 +78,42 @@ export default function CommunitySearch() {
     fetchAllCommunities();
   }, []);
 
+  // Sort hierarchically: depth, then full parent path, then name.
+  // Recomputes on locale change without refetching.
+  const sortedCommunities = useMemo(
+    () =>
+      [...allCommunities].sort((a, b) => {
+        const depthCompare = a.parentsList.length - b.parentsList.length;
+        if (depthCompare !== 0) return depthCompare;
+        const aPath = a.parentsList
+          .map((p) => p.community?.name || "")
+          .join("/");
+        const bPath = b.parentsList
+          .map((p) => p.community?.name || "")
+          .join("/");
+        const pathCompare = aPath.localeCompare(bPath, i18n.language);
+        if (pathCompare !== 0) return pathCompare;
+        return a.name.localeCompare(b.name, i18n.language);
+      }),
+    [allCommunities, i18n.language],
+  );
+
   // Filter communities based on input
   useEffect(() => {
     if (!inputValue) {
-      setFilteredOptions(allCommunities);
+      setFilteredOptions(sortedCommunities);
       return;
     }
 
     const lowercaseInput = inputValue.toLowerCase();
-    const filtered = allCommunities.filter(
+    const filtered = sortedCommunities.filter(
       (community) =>
         community.name.toLowerCase().includes(lowercaseInput) ||
         (community.regionName &&
           community.regionName.toLowerCase().includes(lowercaseInput)),
     );
     setFilteredOptions(filtered);
-  }, [inputValue, allCommunities]);
+  }, [inputValue, sortedCommunities]);
 
   const handleInputChange = (_event: React.SyntheticEvent, value: string) => {
     setInputValue(value);

app/web/features/messages/groupchats/AdminsDialog.tsx

@@ -176,7 +176,7 @@ export default function AdminsDialog({
   groupChat,
   ...props
 }: AdminsDialogProps) {
-  const { t } = useTranslation([GLOBAL, MESSAGES]);
+  const { t, i18n } = useTranslation([GLOBAL, MESSAGES]);
   const [error, setError] = useState("");
 
   const nonAdminIds = groupChat?.memberUserIdsList.filter(
@@ -213,7 +213,10 @@ export default function AdminsDialog({
             <CenteredSpinner />
           ) : (
             Array.from(admins.data?.values() ?? [])
-              .sort((a, b) => b?.name.localeCompare(a?.name ?? "") ?? 0)
+              .sort(
+                (a, b) =>
+                  b?.name.localeCompare(a?.name ?? "", i18n.language) ?? 0,
+              )
               .map((user) =>
                 user ? (
                   <AdminListItem
@@ -242,7 +245,10 @@ export default function AdminsDialog({
                 <CenteredSpinner />
               ) : (
                 Array.from(nonAdmins.data?.values() ?? [])
-                  .sort((a, b) => b?.name.localeCompare(a?.name ?? "") ?? 0)
+                  .sort(
+                    (a, b) =>
+                      b?.name.localeCompare(a?.name ?? "", i18n.language) ?? 0,
+                  )
                   .map((user) =>
                     user ? (
                       <AdminListItem

app/web/features/profile/ProfileTagInput.tsx

@@ -153,7 +153,7 @@ export default function ProfileTagInput({
   className,
   inputFieldProps,
 }: ProfileTagInputProps) {
-  const { t } = useTranslation(PROFILE);
+  const { t, i18n } = useTranslation(PROFILE);
 
   // In case some value doesn't map to an option, add a fake option for it.
   // For example if value is [en, xx] and options is { en: "English", fr: "French" },
@@ -272,7 +272,7 @@ export default function ProfileTagInput({
             disablePortal
             options={Object.entries(effectiveOptions)
               .map(([key, label]) => ({ key, label }))
-              .sort((a, b) => a.label.localeCompare(b.label))}
+              .sort((a, b) => a.label.localeCompare(b.label, i18n.language))}
             renderOption={(props, option, { selected }) => {
               const { key, ...rest } = props;
 

app/web/features/translate/LanguagePickerSelect.tsx

@@ -73,7 +73,7 @@ export default function LanguagePickerSelect({
   const isAuthenticated = authState.authenticated;
 
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const { t } = useTranslation([GLOBAL]);
+  const { t, i18n } = useTranslation([GLOBAL]);
 
   const { data: languages, isLoading, error } = useWeblateStats();
   const { showAllLanguages } = useShowAllLanguages();
@@ -124,7 +124,11 @@ export default function LanguagePickerSelect({
 
   // Languages with < 50% translated are hidden from language selector (unless showAllLanguages is enabled)
   // Languages with < 80% translated are greyed out
-  const availableLanguages = getAvailableLanguages(languages, showAllLanguages);
+  const availableLanguages = getAvailableLanguages(
+    languages,
+    showAllLanguages,
+    i18n.language,
+  );
 
   const menuItems: React.ReactNode[] | undefined = isLoading
     ? []

app/web/features/translate/utils.ts

@@ -40,6 +40,7 @@ export function isLanguageProductionReady(
 export function getAvailableLanguages(
   languages: WeblateLanguage[] | undefined,
   showAll = false,
+  locale?: string,
 ): WeblateLanguage[] {
   if (!languages) {
     return [];
@@ -63,6 +64,6 @@ export function getAvailableLanguages(
         b.translated_percent >= ALMOST_DONE_CUTOFF
       )
         return 1;
-      return a.code.localeCompare(b.code);
+      return a.code.localeCompare(b.code, locale);
     });
 }