fix: RTL layout for the bottom configuration panel, closes #849 (#850)

apps/readest-app/src/utils/book.ts

@@ -2,6 +2,7 @@ import { EXTS } from '@/libs/document';
 import { Book, BookConfig, BookProgress, WritingMode } from '@/types/book';
 import { getUserLang, isContentURI, isValidURL, makeSafeFilename } from './misc';
 import { getStorageType } from './object';
+import { getDirFromLanguage } from './rtl';
 
 export const getDir = (book: Book) => {
   return `${book.hash}`;
@@ -57,16 +58,16 @@ export interface Contributor {
   name: LanguageMap;
 }
 
-const userLang = getUserLang();
-
 const formatLanguageMap = (x: string | LanguageMap): string => {
+  const userLang = getUserLang();
   if (!x) return '';
   if (typeof x === 'string') return x;
   const keys = Object.keys(x);
   return x[userLang] || x[keys[0]!]!;
 };
 
-export const listFormater = (narrow = false, lang = userLang) => {
+export const listFormater = (narrow = false, lang = '') => {
+  lang = lang ? lang : getUserLang();
   if (narrow) {
     return new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });
   } else {
@@ -116,6 +117,7 @@ export const primaryLanguage = (lang: string | string[] | undefined) => {
 
 export const formatDate = (date: string | number | Date | undefined) => {
   if (!date) return;
+  const userLang = getUserLang();
   try {
     return new Date(date).toLocaleDateString(userLang, {
       year: 'numeric',
@@ -157,9 +159,6 @@ export const getBookDirFromWritingMode = (writingMode: WritingMode) => {
 };
 
 export const getBookDirFromLanguage = (language: string | string[] | undefined) => {
-  const lang = primaryLanguage(language);
-  if (!lang) return 'auto';
-  const rtlLanguages = new Set(['ar', 'he', 'fa', 'ur', 'dv', 'ps', 'sd', 'yi']);
-  const primaryLang = lang.split('-')[0]!.toLowerCase();
-  return rtlLanguages.has(primaryLang) ? 'rtl' : 'auto';
+  const lang = primaryLanguage(language) || '';
+  return getDirFromLanguage(lang);
 };

apps/readest-app/src/utils/misc.ts

@@ -30,12 +30,16 @@ export const makeSafeFilename = (filename: string, replacement = '_') => {
   return safeName.trim();
 };
 
-export const getUserLang = () => navigator?.language.split('-')[0] || 'en';
+export const getUserLang = () => {
+  const locale = localStorage?.getItem('i18nextLng') || navigator?.language || '';
+  return locale.split('-')[0] || 'en';
+};
 
 export const isCJKEnv = () => {
-  const isCJKLocale = ['zh', 'ja', 'ko'].includes(getUserLang());
-  const uiLanguage = localStorage.getItem('i18nextLng') || '';
+  const browserLanguage = navigator.language || '';
+  const uiLanguage = localStorage?.getItem('i18nextLng') || '';
   const isCJKUI = ['zh', 'ja', 'ko'].some((lang) => uiLanguage.startsWith(lang));
+  const isCJKLocale = ['zh', 'ja', 'ko'].some((lang) => browserLanguage.startsWith(lang));
   return isCJKLocale || isCJKUI;
 };
 

apps/readest-app/src/utils/rtl.ts

@@ -0,0 +1,13 @@
+import { getUserLang } from './misc';
+
+export const getDirFromLanguage = (lang: string) => {
+  if (!lang) return 'auto';
+  const rtlLanguages = new Set(['ar', 'he', 'fa', 'ur', 'dv', 'ps', 'sd', 'yi']);
+  const primaryLang = lang.split('-')[0]!.toLowerCase();
+  return rtlLanguages.has(primaryLang) ? 'rtl' : 'auto';
+};
+
+export const getDirFromUILanguage = () => {
+  const lang = getUserLang();
+  return getDirFromLanguage(lang);
+};