...

.env.example

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

.gitignore

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

package.json

@@ -10,13 +10,13 @@
     "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.5.1",
+    "next-intl": "^4.5.2",
-    "pg": "^8.16.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "unstorage": "^1.17.2",
@@ -27,11 +27,11 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "^20.19.25",
-    "@types/pg": "^8.15.6",
+    "@types/react": "^19.2.4",
-    "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.1",
     "eslint-config-next": "15.5.3",
+    "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[]
+}

src/app/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/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/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,24 +1,18 @@
 "use client";
 
 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,
+  getFoldersByOwner,
-} from "@/lib/controllers/FolderController";
+} from "@/lib/services/folderService";
-import { useEffect, useState } from "react";
-import InFolder from "./[folder_id]/InFolder";
-import { Center } from "@/components/Center";
-import { useRouter } from "next/navigation";
-
-interface Folder {
-  id: number;
-  name: string;
-  text_pairs_count: number;
-}
 
 interface FolderProps {
-  folder: Folder;
+  folder: folder;
   deleteCallback: () => void;
   openCallback: () => void;
 }
@@ -36,9 +30,7 @@ const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
 
         <div className="flex-1">
           <h3 className="font-medium text-gray-900">{folder.name}</h3>
-          <p className="text-sm text-gray-500">
+          {/*<p className="text-sm text-gray-500">{} items</p>*/}
-            {folder.text_pairs_count} items
-          </p>
         </div>
 
         <div className="text-xs text-gray-400">#{folder.id}</div>
@@ -61,88 +53,84 @@ const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
 };
 
 export default function FoldersClient({ username }: { username: string }) {
-  const [folders, setFolders] = useState<Folder[]>([]);
+  const [folders, setFolders] = useState<folder[]>([]);
-  const [folderId, setFolderId] = useState<number>(0);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
-    getFoldersWithTextPairsCountByOwner(username).then((folders) => {
+    getFoldersByOwner(username).then((folders) => {
-      setFolders(folders as Folder[]);
+      setFolders(folders);
     });
   }, [username]);
 
   const updateFolders = async () => {
     setLoading(true);
     try {
-      const updatedFolders =
+      const updatedFolders = await getFoldersByOwner(username);
-        await getFoldersWithTextPairsCountByOwner(username);
+      setFolders(updatedFolders);
-      setFolders(updatedFolders as Folder[]);
     } finally {
       setLoading(false);
     }
   };
-    return (
+  return (
-      <Center>
+    <Center>
-        <div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
+      <div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
-          <div className="mb-6">
+        <div className="mb-6">
-            <h1 className="text-2xl font-light text-gray-900">Folders</h1>
+          <h1 className="text-2xl font-light text-gray-900">Folders</h1>
-            <p className="text-sm text-gray-500 mt-1">
+          <p className="text-sm text-gray-500 mt-1">Manage your collections</p>
-              Manage your collections
-            </p>
-          </div>
-
-          <button
-            onClick={async () => {
-              const folderName = prompt("Enter folder name:");
-              if (!folderName) return;
-              setLoading(true);
-              try {
-                await createFolder(folderName, username);
-                await updateFolders();
-              } 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">
-            {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={() => {
-                      setFolderId(folder.id);
-                      router.push(`/folders/${folder.id}`);
-                    }}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
         </div>
-      </Center>
+
-    );
+        <button
+          onClick={async () => {
+            const folderName = prompt("Enter folder name:");
+            if (!folderName) return;
+            setLoading(true);
+            try {
+              await createFolder({
+                name: folderName,
+                owner: username,
+              });
+              await updateFolders();
+            } 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/[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

@@ -1,36 +1,22 @@
 "use client";
 
-import { ArrowLeft, Plus, Volume2, Edit, Trash2 } from "lucide-react";
+import { ArrowLeft, Edit, Plus, Trash2, X } from "lucide-react";
 import { Center } from "@/components/Center";
-import { createTextPair, getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
 import { useEffect, useState } from "react";
 import { 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";
 
-interface AddTextPairModalProps {
+export interface TextPair {
-  isOpen: boolean;
-  onClose: () => void;
-  onAdd: (textPair: TextPair) => void;
-}
-
-const AddTextPairModal = ({
-  isOpen,
-  onClose,
-  onAdd,
-}: AddTextPairModalProps) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
-        <h2 className="text-xl font-light mb-4">Add New Vocabulary</h2>
-        {/* 表单内容 */}
-      </div>
-    </div>
-  );
-};
-
-interface TextPair {
   id: number;
   text1: string;
   text2: string;
@@ -38,58 +24,10 @@ interface TextPair {
   locale2: string;
 }
 
-interface TextPairCardProps {
-  textPair: TextPair;
-}
-
-const TextPairCard = ({ textPair }: TextPairCardProps) => {
-  return (
-    <div className="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 hover:opacity-100 transition-opacity">
-            <button className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-md transition-colors">
-              <Volume2 size={14} />
-            </button>
-            <button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors">
-              <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} />
-            </button>
-          </div>
-        </div>
-
-        <div className="space-y-3">
-          <div>
-            <div className="text-sm text-gray-500 mb-1">{textPair.locale1}</div>
-            <div className="text-gray-900">{textPair.text1}</div>
-          </div>
-
-          <div>
-            <div className="text-sm text-gray-500 mb-1">{textPair.locale2}</div>
-            <div className="text-gray-900">{textPair.text2}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export default function InFolder({ folderId }: { folderId: number }) {
   const [textPairs, setTextPairs] = useState<TextPair[]>([]);
   const [loading, setLoading] = useState(true);
-  const [open, setOpen] = useState(false);
+  const [openAddModal, setAddModal] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -104,10 +42,21 @@ export default function InFolder({ folderId }: { folderId: number }) {
         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">
@@ -122,7 +71,7 @@ export default function InFolder({ folderId }: { folderId: number }) {
 
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-2xl font-light text-gray-900">Vocabulary</h1>
+              <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>
@@ -131,42 +80,64 @@ export default function InFolder({ folderId }: { folderId: number }) {
             <button
               className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
               onClick={() => {
-                setOpen(true);
+                setAddModal(true);
               }}
             >
-              <Plus size={18} className="text-gray-600" />
+              <Plus size={18} className="text-gray-600 hover:cursor-pointer" />
             </button>
           </div>
         </div>
 
-        <div className="rounded-xl border border-gray-200 overflow-hidden">
+        <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 vocabulary...</p>
+              <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 vocabulary items</p>
+              <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} />
+                <TextPairCard
+                  key={textPair.id}
+                  textPair={textPair}
+                  onDel={() => {
+                    deleteTextPairById(textPair.id);
+                    refreshTextPairs();
+                  }}
+                  refreshTextPairs={refreshTextPairs}
+                />
               ))}
             </div>
           )}
         </div>
       </Container>
       <AddTextPairModal
-        isOpen={open}
+        isOpen={openAddModal}
-        onClose={function (): void {
+        onClose={() => setAddModal(false)}
-          throw new Error("Function not implemented.");
+        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();
         }}
-        onAdd={function (textPair: TextPair): void {
+      />
-          throw new Error("Function not implemented.");
-        }}
-      ></AddTextPairModal>
     </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

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

src/app/memorize/Choose.tsx

@@ -3,7 +3,7 @@ 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 { WordData } from "@/lib/interfaces";
 
 import { useTranslations } from "next-intl";
 

src/app/memorize/Edit.tsx

@@ -3,7 +3,7 @@ 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 { WordData } from "@/lib/interfaces";
 import Choose from "./Choose";
 
 import { useTranslations } from "next-intl";

src/app/memorize/Main.tsx

@@ -1,7 +1,7 @@
 import LightButton from "@/components/buttons/LightButton";
 import ACard from "@/components/cards/ACard";
 import BCard from "@/components/cards/BCard";
-import { WordData, WordDataSchema } from "@/interfaces";
+import { WordData, WordDataSchema } from "@/lib/interfaces";
 import { Dispatch, SetStateAction } from "react";
 import useFileUpload from "@/hooks/useFileUpload";
 import { useTranslations } from "next-intl";

src/app/memorize/Start.tsx

@@ -1,8 +1,8 @@
 import LightButton from "@/components/buttons/LightButton";
-import { WordData } from "@/interfaces";
+import { WordData } from "@/lib/interfaces";
 import { Dispatch, SetStateAction, useState } from "react";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { getTTSAudioUrl } from "@/utils";
+import { getTTSAudioUrl } from "@/lib/utils";
 import { VOICES } from "@/config/locales";
 
 import { useTranslations } from "next-intl";

src/app/memorize/page.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import Main from "./Main";
 import Edit from "./Edit";
 import Start from "./Start";
-import { WordData, WordDataSchema } from "@/interfaces";
+import { WordData, WordDataSchema } from "@/lib/interfaces";
 
 const getLocalWordData = (): WordData => {
   const data = localStorage.getItem("wordData");

src/app/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/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<
+  const { get: getFromLocalStorage, set: setIntoLocalStorage } =
-    typeof TextSpeakerArraySchema
+    getLocalStorageOperator<typeof TextSpeakerArraySchema>(
-  >("text-speaker", TextSpeakerArraySchema);
+      "text-speaker",
+      TextSpeakerArraySchema,
+    );
   const [data, setData] = useState(getFromLocalStorage());
   const handleDel = (item: z.infer<typeof TextSpeakerItemSchema>) => {
     const current_data = getFromLocalStorage();

src/app/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 { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/lib/interfaces";
-import { getLocalStorageOperator, getTTSAudioUrl } from "@/utils";
+import { getLocalStorageOperator, getTTSAudioUrl } from "@/lib/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import z from "zod";
 import SaveList from "./SaveList";

src/app/translator/page.tsx

@@ -5,10 +5,10 @@ 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";

src/app/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/word-board/page.tsx

@@ -2,14 +2,14 @@
 import TheBoard from "@/app/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/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/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/lib/actions.ts

@@ -1,23 +0,0 @@
-"use server";
-
-import { createTextPair } from "./controllers/TextPairController";
-
-async function createTextPairAction(formData: FormData) {
-  'use server';
-  const textPair = {
-    text1: formData.get('text1') as string,
-    text2: formData.get('text2') as string,
-    locale1: formData.get('locale1') as string,
-    locale2: formData.get('locale2') as string,
-    folderId: parseInt(formData.get('folderId') as string)
-  }
-  if(textPair.text1 && textPair.text2 && textPair.locale1 && textPair.locale2 && textPair.folderId){
-    await createTextPair(
-      textPair.locale1,
-      textPair.locale2,
-      textPair.text1,
-      textPair.text2,
-      textPair.folderId
-    );
-  }
-}

src/lib/controllers/FolderController.ts

@@ -1,61 +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 getOwnerByFolderId(id: number) {
-  try {
-    const owner = await pool.query("SELECT owner FROM folders WHERE id = $1", [
-      id,
-    ]);
-    return owner.rows[0].owner;
-  } 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,24 +1,4 @@
-import { Pool } from "pg";
+import { PrismaClient } from "../../generated/prisma/client";
-import z from "zod";
 
-export const pool = new Pool({
+const prisma = new PrismaClient();
-  user: "postgres",
+export default prisma;
-  host: "localhost",
-  max: 20,
-  idleTimeoutMillis: 3000,
-  connectionTimeoutMillis: 2000,
-  maxLifetimeSeconds: 60,
-});
-
-export const TextPairSchema = z.object({
-  id: z.number().int().positive(),
-  text1: z.string().min(1).max(100),
-  text2: z.string().min(1).max(100),
-  locale1: z.string().min(2).max(10),
-  locale2: z.string().min(2).max(10),
-  owner: z.string().min(1).max(40),
-  createdAt: z.date().default(() => new Date()),
-  updatedAt: z.date().default(() => new Date()),
-});
-
-export const 

src/lib/localStorageOperators.ts

@@ -1,17 +1,19 @@
-import { TranslationHistoryArraySchema, TranslationHistorySchema } from "@/interfaces";
+import {
-import { getLocalStorageOperator } from "@/utils";
+  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>(
+export const tlso = getLocalStorageOperator<
-  "translator",
+  typeof TranslationHistoryArraySchema
-  TranslationHistoryArraySchema,
+>("translator", TranslationHistoryArraySchema);
-);
 export const tlsoPush = (item: z.infer<typeof TranslationHistorySchema>) => {
   tlso.set(
     [...tlso.get(), item as z.infer<typeof TranslationHistorySchema>].slice(
       -MAX_HISTORY_LENGTH,
     ),
   );
-};
+};

src/lib/services/folderService.ts

@@ -0,0 +1,45 @@
+"use server";
+
+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 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;
+}