chore: i18n for highlight color settings (#2275)

apps/readest-app/public/locales/ar/translation.json

@@ -625,5 +625,6 @@
   "Contain": "احتواء",
   "{{number}} pages left in chapter": "تبقّت {{number}} صفحات في هذا الفصل",
   "Device": "الجهاز",
-  "E-Ink Mode": "وضع الحبر الإلكتروني"
+  "E-Ink Mode": "وضع الحبر الإلكتروني",
+  "Highlight Colors": "ألوان التمييز"
 }

apps/readest-app/public/locales/bn/translation.json

@@ -609,5 +609,6 @@
   "Contain": "ধারণ",
   "{{number}} pages left in chapter": "অধ্যায়ে {{number}} পৃষ্ঠা বাকি",
   "Device": "যন্ত্র",
-  "E-Ink Mode": "ই-ইঙ্ক মোড"
+  "E-Ink Mode": "ই-ইঙ্ক মোড",
+  "Highlight Colors": "হাইলাইট রঙ"
 }

apps/readest-app/public/locales/bo/translation.json

@@ -605,5 +605,6 @@
   "Contain": "འབྱོར་བ།",
   "{{number}} pages left in chapter": "དོན་ཚན་ནང་ཤོག་ཨང་ {{number}} ལོག་གི་འདུག།",
   "Device": "རྐྱབ་སྐོར",
-  "E-Ink Mode": "ཡིག་སྒྱུར་སྤོ་བ"
+  "E-Ink Mode": "ཡིག་སྒྱུར་སྤོ་བ",
+  "Highlight Colors": "མདོག་ཚད་ཀྱི་བསྡུར་བ།"
 }

apps/readest-app/public/locales/de/translation.json

@@ -609,5 +609,6 @@
   "Contain": "Inhalt",
   "{{number}} pages left in chapter": "{{number}} Seiten verbleibend im Kapitel",
   "Device": "Gerät",
-  "E-Ink Mode": "E-Ink-Modus"
+  "E-Ink Mode": "E-Ink-Modus",
+  "Highlight Colors": "Hervorhebungsfarben"
 }

apps/readest-app/public/locales/el/translation.json

@@ -609,5 +609,6 @@
   "Contain": "Περιέχει",
   "{{number}} pages left in chapter": "Μένουν {{number}} σελίδες στο κεφάλαιο",
   "Device": "Συσκευή",
-  "E-Ink Mode": "Λειτουργία E-Ink"
+  "E-Ink Mode": "Λειτουργία E-Ink",
+  "Highlight Colors": "Χρώματα επισήμανσης"
 }

apps/readest-app/public/locales/es/translation.json

@@ -613,5 +613,6 @@
   "Contain": "Contener",
   "{{number}} pages left in chapter": "{{number}} páginas restantes en el capítulo",
   "Device": "Dispositivo",
-  "E-Ink Mode": "Modo E-Ink"
+  "E-Ink Mode": "Modo E-Ink",
+  "Highlight Colors": "Colores de resaltado"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -613,5 +613,6 @@
   "Contain": "Contenir",
   "{{number}} pages left in chapter": "{{number}} pages restantes dans le chapitre",
   "Device": "Appareil",
-  "E-Ink Mode": "Mode E-Ink"
+  "E-Ink Mode": "Mode E-Ink",
+  "Highlight Colors": "Couleurs de Surlignage"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -609,5 +609,6 @@
   "Contain": "समाहित करें",
   "{{number}} pages left in chapter": "इस अध्याय में {{number}} पृष्ठ शेष हैं",
   "Device": "डिवाइस",
-  "E-Ink Mode": "ई-इंक मोड"
+  "E-Ink Mode": "ई-इंक मोड",
+  "Highlight Colors": "हाइलाइट रंग"
 }

apps/readest-app/public/locales/id/translation.json

@@ -605,5 +605,6 @@
   "Contain": "Mengandung",
   "{{number}} pages left in chapter": "{{number}} halaman tersisa di bab",
   "Device": "Perangkat",
-  "E-Ink Mode": "Mode E-Ink"
+  "E-Ink Mode": "Mode E-Ink",
+  "Highlight Colors": "Warna Sorotan"
 }

apps/readest-app/public/locales/it/translation.json

@@ -613,5 +613,6 @@
   "Contain": "Contenere",
   "{{number}} pages left in chapter": "{{number}} pagine rimaste nel capitolo",
   "Device": "Dispositivo",
-  "E-Ink Mode": "Modalità E-Ink"
+  "E-Ink Mode": "Modalità E-Ink",
+  "Highlight Colors": "Colori Evidenziazione"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -605,5 +605,6 @@
   "Contain": "含む",
   "{{number}} pages left in chapter": "章に{{number}}ページ残り",
   "Device": "デバイス",
-  "E-Ink Mode": "E-Inkモード"
+  "E-Ink Mode": "E-Inkモード",
+  "Highlight Colors": "ハイライトカラー"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -605,5 +605,6 @@
   "Contain": "포함",
   "{{number}} pages left in chapter": "남은 페이지 {{number}}장",
   "Device": "장치",
-  "E-Ink Mode": "E-Ink 모드"
+  "E-Ink Mode": "E-Ink 모드",
+  "Highlight Colors": "하이라이트 색상"
 }

apps/readest-app/public/locales/nl/translation.json

@@ -609,5 +609,6 @@
   "Contain": "Bevatten",
   "{{number}} pages left in chapter": "Nog {{number}} pagina’s in hoofdstuk",
   "Device": "Apparaat",
-  "E-Ink Mode": "E-Ink Modus"
+  "E-Ink Mode": "E-Ink Modus",
+  "Highlight Colors": "Markeerkleuren"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -617,5 +617,6 @@
   "Contain": "Zawierać",
   "{{number}} pages left in chapter": "Pozostało {{number}} stron w rozdziale",
   "Device": "Urządzenie",
-  "E-Ink Mode": "Tryb E-Ink"
+  "E-Ink Mode": "Tryb E-Ink",
+  "Highlight Colors": "Kolory wyróżnień"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -613,5 +613,6 @@
   "Contain": "Contém",
   "{{number}} pages left in chapter": "Faltam {{number}} páginas neste capítulo",
   "Device": "Dispositivo",
-  "E-Ink Mode": "Modo E-Ink"
+  "E-Ink Mode": "Modo E-Ink",
+  "Highlight Colors": "Cores de Destaque"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -617,5 +617,6 @@
   "Contain": "Содержать",
   "{{number}} pages left in chapter": "Осталось {{number}} страниц в главе",
   "Device": "Устройство",
-  "E-Ink Mode": "E-Ink режим"
+  "E-Ink Mode": "E-Ink режим",
+  "Highlight Colors": "Цвета выделения"
 }

apps/readest-app/public/locales/si/translation.json

@@ -609,5 +609,6 @@
   "Contain": "අඩංගු වන්න",
   "{{number}} pages left in chapter": "පරිච්ඡේදයේ පිටු {{number}} ඉතිරිව ඇත",
   "Device": "උපකරණය",
-  "E-Ink Mode": "E-Ink ආකාරය"
+  "E-Ink Mode": "E-Ink ආකාරය",
+  "Highlight Colors": "ඉස්මතු වර්ණ"
 }

apps/readest-app/public/locales/sv/translation.json

@@ -609,5 +609,6 @@
   "Contain": "Innehålla",
   "{{number}} pages left in chapter": "{{number}} sidor kvar i kapitlet",
   "Device": "Enhet",
-  "E-Ink Mode": "E-Ink-läge"
+  "E-Ink Mode": "E-Ink-läge",
+  "Highlight Colors": "Markeringsfärger"
 }

apps/readest-app/public/locales/ta/translation.json

@@ -609,5 +609,6 @@
   "Contain": "அடங்கும்",
   "{{number}} pages left in chapter": "அத்தியாயத்தில் {{number}} பக்கங்கள் மீதமுள்ளன",
   "Device": "சாதனம்",
-  "E-Ink Mode": "E-Ink முறை"
+  "E-Ink Mode": "E-Ink முறை",
+  "Highlight Colors": "முத்திரை நிறங்கள்"
 }

apps/readest-app/public/locales/th/translation.json

@@ -605,5 +605,6 @@
   "Contain": "บรรจุ",
   "{{number}} pages left in chapter": "เหลือ {{number}} หน้าในบท",
   "Device": "อุปกรณ์",
-  "E-Ink Mode": "โหมด E-Ink"
+  "E-Ink Mode": "โหมด E-Ink",
+  "Highlight Colors": "สีไฮไลต์"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -609,5 +609,6 @@
   "Contain": "İçerir",
   "{{number}} pages left in chapter": "Bu bölümde {{number}} sayfa kaldı",
   "Device": "Cihaz",
-  "E-Ink Mode": "E-Ink Modu"
+  "E-Ink Mode": "E-Ink Modu",
+  "Highlight Colors": "Vurgu Renkleri"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -617,5 +617,6 @@
   "Contain": "Вміщати",
   "{{number}} pages left in chapter": "Залишилось {{number}} сторінок у розділі",
   "Device": "Пристрій",
-  "E-Ink Mode": "E-Ink режим"
+  "E-Ink Mode": "E-Ink режим",
+  "Highlight Colors": "Кольори виділення"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -605,5 +605,6 @@
   "Contain": "Chứa",
   "{{number}} pages left in chapter": "Còn {{number}} trang trong chương",
   "Device": "Thiết bị",
-  "E-Ink Mode": "Chế độ E-Ink"
+  "E-Ink Mode": "Chế độ E-Ink",
+  "Highlight Colors": "Màu nổi bật"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -605,5 +605,6 @@
   "Contain": "适应",
   "{{number}} pages left in chapter": "本章剩余{{number}}页",
   "Device": "设备",
-  "E-Ink Mode": "E-Ink 模式"
+  "E-Ink Mode": "E-Ink 模式",
+  "Highlight Colors": "高亮颜色"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -605,5 +605,6 @@
   "Contain": "適應",
   "{{number}} pages left in chapter": "本章剩餘{{number}}頁",
   "Device": "設備",
-  "E-Ink Mode": "E-Ink 模式"
+  "E-Ink Mode": "E-Ink 模式",
+  "Highlight Colors": "高亮顏色"
 }

apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx

@@ -4,7 +4,6 @@ import { FaCheckCircle } from 'react-icons/fa';
 import { HighlightColor, HighlightStyle } from '@/types/book';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { DEFAULT_CUSTOM_HIGHLIGHT_COLORS } from '@/services/constants';
 
 const styles = ['highlight', 'underline', 'squiggly'] as HighlightStyle[];
 const colors = ['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[];
@@ -26,7 +25,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
 }) => {
   const { settings, setSettings } = useSettingsStore();
   const globalReadSettings = settings.globalReadSettings;
-  const customColors = globalReadSettings.customHighlightColors || DEFAULT_CUSTOM_HIGHLIGHT_COLORS;
+  const customColors = globalReadSettings.customHighlightColors;
   const [selectedStyle, setSelectedStyle] = React.useState<HighlightStyle>(_selectedStyle);
   const [selectedColor, setSelectedColor] = React.useState<HighlightColor>(_selectedColor);
   const size16 = useResponsiveSize(16);
@@ -67,24 +66,27 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
             style={{ width: size28, height: size28, minHeight: size28 }}
           >
             <div
-              style={{ 
-                width: size16, 
+              style={{
+                width: size16,
                 height: style === 'squiggly' ? size18 : size16,
-                ...(style === 'highlight' && selectedStyle === 'highlight' && {
-                  backgroundColor: customColors[selectedColor],
-                  paddingTop: '2px'
-                }),
-                ...(style === 'highlight' && selectedStyle !== 'highlight' && {
-                  backgroundColor: '#d1d5db',
-                  paddingTop: '2px'
-                }),
+                ...(style === 'highlight' &&
+                  selectedStyle === 'highlight' && {
+                    backgroundColor: customColors[selectedColor],
+                    paddingTop: '2px',
+                  }),
+                ...(style === 'highlight' &&
+                  selectedStyle !== 'highlight' && {
+                    backgroundColor: '#d1d5db',
+                    paddingTop: '2px',
+                  }),
                 ...((style === 'underline' || style === 'squiggly') && {
                   color: '#d1d5db',
                   textDecoration: 'underline',
                   textDecorationThickness: '2px',
-                  textDecorationColor: selectedStyle === style ? customColors[selectedColor] : '#d1d5db',
-                  ...(style === 'squiggly' && { textDecorationStyle: 'wavy' })
-                })
+                  textDecorationColor:
+                    selectedStyle === style ? customColors[selectedColor] : '#d1d5db',
+                  ...(style === 'squiggly' && { textDecorationStyle: 'wavy' }),
+                }),
               }}
               className='w-4 p-0 text-center leading-none'
             >
@@ -105,10 +107,10 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
           <button
             key={color}
             onClick={() => handleSelectColor(color)}
-            style={{ 
-              width: size16, 
+            style={{
+              width: size16,
               height: size16,
-              backgroundColor: selectedColor !== color ? customColors[color] : 'transparent'
+              backgroundColor: selectedColor !== color ? customColors[color] : 'transparent',
             }}
             className='rounded-full p-0'
           >

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

@@ -25,11 +25,11 @@ import { CODE_LANGUAGES, CodeLanguage, manageSyntaxHighlighting } from '@/utils/
 import { SettingsPanelPanelProp } from './SettingsDialog';
 import { useFileSelector } from '@/hooks/useFileSelector';
 import { PREDEFINED_TEXTURES } from '@/styles/textures';
+import { HighlightColor } from '@/types/book';
 import Select from '@/components/Select';
 import ThemeEditor from './ThemeEditor';
 import ColorInput from './ColorInput';
-import { HighlightColor } from '@/types/book';
-import { DEFAULT_CUSTOM_HIGHLIGHT_COLORS } from '@/services/constants';
+import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 
 const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
   const _ = useTranslation();
@@ -56,8 +56,8 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
   const [backgroundOpacity, setBackgroundOpacity] = useState(viewSettings.backgroundOpacity);
   const [backgroundSize, setBackgroundSize] = useState(viewSettings.backgroundSize);
 
-  const [customHighlightColors, setCustomHighlightColors] = useState<Record<HighlightColor, string>>(
-    settings.globalReadSettings.customHighlightColors || DEFAULT_CUSTOM_HIGHLIGHT_COLORS,
+  const [customHighlightColors, setCustomHighlightColors] = useState(
+    settings.globalReadSettings.customHighlightColors,
   );
 
   const {
@@ -83,9 +83,9 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
     setThemeColor('default');
     setThemeMode('auto');
     setSelectedTextureId('none');
-    setBackgroundOpacity(0.4);
-    setBackgroundSize('2048px');
-    setCustomHighlightColors(DEFAULT_CUSTOM_HIGHLIGHT_COLORS);
+    setBackgroundOpacity(0.6);
+    setBackgroundSize('cover');
+    setCustomHighlightColors(HIGHLIGHT_COLOR_HEX);
   };
 
   useEffect(() => {
@@ -442,32 +442,36 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
           </div>
 
           <div>
-            <h2 className='mb-2 font-medium'>{_('Custom Highlight Colors')}</h2>
-            <div className='card border-base-200 bg-base-100 border p-4 shadow overflow-visible'>
+            <h2 className='mb-2 font-medium'>{_('Highlight Colors')}</h2>
+            <div className='card border-base-200 bg-base-100 overflow-visible border p-4 shadow'>
               <div className='flex items-center justify-around gap-2'>
-                {(['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[]).map((color, index, array) => {
-                  const position = index === 0 ? 'left' : index === array.length - 1 ? 'right' : 'center';
-                  return (
-                    <div key={color} className='flex flex-col items-center gap-2'>
-                      <div
-                        className='h-8 w-8 rounded-full border-2 border-base-300 shadow-sm'
-                        style={{ backgroundColor: customHighlightColors[color] }}
-                      />
-                      <ColorInput
-                        label=''
-                        value={customHighlightColors[color]}
-                        compact={true}
-                        pickerPosition={position}
-                        onChange={(value: string) => {
-                          customHighlightColors[color] = value;
-                          setCustomHighlightColors({ ...customHighlightColors });
-                          settings.globalReadSettings.customHighlightColors = customHighlightColors;
-                          setSettings(settings);
-                        }}
-                      />
-                    </div>
-                  );
-                })}
+                {(['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[]).map(
+                  (color, index, array) => {
+                    const position =
+                      index === 0 ? 'left' : index === array.length - 1 ? 'right' : 'center';
+                    return (
+                      <div key={color} className='flex flex-col items-center gap-2'>
+                        <div
+                          className='border-base-300 h-8 w-8 rounded-full border-2 shadow-sm'
+                          style={{ backgroundColor: customHighlightColors[color] }}
+                        />
+                        <ColorInput
+                          label=''
+                          value={customHighlightColors[color]}
+                          compact={true}
+                          pickerPosition={position}
+                          onChange={(value: string) => {
+                            customHighlightColors[color] = value;
+                            setCustomHighlightColors({ ...customHighlightColors });
+                            settings.globalReadSettings.customHighlightColors =
+                              customHighlightColors;
+                            setSettings(settings);
+                          }}
+                        />
+                      </div>
+                    );
+                  },
+                )}
               </div>
             </div>
           </div>

apps/readest-app/src/services/constants.ts

@@ -78,12 +78,12 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   lastSyncedAtNotes: 0,
 };
 
-export const DEFAULT_CUSTOM_HIGHLIGHT_COLORS: Record<HighlightColor, string> = {
-  red: '#fca5a5', // red-300
-  yellow: '#fde047', // yellow-300
-  green: '#86efac', // green-300
-  blue: '#93c5fd', // blue-300
-  violet: '#c4b5fd', // violet-300
+export const HIGHLIGHT_COLOR_HEX: Record<HighlightColor, string> = {
+  red: '#f87171', // red-400
+  yellow: '#facc15', // yellow-400
+  green: '#4ade80', // green-400
+  blue: '#60a5fa', // blue-400
+  violet: '#a78bfa', // violet-400
 };
 
 export const DEFAULT_READSETTINGS: ReadSettings = {
@@ -102,7 +102,7 @@ export const DEFAULT_READSETTINGS: ReadSettings = {
     underline: 'green',
     squiggly: 'blue',
   },
-  customHighlightColors: DEFAULT_CUSTOM_HIGHLIGHT_COLORS,
+  customHighlightColors: HIGHLIGHT_COLOR_HEX,
 };
 
 export const DEFAULT_MOBILE_READSETTINGS: Partial<ReadSettings> = {
@@ -617,14 +617,6 @@ export const DOUBLE_CLICK_INTERVAL_THRESHOLD_MS = 250;
 export const DISABLE_DOUBLE_CLICK_ON_MOBILE = true;
 export const LONG_HOLD_THRESHOLD = 500;
 
-export const HIGHLIGHT_COLOR_HEX: Record<HighlightColor, string> = {
-  red: '#f87171', // red-400
-  yellow: '#facc15', // yellow-400
-  green: '#4ade80', // green-400
-  blue: '#60a5fa', // blue-400
-  violet: '#a78bfa', // violet-400
-};
-
 export const CUSTOM_THEME_TEMPLATES = [
   {
     light: {