i18n: translate Sans-serif and Serif font labels (#300)

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": "サインイン",

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>
         ))}

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) {