chore(i18n): use default i18n provider, define LanguageManager component to handle direction and lng

src/components/LanguageManager.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * This component listens to i18next language changes and applies
+ * side effects to the document. It renders no visible UI.
+ */
+export const LanguageManager = () => {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    const handleLanguageChange = (lng: string) => {
+      document.documentElement.dir = i18n.dir(lng);
+      document.documentElement.lang = lng;
+    };
+
+    // Set initial values on component mount
+    handleLanguageChange(i18n.language);
+
+    // Listen for future language changes
+    i18n.on('languageChanged', handleLanguageChange);
+
+    // Cleanup the event listener on unmount
+    return () => {
+      i18n.off('languageChanged', handleLanguageChange);
+    };
+  }, [i18n]);
+
+  return null;
+};