完成了对记忆功能的升级

.env.example

@@ -5,3 +5,4 @@ GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 
 NEXTAUTH_URL=
+DATABASE_URL=

.gitignore

@@ -46,3 +46,4 @@ next-env.d.ts
 build.sh
 
 test.ts
+/generated/prisma

package.json

@@ -10,28 +10,29 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@prisma/client": "^6.19.0",
     "bcryptjs": "^3.0.3",
     "edge-tts-universal": "^1.3.2",
+    "lucide-react": "^0.553.0",
     "next": "15.5.3",
     "next-auth": "^4.24.13",
-    "next-intl": "^4.4.0",
-    "pg": "^8.16.3",
+    "next-intl": "^4.5.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "unstorage": "^1.17.2",
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
+    "@eslint/eslintrc": "^3.3.1",
+    "@tailwindcss/postcss": "^4.1.17",
     "@types/bcryptjs": "^2.4.6",
-    "@types/node": "^20",
-    "@types/pg": "^8.15.6",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
+    "@types/node": "^20.19.25",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.1",
     "eslint-config-next": "15.5.3",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "prisma": "^6.19.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3"
   }
 }

prisma.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, env } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  engine: "classic",
+  datasource: {
+    url: env("DATABASE_URL"),
+  },
+});

prisma/migrations/0_init/migration.sql

@@ -0,0 +1,28 @@
+-- CreateTable
+CREATE TABLE "text_pair" (
+    "id" SERIAL NOT NULL,
+    "locale1" VARCHAR(10) NOT NULL,
+    "locale2" VARCHAR(10) NOT NULL,
+    "text1" TEXT NOT NULL,
+    "text2" TEXT NOT NULL,
+    "folder_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "text_pairs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "folder" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "owner" TEXT NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "folders_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "text_pair" ADD CONSTRAINT "fk_text_pairs_folder" FOREIGN KEY ("folder_id") REFERENCES "folder"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+

prisma/schema.prisma

@@ -0,0 +1,31 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+/// This table contains check constraints and requires additional setup for migrations. Visit https://pris.ly/d/check-constraints for more info.
+model text_pair {
+  id         Int       @id(map: "text_pairs_pkey") @default(autoincrement())
+  locale1    String    @db.VarChar(10)
+  locale2    String    @db.VarChar(10)
+  text1      String
+  text2      String
+  folder_id  Int
+  created_at DateTime? @default(now()) @db.Timestamptz(6)
+  updated_at DateTime? @default(now()) @db.Timestamptz(6)
+  folders    folder    @relation(fields: [folder_id], references: [id], onDelete: Cascade, map: "fk_text_pairs_folder")
+}
+
+model folder {
+  id         Int         @id(map: "folders_pkey") @default(autoincrement())
+  name       String
+  owner      String
+  created_at DateTime?   @default(now()) @db.Timestamptz(6)
+  updated_at DateTime?   @default(now()) @db.Timestamptz(6)
+  text_pair  text_pair[]
+}

public/images/logo.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="180.425mm"
+   height="66.658363mm"
+   viewBox="0 0 180.425 66.658363"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-19.117989,-118.50376)">
+    <rect
+       style="fill:#00ccff;stroke-width:4.38923"
+       id="rect1"
+       width="180.42502"
+       height="66.658356"
+       x="19.117989"
+       y="118.50375" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:52.6706px;font-family:'Noto Serif';-inkscape-font-specification:'Noto Serif';text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#f2f2f2;stroke-width:4.38923"
+       x="29.942305"
+       y="167.45377"
+       id="text1"
+       transform="scale(0.98306332,1.0172285)"><tspan
+         id="tspan1"
+         style="fill:#f2f2f2;stroke-width:4.38923"
+         x="29.942305"
+         y="167.45377">Learn!</tspan></text>
+  </g>
+</svg>

src/app/(features)/alphabet/MemoryCard.tsx

@@ -1,7 +1,7 @@
 import LightButton from "@/components/buttons/LightButton";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
-import { Letter, SupportedAlphabets } from "@/interfaces";
+import { Letter, SupportedAlphabets } from "@/lib/interfaces";
 import {
   Dispatch,
   KeyboardEvent,

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

@@ -1,7 +1,7 @@
 "use client";
 
 import LightButton from "@/components/buttons/LightButton";
-import { Letter, SupportedAlphabets } from "@/interfaces";
+import { Letter, SupportedAlphabets } from "@/lib/interfaces";
 import { useEffect, useState } from "react";
 import MemoryCard from "./MemoryCard";
 

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

@@ -0,0 +1,53 @@
+"use client";
+
+import Container from "@/components/cards/Container";
+import { folder } from "../../../../generated/prisma/client";
+import { Folder } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Center } from "@/components/Center";
+
+interface FolderSelectorProps {
+  folders: (folder & { total_pairs: number })[];
+}
+
+const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
+  const router = useRouter();
+  return (
+    <Center>
+      <Container className="p-6 gap-4 flex flex-col">
+        {(folders.length === 0 && (
+          <h1 className="text-2xl text-gray-900 font-light">
+            No folders found.
+          </h1>
+        )) || (
+          <>
+            <h1 className="text-2xl text-gray-900 font-light">
+              Select a folder:
+            </h1>
+            <div className="text-gray-900 border border-gray-200 rounded-2xl max-h-96 overflow-y-auto">
+              {folders.map((folder) => (
+                <div
+                  key={folder.id}
+                  onClick={() =>
+                    router.push(`/memorize?folder_id=${folder.id}`)
+                  }
+                  className="flex flex-row justify-center items-center group p-2 gap-2 hover:cursor-pointer hover:bg-gray-50"
+                >
+                  <Folder />
+                  <div className="flex-1 flex gap-2">
+                    <span className="group-hover:text-blue-500">
+                      {folder.name}
+                    </span>
+                    <span>({folder.total_pairs})</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
+    </Center>
+  );
+};
+
+export default FolderSelector;

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { Center } from "@/components/Center";
+import { text_pair } from "../../../../generated/prisma/browser";
+import Container from "@/components/cards/Container";
+import { useState } from "react";
+import LightButton from "@/components/buttons/LightButton";
+import { useAudioPlayer } from "@/hooks/useAudioPlayer";
+import { getTTSAudioUrl } from "@/lib/tts";
+import { VOICES } from "@/config/locales";
+
+interface MemorizeProps {
+  textPairs: text_pair[];
+}
+
+const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
+  const [reverse, setReverse] = useState(false);
+  const [dictation, setDictation] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [show, setShow] = useState<"question" | "answer">("question");
+  const { load, play } = useAudioPlayer();
+
+  return (
+    <Center>
+      <Container className="p-6 flex flex-col gap-8 h-96 justify-center items-center">
+        {(textPairs.length > 0 && (
+          <>
+            <div className="h-36 flex flex-col gap-2 justify-start items-center font-serif text-3xl">
+              <div className="text-sm text-gray-500">
+                {index + 1}/{textPairs.length}
+              </div>
+              {dictation ? (
+                show === "question" ? (
+                  ""
+                ) : (
+                  <>
+                    <div>
+                      {reverse
+                        ? textPairs[index].text2
+                        : textPairs[index].text1}
+                    </div>
+                    <div>
+                      {reverse
+                        ? textPairs[index].text1
+                        : textPairs[index].text2}
+                    </div>
+                  </>
+                )
+              ) : (
+                <>
+                  <div>
+                    {reverse ? textPairs[index].text2 : textPairs[index].text1}
+                  </div>
+                  <div>
+                    {show === "answer"
+                      ? reverse
+                        ? textPairs[index].text1
+                        : textPairs[index].text2
+                      : ""}
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="flex flex-row gap-2 items-center justify-center">
+              <LightButton
+                className="w-32"
+                onClick={async () => {
+                  if (show === "answer") {
+                    const newIndex = (index + 1) % textPairs.length;
+                    setIndex(newIndex);
+                    if (dictation)
+                      getTTSAudioUrl(
+                        textPairs[newIndex][reverse ? "text2" : "text1"],
+                        VOICES.find(
+                          (v) =>
+                            v.locale ===
+                            textPairs[newIndex][
+                              reverse ? "locale2" : "locale1"
+                            ],
+                        )!.short_name,
+                      ).then((url) => {
+                        load(url);
+                        play();
+                      });
+                  }
+                  setShow(show === "question" ? "answer" : "question");
+                }}
+              >
+                {show === "question" ? "Show Answer" : "Next"}
+              </LightButton>
+              <LightButton
+                onClick={() => {
+                  setReverse(!reverse);
+                }}
+                selected={reverse}
+              >
+                Reverse
+              </LightButton>
+              <LightButton
+                onClick={() => {
+                  setDictation(!dictation);
+                }}
+                selected={dictation}
+              >
+                Dictation
+              </LightButton>
+            </div>
+          </>
+        )) || <p>No text pairs available</p>}
+      </Container>
+    </Center>
+  );
+};
+
+export default Memorize;

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

@@ -0,0 +1,45 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import {
+  getFoldersByOwner,
+  getFoldersWithTotalPairsByOwner,
+  getOwnerByFolderId,
+} from "@/lib/services/folderService";
+import { isNonNegativeInteger } from "@/lib/utils";
+import FolderSelector from "./FolderSelector";
+import Memorize from "./Memorize";
+import { getTextPairsByFolderId } from "@/lib/services/textPairService";
+
+export default async function MemorizePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ folder_id?: string }>;
+}) {
+  const session = await getServerSession();
+  const username = session?.user?.name;
+
+  const t = (await searchParams).folder_id;
+  const folder_id = t ? (isNonNegativeInteger(t) ? parseInt(t) : null) : null;
+
+  if (!username)
+    redirect(
+      `/login?redirect=/memorize${folder_id ? `?folder_id=${folder_id}` : ""}`,
+    );
+
+  if (!folder_id) {
+    return (
+      <FolderSelector
+        folders={await getFoldersWithTotalPairsByOwner(username)}
+      />
+    );
+  }
+
+  const owner = await getOwnerByFolderId(folder_id);
+  if (owner !== username) {
+    return <p>无权访问该文件夹</p>;
+  }
+
+  return <Memorize textPairs={await getTextPairsByFolderId(folder_id)} />;
+}

src/app/(features)/srt-player/VideoPlayer/SubtitleDisplay.tsx

@@ -1,4 +1,4 @@
-import { inspect } from "@/utils";
+import { inspect } from "@/lib/utils";
 
 export default function SubtitleDisplay({ subtitle }: { subtitle: string }) {
   const words = subtitle.match(/\b[\w']+(?:-[\w']+)*\b/g) || [];

src/app/(features)/text-speaker/SaveList.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import { getLocalStorageOperator } from "@/utils";
+import { getLocalStorageOperator } from "@/lib/utils";
 import { useState } from "react";
 import z from "zod";
-import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/interfaces";
+import {
+  TextSpeakerArraySchema,
+  TextSpeakerItemSchema,
+} from "@/lib/interfaces";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { useTranslations } from "next-intl";
@@ -49,9 +52,11 @@ interface SaveListProps {
 }
 export default function SaveList({ show = false, handleUse }: SaveListProps) {
   const t = useTranslations("text-speaker");
-  const { get: getFromLocalStorage, set: setIntoLocalStorage } = getLocalStorageOperator<
-    typeof TextSpeakerArraySchema
-  >("text-speaker", TextSpeakerArraySchema);
+  const { get: getFromLocalStorage, set: setIntoLocalStorage } =
+    getLocalStorageOperator<typeof TextSpeakerArraySchema>(
+      "text-speaker",
+      TextSpeakerArraySchema,
+    );
   const [data, setData] = useState(getFromLocalStorage());
   const handleDel = (item: z.infer<typeof TextSpeakerItemSchema>) => {
     const current_data = getFromLocalStorage();

src/app/(features)/text-speaker/page.tsx

@@ -4,8 +4,8 @@ import LightButton from "@/components/buttons/LightButton";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/interfaces";
-import { getLocalStorageOperator, getTTSAudioUrl } from "@/utils";
+import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/lib/interfaces";
+import { getLocalStorageOperator, getTTSAudioUrl } from "@/lib/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import z from "zod";
 import SaveList from "./SaveList";

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

@@ -1,14 +1,15 @@
 "use client";
 
 import LightButton from "@/components/buttons/LightButton";
+import Container from "@/components/cards/Container";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { VOICES } from "@/config/locales";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { TranslationHistorySchema } from "@/interfaces";
+import { TranslationHistorySchema } from "@/lib/interfaces";
 import { tlsoPush, tlso } from "@/lib/localStorageOperators";
 import { getTTSAudioUrl } from "@/lib/tts";
-import { letsFetch } from "@/utils";
+import { letsFetch } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
 import z from "zod";
@@ -23,6 +24,9 @@ export default function TranslatorPage() {
   const [ipaTexts, setIpaTexts] = useState(["", ""]);
   const [processing, setProcessing] = useState(false);
   const { load, play } = useAudioPlayer();
+  const [history, setHistory] = useState<
+    z.infer<typeof TranslationHistorySchema>[]
+  >(tlso.get());
 
   const lastTTS = useRef({
     text: "",
@@ -64,6 +68,7 @@ export default function TranslatorPage() {
     const checkUpdateLocalStorage = (item: typeof newItem) => {
       if (item.text1 && item.text2 && item.locale1 && item.locale2) {
         tlsoPush(item as z.infer<typeof TranslationHistorySchema>);
+        setHistory(tlso.get());
       }
     };
     const innerStates = {
@@ -250,6 +255,18 @@ export default function TranslatorPage() {
           {t("translate")}
         </button>
       </div>
+      {history.length > 0 && (
+        <Container className="m-6 flex flex-col p-6">
+          <h1 className="text-2xl font-light">History</h1>
+          <ul className="list-disc list-inside">
+            {history.map((item, index) => (
+              <li key={index}>
+                <span className="font-bold">{item.text1}</span> - {item.text2}
+              </li>
+            ))}
+          </ul>
+        </Container>
+      )}
     </>
   );
 }

src/app/(features)/word-board/TheBoard.tsx

@@ -6,7 +6,7 @@ import {
   BOARD_HEIGHT,
   TEXT_SIZE,
 } from "@/config/word-board-config";
-import { Word } from "@/interfaces";
+import { Word } from "@/lib/interfaces";
 import { Dispatch, SetStateAction } from "react";
 
 export default function TheBoard({

src/app/(features)/word-board/page.tsx

@@ -1,15 +1,15 @@
 "use client";
-import TheBoard from "@/app/word-board/TheBoard";
-import LightButton from "../../components/buttons/LightButton";
+import TheBoard from "@/app/(features)/word-board/TheBoard";
+import LightButton from "../../../components/buttons/LightButton";
 import { KeyboardEvent, useRef, useState } from "react";
-import { Word } from "@/interfaces";
+import { Word } from "@/lib/interfaces";
 import {
   BOARD_WIDTH,
   TEXT_WIDTH,
   BOARD_HEIGHT,
   TEXT_SIZE,
 } from "@/config/word-board-config";
-import { inspect } from "@/utils";
+import { inspect } from "@/lib/utils";
 
 export default function WordBoardPage() {
   const inputRef = useRef<HTMLInputElement>(null);

src/app/api/folder/[id]/route.ts

@@ -1,18 +0,0 @@
-import { getServerSession } from "next-auth";
-import { NextResponse } from "next/server";
-import { authOptions } from "../../auth/[...nextauth]/route";
-import { WordPairController } from "@/lib/db";
-
-export async function GET({ params }: { params: { slug: number } }) {
-  const session = await getServerSession(authOptions);
-  if (session) {
-    const id = params.slug;
-    return new NextResponse(
-      JSON.stringify(
-        await WordPairController.getWordPairsByFolderId(id),
-      ),
-    );
-  } else {
-    return new NextResponse("Unauthorized");
-  }
-}

src/app/api/folders/route.ts

@@ -1,35 +0,0 @@
-import { getServerSession } from "next-auth";
-import { NextRequest, NextResponse } from "next/server";
-import { authOptions } from "../auth/[...nextauth]/route";
-import { FolderController } from "@/lib/db";
-
-export async function GET() {
-  const session = await getServerSession(authOptions);
-  if (session) {
-    return new NextResponse(
-      JSON.stringify(
-        await FolderController.getFoldersByOwner(session.user!.name as string),
-      ),
-    );
-  } else {
-    return new NextResponse("Unauthorized");
-  }
-}
-
-export async function POST(req: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (session) {
-    const body = await req.json();
-
-    return new NextResponse(
-      JSON.stringify(
-        await FolderController.createFolder(
-          body.name,
-          session.user!.name as string,
-        ),
-      ),
-    );
-  } else {
-    return new NextResponse("Unauthorized");
-  }
-}

src/app/api/ipa/route.ts

@@ -1,4 +1,4 @@
-import { callZhipuAPI, handleAPIError } from "@/utils";
+import { callZhipuAPI, handleAPIError } from "@/lib/utils";
 import { NextRequest, NextResponse } from "next/server";
 
 async function getIPA(text: string) {

src/app/api/locale/route.ts

@@ -1,4 +1,4 @@
-import { callZhipuAPI } from "@/utils";
+import { callZhipuAPI } from "@/lib/utils";
 import { NextRequest, NextResponse } from "next/server";
 
 async function getLocale(text: string) {

src/app/api/translate/route.ts

@@ -1,4 +1,4 @@
-import { callZhipuAPI } from "@/utils";
+import { callZhipuAPI } from "@/lib/utils";
 import { NextRequest, NextResponse } from "next/server";
 
 async function translate(text: string, target_lang: string) {

src/app/folders/FoldersClient.tsx

@@ -1,103 +1,141 @@
 "use client";
 
-import DarkButton from "@/components/buttons/DarkButton";
-import LightButton from "@/components/buttons/LightButton";
-import ACard from "@/components/cards/ACard";
+import {
+  ChevronRight,
+  Folder,
+  FolderPlus,
+  Trash2,
+} from "lucide-react";
+import { useEffect, useState } from "react";
 import { Center } from "@/components/Center";
+import { useRouter } from "next/navigation";
+import { folder } from "../../../generated/prisma/browser";
 import {
   createFolder,
   deleteFolderById,
-  getFoldersWithTextPairsCountByOwner,
-} from "@/lib/controllers/FolderController";
-import { useEffect, useState } from "react";
-import InFolder from "./InFolder";
-
-interface Folder {
-  id: number;
-  name: string;
-  text_pairs_count: number;
-}
+  getFoldersByOwner,
+} from "@/lib/services/folderService";
 
 interface FolderProps {
-  folder: Folder;
+  folder: folder;
   deleteCallback: () => void;
   openCallback: () => void;
 }
 
 const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
   return (
-    <div className="flex flex-row items-center justify-center border">
-      <div className="flex-1">
-        <div>ID: {folder.id}</div>
-        <div>Name: {folder.name}</div>
-        <div>Text Pairs Count: {folder.text_pairs_count}</div>
+    <div
+      className="flex justify-between items-center group p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors"
+      onClick={openCallback}
+    >
+      <div className="flex items-center gap-3 flex-1">
+        <div className="w-10 h-10 rounded-lg bg-linear-to-br from-blue-50 to-blue-100 flex items-center justify-center group-hover:from-blue-100 group-hover:to-blue-200 transition-colors">
+          <Folder></Folder>
+        </div>
+
+        <div className="flex-1">
+          <h3 className="font-medium text-gray-900">{folder.name}</h3>
+          {/*<p className="text-sm text-gray-500">{} items</p>*/}
+        </div>
+
+        <div className="text-xs text-gray-400">#{folder.id}</div>
+      </div>
+
+      <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            deleteCallback();
+          }}
+          className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+        >
+          <Trash2 size={16} />
+        </button>
+        <ChevronRight size={18} className="text-gray-400" />
       </div>
-      <DarkButton className="w-fit h-fit m-2" onClick={openCallback}>
-        open
-      </DarkButton>
-      <DarkButton className="w-fit h-fit m-2" onClick={deleteCallback}>
-        delete
-      </DarkButton>
     </div>
   );
 };
 
 export default function FoldersClient({ username }: { username: string }) {
-  const [folders, setFolders] = useState<Folder[]>([]);
-  const [page, setPage] = useState<"folders" | "in folder">("folders");
-  const [folderId, setFolderId] = useState<number>(0);
+  const [folders, setFolders] = useState<folder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
-    getFoldersWithTextPairsCountByOwner(username).then((folders) => {
-      setFolders(folders as Folder[]);
+    getFoldersByOwner(username).then((folders) => {
+      setFolders(folders);
     });
   }, [username]);
 
   const updateFolders = async () => {
-    const updatedFolders = await getFoldersWithTextPairsCountByOwner(username);
-    setFolders(updatedFolders as Folder[]);
+    setLoading(true);
+    try {
+      const updatedFolders = await getFoldersByOwner(username);
+      setFolders(updatedFolders);
+    } finally {
+      setLoading(false);
+    }
   };
+  return (
+    <Center>
+      <div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
+        <div className="mb-6">
+          <h1 className="text-2xl font-light text-gray-900">Folders</h1>
+          <p className="text-sm text-gray-500 mt-1">Manage your collections</p>
+        </div>
 
-  if (page === "folders")
-    return (
-      <Center>
-        <ACard className="flex flex-col">
-          <h1 className="text-4xl font-extrabold text-center">Your Folders</h1>
-          <LightButton
-            className="w-fit"
-            onClick={async () => {
-              const folderName = prompt("Enter folder name:");
-              if (!folderName) return;
-              await createFolder(folderName, username);
+        <button
+          onClick={async () => {
+            const folderName = prompt("Enter folder name:");
+            if (!folderName) return;
+            setLoading(true);
+            try {
+              await createFolder({
+                name: folderName,
+                owner: username,
+              });
               await updateFolders();
-            }}
-          >
-            Create Folder
-          </LightButton>
-          <div className="overflow-y-auto">
-            {folders.map((folder) => (
-              <FolderCard
-                key={folder.id}
-                folder={folder}
-                deleteCallback={() => {
-                  const confirm = prompt(
-                    "Input folder's name to delete this folder.",
-                  );
-                  if (confirm === folder.name) {
-                    deleteFolderById(folder.id).then(updateFolders);
-                  }
-                }}
-                openCallback={() => {
-                  setFolderId(folder.id);
-                  setPage("in folder");
-                }}
-              />
-            ))}
-          </div>
-        </ACard>
-      </Center>
-    );
-  else if (page === "in folder") {
-    return <InFolder username={username} folderId={folderId} />;
-  }
+            } finally {
+              setLoading(false);
+            }
+          }}
+          disabled={loading}
+          className="w-full p-3 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:border-gray-400 hover:text-gray-600 transition-colors flex items-center justify-center gap-2"
+        >
+          <FolderPlus size={18} />
+          <span>{loading ? "Creating..." : "New Folder"}</span>
+        </button>
+
+        <div className="mt-4 max-h-96 overflow-y-auto">
+          {folders.length === 0 ? (
+            <div className="text-center py-12 text-gray-400">
+              <div className="w-16 h-16 mx-auto mb-3 rounded-lg bg-gray-100 flex items-center justify-center">
+                <FolderPlus size={24} className="text-gray-400" />
+              </div>
+              <p className="text-sm">No folders yet</p>
+            </div>
+          ) : (
+            <div className="rounded-xl border border-gray-200 overflow-hidden">
+              {folders.map((folder) => (
+                <FolderCard
+                  key={folder.id}
+                  folder={folder}
+                  deleteCallback={() => {
+                    const confirm = prompt(`Type "${folder.name}" to delete:`);
+                    if (confirm === folder.name) {
+                      deleteFolderById(folder.id).then(updateFolders);
+                    }
+                  }}
+                  openCallback={() => {
+                    router.push(`/folders/${folder.id}`);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Center>
+  );
 }

src/app/folders/InFolder.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
-import { useEffect, useState } from "react";
-
-interface Props {
-  username: string;
-  folderId: number;
-}
-
-interface TextPair {
-  id: number;
-  text1: string;
-  text2: string;
-  locale1: string;
-  locale2: string;
-}
-
-export default function InFolder({ folderId }: Props) {
-  const [textPairs, setTextPairs] = useState<TextPair[]>([]);
-
-  useEffect(() => {
-    getTextPairsByFolderId(folderId).then((textPairs) => {
-      setTextPairs(textPairs as TextPair[]);
-    });
-  }, [folderId, textPairs]);
-
-  const updateTextPairs = async () => {
-    const updatedTextPairs = await getTextPairsByFolderId(folderId);
-    setTextPairs(updatedTextPairs as TextPair[]);
-  };
-  
-  return (
-    <div>
-      <h1>In Folder</h1>
-    </div>
-  );
-}

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

@@ -0,0 +1,91 @@
+import LightButton from "@/components/buttons/LightButton";
+import Input from "@/components/Input";
+import { X } from "lucide-react";
+import { useRef } from "react";
+
+interface AddTextPairModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAdd: (
+    text1: string,
+    text2: string,
+    locale1: string,
+    locale2: string,
+  ) => void;
+}
+
+export default function AddTextPairModal({
+  isOpen,
+  onClose,
+  onAdd,
+}: AddTextPairModalProps) {
+  const input1Ref = useRef<HTMLInputElement>(null);
+  const input2Ref = useRef<HTMLInputElement>(null);
+  const input3Ref = useRef<HTMLInputElement>(null);
+  const input4Ref = useRef<HTMLInputElement>(null);
+  if (!isOpen) return null;
+
+  const handleAdd = () => {
+    if (
+      !input1Ref.current?.value ||
+      !input2Ref.current?.value ||
+      !input3Ref.current?.value ||
+      !input4Ref.current?.value
+    )
+      return;
+
+    const text1 = input1Ref.current.value;
+    const text2 = input2Ref.current.value;
+    const locale1 = input3Ref.current.value;
+    const locale2 = input4Ref.current.value;
+    if (
+      typeof text1 === "string" &&
+      typeof text2 === "string" &&
+      typeof locale1 === "string" &&
+      typeof locale2 === "string" &&
+      text1.trim() !== "" &&
+      text2.trim() !== "" &&
+      locale1.trim() !== "" &&
+      locale2.trim() !== ""
+    ) {
+      onAdd(text1, text2, locale1, locale2);
+      input1Ref.current.value = "";
+      input2Ref.current.value = "";
+    }
+  };
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50"
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleAdd();
+        }
+      }}
+    >
+      <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
+        <div className="flex">
+          <h2 className="flex-1 text-xl font-light mb-4 text-center">
+            Add New Text Pair
+          </h2>
+          <X onClick={onClose} className="hover:cursor-pointer"></X>
+        </div>
+        <div>
+          <div>
+            text1<Input ref={input1Ref} className="w-full"></Input>
+          </div>
+          <div>
+            text2<Input ref={input2Ref} className="w-full"></Input>
+          </div>
+          <div>
+            locale1<Input ref={input3Ref} className="w-full"></Input>
+          </div>
+          <div>
+            locale2<Input ref={input4Ref} className="w-full"></Input>
+          </div>
+        </div>
+        <LightButton onClick={handleAdd}>Add</LightButton>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+"use client";
+
+import { ArrowLeft, Edit, Plus, Trash2, X } from "lucide-react";
+import { Center } from "@/components/Center";
+import { useEffect, useState } from "react";
+import { redirect, useRouter } from "next/navigation";
+import Container from "@/components/cards/Container";
+import {
+  createTextPair,
+  deleteTextPairById,
+  getTextPairsByFolderId,
+  updateTextPairById,
+} from "@/lib/services/textPairService";
+import AddTextPairModal from "./AddTextPairModal";
+import TextPairCard from "./TextPairCard";
+import UpdateTextPairModal from "./UpdateTextPairModal";
+import { text_pairUpdateInput } from "../../../../generated/prisma/models";
+import LightButton from "@/components/buttons/LightButton";
+
+export interface TextPair {
+  id: number;
+  text1: string;
+  text2: string;
+  locale1: string;
+  locale2: string;
+}
+
+export default function InFolder({ folderId }: { folderId: number }) {
+  const [textPairs, setTextPairs] = useState<TextPair[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [openAddModal, setAddModal] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchTextPairs = async () => {
+      setLoading(true);
+      try {
+        const data = await getTextPairsByFolderId(folderId);
+        setTextPairs(data as TextPair[]);
+      } catch (error) {
+        console.error("Failed to fetch text pairs:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchTextPairs();
+  }, [folderId]);
+
+  const refreshTextPairs = async () => {
+    setLoading(true);
+    try {
+      const data = await getTextPairsByFolderId(folderId);
+      setTextPairs(data as TextPair[]);
+    } catch (error) {
+      console.error("Failed to fetch text pairs:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Center>
+      <Container className="p-6">
+        <div className="mb-6">
+          <button
+            onClick={router.back}
+            className="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors mb-4"
+          >
+            <ArrowLeft size={16} />
+            <span className="text-sm">Back to folders</span>
+          </button>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-light text-gray-900">Text Pairs</h1>
+              <p className="text-sm text-gray-500 mt-1">
+                {textPairs.length} items
+              </p>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <LightButton
+                onClick={() => {
+                  redirect(`/memorize?folder_id=${folderId}`);
+                }}
+              >
+                Memorize
+              </LightButton>
+              <button
+                className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                onClick={() => {
+                  setAddModal(true);
+                }}
+              >
+                <Plus
+                  size={18}
+                  className="text-gray-600 hover:cursor-pointer"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-h-96 overflow-y-auto rounded-xl border border-gray-200 overflow-hidden">
+          {loading ? (
+            <div className="p-8 text-center">
+              <div className="w-8 h-8 border-2 border-gray-200 border-t-gray-400 rounded-full animate-spin mx-auto mb-3"></div>
+              <p className="text-sm text-gray-500">Loading text pairs...</p>
+            </div>
+          ) : textPairs.length === 0 ? (
+            <div className="p-12 text-center">
+              <p className="text-sm text-gray-500 mb-2">No text pair items</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-gray-100">
+              {textPairs.map((textPair) => (
+                <TextPairCard
+                  key={textPair.id}
+                  textPair={textPair}
+                  onDel={() => {
+                    deleteTextPairById(textPair.id);
+                    refreshTextPairs();
+                  }}
+                  refreshTextPairs={refreshTextPairs}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </Container>
+      <AddTextPairModal
+        isOpen={openAddModal}
+        onClose={() => setAddModal(false)}
+        onAdd={async (
+          text1: string,
+          text2: string,
+          locale1: string,
+          locale2: string,
+        ) => {
+          await createTextPair({
+            text1: text1,
+            text2: text2,
+            locale1: locale1,
+            locale2: locale2,
+            folders: {
+              connect: {
+                id: folderId,
+              },
+            },
+          });
+          refreshTextPairs();
+        }}
+      />
+    </Center>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { Edit, Trash2 } from "lucide-react";
+import { TextPair } from "./InFolder";
+import { updateTextPairById } from "@/lib/services/textPairService";
+import { useState } from "react";
+import { text_pairUpdateInput } from "../../../../generated/prisma/models";
+import UpdateTextPairModal from "./UpdateTextPairModal";
+
+interface TextPairCardProps {
+  textPair: TextPair;
+  onDel: () => void;
+  refreshTextPairs: () => void;
+}
+
+export default function TextPairCard({
+  textPair,
+  onDel,
+  refreshTextPairs,
+}: TextPairCardProps) {
+  const [openUpdateModal, setOpenUpdateModal] = useState(false);
+  return (
+    <div className="group border-b border-gray-100 hover:bg-gray-50 transition-colors">
+      <div className="p-4">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <span className="px-2 py-1 bg-gray-100 rounded-md">
+              {textPair.locale1.toUpperCase()}
+            </span>
+            <span>→</span>
+            <span className="px-2 py-1 bg-gray-100 rounded-md">
+              {textPair.locale2.toUpperCase()}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <button
+              className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+              onClick={() => setOpenUpdateModal(true)}
+            >
+              <Edit size={14} />
+            </button>
+            <button className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors">
+              <Trash2 size={14} onClick={onDel} />
+            </button>
+          </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>
+      </div>
+      <UpdateTextPairModal
+        isOpen={openUpdateModal}
+        onClose={() => setOpenUpdateModal(false)}
+        onUpdate={async (id: number, data: text_pairUpdateInput) => {
+          await updateTextPairById(id, data);
+          setOpenUpdateModal(false);
+          refreshTextPairs();
+        }}
+        textPair={textPair}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+import LightButton from "@/components/buttons/LightButton";
+import Input from "@/components/Input";
+import { X } from "lucide-react";
+import { useRef } from "react";
+import { text_pairUpdateInput } from "../../../../generated/prisma/models";
+import { TextPair } from "./InFolder";
+
+interface UpdateTextPairModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  textPair: TextPair;
+  onUpdate: (id: number, tp: text_pairUpdateInput) => void;
+}
+
+export default function UpdateTextPairModal({
+  isOpen,
+  onClose,
+  onUpdate,
+  textPair,
+}: UpdateTextPairModalProps) {
+  const input1Ref = useRef<HTMLInputElement>(null);
+  const input2Ref = useRef<HTMLInputElement>(null);
+  const input3Ref = useRef<HTMLInputElement>(null);
+  const input4Ref = useRef<HTMLInputElement>(null);
+  if (!isOpen) return null;
+
+  const handleUpdate = () => {
+    if (
+      !input1Ref.current?.value ||
+      !input2Ref.current?.value ||
+      !input3Ref.current?.value ||
+      !input4Ref.current?.value
+    )
+      return;
+
+    const text1 = input1Ref.current.value;
+    const text2 = input2Ref.current.value;
+    const locale1 = input3Ref.current.value;
+    const locale2 = input4Ref.current.value;
+    if (
+      typeof text1 === "string" &&
+      typeof text2 === "string" &&
+      typeof locale1 === "string" &&
+      typeof locale2 === "string" &&
+      text1.trim() !== "" &&
+      text2.trim() !== "" &&
+      locale1.trim() !== "" &&
+      locale2.trim() !== ""
+    ) {
+      onUpdate(textPair.id, { text1, text2, locale1, locale2 });
+      input1Ref.current.value = "";
+      input2Ref.current.value = "";
+    }
+  };
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50"
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleUpdate();
+        }
+      }}
+    >
+      <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
+        <div className="flex">
+          <h2 className="flex-1 text-xl font-light mb-4 text-center">
+            Update Text Pair
+          </h2>
+          <X onClick={onClose} className="hover:cursor-pointer"></X>
+        </div>
+        <div>
+          <div>
+            text1<Input defaultValue={textPair.text1} ref={input1Ref} className="w-full"></Input>
+          </div>
+          <div>
+            text2<Input defaultValue={textPair.text2} ref={input2Ref} className="w-full"></Input>
+          </div>
+          <div>
+            locale1<Input defaultValue={textPair.locale1} ref={input3Ref} className="w-full"></Input>
+          </div>
+          <div>
+            locale2<Input defaultValue={textPair.locale2} ref={input4Ref} className="w-full"></Input>
+          </div>
+        </div>
+        <LightButton onClick={handleUpdate}>Update</LightButton>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import InFolder from "./InFolder";
+import { getOwnerByFolderId } from "@/lib/services/folderService";
+export default async function FoldersPage({
+  params,
+}: {
+  params: Promise<{ folder_id: number }>;
+}) {
+  const session = await getServerSession();
+  const { folder_id } = await params;
+  const id = Number(folder_id);
+  if (!id) {
+    redirect("/folders");
+  }
+  if (!session?.user?.name) redirect(`/login?redirect=/folders/${id}`);
+  if ((await getOwnerByFolderId(id)) !== session.user.name) {
+    return "you are not the owner of this folder";
+  }
+  return <InFolder folderId={id} />;
+}

src/app/folders/page.tsx

@@ -3,8 +3,6 @@ import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
 export default async function FoldersPage() {
   const session = await getServerSession();
-  if (!session?.user?.name) redirect(`/login`);
-  return (
-    <FoldersClient username={session.user.name} />
-  );
+  if (!session?.user?.name) redirect(`/login?redirect=/folders`);
+  return <FoldersClient username={session.user.name} />;
 }

src/app/memorize/Choose.tsx

@@ -1,67 +0,0 @@
-import LightButton from "@/components/buttons/LightButton";
-import ACard from "@/components/cards/ACard";
-import BCard from "@/components/cards/BCard";
-import { LOCALES } from "@/config/locales";
-import { Dispatch, SetStateAction, useState } from "react";
-import { WordData } from "@/interfaces";
-
-import { useTranslations } from "next-intl";
-
-interface Props {
-  setEditPage: Dispatch<SetStateAction<"choose" | "edit">>;
-  wordData: WordData;
-  setWordData: Dispatch<SetStateAction<WordData>>;
-  localeKey: 0 | 1;
-}
-
-export default function Choose({
-  setEditPage,
-  wordData,
-  setWordData,
-  localeKey,
-}: Props) {
-  const t = useTranslations("memorize.choose");
-  const [chosenLocale, setChosenLocale] = useState<
-    (typeof LOCALES)[number] | null
-  >(null);
-
-  const handleChooseClick = () => {
-    if (chosenLocale) {
-      setWordData({
-        locales: [
-          localeKey === 0 ? chosenLocale : wordData.locales[0],
-          localeKey === 1 ? chosenLocale : wordData.locales[1],
-        ],
-        wordPairs: wordData.wordPairs,
-      });
-      setEditPage("edit");
-    }
-  };
-
-  return (
-    <div className="w-screen flex justify-center items-center">
-      <ACard className="flex flex-col">
-        <div className="overflow-y-auto flex-1 border border-gray-200 rounded-2xl p-2 grid grid-cols-4 md:grid-cols-6 md:gap-2">
-          {LOCALES.map((locale, index) => (
-            <LightButton
-              key={index}
-              className="md:w-26 w-18"
-              selected={locale === chosenLocale}
-              onClick={() => setChosenLocale(locale)}
-            >
-              {locale}
-            </LightButton>
-          ))}
-        </div>
-        <div className="w-full flex items-center justify-center">
-          <BCard className="flex gap-2 justify-center items-center w-fit">
-            <LightButton onClick={handleChooseClick}>{t("choose")}</LightButton>
-            <LightButton onClick={() => setEditPage("edit")}>
-              {t("back")}
-            </LightButton>
-          </BCard>
-        </div>
-      </ACard>
-    </div>
-  );
-}

src/app/memorize/Edit.tsx

@@ -1,110 +0,0 @@
-import LightButton from "@/components/buttons/LightButton";
-import ACard from "@/components/cards/ACard";
-import BCard from "@/components/cards/BCard";
-import { ChangeEvent, Dispatch, SetStateAction, useRef, useState } from "react";
-import DarkButton from "@/components/buttons/DarkButton";
-import { WordData } from "@/interfaces";
-import Choose from "./Choose";
-
-import { useTranslations } from "next-intl";
-
-interface Props {
-  setPage: Dispatch<SetStateAction<"start" | "main" | "edit">>;
-  wordData: WordData;
-  setWordData: Dispatch<SetStateAction<WordData>>;
-}
-
-export default function Edit({ setPage, wordData, setWordData }: Props) {
-  const t = useTranslations("memorize.edit");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [localeKey, setLocaleKey] = useState<0 | 1>(0);
-  const [editPage, setEditPage] = useState<"choose" | "edit">("edit");
-  const convertIntoWordData = (text: string) => {
-    const t1 = text
-      .replace("，", ",")
-      .split("\n")
-      .map((v) => v.trim())
-      .filter((v) => v.includes(","));
-    const t2 = t1
-      .map((v) => {
-        const [left, right] = v.split(",", 2).map((v) => v.trim());
-        if (left && right) return [left, right] as [string, string];
-        else return null;
-      })
-      .filter((v) => v !== null);
-    const new_data: WordData = {
-      locales: [...wordData.locales],
-      wordPairs: t2,
-    };
-    return new_data;
-  };
-  const convertFromWordData = (wdata: WordData) => {
-    let result = "";
-    for (const pair of wdata.wordPairs) {
-      result += `${pair[0]}, ${pair[1]}\n`;
-    }
-    return result;
-  };
-  let input = convertFromWordData(wordData);
-  const handleSave = () => {
-    const newWordData = convertIntoWordData(input);
-    setWordData(newWordData);
-    if (textareaRef.current)
-      textareaRef.current.value = convertFromWordData(newWordData);
-    if (localStorage) {
-      localStorage.setItem("wordData", JSON.stringify(newWordData));
-    }
-  };
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    input = e.target.value;
-  };
-  if (editPage === "edit")
-    return (
-      <div className="w-screen flex justify-center items-center">
-        <ACard className="flex flex-col">
-          <textarea
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && e.ctrlKey) handleSave();
-            }}
-            ref={textareaRef}
-            className="flex-1 text-gray-800 font-mono md:text-2xl border-gray-200 border rounded-2xl w-full resize-none outline-0 p-2"
-            defaultValue={input}
-            onChange={handleChange}
-          ></textarea>
-          <div className="w-full flex items-center justify-center">
-            <BCard className="flex gap-2 justify-center items-center w-fit">
-              <LightButton onClick={() => setPage("main")}>
-                {t("back")}
-              </LightButton>
-              <LightButton onClick={handleSave}>{t("save")}</LightButton>
-              <DarkButton
-                onClick={() => {
-                  setLocaleKey(0);
-                  setEditPage("choose");
-                }}
-              >
-                {t("locale1")}
-              </DarkButton>
-              <DarkButton
-                onClick={() => {
-                  setLocaleKey(1);
-                  setEditPage("choose");
-                }}
-              >
-                {t("locale2")}
-              </DarkButton>
-            </BCard>
-          </div>
-        </ACard>
-      </div>
-    );
-  if (editPage === "choose")
-    return (
-      <Choose
-        wordData={wordData}
-        setEditPage={setEditPage}
-        setWordData={setWordData}
-        localeKey={localeKey}
-      ></Choose>
-    );
-}

src/app/memorize/Main.tsx

@@ -1,73 +0,0 @@
-import LightButton from "@/components/buttons/LightButton";
-import ACard from "@/components/cards/ACard";
-import BCard from "@/components/cards/BCard";
-import { WordData, WordDataSchema } from "@/interfaces";
-import { Dispatch, SetStateAction } from "react";
-import useFileUpload from "@/hooks/useFileUpload";
-import { useTranslations } from "next-intl";
-
-interface Props {
-  wordData: WordData;
-  setWordData: Dispatch<SetStateAction<WordData>>;
-  setPage: Dispatch<SetStateAction<"start" | "main" | "edit">>;
-}
-
-export default function Main({
-  wordData,
-  setWordData,
-  setPage: setPage,
-}: Props) {
-  const t = useTranslations("memorize.main");
-  const { upload, inputRef } = useFileUpload(async (file) => {
-    try {
-      const obj = JSON.parse(await file.text());
-      const newWordData = WordDataSchema.parse(obj);
-      setWordData(newWordData);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-  const handleLoad = async () => {
-    upload("application/json");
-  };
-  const handleSave = () => {
-    const blob = new Blob([JSON.stringify(wordData)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "word_data.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-  return (
-    <div className="w-screen flex justify-center items-center">
-      <ACard className="flex-col flex">
-        <h1 className="text-center font-extrabold text-4xl text-gray-800 m-2 mb-4">
-          {t("title")}
-        </h1>
-        <div className="flex-1 font-serif text-2xl w-full h-full text-gray-800">
-          <BCard>
-            <p>{t("locale1", { locale: wordData.locales[0] })}</p>
-            <p>{t("locale2", { locale: wordData.locales[1] })}</p>
-            <p>{t("total", { total: wordData.wordPairs.length })}</p>
-          </BCard>
-        </div>
-        <div className="w-full flex items-center justify-center">
-          <BCard className="flex gap-2 justify-center items-center w-fit">
-            <LightButton onClick={() => setPage("start")}>
-              {t("start")}
-            </LightButton>
-            <LightButton onClick={handleLoad}>{t("import")}</LightButton>
-            <LightButton onClick={handleSave}>{t("export")}</LightButton>
-            <LightButton onClick={() => setPage("edit")}>
-              {t("edit")}
-            </LightButton>
-          </BCard>
-        </div>
-      </ACard>
-      <input type="file" hidden ref={inputRef}></input>
-    </div>
-  );
-}

src/app/memorize/Start.tsx

@@ -1,100 +0,0 @@
-import LightButton from "@/components/buttons/LightButton";
-import { WordData } from "@/interfaces";
-import { Dispatch, SetStateAction, useState } from "react";
-import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { getTTSAudioUrl } from "@/utils";
-import { VOICES } from "@/config/locales";
-
-import { useTranslations } from "next-intl";
-
-interface WordBoardProps {
-  children: React.ReactNode;
-}
-function WordBoard({ children }: WordBoardProps) {
-  return (
-    <div className="text-nowrap w-full h-36 border border-white rounded flex justify-center items-center text-4xl md:text-6xl font-serif overflow-x-auto">
-      {children}
-    </div>
-  );
-}
-
-interface Props {
-  wordData: WordData;
-  setPage: Dispatch<SetStateAction<"start" | "main" | "edit">>;
-}
-export default function Start({ wordData, setPage }: Props) {
-  const t = useTranslations("memorize.start");
-  const [display, setDisplay] = useState<"ask" | "show">("ask");
-  const [wordPair, setWordPair] = useState(
-    wordData.wordPairs[Math.floor(Math.random() * wordData.wordPairs.length)],
-  );
-  const [reverse, setReverse] = useState(false);
-  const [dictation, setDictation] = useState(false);
-  const { load, play } = useAudioPlayer();
-  const show = () => {
-    setDisplay("show");
-  };
-  const next = async () => {
-    setDisplay("ask");
-    const newWordPair =
-      wordData.wordPairs[Math.floor(Math.random() * wordData.wordPairs.length)];
-    setWordPair(newWordPair);
-    if (dictation)
-      await load(
-        await getTTSAudioUrl(
-          newWordPair[reverse ? 1 : 0],
-          VOICES.find((v) => v.locale === wordData.locales[reverse ? 1 : 0])!
-            .short_name,
-        ),
-      ).then(play);
-  };
-  return (
-    <div className="w-screen flex justify-center items-center">
-      <div className="flex-col flex items-center h-96">
-        <div className="flex-1 w-[95dvw] md:w-fit p-4 gap-4 flex flex-col overflow-x-auto">
-          {dictation ? (
-            <>
-              {display === "show" && (
-                <>
-                  <WordBoard>{wordPair[reverse ? 1 : 0]}</WordBoard>
-                  <WordBoard>{wordPair[reverse ? 0 : 1]}</WordBoard>
-                </>
-              )}
-            </>
-          ) : (
-            <>
-              <WordBoard>{wordPair[reverse ? 1 : 0]}</WordBoard>
-              {display === "show" && (
-                <WordBoard>{wordPair[reverse ? 0 : 1]}</WordBoard>
-              )}
-            </>
-          )}
-        </div>
-        <div className="w-full flex items-center justify-center">
-          <div className="flex gap-2 justify-center items-center w-fit font-mono flex-wrap">
-            {display === "ask" ? (
-              <LightButton onClick={show}>{t("show")}</LightButton>
-            ) : (
-              <LightButton onClick={next}>{t("next")}</LightButton>
-            )}
-            <LightButton
-              onClick={() => setReverse(!reverse)}
-              selected={reverse}
-            >
-              {t("reverse")}
-            </LightButton>
-            <LightButton
-              onClick={() => setDictation(!dictation)}
-              selected={dictation}
-            >
-              {t("dictation")}
-            </LightButton>
-            <LightButton onClick={() => setPage("main")}>
-              {t("back")}
-            </LightButton>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/memorize/page.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Main from "./Main";
-import Edit from "./Edit";
-import Start from "./Start";
-import { WordData, WordDataSchema } from "@/interfaces";
-
-const getLocalWordData = (): WordData => {
-  const data = localStorage.getItem("wordData");
-  if (!data) return {
-    locales: ['en-US', 'zh-CN'],
-    wordPairs: []
-  };
-  try {
-    const parsedData = JSON.parse(data);
-    const parsedData2 = WordDataSchema.parse(parsedData);
-    return parsedData2;
-  } catch (error) {
-    console.error(error);
-    return {
-      locales: ['en-US', 'zh-CN'],
-      wordPairs: []
-    };
-  }
-}
-
-export default function MemorizePage() {
-  const [page, setPage] = useState<"start" | "main" | "edit">("main");
-  const [wordData, setWordData] = useState<WordData>(getLocalWordData());
-  if (page === "main")
-    return (
-      <Main
-        wordData={wordData}
-        setWordData={setWordData}
-        setPage={setPage}
-      ></Main>
-    );
-  if (page === "edit")
-    return (
-      <Edit
-        setPage={setPage}
-        wordData={wordData}
-        setWordData={setWordData}
-      ></Edit>
-    );
-  if (page === "start")
-    return <Start setPage={setPage} wordData={wordData}></Start>;
-}

src/components/Input.tsx

@@ -4,6 +4,7 @@ interface Props {
   type?: string;
   className?: string;
   name?: string;
+  defaultValue?: string;
 }
 
 export default function Input({
@@ -12,6 +13,7 @@ export default function Input({
   type = "text",
   className = "",
   name = "",
+  defaultValue = "",
 }: Props) {
   return (
     <input
@@ -20,6 +22,7 @@ export default function Input({
       type={type}
       className={`block focus:outline-none border-b-2 border-gray-600 ${className}`}
       name={name}
+      defaultValue={defaultValue}
     />
   );
 }

src/components/Navbar.tsx

@@ -8,20 +8,8 @@ import IMAGES from "@/config/images";
 import { useState } from "react";
 import LightButton from "./buttons/LightButton";
 import { useSession } from "next-auth/react";
+import { Folder, Home } from "lucide-react";
 
-function MyLink({
-  href,
-  children,
-}: {
-  href: string;
-  children?: React.ReactNode;
-}) {
-  return (
-    <Link className="font-bold" href={href}>
-      {children}
-    </Link>
-  );
-}
 export function Navbar() {
   const t = useTranslations("navbar");
   const [showLanguageMenu, setShowLanguageMenu] = useState(false);
@@ -35,20 +23,24 @@ export function Navbar() {
   const session = useSession();
   return (
     <div className="flex justify-between items-center w-full h-16 px-8 bg-[#35786f] text-white">
-      <div className="flex gap-4 text-xl justify-center items-center">
-        <Link href={"/"} className="text-xl flex border-b">
+      <Link href={"/"} className="text-xl border-b hidden md:block">
+        {t("title")}
+      </Link>
+      <Link className="block md:hidden" href={"/"}>
+        <Home />
+      </Link>
+      <div className="flex gap-4 text-xl justify-center items-center flex-wrap">
+        <Link
+          className="md:hidden block"
+          href="https://github.com/GoddoNebianU/learn-languages"
+        >
           <Image
-            src={"/favicon.ico"}
-            alt="logo"
-            width="32"
-            height="32"
-            className="rounded-4xl"
-          ></Image>
-          <span className="font-bold text-pink-200">{t("title")}</span>
+            src={IMAGES.github_mark_white}
+            alt="GitHub"
+            width={24}
+            height={24}
+          />
         </Link>
-        <MyLink href="/folders">{t("folders")}</MyLink>
-      </div>
-      <div className="flex gap-4 text-xl justify-center items-center">
         <div className="relative">
           {showLanguageMenu && (
             <div>
@@ -75,17 +67,26 @@ export function Navbar() {
             onClick={handleLanguageClick}
           ></IconClick>
         </div>
+        <Link href="/folders" className="md:block hidden">
+          {t("folders")}
+        </Link>
+        <Link href="/folders" className="md:hidden block">
+          <Folder />
+        </Link>
         {session?.status === "authenticated" ? (
           <div className="flex gap-2">
-            <MyLink href="/profile">{t("profile")}</MyLink>
+            <Link href="/profile">{t("profile")}</Link>
           </div>
         ) : (
-          <MyLink href="/login">{t("login")}</MyLink>
+          <Link href="/login">{t("login")}</Link>
         )}
-        <MyLink href="/changelog.txt">{t("about")}</MyLink>
-        <MyLink href="https://github.com/GoddoNebianU/learn-languages">
+        <Link href="/changelog.txt">{t("about")}</Link>
+        <Link
+          className="hidden md:block"
+          href="https://github.com/GoddoNebianU/learn-languages"
+        >
           {t("sourceCode")}
-        </MyLink>
+        </Link>
       </div>
     </div>
   );

src/components/buttons/DarkButton.tsx

@@ -1,4 +1,4 @@
-import PlainButton from "./PlainButton";
+import PlainButton, { ButtonType } from "./PlainButton";
 
 export default function DarkButton({
   onClick,
@@ -11,7 +11,7 @@ export default function DarkButton({
   className?: string;
   selected?: boolean;
   children?: React.ReactNode;
-  type?: string;
+  type?: ButtonType;
 }) {
   return (
     <PlainButton

src/components/buttons/LightButton.tsx

@@ -1,17 +1,17 @@
-import PlainButton from "./PlainButton";
+import PlainButton, { ButtonType } from "../buttons/PlainButton";
 
 export default function LightButton({
   onClick,
   className,
   selected,
   children,
-  type = "button"
+  type = "button",
 }: {
   onClick?: () => void;
   className?: string;
   selected?: boolean;
   children?: React.ReactNode;
-  type?: string;
+  type?: ButtonType;
 }) {
   return (
     <PlainButton

src/components/buttons/PlainButton.tsx

@@ -1,3 +1,5 @@
+export type ButtonType =  "button" | "submit" | "reset" | undefined;
+
 export default function PlainButton({
   onClick,
   className,
@@ -7,7 +9,7 @@ export default function PlainButton({
   onClick?: () => void;
   className?: string;
   children?: React.ReactNode;
-  type?: "button" | "submit" | "reset" | undefined;
+    type?: ButtonType;
 }) {
   return (
     <button

src/components/cards/Container.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+interface ContainerProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function Container({ children, className }: ContainerProps) {
+  return (
+    <div
+      className={`w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

src/config/images.ts

@@ -18,6 +18,7 @@ const IMAGES = {
   language_black: "/images/language_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg",
   language_white: "/images/language_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg",
   github_mark: "/images/github-mark/github-mark.svg",
+  github_mark_white: "/images/github-mark/github-mark-white.svg",
 };
 
 export default IMAGES;

src/lib/actions.ts

@@ -1,11 +0,0 @@
-"use server";
-
-import { UserController } from "./db";
-
-export async function loginAction(formData: FormData) {
-  const username = formData.get("username")?.toString();
-  const password = formData.get("password")?.toString();
-  
-  
-  if (username && password) await UserController.createUser(username, password);
-}

src/lib/controllers/FolderController.ts

@@ -1,50 +0,0 @@
-"use server";
-
-import { pool } from "../db";
-
-export async function deleteFolderById(id: number) {
-  try {
-    await pool.query("DELETE FROM folders WHERE id = $1", [id]);
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function getFoldersByOwner(owner: string) {
-  try {
-    const folders = await pool.query("SELECT * FROM folders WHERE owner = $1", [
-      owner,
-    ]);
-    return folders.rows;
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function getFoldersWithTextPairsCountByOwner(owner: string) {
-  try {
-    const folders = await pool.query(
-      `select f.id, f.name, f.owner, count(tp.id) as text_pairs_count from folders f
-    left join text_pairs tp on tp.folder_id = f.id
-    where f.owner = $1
-    group by f.id, f.name, f.owner`,
-      [owner],
-    );
-    return folders.rows;
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function createFolder(name: string, owner: string) {
-  try {
-    return (
-      await pool.query("INSERT INTO folders (name, owner) VALUES ($1, $2)", [
-        name.trim(),
-        owner,
-      ])
-    ).rows[0];
-  } catch (e) {
-    console.log(e);
-  }
-}

src/lib/controllers/TextPairController.ts

@@ -1,69 +0,0 @@
-"use server";
-
-import { pool } from "../db";
-
-export async function createTextPair(
-  locale1: string,
-  locale2: string,
-  text1: string,
-  text2: string,
-  folderId: number,
-) {
-  try {
-    await pool.query(
-      "INSERT INTO text_pairs (locale1, locale2, text1, text2, folder_id) VALUES ($1, $2, $3, $4, $5)",
-      [locale1.trim(), locale2.trim(), text1.trim(), text2.trim(), folderId],
-    );
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function deleteTextPairById(id: number) {
-  try {
-    await pool.query("DELETE FROM text_pairs WHERE id = $1", [id]);
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function updateWordPairById(
-  id: number,
-  locale1: string,
-  locale2: string,
-  text1: string,
-  text2: string,
-) {
-  try {
-    await pool.query(
-      "UPDATE text_pairs SET locale1 = $1, locale2 = $2, text1 = $3, text2 = $4 WHERE id = $5",
-      [locale1.trim(), locale2.trim(), text1.trim(), text2.trim(), id],
-    );
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function getTextPairsByFolderId(folderId: number) {
-  try {
-    const textPairs = await pool.query(
-      "SELECT * FROM text_pairs WHERE folder_id = $1",
-      [folderId],
-    );
-    return textPairs.rows;
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export async function getTextPairsCountByFolderId(folderId: number) {
-  try {
-    const count = await pool.query(
-      "SELECT COUNT(*) FROM text_pairs WHERE folder_id = $1",
-      [folderId],
-    );
-    return count.rows[0].count;
-  } catch (e) {
-    console.log(e);
-  }
-}

src/lib/db.ts

@@ -1,10 +1,4 @@
-import { Pool } from "pg";
+import { PrismaClient } from "../../generated/prisma/client";
 
-export const pool = new Pool({
-  user: "postgres",
-  host: "localhost",
-  max: 20,
-  idleTimeoutMillis: 3000,
-  connectionTimeoutMillis: 2000,
-  maxLifetimeSeconds: 60,
-});
+const prisma = new PrismaClient();
+export default prisma;

src/lib/localStorageOperators.ts

@@ -1,13 +1,15 @@
-import { TranslationHistoryArraySchema, TranslationHistorySchema } from "@/interfaces";
-import { getLocalStorageOperator } from "@/utils";
+import {
+  TranslationHistoryArraySchema,
+  TranslationHistorySchema,
+} from "@/lib/interfaces";
+import { getLocalStorageOperator } from "@/lib/utils";
 import z from "zod";
 
 const MAX_HISTORY_LENGTH = 50;
 
-export const tlso = getLocalStorageOperator<typeof TranslationHistoryArraySchema>(
-  "translator",
-  TranslationHistoryArraySchema,
-);
+export const tlso = getLocalStorageOperator<
+  typeof TranslationHistoryArraySchema
+>("translator", TranslationHistoryArraySchema);
 export const tlsoPush = (item: z.infer<typeof TranslationHistorySchema>) => {
   tlso.set(
     [...tlso.get(), item as z.infer<typeof TranslationHistorySchema>].slice(

src/lib/services/folderService.ts

@@ -0,0 +1,69 @@
+"use server";
+
+import { folder } from "../../../generated/prisma/client";
+import {
+  folderCreateInput,
+  folderUpdateInput,
+} from "../../../generated/prisma/models";
+import prisma from "../db";
+
+export async function getFoldersByOwner(owner: string) {
+  const folders = await prisma.folder.findMany({
+    where: {
+      owner: owner,
+    },
+  });
+  return folders;
+}
+
+export async function getFoldersWithTotalPairsByOwner(owner: string) {
+  const folders = await prisma.folder.findMany({
+    where: {
+      owner: owner
+    },
+    include: {
+      text_pair: {
+        select: {
+          id: true
+        }
+      }
+    }
+  });
+
+  return folders.map(folder => ({
+    ...folder,
+    total_pairs: folder.text_pair.length
+  }));
+}
+
+export async function createFolder(folder: folderCreateInput) {
+  await prisma.folder.create({
+    data: folder,
+  });
+}
+
+export async function deleteFolderById(id: number) {
+  await prisma.folder.delete({
+    where: {
+      id: id,
+    },
+  });
+}
+
+export async function updateFolderById(id: number, data: folderUpdateInput) {
+  await prisma.folder.update({
+    where: {
+      id: id,
+    },
+    data: data,
+  });
+}
+
+export async function getOwnerByFolderId(id: number) {
+  const folder = await prisma.folder.findUnique({
+    where: {
+      id: id,
+    },
+  });
+  return folder?.owner;
+}

src/lib/services/textPairService.ts

@@ -0,0 +1,51 @@
+"use server";
+
+import {
+  text_pairCreateInput,
+  text_pairUpdateInput,
+} from "../../../generated/prisma/models";
+import prisma from "../db";
+
+export async function createTextPair(data: text_pairCreateInput) {
+  await prisma.text_pair.create({
+    data: data,
+  });
+}
+
+export async function deleteTextPairById(id: number) {
+  await prisma.text_pair.delete({
+    where: {
+      id: id,
+    },
+  });
+}
+
+export async function updateTextPairById(
+  id: number,
+  data: text_pairUpdateInput,
+) {
+  await prisma.text_pair.update({
+    where: {
+      id: id,
+    },
+    data: data,
+  });
+}
+
+export async function getTextPairCountByFolderId(folderId: number) {
+  const count = await prisma.text_pair.count({
+    where: {
+      folder_id: folderId,
+    },
+  });
+  return count;
+}
+
+export async function getTextPairsByFolderId(folderId: number) {
+  const textPairs = await prisma.text_pair.findMany({
+    where: {
+      folder_id: folderId,
+    },
+  });
+  return textPairs;
+}

src/lib/utils.ts

@@ -124,3 +124,7 @@ export const letsFetch = (
     })
     .finally(onFinally);
 };
+
+export function isNonNegativeInteger(str: string): boolean {
+  return /^\d+$/.test(str);
+}