feat: rtl support

akari-blue · Dec 19, 2024 · 0ceb129 · 0ceb129
1 parent 283cc21
commit 0ceb129
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { languages } from '../i18n';
 
 type Settings = {
   experiments: {
@@ -11,6 +12,7 @@ type Settings = {
     cleanHandles: boolean;
   };
   columns: string[];
+  language: 'system' | keyof typeof languages;
   font: {
     family: 'system' | 'OpenDyslexic' | 'Atkinson-Hyperlegible';
     size: 'system' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
@@ -47,6 +49,7 @@ export const useSettings = create<Settings>()(
         experiments: state.experiments,
         columns: state.columns,
         font: state.font,
+        language: state.language,
       }),
     },
   ),

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -9,6 +9,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools/production';
 import { useSettings } from '../hooks/useSetting';
 import { cn } from '../lib/utils';
 import { Navbar } from '../components/Navbar';
+import i18n from '../i18n';
 
 // Create a new query client instance
 const queryClient = new QueryClient({
@@ -54,11 +55,15 @@ export const Route = createRootRoute({
 });
 
 function Root() {
-  const { experiments, font } = useSettings();
+  const { experiments, font, language } = useSettings();
   const router = useRouterState();
   const pathname = router.location.pathname;
+  const dir = i18n.dir(language);
+
   return (
     <main
+      dir={dir}
+      lang={language}
       className={cn(
         'text-black dark:text-white min-h-screen',
         font.family === 'OpenDyslexic' && 'font-[OpenDyslexic]',

diff --git a/src/routes/settings.lazy.tsx b/src/routes/settings.lazy.tsx
@@ -10,9 +10,8 @@ export const Route = createLazyFileRoute('/settings')({
 });
 
 function RouteComponent() {
-  const { setSettings, experiments, font } = useSettings();
+  const { setSettings, experiments, font, language } = useSettings();
   const { t } = useTranslation('settings');
-  const selectedLanguage = localStorage.getItem('i18nextLng') || 'system';
 
   return (
     <div className="flex flex-col gap-4">
@@ -69,14 +68,15 @@ function RouteComponent() {
         <div className="flex items-center space-x-4">
           <select
             className="w-64 p-2 text-black"
-            defaultValue={selectedLanguage}
+            defaultValue={language}
             onChange={(event) => {
-              const value = event.target.value as 'system' | 'en' | 'fr' | 'ko';
+              const value = event.target.value as 'system' | keyof typeof languages;
               if (value === 'system') {
                 i18n.changeLanguage(window.navigator.language);
-                localStorage.removeItem('i18nextLng');
+                setSettings(() => ({ language: 'system' }));
               } else {
                 i18n.changeLanguage(value);
+                setSettings(() => ({ language: value }));
               }
             }}
           >