PEER-219: Add Attempt Details UI final touches

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/package.json

@@ -48,6 +48,7 @@
     "react-katex": "^3.0.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.2",
+    "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
@@ -68,6 +69,7 @@
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/ws": "^8.5.12",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",

frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx

@@ -0,0 +1,58 @@
+import { Check, Copy } from 'lucide-react';
+import { FC, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import { Button } from '@/components/ui/button';
+
+type ICodeProps = {
+  code: string;
+  language: string;
+};
+
+const defaultCopyCodeText = 'Copy Code';
+
+export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
+  const [copyCodeText, setCopyCodeText] = useState('Copy Code');
+
+  const onCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopyCodeText('Copied!');
+    setTimeout(() => {
+      setCopyCodeText(defaultCopyCodeText);
+    }, 3000);
+  };
+
+  return (
+    <div className='flex size-full flex-col overflow-y-auto rounded-md'>
+      <div className='bg-muted-foreground text-muted dark:bg-muted dark:text-muted-foreground flex w-full items-center justify-between px-3 py-2'>
+        <span className='text-sm font-medium'>{language}</span>
+        <Button
+          variant='secondary'
+          size='sm'
+          onClick={onCopy}
+          className='border-border dark:text-muted-foreground text-muted hover:text-primary dark:hover:bg-primary/10 group flex items-center gap-2 bg-inherit disabled:cursor-not-allowed'
+        >
+          <span>{copyCodeText}</span>
+          {copyCodeText === defaultCopyCodeText ? (
+            <Copy className='size-3' />
+          ) : (
+            <Check className='size-3 text-green-400 group-hover:text-green-700' />
+          )}
+        </Button>
+      </div>
+      <SyntaxHighlighter
+        customStyle={{
+          borderRadius: '0 0 0.3em 0.3em',
+          margin: 0,
+          minHeight: '100px',
+        }}
+        PreTag='div'
+        style={oneDark}
+        language={language}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+};

frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx

@@ -11,6 +11,8 @@ import {
 } from '@/components/ui/dialog';
 import { IQuestionAttempt } from '@/types/question-types';
 
+import { CodeViewer } from './code-viewer';
+
 type AttemptDetailsPaneProps = {
   triggerText: string;
 } & IQuestionAttempt;
@@ -29,14 +31,18 @@ export const AttemptDetailsDialog: FC<PropsWithChildren<AttemptDetailsPaneProps>
       ) : (
         <DialogTrigger>{triggerText}</DialogTrigger>
       )}
-      <DialogContent>
+      <DialogContent className='border-border text-primary'>
         <DialogHeader>
-          <DialogTitle>
+          <DialogTitle className=''>
             Attempt&nbsp;<span className='font-mono'>{attemptId}</span>
           </DialogTitle>
         </DialogHeader>
-        <DialogDescription />
-        <DialogFooter />
+        <DialogDescription>
+          <CodeViewer {...{ code, language }} />
+        </DialogDescription>
+        <DialogFooter>
+          <span className='font-base text-sm'>Attempted at: {triggerText}</span>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

frontend/src/components/blocks/interview/question-attempts/table.tsx

@@ -74,9 +74,9 @@ export function QuestionAttemptsTable<TValue>({
 
   return (
     <div className='relative flex max-h-full w-full grow flex-col'>
-      <div className='flex items-center py-4'>
+      <div className='flex items-center pb-4 pt-2'>
         <div className='flex flex-col gap-1'>
-          <label className='text-sm font-medium'>Filter by Language</label>
+          <label className='ml-0.5 text-sm font-medium'>Filter by Language</label>
           <ComboboxMulti
             setValuesCallback={setLanguages}
             options={Array.from(new Set(data.map((v) => v.language))).map((v) => ({
@@ -116,7 +116,7 @@ export function QuestionAttemptsTable<TValue>({
           </TableHeader>
         </Table>
       </div>
-      <ScrollArea className='size-full overflow-x-auto border-x'>
+      <ScrollArea className='border-border size-full overflow-x-auto border-x'>
         <Table>
           <TableBody>
             {!isError && table.getRowModel().rows?.length ? (
@@ -139,9 +139,9 @@ export function QuestionAttemptsTable<TValue>({
           </TableBody>
         </Table>
       </ScrollArea>
-      <div className='sticky bottom-0 rounded-b-md border'>
+      <div className='border-border sticky bottom-0 rounded-b-md border'>
         <Table>
-          <TableFooter>
+          <TableFooter className='border-t-border'>
             <TableRow>
               <TableCell colSpan={columns.length}>
                 <Pagination className='flex items-center justify-end space-x-2 p-2'>

frontend/src/components/ui/combobox.tsx

@@ -54,10 +54,14 @@ export const ComboboxMulti = React.forwardRef<
           <ChevronsUpDown className='ml-2 size-4 shrink-0 opacity-50' />
         </Button>
       </PopoverTrigger>
-      <PopoverContent ref={ref} className={cn('w-[200px] p-0', className)} {...props}>
+      <PopoverContent
+        ref={ref}
+        className={cn('w-[200px] p-0 border-secondary-foreground/40', className)}
+        {...props}
+      >
         <Command>
           <CommandInput placeholder={placeholderText} />
-          <CommandList>
+          <CommandList className=''>
             <CommandEmpty>{noOptionsText}</CommandEmpty>
             <CommandGroup>
               {options.map((option) => (

frontend/src/components/ui/command.tsx

@@ -39,7 +39,10 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
+  <div
+    className='border-secondary-foreground/40 flex items-center border-b px-3'
+    cmdk-input-wrapper=''
+  >
     <MagnifyingGlassIcon className='mr-2 size-4 shrink-0 opacity-50' />
     <CommandPrimitive.Input
       ref={ref}