Web: Client: Common: Create DirectionContext that provides current interface direction (ltr/rtl)

packages/client/src/Shell.jsx

@@ -10,6 +10,7 @@ import Toast from "@docspace/components/toast";
 import toastr from "@docspace/components/toast/toastr";
 import { getLogoFromPath, updateTempContent } from "@docspace/common/utils";
 
+import DirectionProvider from "@docspace/common/components/DirectionPovider";
 import ThemeProvider from "@docspace/components/theme-provider";
 import store from "client/store";
 
@@ -414,7 +415,9 @@ export default () => (
   <MobxProvider {...store}>
     <I18nextProvider i18n={i18n}>
       <ThemeProviderWrapper>
-        <ShellWrapper />
+        <DirectionProvider>
+          <ShellWrapper />
+        </DirectionProvider>
       </ThemeProviderWrapper>
     </I18nextProvider>
   </MobxProvider>

packages/common/components/DirectionPovider/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import DirectionContext from "../../contexts/DirectionContext";
+import { inject, observer } from "mobx-react";
+
+const DirectionProvider = ({ interfaceDirection, children }) => {
+  return (
+    <DirectionContext.Provider value={interfaceDirection}>
+      {children}
+    </DirectionContext.Provider>
+  );
+};
+
+export default inject(({ auth }) => {
+  const { interfaceDirection } = auth.settingsStore;
+
+  return { interfaceDirection };
+})(observer(DirectionProvider));

packages/common/contexts/DirectionContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const DirectionContext = createContext("LTR");
+
+export default DirectionContext;