优化了一些细节

messages/en-US.json

@@ -66,11 +66,11 @@
       "description": "Play videos sentence by sentence based on SRT subtitle files to mimic native speaker pronunciation"
     },
     "alphabet": {
-      "name": "Memorize Alphabet",
+      "name": "Alphabet",
       "description": "Start learning a new language from the alphabet"
     },
     "memorize": {
-      "name": "Memorize Words",
+      "name": "Memorize",
       "description": "Language A to Language B, Language B to Language A, supports dictation"
     },
     "moreFeatures": {
@@ -94,7 +94,6 @@
       "reverse": "Reverse",
       "dictation": "Dictation",
       "noTextPairs": "No text pairs available",
-      "progress": "{current}/{total}",
       "disorder": "Disorder",
       "previous": "Previous"
     },

messages/zh-CN.json

@@ -62,15 +62,15 @@
       "description": "识别并朗读文本，支持循环朗读、朗读速度调节"
     },
     "srtPlayer": {
-      "name": "逐句视频播放器",
+      "name": "逐句放视频",
       "description": "基于SRT字幕文件，逐句播放视频以模仿母语者的发音"
     },
     "alphabet": {
-      "name": "背字母",
+      "name": "字母表",
       "description": "从字母表开始新语言的学习"
     },
     "memorize": {
-      "name": "背单词",
+      "name": "记忆",
       "description": "语言A到语言B，语言B到语言A，支持听写"
     },
     "moreFeatures": {
@@ -98,7 +98,6 @@
       "reverse": "反向",
       "dictation": "听写",
       "noTextPairs": "没有可用的文本对",
-      "progress": "{current}/{total}",
       "disorder": "乱序",
       "previous": "上一个"
     },

src/app/(features)/memorize/Memorize.tsx

@@ -3,13 +3,14 @@
 import { Center } from "@/components/Center";
 import { text_pair } from "../../../../generated/prisma/browser";
 import Container from "@/components/cards/Container";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import LightButton from "@/components/buttons/LightButton";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 import { getTTSAudioUrl } from "@/lib/browser/tts";
 import { VOICES } from "@/config/locales";
 import { useTranslations } from "next-intl";
 import localFont from "next/font/local";
+import { isNonNegativeInteger } from "@/lib/utils";
 
 const myFont = localFont({
   src: "../../../../public/fonts/NotoNaskhArabic-VariableFont_wght.ttf",
@@ -44,54 +45,70 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
   };
 
   return (
-    <Center>
-      <Container className="p-6 flex flex-col gap-8 h-96 justify-center items-center">
+    <>
       {(getTextPairs().length > 0 && (
         <>
+          <div className="text-center">
             <div
-              className={`h-36 flex flex-col gap-2 justify-start items-center ${myFont.className} text-3xl`}
+              className="text-sm text-gray-500"
+              onClick={() => {
+                const newIndex = prompt("Input a index number.")?.trim();
+                if (
+                  newIndex &&
+                  isNonNegativeInteger(newIndex) &&
+                  parseInt(newIndex) <= textPairs.length &&
+                  parseInt(newIndex) > 0
+                ) {
+                  setIndex(parseInt(newIndex) - 1);
+                }
+              }}
             >
-              <div className="text-sm text-gray-500">
-                {t("progress", {
-                  current: index + 1,
-                  total: getTextPairs().length,
-                })}
+              {index + 1}
+              {"/" + getTextPairs().length}
             </div>
-              {dictation ? (
-                show === "question" ? (
-                  ""
-                ) : (
+            <div className="h-[40dvh] px-16">
+              {(() => {
+                const createText = (text: string) => {
+                  return (
+                    <div className="text-gray-900 text-xl border-y border-y-gray-200 p-4 md:text-3xl h-[20dvh] overflow-y-auto">
+                      {text}
+                    </div>
+                  );
+                };
+
+                const [text1, text2] = reverse
+                  ? [getTextPairs()[index].text2, getTextPairs()[index].text1]
+                  : [getTextPairs()[index].text1, getTextPairs()[index].text2];
+
+                if (dictation) {
+                  // dictation
+                  if (show === "question") {
+                    return createText("");
+                  } else {
+                    return (
                       <>
-                    <div>
-                      {reverse
-                        ? getTextPairs()[index].text2
-                        : getTextPairs()[index].text1}
-                    </div>
-                    <div>
-                      {reverse
-                        ? getTextPairs()[index].text1
-                        : getTextPairs()[index].text2}
-                    </div>
+                        {createText(text1)}
+                        {createText(text2)}
                       </>
-                )
-              ) : (
+                    );
+                  }
+                } else {
+                  // non-dictation
+                  if (show === "question") {
+                    return createText(text1);
+                  } else {
+                    return (
                       <>
-                  <div>
-                    {reverse
-                      ? getTextPairs()[index].text2
-                      : getTextPairs()[index].text1}
-                  </div>
-                  <div>
-                    {show === "answer"
-                      ? reverse
-                        ? getTextPairs()[index].text1
-                        : getTextPairs()[index].text2
-                      : ""}
-                  </div>
+                        {createText(text1)}
+                        {createText(text2)}
                       </>
-              )}
+                    );
+                  }
+                }
+              })()}
             </div>
-            <div className="flex flex-row gap-2 items-center justify-center">
+          </div>
+          <div className="flex flex-row gap-2 items-center justify-center flex-wrap">
             <LightButton
               className="w-20"
               onClick={async () => {
@@ -155,8 +172,7 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
           </div>
         </>
       )) || <p>{t("noTextPairs")}</p>}
-      </Container>
-    </Center>
+    </>
   );
 };
 

src/app/(features)/translator/FolderSelector.tsx

@@ -23,7 +23,7 @@ const FolderSelector: React.FC<FolderSelectorProps> = ({
     getFoldersByOwner(username)
       .then(setFolders)
       .then(() => setLoading(false));
-  }, []);
+  }, [username]);
 
   return (
     <div

src/app/(features)/translator/page.tsx

@@ -325,8 +325,10 @@ export default function TranslatorPage() {
           <h1 className="text-2xl font-light">{t("history")}</h1>
           <div className="border border-gray-200 rounded-2xl m-4">
             {history.toReversed().map((item, index) => (
-              <div key={index}>
-                <div className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start">
+              <div
+                key={index}
+                className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start"
+              >
                 <div className="flex-1 flex flex-col">
                   <p className="text-sm font-light">{item.text1}</p>
                   <p className="text-sm font-light">{item.text2}</p>
@@ -355,7 +357,6 @@ export default function TranslatorPage() {
                   </button>
                 </div>
               </div>
-              </div>
             ))}
           </div>
           {showAddToFolder && (

src/app/folders/[folder_id]/TextPairCard.tsx

@@ -51,8 +51,16 @@ export default function TextPairCard({
           </div>
         </div>
         <div className="text-gray-900 grid grid-cols-2 gap-4 w-3/4">
-          <div>{textPair.text1}</div>
-          <div>{textPair.text2}</div>
+          <div>
+            {textPair.text1.length > 30
+              ? textPair.text1.substring(0, 30) + "..."
+              : textPair.text1}
+          </div>
+          <div>
+            {textPair.text2.length > 30
+              ? textPair.text2.substring(0, 30) + "..."
+              : textPair.text2}
+          </div>
         </div>
       </div>
       <UpdateTextPairModal

src/app/page.tsx

@@ -29,8 +29,8 @@ export default function HomePage() {
         className={`h-32 md:h-64 flex md:justify-center items-center`}
       >
         <div className="text-white m-8">
-          <h1 className="text-4xl">{name}</h1>
-          <p className="text-xl">{description}</p>
+          <h1 className="md:text-4xl text-3xl">{name}</h1>
+          <p className="md:text-xl">{description}</p>
         </div>
       </Link>
     );
@@ -50,11 +50,6 @@ export default function HomePage() {
           description={t("textSpeaker.description")}
           color="#578aad"
         ></LinkArea>
-        {/* <LinkArea
-          href="/word-board"
-          name="词墙"
-          description="将单词固定到一片区域，高效便捷地记忆单词"
-          color="#e9b353"></LinkArea> */}
         <LinkArea
           href="/srt-player"
           name={t("srtPlayer.name")}
@@ -92,8 +87,7 @@ export default function HomePage() {
   }
   function Explore() {
     return (
-      <div className="bg-[#bbbbbb] w-full flex justify-center items-center flex-col h-52">
-        <span className="text-[100px] text-white">{t("explore")}</span>
+      <div className="bg-[#bbbbbb] w-full flex justify-center items-center flex-col h-32">
         <div className="w-0 h-0 border-l-40 border-r-40 border-t-30 border-l-transparent border-r-transparent border-t-white"></div>
       </div>
     );