Add i18n support (#46)

apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx

@@ -6,9 +6,11 @@ import { TbSunMoon } from 'react-icons/tb';
 import { useTheme } from '@/hooks/useTheme';
 import { themes } from '@/styles/themes';
 import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { getStyles } from '@/utils/style';
 
 const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { themeMode, themeColor, themeCode, isDarkMode, updateThemeMode, updateThemeColor } =
     useTheme();
   const { getViews, getViewSettings } = useReaderStore();
@@ -24,9 +26,9 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='flex items-center justify-between'>
-        <h2 className='font-medium'>Theme Mode</h2>
+        <h2 className='font-medium'>{_('Theme Mode')}</h2>
         <div className='flex gap-2'>
-          <div className='tooltip tooltip-bottom' data-tip='Auto Mode'>
+          <div className='tooltip tooltip-bottom' data-tip={_('Auto Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('auto')}
@@ -35,7 +37,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             </button>
           </div>
 
-          <div className='tooltip tooltip-bottom' data-tip='Light Mode'>
+          <div className='tooltip tooltip-bottom' data-tip={_('Light Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'light' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('light')}
@@ -44,7 +46,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             </button>
           </div>
 
-          <div className='tooltip tooltip-bottom' data-tip='Dark Mode'>
+          <div className='tooltip tooltip-bottom' data-tip={_('Dark Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'dark' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('dark')}
@@ -56,7 +58,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div>
-        <h2 className='mb-2 font-medium'>Theme Color</h2>
+        <h2 className='mb-2 font-medium'>{_('Theme Color')}</h2>
         <div className='grid grid-cols-3 gap-4'>
           {themes.map(({ name, label, colors }) => (
             <label

apps/readest-app/src/app/reader/components/settings/DialogMenu.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
 
 interface DialogMenuProps {
   toggleDropdown?: () => void;
 }
 
 const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
+  const _ = useTranslation();
   const { isFontLayoutSettingsGlobal, setFontLayoutSettingsGlobal } = useSettingsStore();
 
   const handleToggleGlobal = () => {
@@ -28,7 +30,7 @@ const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
             {isFontLayoutSettingsGlobal && <MdCheck size={20} className='text-base-content' />}
           </span>
           <div className='tooltip' data-tip='Uncheck for current book settings'>
-            <span className='ml-2'>Global Settings</span>
+            <span className='ml-2'>{_('Global Settings')}</span>
           </div>
         </div>
       </button>

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -6,8 +6,9 @@ import FontDropdown from './FontDropDown';
 import { MONOSPACE_FONTS, SANS_SERIF_FONTS, SERIF_FONTS } from '@/services/constants';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
-import { getStyles } from '@/utils/style';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
+import { getStyles } from '@/utils/style';
 
 interface FontFaceProps {
   className?: string;
@@ -38,6 +39,7 @@ const FontFace = ({ className, family, label, options, selected, onSelect }: Fon
 );
 
 const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const view = getView(bookKey);
@@ -145,7 +147,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Size</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Size')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
@@ -169,11 +171,11 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Family</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Family')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <div className='config-item config-item-top'>
-              <span className=''>Default Font</span>
+              <span className=''>{_('Default Font')}</span>
               <FontDropdown
                 options={fontFamilyOptions}
                 selected={defaultFont}
@@ -183,7 +185,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             </div>
 
             <div className='config-item config-item-bottom'>
-              <span className=''>Override Publisher Font</span>
+              <span className=''>{_('Override Publisher Font')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -196,20 +198,20 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Face</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Face')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <FontFace
               className='config-item-top'
               family='serif'
-              label='Serif Font'
+              label={_('Serif Font')}
               options={SERIF_FONTS}
               selected={serifFont}
               onSelect={setSerifFont}
             />
             <FontFace
               family='sans-serif'
-              label='Sans-Serif Font'
+              label={_('Sans-Serif Font')}
               options={SANS_SERIF_FONTS}
               selected={sansSerifFont}
               onSelect={setSansSerifFont}
@@ -217,7 +219,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             <FontFace
               className='config-item-bottom'
               family='monospace'
-              label='Monospace Font'
+              label={_('Monospace Font')}
               options={MONOSPACE_FONTS}
               selected={monospaceFont}
               onSelect={setMonospaceFont}

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { getStyles } from '@/utils/style';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import NumberInput from './NumberInput';
 import { useTheme } from '@/hooks/useTheme';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const view = getView(bookKey);
@@ -112,7 +114,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Paragraph</h2>
+        <h2 className='mb-2 font-medium'>{_('Paragraph')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
@@ -125,7 +127,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={0.1}
             />
             <div className='config-item config-item-bottom'>
-              <span className=''>Full Justification</span>
+              <span className=''>{_('Full Justification')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -134,7 +136,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               />
             </div>
             <div className='config-item config-item-bottom'>
-              <span className=''>Hyphenation</span>
+              <span className=''>{_('Hyphenation')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -147,12 +149,12 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Page</h2>
+        <h2 className='mb-2 font-medium'>{_('Page')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
               className='config-item-top'
-              label='Margins (px)'
+              label={_('Margins (px)')}
               value={marginPx}
               onChange={setMarginPx}
               min={0}
@@ -160,21 +162,21 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={4}
             />
             <NumberInput
-              label='Gaps (%)'
+              label={_('Gaps (%)')}
               value={gapPercent}
               onChange={setGapPercent}
               min={0}
               max={30}
             />
             <NumberInput
-              label='Maximum Number of Columns'
+              label={_('Maximum Number of Columns')}
               value={maxColumnCount}
               onChange={setMaxColumnCount}
               min={1}
               max={2}
             />
             <NumberInput
-              label='Maximum Inline Size'
+              label={_('Maximum Inline Size')}
               value={maxInlineSize}
               onChange={setMaxInlineSize}
               min={500}
@@ -182,7 +184,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={100}
             />
             <NumberInput
-              label='Maximum Block Size'
+              label={_('Maximum Block Size')}
               value={maxBlockSize}
               onChange={setMaxBlockSize}
               min={500}

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import cssbeautify from 'cssbeautify';
 import { getStyles } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
@@ -9,6 +10,7 @@ const cssRegex =
   /((?:\s*)([\w#.@*,:\-.:>+~$$$$\"=(),*\s]+)\s*{(?:[\s]*)((?:[^\}]+[:][^\}]+;?)*)*\s*}(?:\s*))/gim;
 
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
@@ -87,11 +89,11 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Animation</h2>
+        <h2 className='mb-2 font-medium'>{_('Animation')}</h2>
         <div className='card bg-base-100 border shadow'>
           <div className='divide-y'>
             <div className='config-item config-item-top config-item-bottom'>
-              <span className='text-gray-700'>Paging Animation</span>
+              <span className='text-gray-700'>{_('Paging Animation')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -104,11 +106,11 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Behavior</h2>
+        <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
         <div className='card bg-base-100 border shadow'>
           <div className='divide-y'>
             <div className='config-item config-item-top config-item-bottom'>
-              <span className='text-gray-700'>Disable Click-to-Flip</span>
+              <span className='text-gray-700'>{_('Disable Click-to-Flip')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -121,7 +123,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Custom CSS</h2>
+        <h2 className='mb-2 font-medium'>{_('Custom CSS')}</h2>
         <div className={`card bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}>
           <div className='divide-y'>
             <div className='css-text-area config-item-top config-item-bottom p-1'>

apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { BookConfig } from '@/types/book';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { RiFontSize } from 'react-icons/ri';
 import { RiDashboardLine } from 'react-icons/ri';
 import { VscSymbolColor } from 'react-icons/vsc';
@@ -15,8 +16,11 @@ import Dropdown from '@/components/Dropdown';
 import DialogMenu from './DialogMenu';
 import MiscPanel from './MiscPanel';
 
+type SettingsPanelType = 'Font' | 'Layout' | 'Color' | 'Misc';
+
 const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => {
-  const [activePanel, setActivePanel] = useState('Font');
+  const _ = useTranslation();
+  const [activePanel, setActivePanel] = useState<SettingsPanelType>('Font');
   const { setFontLayoutSettingsDialogOpen } = useSettingsStore();
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -43,28 +47,28 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
               onClick={() => setActivePanel('Font')}
             >
               <RiFontSize size={20} className='mr-0' />
-              Font
+              {_('Font')}
             </button>
             <button
               className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Layout' ? 'btn-active' : ''}`}
               onClick={() => setActivePanel('Layout')}
             >
               <RiDashboardLine size={20} className='mr-0' />
-              Layout
+              {_('Layout')}
             </button>
             <button
               className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Color' ? 'btn-active' : ''}`}
               onClick={() => setActivePanel('Color')}
             >
               <VscSymbolColor size={20} className='mr-0' />
-              Color
+              {_('Color')}
             </button>
             <button
               className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Misc' ? 'btn-active' : ''}`}
               onClick={() => setActivePanel('Misc')}
             >
               <IoAccessibilityOutline size={20} className='mr-0' />
-              Misc
+              {_('Misc')}
             </button>
           </div>
           <div className='flex h-full items-center justify-end'>