Proper RTL support (#1154)

* Add RTL styles. Most of the work is done by the browser 💖

* Refactor getLanguage

* Additional fixes

* Mirror the mouse pointer icon

* Move the vertical scrollbar to the left on RTL

* Revert "Mirror the mouse pointer icon"

This reverts commit f69b132538.

src/i18n.ts

@@ -21,7 +21,12 @@ export const languages = [
   { lng: "ko-KR", label: "한국어", data: require("./locales/ko-KR.json") },
   { lng: "zh-TW", label: "繁體中文", data: require("./locales/zh-TW.json") },
   { lng: "zh-CN", label: "简体中文", data: require("./locales/zh-CN.json") },
-  { lng: "ar-SA", label: "عربي", data: require("./locales/ar-SA.json") },
+  {
+    lng: "ar-SA",
+    label: "عربي",
+    data: require("./locales/ar-SA.json"),
+    rtl: true,
+  },
 ];
 
 let currentLanguage = languages[0];
@@ -31,11 +36,13 @@ export function setLanguage(newLng: string | undefined) {
   currentLanguage =
     languages.find((language) => language.lng === newLng) || fallbackLanguage;
 
+  document.documentElement.dir = currentLanguage.rtl ? "rtl" : "ltr";
+
   languageDetector.cacheUserLanguage(currentLanguage.lng);
 }
 
 export function getLanguage() {
-  return currentLanguage.lng;
+  return currentLanguage;
 }
 
 function findPartsForData(data: any, parts: string[]) {