Modelgrader · KanonKC · Apr 13, 2025 · Apr 12, 2025 · Apr 13, 2025 · Apr 13, 2025
diff --git a/index.html b/index.html
@@ -1,13 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grader</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap"
+			rel="stylesheet"
+		/>
+		<title>Grader</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -101,6 +101,7 @@
     "styled-components": "^6.1.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
+    "use-debounce": "^10.0.4",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/src/components/Cards/ProblemCards/MyProblemMiniCard2.tsx b/src/components/Cards/ProblemCards/MyProblemMiniCard2.tsx
@@ -1,8 +1,8 @@
-import { FileSpreadsheet } from "lucide-react";
+import { FileSpreadsheet, Pencil, X } from "lucide-react";
 import { useState } from "react";
 import {
-	ProblemModel,
-	ProblemPopulateTestcases
+    ProblemModel,
+    ProblemPopulateTestcases,
 } from "../../../types/models/Problem.model";
 import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
 import MyProblemContextMenu from "../../ContextMenus/MyProblemContextMenu";
@@ -13,11 +13,15 @@ const MyProblemMiniCard2 = ({
 	disabled = false,
 	disabledHighlight = false,
 	onClick = () => {},
+	onClickPencilIcon,
+	onClickXIcon,
 }: {
 	problem: ProblemPopulateTestcases | ProblemModel;
 	disabled?: boolean;
 	disabledHighlight?: boolean;
 	onClick?: () => void;
+	onClickPencilIcon?: () => void;
+	onClickXIcon?: () => void;
 }) => {
 	const [highlightTitle, setHighlightTitle] = useState(false);
 
@@ -58,55 +62,34 @@ const MyProblemMiniCard2 = ({
 
 					// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
 				>
-					<div className="flex items-center font-medium text-base ">
+					<div className="flex items-center font-medium text-base justify-between">
 						<div className="flex items-center w-4/12">
 							<FileSpreadsheet
 								size={20}
 								className="text-blue-400 mr-2"
 							/>
-
-								<p className="font-mono line-clamp-1 w-5/6">
-									{problem.title}
-								</p>
-						</div>
-						{/* <div className="font-medium flex items-center w-1/12">
-							<Tally4 className="text-green-400 mr-2" size={20} />
-							<div>{problem.testcases.length}</div>
+
+							<p className="font-mono line-clamp-1 w-5/6">
+								{problem.title}
+							</p>
 						</div>
-						<div className="flex items-center w-3/12">
-							<CheckBadge
-								noIcon
-								checked={problem.solution !== ""}
-							>
-								SC
-							</CheckBadge>
-							<CheckBadge
-								className="mx-1"
-								noIcon
-								checked={problem.testcases.length > 0}
-							>
-								TC
-							</CheckBadge>
-							<CheckBadge
-								noIcon
-								checked={checkRuntimeStatus(problem.testcases)}
-							>
-								NRE
-							</CheckBadge>
+
+						<div className="flex gap-3">
+							{onClickPencilIcon && (
+								<Pencil
+									onClick={onClickPencilIcon}
+									className="text-neutral-600 hover:text-primary"
+									size={16}
+								/>
+							)}
+							{onClickXIcon && (
+								<X
+									onClick={onClickXIcon}
+									className="text-red-400 hover:text-red-700"
+									size={16}
+								/>
+							)}
 						</div>
-						<div className="font-medium">
-							{problem.allowed_languages
-								.split(",")
-								.map((lang, index) => {
-									if (index < 3) {
-										return ProgrammingLanguageOptions.find(
-											(option) => option.value === lang
-										)?.badge;
-									} else if (index === 3) {
-										return <span>...</span>;
-									}
-								})}
-						</div> */}
 					</div>
 				</Card>
 			</MyProblemContextMenu>

diff --git a/src/components/ContextMenus/MyProblemContextMenu.tsx b/src/components/ContextMenus/MyProblemContextMenu.tsx
@@ -36,7 +36,7 @@ const MyProblemContextMenu = ({
 			problem.problem_id
 		);
 
-		let createRequest = transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
+		const createRequest = transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
 			response.data
 		)
 

diff --git a/src/components/Dialogs/ProblemSubmissionSourceCodeAndRuntimeResultDialog.tsx b/src/components/Dialogs/ProblemSubmissionSourceCodeAndRuntimeResultDialog.tsx
@@ -10,11 +10,11 @@ import { Separator } from "../shadcn/Seperator";
 const ProblemSubmissionSourceCodeAndRuntimeResultDialog = ({
 	submission,
 	children,
-  problem
+	problem,
 }: {
 	submission: SubmissionPopulateSubmissionTestcaseAndAccountModel;
 	children?: React.ReactNode;
-  problem: ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel
+	problem: ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel;
 }) => {
 	const [sourceCode, setSourceCode] = React.useState<string>(
 		submission.submission_code
@@ -44,10 +44,13 @@ const ProblemSubmissionSourceCodeAndRuntimeResultDialog = ({
 					<div className="w-1/2">
 						<ScrollArea className=" h-[60vh] pr-5">
 							<TestcaseValidationAccordian
-								runtimeResults={submission.runtime_output.map((output,index) => ({
-                  ...output,
-                  input: problem.testcases[index]?.input
-                }))}
+								problem={problem}
+								runtimeResults={submission.runtime_output.map(
+									(output, index) => ({
+										...output,
+										input: problem.testcases[index]?.input,
+									})
+								)}
 							/>
 						</ScrollArea>
 					</div>

diff --git a/src/components/Dropdowns/MyProblemDropdown.tsx b/src/components/Dropdowns/MyProblemDropdown.tsx
@@ -3,21 +3,21 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ProblemService } from "../../services/Problem.service";
 import { transformCreateProblemRequestForm2CreateProblemRequest } from "../../types/adapters/CreateProblemRequestForm.adapter";
+import { transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm } from "../../types/adapters/Problem.adapter";
 import {
-	ProblemModel,
-	ProblemPopulateTestcases,
-	ProblemSecureModel,
+    ProblemModel,
+    ProblemPopulateTestcases,
+    ProblemSecureModel,
 } from "../../types/models/Problem.model";
 import DeleteProblemConfirmationDialog from "../Dialogs/DeleteProblemConfirmationDialog";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
 } from "../shadcn/DropdownMenu";
 import { toast } from "../shadcn/UseToast";
-import { transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm } from "../../types/adapters/Problem.adapter";
 
 const MyProblemDropdown = ({
 	children,
@@ -36,11 +36,12 @@ const MyProblemDropdown = ({
 			problem.problem_id
 		);
 
-		let createRequest = transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
-			response.data
-		)
+		const createRequest =
+			transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
+				response.data
+			);
 
-		createRequest.title += " (Copy)"
+		createRequest.title += " (Copy)";
 
 		const { request, groups } =
 			transformCreateProblemRequestForm2CreateProblemRequest(
@@ -60,7 +61,10 @@ const MyProblemDropdown = ({
 				toast({
 					title: `Cloned ${response.data.title}`,
 				});
-				window.open(`/my/problems/${response.data.problem_id}`, "_blank");
+				window.open(
+					`/my/problems/${response.data.problem_id}`,
+					"_blank"
+				);
 			});
 	};
 
@@ -88,9 +92,11 @@ const MyProblemDropdown = ({
 				</DropdownMenuItem>
 				<DropdownMenuItem
 					onClick={() =>
-						window.open(`/my/problems/${problem.problem_id}/edit`, "_blank")
+						window.open(
+							`/my/problems/${problem.problem_id}/edit`,
+							"_blank"
+						)
 					}
-
 				>
 					<PencilIcon className="mr-2" size={16} />
 					Edit Problem