refactor: replace custom context menu logic with shadcn/ui ContextMenu and ScrollArea components

app/form/admin/result/[id]/client.tsx

@@ -4,8 +4,17 @@ import React, { useState, useEffect, useRef } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { toast } from "sonner";
-import { Copy, Check, Users, Calendar, Clock, History } from "lucide-react";
+import { 
+  ContextMenu, 
+  ContextMenuTrigger, 
+  ContextMenuContent,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuItem,
+  ContextMenuGroup 
+} from "@/components/ui/context-menu";
+import { Copy, Check, Users, Calendar, Clock } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import Image from 'next/image';
 
 interface Question {
@@ -27,26 +36,12 @@ interface SubmissionDetailClientProps {
   answers: Record<string, string>;
 }
 
-interface ContextMenuState {
-  visible: boolean;
-  x: number;
-  y: number;
-  questionId: string | null;
-}
-
 export default function SubmissionDetailClient({
   submission,
   questions,
   answers,
 }: SubmissionDetailClientProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
-    visible: false,
-    x: 0,
-    y: 0,
-    questionId: null,
-  });
-  const menuRef = useRef<HTMLDivElement>(null);
 
   const handleCopy = (text: string, id: string) => {
     if (!text) return;
@@ -55,47 +50,13 @@ export default function SubmissionDetailClient({
     setTimeout(() => setCopiedId(null), 2000);
   };
 
-  const handleContextMenu = (e: React.MouseEvent, questionId: string) => {
-    e.preventDefault();
-    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, questionId });
-  };
-
-  const closeMenu = () => {
-    setContextMenu((prev) => ({ ...prev, visible: false, questionId: null }));
-  };
-
-  // Close menu on click outside or scroll
-  useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        closeMenu();
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("scroll", closeMenu, true);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("scroll", closeMenu, true);
-    };
-  }, []);
-
   const userLabel = submission.userName
     ? `${submission.userName} (${submission.userDiscordId || "N/A"})`
     : submission.userDiscordId || "Anonymous";
 
   const editHistory = Array.isArray(submission.editHistory) ? submission.editHistory : [];
 
-  // Build context menu data for the right-clicked question
-  const ctxQuestion = questions.find((q) => q.id === contextMenu.questionId);
-  const ctxAnswerHistory: { editedAt: string; answer: string }[] = [];
-  if (contextMenu.questionId) {
-    for (const edit of editHistory) {
-      ctxAnswerHistory.push({
-        editedAt: edit.editedAt,
-        answer: edit.oldAnswers[contextMenu.questionId] ?? "",
-      });
-    }
-  }
+
 
   return (
     <div className="space-y-6">
@@ -138,12 +99,17 @@ export default function SubmissionDetailClient({
             (edit) => (edit.oldAnswers[q.id] ?? "") !== ansValue
           );
 
+          const qAnswerHistory = editHistory.map((edit) => ({
+            editedAt: edit.editedAt,
+            answer: edit.oldAnswers[q.id] ?? "",
+          }));
+
           return (
-            <Card
-              key={q.id}
-              onContextMenu={(e) => handleContextMenu(e, q.id)}
-              className={wasEdited ? "cursor-context-menu" : ""}
-            >
+            <ContextMenu key={q.id}>
+              <ContextMenuTrigger asChild>
+                <Card
+                  className={wasEdited ? "cursor-context-menu" : ""}
+                >
               <CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 gap-4">
                 <div className="space-y-1">
                   <Label className="text-base font-semibold leading-normal">
@@ -200,82 +166,53 @@ export default function SubmissionDetailClient({
                 )}
               </CardContent>
             </Card>
+              </ContextMenuTrigger>
+              {wasEdited && (
+                <ContextMenuContent className="w-72 max-w-sm">
+                  <ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    History
+                  </ContextMenuLabel>
+                  <ContextMenuLabel className="text-sm font-medium text-foreground truncate pb-2">
+                    {q.label}
+                  </ContextMenuLabel>
+
+                  <ContextMenuSeparator />
+                  <ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mt-1">
+                    Previous Answers:
+                  </ContextMenuLabel>
+                  
+                  {qAnswerHistory.length === 0 ? (
+                    <ContextMenuItem disabled className="text-xs text-muted-foreground italic">
+                      No edit history for this question.
+                    </ContextMenuItem>
+                  ) : (
+                    <ScrollArea className="h-72">
+                      <ContextMenuGroup>
+                        {qAnswerHistory.map((entry, idx) => (
+                          <ContextMenuItem 
+                            key={idx} 
+                            className="flex flex-col items-start gap-1 p-2 focus:bg-transparent cursor-default"
+                          >
+                            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                              <Clock className="w-3 h-3 shrink-0" />
+                              <span>{new Date(entry.editedAt).toLocaleString()}</span>
+                            </div>
+                            <span className="text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed">
+                              {entry.answer || <span className="italic text-muted-foreground">No response</span>}
+                            </span>
+                          </ContextMenuItem>
+                        ))}
+                      </ContextMenuGroup>
+                    </ScrollArea>
+                  )}
+                </ContextMenuContent>
+              )}
+            </ContextMenu>
           );
         })}
       </div>
 
-      {/* Context Menu */}
-      {contextMenu.visible && ctxQuestion && (
-        <div
-          ref={menuRef}
-          className="fixed z-50 min-w-72 max-w-sm bg-popover border border-border rounded-lg shadow-xl overflow-hidden"
-          style={{ top: contextMenu.y, left: contextMenu.x }}
-        >
-          {/* Header */}
-          <div className="px-4 py-3 border-b border-border bg-muted/50">
-            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              History
-            </p>
-            <p className="text-sm font-medium text-foreground truncate mt-0.5">
-              {ctxQuestion.label}
-            </p>
-          </div>
 
-          {/* Edit History timestamps */}
-          {editHistory.length > 0 && (
-            <div className="px-4 py-2 border-b border-border">
-              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                Edit History:
-              </p>
-              <ul className="space-y-1">
-                {editHistory.map((edit, idx) => (
-                  <li key={idx} className="flex items-center gap-2 text-xs text-muted-foreground">
-                    <Clock className="w-3 h-3 shrink-0" />
-                    {new Date(edit.editedAt).toLocaleString()}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* All Previous Answers */}
-          <div className="px-4 py-3 max-h-72 overflow-y-auto">
-            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              Previous Answers:
-            </p>
-            {ctxAnswerHistory.length === 0 ? (
-              <p className="text-xs text-muted-foreground italic">No edit history for this question.</p>
-            ) : (
-              <div className="space-y-3">
-                {ctxAnswerHistory.map((entry, idx) => (
-                  <div
-                    key={idx}
-                    className="rounded-md border border-dashed border-muted-foreground/30 p-2 bg-muted/40"
-                  >
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
-                      <Clock className="w-3 h-3 shrink-0" />
-                      <span>{new Date(entry.editedAt).toLocaleString()}</span>
-                    </div>
-                    <span className="text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed">
-                      {entry.answer || <span className="italic text-muted-foreground">No response</span>}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="px-4 py-2 border-t border-border bg-muted/30">
-            <button
-              className="w-full text-xs text-muted-foreground hover:text-foreground transition-colors py-0.5"
-              onClick={closeMenu}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }