From 2a4d741a76438ea0050a3d4b4a83baa67159ff87 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 14 Apr 2025 10:26:57 +0800
Subject: [PATCH] feat(submissions): show language label alongside icon in
 submissions table

---
 src/components/submissions-table.tsx | 30 +++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/submissions-table.tsx b/src/components/submissions-table.tsx
index 958b8a5..66dae5b 100644
--- a/src/components/submissions-table.tsx
+++ b/src/components/submissions-table.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import { Submission } from "@/generated/client";
+import { useProblem } from "@/hooks/use-problem";
 import { Clock4Icon, CpuIcon } from "lucide-react";
 import { getStatusColorClass } from "@/lib/status";
 import { useDockviewStore } from "@/stores/dockview";
@@ -21,7 +22,9 @@ interface SubmissionsTableProps {
 }
 
 export default function SubmissionsTable({ submissions }: SubmissionsTableProps) {
+  const { editorLanguageConfigs } = useProblem();
   const { api, setSubmission } = useDockviewStore();
+
   const sortedSubmissions = [...submissions].sort(
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
   );
@@ -29,6 +32,7 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
   const handleRowClick = (submission: Submission) => {
     if (!api) return;
     setSubmission(submission);
+
     const panel = api.getPanel("Details");
     if (panel) {
       panel.api.setActive();
@@ -44,7 +48,7 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
         },
       });
     }
-  }
+  };
 
   return (
     <Table>
@@ -67,18 +71,17 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
           const submittedDisplay = isBefore(createdAt, subDays(new Date(), 1))
             ? format(createdAt, "yyyy-MM-dd")
             : formatDistanceToNow(createdAt, { addSuffix: true });
+
           const isEven = (submissions.length - index) % 2 === 0;
 
           return (
             <TableRow
               key={submission.id}
               onClick={() => handleRowClick(submission)}
-              className={
-                cn(
-                  "border-b-0 hover:text-blue-500 hover:bg-muted hover:cursor-pointer",
-                  isEven ? "" : "bg-muted/50"
-                )
-              }
+              className={cn(
+                "border-b-0 hover:text-blue-500 hover:bg-muted hover:cursor-pointer",
+                isEven ? "" : "bg-muted/50"
+              )}
             >
               <TableCell className="font-medium">
                 {sortedSubmissions.length - index}
@@ -92,7 +95,16 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
                 </div>
               </TableCell>
               <TableCell>
-                <Icon size={16} aria-hidden="true" />
+                <div className="flex items-center gap-2">
+                  <Icon size={16} aria-hidden="true" />
+                  <span className="truncate text-sm font-semibold mr-2">
+                    {
+                      editorLanguageConfigs.find(
+                        (config) => config.language === submission.language
+                      )?.label
+                    }
+                  </span>
+                </div>
               </TableCell>
               <TableCell>
                 <div className="flex items-center gap-1.5">
@@ -118,6 +130,6 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
           );
         })}
       </TableBody>
-    </Table >
+    </Table>
   );
 }