Merge pull request #44 from janderedev/pr-3

src/pages/settings/panes/Languages.tsx

@@ -53,6 +53,31 @@ export function Component(props: Props) {
         Langs[x as keyof typeof Langs],
     ]) as Key[];
 
+    // Get the user's system language. Check for exact
+    // matches first, otherwise check for partial matches
+    const preferredLanguage =
+        navigator.languages.filter((lang) =>
+            languages.find((l) => l[0].replace(/_/g, "-") == lang),
+        )?.[0] ||
+        navigator.languages
+            ?.map((x) => x.split("-")[0])
+            ?.filter((lang) => languages.find((l) => l[0] == lang))?.[0]
+            ?.split("-")[0];
+
+    if (preferredLanguage) {
+        // This moves the user's system language to the top of the language list
+        const prefLangKey = languages.find(
+            (lang) => lang[0].replace(/_/g, "-") == preferredLanguage,
+        );
+        if (prefLangKey) {
+            languages.splice(
+                0,
+                0,
+                languages.splice(languages.indexOf(prefLangKey), 1)[0],
+            );
+        }
+    }
+
     return (
         <div className={styles.languages}>
             <h3>