Apply rtl styling for rtl languages

src/components/context/AppContext.tsx

@@ -6,11 +6,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import React, { useMemo } from 'react';
+import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import React, { useMemo, useRef } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { useTranslation } from 'react-i18next';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { createTheme } from '@/theme';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { DarkTheme } from '@/components/context/DarkTheme';
@@ -22,7 +27,27 @@ interface Props {
     children: React.ReactNode;
 }
 
+const directionToCache: Record<Direction, EmotionCache> = {
+    ltr: createCache({
+        key: 'muiltr',
+    }),
+    rtl: createCache({
+        key: 'muirtl',
+        stylisPlugins: [prefixer, rtlPlugin],
+    }),
+};
+
 export const AppContext: React.FC<Props> = ({ children }) => {
+    const directionRef = useRef<Direction>('ltr');
+    const { i18n } = useTranslation();
+
+    const currentDirection = i18n.dir();
+
+    if (directionRef.current !== currentDirection) {
+        document.dir = currentDirection;
+        directionRef.current = currentDirection;
+    }
+
     const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
     const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);
 
@@ -39,26 +64,28 @@ export const AppContext: React.FC<Props> = ({ children }) => {
         [activeDevice],
     );
 
-    const theme = useMemo(() => createTheme(darkTheme), [darkTheme]);
+    const theme = useMemo(() => createTheme(darkTheme, currentDirection), [darkTheme, currentDirection]);
 
     setActiveDevice(activeDevice);
 
     return (
         <Router>
             <StyledEngineProvider injectFirst>
-                <ThemeProvider theme={theme}>
-                    <DarkTheme.Provider value={darkThemeContext}>
-                        <QueryParamProvider adapter={ReactRouter6Adapter}>
-                            <LibraryOptionsContextProvider>
-                                <NavBarContextProvider>
-                                    <ActiveDevice.Provider value={activeDeviceContext}>
-                                        {children}
-                                    </ActiveDevice.Provider>
-                                </NavBarContextProvider>
-                            </LibraryOptionsContextProvider>
-                        </QueryParamProvider>
-                    </DarkTheme.Provider>
-                </ThemeProvider>
+                <CacheProvider value={directionToCache[currentDirection]}>
+                    <ThemeProvider theme={theme}>
+                        <DarkTheme.Provider value={darkThemeContext}>
+                            <QueryParamProvider adapter={ReactRouter6Adapter}>
+                                <LibraryOptionsContextProvider>
+                                    <NavBarContextProvider>
+                                        <ActiveDevice.Provider value={activeDeviceContext}>
+                                            {children}
+                                        </ActiveDevice.Provider>
+                                    </NavBarContextProvider>
+                                </LibraryOptionsContextProvider>
+                            </QueryParamProvider>
+                        </DarkTheme.Provider>
+                    </ThemeProvider>
+                </CacheProvider>
             </StyledEngineProvider>
         </Router>
     );

src/components/navbar/ReaderNavBar.tsx

@@ -22,7 +22,7 @@ import Divider from '@mui/material/Divider';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
@@ -132,6 +132,8 @@ interface IProps {
 
 export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
+    const theme = useTheme();
+
     const navigate = useNavigate();
     const location = useLocation<{
         prevDrawerOpen?: boolean;
@@ -308,7 +310,7 @@ export function ReaderNavBar(props: IProps) {
                                     disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
                                     onClick={() => openNextChapter(ChapterOffset.PREV)}
                                 >
-                                    <KeyboardArrowLeftIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
                                 </IconButton>
                             </Tooltip>
                             <FormControl
@@ -348,7 +350,7 @@ export function ReaderNavBar(props: IProps) {
                                     }
                                     onClick={() => openNextChapter(ChapterOffset.NEXT)}
                                 >
-                                    <KeyboardArrowRightIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
                                 </IconButton>
                             </Tooltip>
                         </ChapterNavigation>

src/theme.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createTheme as createMuiTheme, Palette as MuiPalette, Theme } from '@mui/material/styles';
+import { createTheme as createMuiTheme, Direction, Palette as MuiPalette, Theme } from '@mui/material/styles';
 
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
@@ -23,8 +23,9 @@ type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
 
 let theme: Theme;
 export const getCurrentTheme = () => theme;
-export const createTheme = (dark?: boolean) => {
+export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
     const baseTheme: DefaultMuiTheme = createMuiTheme({
+        direction,
         palette: {
             mode: dark ? 'dark' : 'light',
         },