rtl layout progress and updates to arabic translations

beszel/site/src/lib/i18n.ts

@@ -1,6 +1,7 @@
 import i18n from "i18next"
 import { initReactI18next } from "react-i18next"
 import enTranslations from "../locales/en/translation.json"
+import { $direction } from "./stores"
 
 // Custom language detector to use localStorage
 const languageDetector: any = {
@@ -62,6 +63,9 @@ export async function setLang(locale: string) {
 	const messages = await loadMessages(locale)
 	i18n.addResourceBundle(locale, "translation", messages)
 	await i18n.changeLanguage(locale)
+	const dir = i18n.dir(locale)
+	document.dir = dir
+	$direction.set(dir)
 }
 
 // Initialize with detected/saved language

beszel/site/src/lib/languages.json

@@ -1,4 +1,8 @@
 [
+	{
+		"lang": "ar",
+		"label": "العربية"
+	},
 	{
 		"lang": "de",
 		"label": "Deutsch"

beszel/site/src/lib/stores.ts

@@ -39,3 +39,6 @@ export const $containerFilter = atom("")
 
 /** Fallback copy to clipboard dialog content */
 export const $copyContent = atom("")
+
+/** Direction for localization */
+export const $direction = atom<"ltr" | "rtl">("ltr")