From cebe8812d312fa3d8c0dc1efcfe6b96e3cbbba64 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 5 Feb 2025 16:57:53 +0100
Subject: [PATCH] i18n: translate Sans-serif and Serif font labels (#300)

---
 .../public/locales/ja/translation.json            |  2 +-
 .../reader/components/settings/FontDropDown.tsx   | 13 +++++++++----
 .../app/reader/components/settings/FontPanel.tsx  | 15 ++++++++++++---
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/readest-app/public/locales/ja/translation.json b/apps/readest-app/public/locales/ja/translation.json
index aaebe380..becaa65a 100644
--- a/apps/readest-app/public/locales/ja/translation.json
+++ b/apps/readest-app/public/locales/ja/translation.json
@@ -99,7 +99,7 @@
   "Select Books": "書籍を選択",
   "Select Multiple Books": "複数の書籍を選択",
   "Sepia": "セピア",
-  "Serif Font": "明朝体",
+  "Serif Font": "セリフ体",
   "Show Book Details": "書籍の詳細を表示",
   "Sidebar": "サイドバー",
   "Sign In": "サインイン",
diff --git a/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx b/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
index e1689816..f77deef1 100644
--- a/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
@@ -8,7 +8,7 @@ import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize
 interface DropdownProps {
   family?: string;
   selected: string;
-  options: string[];
+  options: { option: string; label: string }[];
   moreOptions?: string[];
   onSelect: (option: string) => void;
   onGetFontFamily: (option: string, family: string) => string;
@@ -25,26 +25,31 @@ const FontDropdown: React.FC<DropdownProps> = ({
   const _ = useTranslation();
   const iconSize16 = useResponsiveSize(16);
   const defaultIconSize = useDefaultIconSize();
+  const selectedOption = options.find((option) => option.option === selected)!;
   return (
     <div className='dropdown dropdown-top'>
       <button
         tabIndex={0}
         className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
       >
-        <span style={{ fontFamily: onGetFontFamily(selected, family ?? '') }}>{selected}</span>
+        <span style={{ fontFamily: onGetFontFamily(selectedOption.option, family ?? '') }}>
+          {selectedOption.label}
+        </span>
         <FiChevronUp size={iconSize16} />
       </button>
       <ul
         tabIndex={0}
         className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
       >
-        {options.map((option) => (
+        {options.map(({ option, label }) => (
           <li key={option} onClick={() => onSelect(option)}>
             <div className='flex items-center px-0'>
               <span style={{ minWidth: `${defaultIconSize}px` }}>
                 {selected === option && <MdCheck className='text-base-content' />}
               </span>
-              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>{option}</span>
+              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
+                {label || option}
+              </span>
             </div>
           </li>
         ))}
diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
index 6edd7901..93a03365 100644
--- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
@@ -32,8 +32,6 @@ interface FontFaceProps {
   onSelect: (option: string) => void;
 }
 
-const fontFamilyOptions = ['Serif', 'Sans-serif'];
-
 const handleFontFaceFont = (option: string, family: string) => {
   return `'${option}', ${family}`;
 };
@@ -51,7 +49,7 @@ const FontFace = ({
     <span className=''>{label}</span>
     <FontDropdown
       family={family}
-      options={options}
+      options={options.map((option) => ({ option, label: option }))}
       moreOptions={moreOptions}
       selected={selected}
       onSelect={onSelect}
@@ -68,6 +66,17 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const viewSettings = getViewSettings(bookKey)!;
   const { themeCode } = useTheme();
 
+  const fontFamilyOptions = [
+    {
+      option: 'Serif',
+      label: _('Serif Font'),
+    },
+    {
+      option: 'Sans-serif',
+      label: _('Sans-Serif Font'),
+    },
+  ];
+
   const osPlatform = getOSPlatform();
   let defaultSysFonts: string[] = [];
   switch (osPlatform) {