Better segmentation of languages with <hr>

src/components/compose.jsx

@@ -522,6 +522,34 @@ function Compose({
 
   const [showEmoji2Picker, setShowEmoji2Picker] = useState(false);
 
+  const [topSupportedLanguages, restSupportedLanguages] = useMemo(() => {
+    const topLanguages = [];
+    const restLanguages = [];
+    const { contentTranslationHideLanguages = [] } = states.settings;
+    supportedLanguages.forEach((l) => {
+      const [code] = l;
+      if (
+        code === language ||
+        code === prevLanguage.current ||
+        code === DEFAULT_LANG ||
+        contentTranslationHideLanguages.includes(code)
+      ) {
+        topLanguages.push(l);
+      } else {
+        restLanguages.push(l);
+      }
+    });
+    topLanguages.sort(([codeA, commonA], [codeB, commonB]) => {
+      if (codeA === language) return -1;
+      if (codeB === language) return 1;
+      return commonA.localeCompare(commonB);
+    });
+    restLanguages.sort(([codeA, commonA], [codeB, commonB]) =>
+      commonA.localeCompare(commonB),
+    );
+    return [topLanguages, restLanguages];
+  }, [language]);
+
   return (
     <div id="compose-container-outer">
       <div id="compose-container" class={standalone ? 'standalone' : ''}>
@@ -1126,32 +1154,17 @@ function Compose({
                 }}
                 disabled={uiState === 'loading'}
               >
-                {supportedLanguages
+                {topSupportedLanguages.map(([code, common, native]) => (
-                  .sort(([codeA, commonA], [codeB, commonB]) => {
+                  <option value={code} key={code}>
-                    const { contentTranslationHideLanguages = [] } =
+                    {common} ({native})
-                      states.settings;
+                  </option>
-                    // Sort codes that same as language, prevLanguage, DEFAULT_LANGUAGE and all the ones in states.settings.contentTranslationHideLanguages, to the top
+                ))}
-                    if (
+                <hr />
-                      codeA === language ||
+                {restSupportedLanguages.map(([code, common, native]) => (
-                      codeA === prevLanguage ||
+                  <option value={code} key={code}>
-                      codeA === DEFAULT_LANG ||
+                    {common} ({native})
-                      contentTranslationHideLanguages?.includes(codeA)
+                  </option>
-                    )
+                ))}
-                      return -1;
-                    if (
-                      codeB === language ||
-                      codeB === prevLanguage ||
-                      codeB === DEFAULT_LANG ||
-                      contentTranslationHideLanguages?.includes(codeB)
-                    )
-                      return 1;
-                    return commonA.localeCompare(commonB);
-                  })
-                  .map(([code, common, native]) => (
-                    <option value={code}>
-                      {common} ({native})
-                    </option>
-                  ))}
               </select>
             </label>{' '}
             <button