feat: implement interactive context menu for viewing edit history in submission details and upgrade to next/image

app/form/admin/client.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/app/actions/questions";
 import { uploadImage } from "@/app/actions/upload";
 import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Save, Image as ImageIcon, X } from "lucide-react";
+import Image from 'next/image';
 
 interface Question {
   id: string;
@@ -297,7 +298,8 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
               <div className="space-y-2">
                 {q.imageUrl ? (
                   <div className="relative inline-block border rounded-md p-1 bg-muted">
-                    <img
+                    <Image
+                      fill
                       src={q.imageUrl}
                       alt={q.label}
                       className="max-h-40 rounded object-contain"

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

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+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 } from "lucide-react";
+import { Copy, Check, Users, Calendar, Clock, History } from "lucide-react";
+import Image from 'next/image';
 
 interface Question {
   id: string;
@@ -26,12 +27,26 @@ 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;
@@ -41,12 +56,48 @@ 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">
       {/* Submission Metadata Card */}
@@ -83,41 +134,32 @@ export default function SubmissionDetailClient({
       <div className="space-y-4">
         {questions.map((q) => {
           const ansValue = answers[q.id] || "";
-          
-          // Check if this specific question was edited by comparing current answer with old ones
-          let wasEdited = false;
-          let oldAnswerForQ = "";
-          let lastEditedTime = "";
 
-          if (editHistory.length > 0) {
-            // Find the most recent edit where the answer was different
-            for (let i = editHistory.length - 1; i >= 0; i--) {
-              const oldAns = editHistory[i].oldAnswers[q.id] || "";
-              if (oldAns !== ansValue) {
-                wasEdited = true;
-                oldAnswerForQ = oldAns;
-                lastEditedTime = new Date(editHistory[i].editedAt).toLocaleString();
-                break;
-              }
-            }
-          }
+          const wasEdited = editHistory.some(
+            (edit) => (edit.oldAnswers[q.id] ?? "") !== ansValue
+          );
 
           return (
-            <Card key={q.id}>
+            <Card
+              key={q.id}
+              onContextMenu={(e) => handleContextMenu(e, q.id)}
+              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">
                     {q.label}
                   </Label>
                   {wasEdited && (
-                    <p className="text-xs text-muted-foreground italic">
-                      This section has been edited (last edit: {lastEditedTime})
+                    <p className="text-xs text-muted-foreground italic flex items-center gap-1">
+                      edited
                     </p>
                   )}
                 </div>
                 {q.imageUrl && (
                   <div className="relative max-w-full h-auto max-h-60 overflow-hidden rounded-md border inline-block shrink-0">
-                    <img
+                    <Image
+                      fill
                       src={q.imageUrl}
                       alt={q.label}
                       className="object-contain max-h-24 w-auto"
@@ -126,11 +168,14 @@ export default function SubmissionDetailClient({
                 )}
               </CardHeader>
               <CardContent className="space-y-4">
-                {/* Current Answer */}
                 {ansValue ? (
                   <div className="flex items-start justify-between gap-4 p-3 bg-muted rounded-md group">
                     <div className="flex flex-col">
-                      {wasEdited && <span className="text-xs font-semibold text-muted-foreground mb-1">Current Answer:</span>}
+                      {wasEdited && (
+                        <span className="text-xs font-semibold text-muted-foreground mb-1">
+                          Current Answer:
+                        </span>
+                      )}
                       <span className="text-sm whitespace-pre-wrap leading-relaxed">
                         {ansValue}
                       </span>
@@ -153,23 +198,84 @@ export default function SubmissionDetailClient({
                     No response provided
                   </span>
                 )}
-
-                {/* Previous Answer if edited */}
-                {wasEdited && (
-                  <div className="flex items-start justify-between gap-4 p-3 bg-muted/50 rounded-md border border-dashed border-muted-foreground/30">
-                    <div className="flex flex-col">
-                      <span className="text-xs font-semibold text-muted-foreground mb-1">Previous Answer:</span>
-                      <span className="text-sm whitespace-pre-wrap leading-relaxed text-muted-foreground opacity-80">
-                        {oldAnswerForQ || <span className="italic">No previous response</span>}
-                      </span>
-                    </div>
-                  </div>
-                )}
               </CardContent>
             </Card>
           );
         })}
       </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>
   );
 }