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) {
+          const wasEdited = editHistory.some(
-            // Find the most recent edit where the answer was different
+            (edit) => (edit.oldAnswers[q.id] ?? "") !== ansValue
-            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;
-              }
-            }
-          }
 
           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">
+                    <p className="text-xs text-muted-foreground italic flex items-center gap-1">
-                      This section has been edited (last edit: {lastEditedTime})
+                      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>
   );
 }

components/delete-form-button.tsx

@@ -39,7 +39,7 @@ export default function DeleteFormButton({ formId }: DeleteFormButtonProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:bg-destructive/10">
+        <Button variant="ghost" size="icon">
           <Trash2 className="w-4 h-4" />
         </Button>
       </DialogTrigger>
@@ -50,7 +50,7 @@ export default function DeleteFormButton({ formId }: DeleteFormButtonProps) {
             This action cannot be undone. This will permanently delete the form, all of its questions, and all submissions/answers.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter>
           <Button variant="ghost" disabled={deleting} onClick={() => setOpen(false)}>
             Cancel
           </Button>

components/ui/context-menu.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-2xl border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}